Good Web Design Practices for ASP.NET Developers

Rich Reuter — Thu, 09 Oct 2008 23:15:19 GMT

This is something that's been floating around in my head for a while, so I thought I'd write about it. Too often, I've seen a lot of good programmers indulging in really bad web design practices. In this context, I'm mostly talking about how the HTML, CSS, and JavaScript are structured and implemented. Not so much designing the look and feel, but how that look and feel are implemented.

I find that it's particularly bad in the realm of ASP.NET developers (a group of which I am a member), and part of the blame lies with Microsoft. They tried to make web development just like Windows application development and provide the same control-based drag and drop UI experience. It doesn't work generally too well, but that doesn't stop some developers I've seen from crying foul when they can't use the designer. I certainly understand why - it's easy to use and generally works ok. But what the controls generally output isn't optimal HTML. The designer generally output isn't very clean or valid HTML. Good, cross-browser compatible CSS and HTML generally requires manual intervention.

So here's a few things that I that I find useful to keep in mind when working on HTML and CSS.

Don't open the designer

I know that designers are easy to use. I know that if you are doing Win Forms/WPF, it's the way to go. But it's different for the web. Different browsers render out different things and Microsoft has always been primarily concerned only with making sure it works in IE. So it may look fine in Internet Explorer, but there's a distinct possibility it's not going to look right in another browser. Plus, the markup that the Web Controls often emit is less than ideal.

Structure for meaning (don't use tables for layout)

There's been a ton of stuff written about not using tables for layouts (and a lot of disagreements on it), so I won't go into it too much. But - for me - at the heart of the argument is this - your HTML should reflect what it is. If it's a logical section of content, use a div. If it's a title, use a header tag. If it's a paragraph, use paragraph tags. And if it's tabular data, you know what to do...

When it comes to uniquely identifying your elements, use IDs and classes that mean something, that describe the elements that are being styled. It makes it more difficult to track down an issue when you look at a CSS file and see an ID like '#p43234_131', rather than 'header'. Some editors are especially bad about that - I'm looking at you Dreamweaver.

It's important for a few reasons. First, it's a lot easier to maintain when you can quickly identify your elements. Also, it makes it easier to parse. Granted, that's not something that's always done on a regular basis, but you'll be glad if you ever have to screen scrape your own HTML.

Don't repeat yourself

Understand how styles cascade and when to apply classes. Put your styles as high up the tree as possible. If a font is going to be applied to every element on the page, then apply that style to the body. Again, some tools are bad about this and will put the same tags in again and again. You want to put the style into a place where it's going to applied as widely as possible so that you don't have multiple places to manage that style - so you don't repeat yourself when it's unnecessary. Focus on applying as much of the styles as you can in the smallest amount of CSS possible. Just as you group code together so that you can re-use it to in different components in your application, put your CSS in external files that logically group your styles for reuse.

Writing good HTML is a craft. You should structure your HTML as carefully as you would your code, and you'll have a presentation layer that's maintainable and easier to manage. You may never be a great graphic designer like some people are, but you can still create great HTML and CSS.

To close it out, here's a few sites that are good to check out for HTML and CSS

Rich Reuter - webdesign

Good Web Design Practices for ASP.NET Developers

Don't open the designer

Structure for meaning (don't use tables for layout)

Don't repeat yourself