Can anyone suggest good Guidelines for asp .net UI design ?

Question

Hi ,

I am a c# developer.

Recently I had to design a web UI in asp .net 2.0 .I had strange problems with aligning controls in Visual studio UI. I have used Div, table tags to align asp .net controls(labels, textbox, grid etc).

But the problem was what I saw in design surface of visual studio was entirely different (most of the time) when I view the page in browser.

The gap between controls and alignments was never perfect .I have seen other developers also doing trial and error methods without a proper guidelines.

C# coding I am pretty good and I have lots of Microsoft articles and help materials to guide me.

But I haven’t found proper articles and guidelines for UI design of asp .net pages.(may be its out there and i havent found yet?)

Can anyone through more light on this subject. Any good books ,suggestions etc?

Thanks in advance

SNC

Answer 1

It's not the UI design per se. What you need is solid understanding of how CSS and generally styles work on the web (in short: they do poorly). So what you need is a good CSS book. Plus, you'll have to dump WYSIWYG ASP.NET page editor.

Answer 2

If you want granular control over your HTML/XHTML output then I would recommend switching to ASP.NET MVC. The problems you've described are those typically encountered when using ASP.NET WebForms. As Anton mentions, you do need to gain a good understanding of XHTML and CSS as well.

Answer 3

I'm curious if you feel your HTML skills are on par. Could you create this same page in HTML without visual studio and get the results you expect (using notepad)?

Regardless, start spending more time in the HTML markup and less time using the designer surface in Visual Studio. The more you understand the output that ASP.NET creates the better a web developer you will become.

A trick I use quite often is knowing that you don't need to recompile to change aspx code. Make your changes to the aspx file, save, and then refresh your browser. Also, use firefox and get the webdeveloper plugin. I use the outline block level elements quite often to understand where some of my html flow problems are occurring.

Read up on Web Design. I'm a bit behind but I've always loved zengarden and zeldman.. I'm sure there's better out there now.

Answer 4

While I definitly +1 everyone suggesting that you get a better grasp of CSS and positioning in general and ditch the drag and drop method of building your controls, I figure you need something sooner rather than later.

For that, I give you Yahoo!'s CSS Grids (JQuery, MooTools and other libraries also have grid layout tools) which will help you to get your UI done quickly. In the mean time read up on CSS.

(X)HTML is compositional - not unlike XAML (which is actually modeled on HTML/CSS). When building WinForms you can drag and drop your controls onto the window willy-nilly, but not so with the web. One thing the drag and drop designer misses is that (X)HTML components have a hierarchy to them. The designer tries to overcome this by using position: absolute; which is a precarious crutch.

Your controls need to be composed with their positional relationships more or less intact already and that means you'll have to edit the code by hand to put things in the proper order.