Designing With Web Standards

Trent Lucier writes "If you've browsed the web design section of any bookstore lately, you've seen him staring at you. The blue hat. The mustache. The blinding neon background. He's Jeffrey Zeldman, publisher of the influential web development magazine, 'A List Apart' and author of the book Designing With Web Standards (DWWS). The first edition of the DWWS was published in 2003, and now 2006 brings us an updated 2nd edition. In a market flooded with XHTML, CSS, and web standards books, is DWWS 2nd Ed. still relevant?" Read the rest of Trent's review for the answer. Designing With Web Standards, 2nd Ed. author Jeffrey Zeldman pages 410 publisher New Riders rating 8.5 reviewer Trent Lucier ISBN 0321385551 summary Foundations for creating standards-based websites using XHTML and CSS.

DWWS is more of a survey course than a deep dive into a particular topic. In fact, a large part of the book is dedicated to the philosophy of web standards, as opposed to their specific implementation. The reader is given background information on the turbulent early years of the web, when Netscape and Microsoft battled each other with proprietary features, driving coders crazy and sending development costs through the roof. Inconsistent support for HTML, JavaScript and CSS often meant that a single page had to have multiple versions written to support different browsers. Predictably, many companies decided to "standardize" their websites on one browser (usually Internet Explorer), causing much pain for users who wanted or needed to use other programs.

Out of this mess came the web standards movement, whose goal was to encourage browser-agnostic design practices. However, the web standards proponents faced several problems at the outset. "Standards compliant design" was synonymous with "ugly." CSS was a 4-letter word, due to buggy and inconsistent browser support. Additionally, few people understood that standards compliance was a continuum and not an all-or-nothing affair.

Which brings us to Zeldman's book. Part 1 of DWWS explains the concepts above in terms that non-technical people can understand. The book states that it is for "designers, developers, owners, and managers..." Of course, the idea that a non-technical person would choose to read a book on web standards doesn't comply with what I like to call "reality." But tech leads may find some ammunition in these chapters for their arguments with management about the benefits of browser-neutral web design.

XHTML and CSS are the main focus of the second part of the book. Readers without any HTML experience will likely have difficulty following these chapters. Those with some experience will learn to master the DOCTYPE, tame font sizes, and conquer annoying Internet Explorer bugs.

Zeldman is a pragmatist, never forgetting that his readers live in the real world with real limitations. Some developers still have to support older browsers, or integrate with proprietary technologies (ex: Flash and Quicktime). He recommends solutions for these circumstances, letting his audience know the pros and cons of each approach. Early in the book, Zeldman states his motto of "No Rules. No Dogma." The book adheres to that statement, explaining that some standards can be maddeningly vague, or that the XHTML Strict DOCTYPE isn't for everyone.

As always, Internet Explorer 6 requires special attention. The (in)famous CSS box model hack is explained, in which jujitsu-like techniques are used to fix one IE bug (the way width is measured) by exploiting another (broken support for the CSS voice-family rule):

.content
{
width:400px; /* All browsers read this line */
voice-family: "\"}\""; /* IE chokes here and bails out of this block */
voice-family:inherit;
width:300px; /* Other browsers make it to the end and use the correct width */
}

Every time someone codes this, a kitten dies. But it is valid markup, and it is used by many standards supporters. A few references to IE7's improvements are sprinkled here and there, but this book was published before the browser was formally released so don't expect too much info.

One of the hottest topics in CSS is the pure CSS-based layout. Pure CSS layouts usually involve the concept of floating elements and calculating widths. In DWWS, we get a chapter dedicated to the hybrid layout. Hybrid layouts make use of CSS and HTML tables to layout a page, although the table usage is minimized. Zeldman is correct to take this approach, which gives readers practical advice and then lets them decide if they want to move on to more complicated CSS layouts.

The chapter on accessibility is one of the most illuminating. Zeldman has well-reasoned retorts to all the common graphic designer excuses for ignoring accessibility. Accessibility does not mean that a site has to be ugly. Rather, accessibility is something that happens under the hood, in the markup itself. The business case for accessibility is also strongly made. Think you can ignore blind users because your flashy site targets a small, hip audience? Be prepared to get punished by Google, since the GoogleBot is the most powerful blind user on the web ("The Blind Billionaire", as it is called in the book).

A brief chapter is dedicated to DOM-based scripting (aka JavaScript), and the discussion is mostly limited to what scripting can do, and not how to do it. The DOM (Document Object Model) is the model for describing the hierarchy of content on a webpage. Modern techniques like AJAX make extensive use of the intimate relationship between XHTML, CSS, and JavaScript DOM support. However, accessibility, usability, and maintainability are still challenges in the hyper-scripted world of Web 2.0. Zeldman doesn't offer much advice on these topics, but provides a book list for further reading.

I have not read the first edition of DWWS, but the second edition makes it clear where Zeldman has changed tactics and techniques. For example, the image replacement technique described in the first edition wasn't accessible in certain screen readers, so improvements are suggested in the second edition.

Overall, DWWS is a good book for web developers that already know the basics of HTML and CSS, but want to update their 1997 coding techniques. Those new to web design, however, may want to start with a book that is a little more comprehensive. Zeldman does a good job of explaining how to create leaner, lower-cost, and more maintainable web sites. On more than one occasion, I put down this book mid-sentence, loaded up my text editor, and was able to make a quick change to solve a problem that was bugging me. In a book dedicate to making the web designer's life easier, what more can you ask for?

Trent Lucier is a software engineer. His latest experiment is localhost80.com

You can purchase Designing With Web Standards, 2nd Ed. from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

Comments

I must say.

[zwilliams07]

As an owner of the first edition, it is a must own title for anyone into webdesign and programming. If only Microsoft started to adhere to the W3C specification, the world would be a better place.

Re:I must say.

[smooth wombat]

I don't really think that there's anything particularly special or important about the W3C that makes their arbitary standards better than somebody else's arbitrary standards.

Too bad the standards aren't arbitrary. The W3C is an international consortium which holds meetings to try and get a consensus on what a web standard should be. Microsoft is part of this consortium but even after agreeing to the standards, chooses to ignore them.

So who's fault is it again for not following the standards?

If it was easy, everyone could do it

[fractalus]

For old hacks who are thoroughly used to table-based layouts, as the only kluge that worked consistently, CSS is a tough sell. From an old rant on this topic where I quote a friend of mine who builds sites:

See I'm not a fan of the pure CSS sites. [It] makes updates and general maintenance a pain. We've done a few sites that way and they are the ones I hate working on when [the] client calls with updates, enhancements, etc. ... I can make a table and format a page in two seconds, versus looking up styles or creating new ones, using guess and check, checking all browsers. ... Tables don't cause any problems if they're done correctly, so why make my life more difficult to use pure CSS, when 9 [out of] 10 times the site is going to be very graphically driven.

That was from a year ago. Now even he has seen the light and is starting to build standards-based sites. It just took a while.

One invaluable resource for identifying browser CSS support is this page which has nice pretty colors showing the amount of support.

Re:If it was easy, everyone could do it

[Shados]

If it wasn't for IE, yeah. What I had in mind when i made my exageration was vertical centering, which depending on your needs tend to take 3 div tags to make it perfectly cross-browser and working peachy in pure CSS.

I've looked for some trick that I could be missing, but everywhere I looked, it tend to be that. Of course, you can lower the amount needed by using, as you send, the inside elements, but often its still required to have quite a few too many divs. Being able to use display:table-cell in IE would probably shave these occurences by a lot though.

My gripe so far though is almost purely with 3 things. #1: positioning of elements that do not have fixed sizes (if you fix sizes, then things are a total joke), #2 vertical positioning (mostly fixed once the browser installed based support of table-cell is higher), #3 positioning/sizing of elements that are not tested, relative to each other.

All of this is definately possible. Its just not as clean as it should be, in my opinion. If javascript is a possibility (let say for an internal application), then all problems can be fixed in 5 lines of code and be 100% cross browser, but thats not always possible.

And hey, i'm not the guru among gurus, if there are tricks I haven't been able to find to handle all this over time (very possible), i'm always open minded to learning more stuff. But I spent quite a bit learning all the quirks I could with no easy solutions. :)

Tables should not be used for layout!

[Geof]

For example, if the floating divs are acting different in each browser, use a table.

Standards-based design is not just about browser compatibility. It's also about separating style from content. Tables are for tabular data, not graphic design. What you describe is the HTML equivalent of spaghetti code, and it's one of the main targets of Zeldman and other of proponents of standards-based design.

HTML (unlike, say, PDF) is not a layout language. Tags are meant to describe the content they enclose, not specify how it is to be displayed. It is the job of CSS to present that content in different contexts. Violating that separation, for example using tables for layout, makes maintenance difficult because content and style cannot be modified independently. It denies users the ability to re-style your content (e.g. with custom stylesheets). It creates barriers to accessibility for those who do not interact with computers visually (e.g. those with disabilities), or who use other devices to access the web. It misrepresents the content of web pages to machine analysis - search engines, for example, use tags to determine the role and importance of text on a page.

Of course, the reality of the HTML and CSS standards and their support in popular (*cough*) browsers is somewhat different. It is sometimes necessary or practical to misuse HTML as you describe. But it should not be done without an understanding of the standards and the consequences of ignoring them. Books like Zeldman's give designers and developers the knowledge and tools they need to use HTML and CSS correctly where possible, and to minimize abuse otherwise.

For some reason, programmers seem to be trailing designers when it comes to understanding how to use HTML and CSS correctly. They figure if it looks right, it must be right. That was certainly my attitude. Perhaps it's because we don't take designers or HTML seriously ("it's not Turing complete!"). I don't know. But do read Zeldman or Eric Meyer or someone like them, either in hardcopy or online. Knowing how do this stuff right made me a much better web programmer.