The Do's and Don'ts of Professional Web Design.
February 22, 2005
This list summarizes my often time controversial positions for everyone to see and attack!
Attacks aside, I felt it was time to come out with a new list of best practices in web design with the aim of making web designers lives a little easier.
🙂
THE DO’S AND DON’TS OF PROFESSIONAL WEB DESIGN
- Don’t use CSS hacks – they will break in IE7.
- Do use IE conditional comments to write CSS code that only IE will see*.
- Don’t use XHTML in your web pages because:
- XHTML is not properly supported in IE6, IE7 and some other browser – this makes up about 80-90% of the browsers being used today.
- XHTML is restrictive in terms of:
- the tag attributes you can use.
- it makes DOM / AJAX scripting that much more trouble.
- Even in a perfect world, XHTML does not provide a significant advantage over HTML 4
- Do use HTML 4.01 doctype.
- Do use CMS’, Blogs and web templates as much as possible – saves time and money.
- Do make your websites accessible.
- Do use CSS for page layouts if CSS based layouts are NOT a big headache; otherwise use HTML tables.
- Don’t get fooled into believing that Web Standards based websites will have any practical impact on how well your websites and web design will do in the market place. 99% of the world doesn’t care and even worse – most don’t even know what the Web Standards are.
- Do break out of the Web Standards if they get in the way of getting the job done – Web Standards are NOT holy scripture.
- Don’t nest tags too deeply – nested div’s are just as bad as nested table’s.
Notes:
CSS hacks are often used to hide CSS code from IE so that you can manage the inconsistencies between IE’s broken DOM and better browsers like FireFox.
Hacks in a nutshell: you have one set of CSS rules that work for IE and another (hidden by way of CSS hacks,) for FireFox and other more compliant browsers. Using CSS hacks is a bad idea (that should have never been suggested) because they depend on something that is ‘broken’.
As an alternative, IE conditional comments make sense because they serve the same purpose as the hacks: to allow us to serve IE only code to IE, and not any other browsers. In addition, IE conditional comments are a feature of IE and not something that is broken.
ON DOCTYPES:
People have written long blathering articles on doctypes and on which ones to use. Being a practically minded person (who keeps reminding my long-winded father to ‘get to the point’,) I wanted to give people the quick- skinny on doctypes:
What are doctypes?
The doctype is a little bit of code that tells the browser how to read your web pages – it tells the browser which (of its many) ‘engines’ to use. As you may have guessed, we have several options.
What doctype should we use in our pages? Your Options:
- HTML 4.01 Strict
- HTML 4.01 Loose
- HTML 4.01 Frameset
You can cut-and-paste any one of these:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
–
Just in case it is not clear, you insert only one (of the doctypes) at the top of your web page. So which one should you use? Use the first one: HTML 4.01 Strict
Final comments:
There are other doctypes but they relate to XHTML … and we know that you shouldn’t use XHTML.
Bye for now.
Stefan Mischook (The Web Heretic)
