Summary of "Designing with Web Standards"

In the interest of spreading the word for web standards, I've written a summary of the main ideas that I have taken from the book
Designing with Web Standards by Jeffrey Zeldman. Of course, this is no substitute for reading the book, and some of the points are my own interpretations of the concepts presented in the book.

• Web developers have acquired bad habits due to old browsers' poor support for standards (HTML, XHTML, CSS, W3C DOM, XML)


• Most people are now using reasonably recent browsers with decent standards support.


• Stop designing for the lowest common denominator browsers. Design for standards and let the design degrade gracefully in old browsers. It may not "look the same" but the content should still be accessible.


• Use valid HTML/XHTML to mark up the content semantically (by its meaning). Note that there are probably many HTML elements that you do not normally use that you should consider e.g. <label> <th>. Familiarise yourself with the full range of semantic elements.


• Avoid using deprecated elements unless absolutely necessary.


• Use the correct DOCTYPE to ensure browsers switch into standards-compliance mode


• Preferably use XHTML


• Use CSS to style the content


• Validate your HTML and CSS (http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/)


• Only use tables for layout if absolutely necessary. Layout can be achieved using CSS, however sometimes a transitional approach is required with some table-based layout.


• Use CSS layout templates that have already been tested for cross-browser compatibility


• Avoid "div-itis"; Don't use a div if there is an appropriate semantic HTML element


• Avoid "class-itis"; Don't apply classes to every element that needs some styling.


• id is a very powerful attribute. It can be used for CSS styling of elements and their descendants, for navigating within a page, and for scripting via the DOM.


• Preferably use an external CSS stylesheet as opposed to internal or inline styling.


• Don't use JavaScript for functionality which can be achieved with CSS e.g. menu rollover effects.


• If using JavaScript, ensure it degrades gracefully in older browsers e.g. A drop-list menu should be just a hierarchical list of links in the HTML.


• If using the DOM, ensure you use only standard W3C methods not proprietary extensions.


• Assign an id attribute to each structural area of the page, whether it is a div or a td (in a transitional table layout)


• Then use descendant CSS selectors to style the elements within each area e.g. div#menu li a { color: red }


• Use CSS to create a "print-friendly" stylesheet using the same HTML page (using the media="print" attribute). You can hide unwanted sections with {display: none}


• When sizing fonts, ensure that you use a unit which is resizable (not px in IE)


• Do not use points (pt) as a font unit except for printing


• Do not use font tags


• If you must use spacer images give them an empty alt tag: alt=""

Advantages

• Smaller file sizes and CSS caching - saves bandwidth


• Cleaner code


• Easier maintenance - can completely change look of site just with stylesheet


• Forward compatibility

Links

• http://csszengarden.com/ For an idea of what it is possible to achieve using the same HTML file with many different CSS stylesheets.


• http://w3.org/


• http://webstandards.org


• http://alistapart.com


• http://zeldman.com


• http://meyerweb.com