Proper User Interface Design with ASP.Net

Question

I am designing the user interface of a web application but I am inexperienced with UI Design, I just drag and drop labels and textboxes, but they look not symetric and properly arranged on the page. In a windows application, user interface design is easier since the visual stuido helps you with location of controls, but I don't know how to do that in a web application. Is the only solution entering the html and using lots of space characters for the page to look well organised ? This just makes me feel like an amateur.

Answer 1

Web apps are styled using CSS (Cascading Style Sheets). CSS is used for every aspect of UI in web apps. This is not limited to just ASP.NET, but to web development in general.

ASP.NET, and Visual Studio (or other IDEs) may allow you a familiar drag-and-drop interface for creating the UI, but under the hood, ASP.NET and these tools simply generate css for styling.

For example, in Visual Studio 2010, you can select "Change positioning to absolute for controls added using Tooldbox, paste, or drag and drop." in the HTML Designer Options

You can use these tool to drag and drop elements if you like, but I strongly recommend against even starting down that road for several reasons:

• Unless you understand css, you will struggle with otherwise simple positioning and styling issues. The drag/drop tools and properties exposed are often not sufficient.
• Web design is vastly different thatn WinForms design. You need to deal with many more screen resolutions, and browser resizes, which need to be fluid. Absolute positioning is horrible for this.
• Once you learn the wrong way, it's very hard to change your ways. It's better to learn the "right way" up front.

There's a relatively simple CSS tutorial here.

I'm sorry there isn't a quick and easy answer,but if you're going to do web development at all, you need to learn to use css properly, and there's quite a bit to learn. Hopefully this tutorial will be a gentle introduction.

If you don't like that one, try this Bing search.