Designing With Web Standards

carl67lp (Carl Anderson) writes "I was recently charged with redesigning my University division's Web site. I hadn't designed a Web site in quite some time, and I wanted to ensure that I did so with everything being 'proper'--the nature of our projects require as large an audience as possible. When I saw Designing With Web Standards available on O'Reilly's Safari bookshelf, I knew I had to snag it. And now, after finishing the book (the first IT book I've ever read beginning to end!), I'm here to preach the book's virtues as the author preaches those of Web standards." Read on for Anderson's review of the book. Designing With Web Standards author Jeffrey Zeldman pages 456 publisher New Riders rating 9/10 reviewer Carl Anderson ISBN 0735712018 summary An excellent guide on designing a Web site with the latest Web standards

Jeffrey Zeldman is one of the best technical writers whose work I've had the pleasure of reading. He is obviously well-educated with regard to the subject, and his passion for the work really shows through. Still, he never comes across as a zealot -- his style is even-handed, thoughtful, and easy to comprehend.

The first part of the book ("Houston, We Have a Problem") is the reason I give a rating of "9" rather than "10." Zeldman spends a perfect length of time on background and history of Web standards (why they're here, and what designers did before they emerged). However, this section seems to suffer from what many technical books suffer from: a case of "We'll see this soon"-itis. While this is perhaps unavoidable in such a treatise, it is nonetheless apparent. Still, it's only marginally distracting.

The meat of the book comes with "Designing and Building." Zeldman first talks about modern markup, then explains the variations on XHTML (i.e. Strict, Transitional, Frameset) and how each ought apply to your design. Here we see more theory than practice, though, but this is welcome -- it lays the foundation for a more cerebral look at distinguishing markup from design. Once Zeldman explains the nuances of that topic, we moveon to the redesign of a Web page constructed with a hybrid table/CSS design complete with all the excellent effects we hope to see in modern pages.

After working through this redesign, Zeldman talks in more detail about the CSS box model (and the browsers that break it), typography, and some of the quirks that Web designers must deal with. Next he touches a bit on Web accessibility--a must-read for everyone, whether you think so or not.

While Zeldman isn't incredibly thorough here, he doesn't need to be--it's a book on Web standards, after all, and this chapter serves to show how accessibility can still be achieved within those standards. He also suggests a couple of other books for more information.

Finally, Zeldman walks the reader through a redesign of zeldman.com, basically as a hands-on summary of the book, and as a guide for future projects. Also included is a "Back End" (i.e., appendix) showing some excellent information about each major browser.

Too often, a book or Web site on XHTML/CSS will dwell only on the "how"--this book shows the "how" and still explains the "why": Here's how you set up an id'ed element; here's why we do that, rather than using a class. It's already opened my eyes to many things I thought I had a handle on, but now realize that I only knew in a cursory fashion.

So, ask yourself: Do you want to design a Web site that will work for everyone, regardless of their platform? Do you want to make sure your Web site is future-proof? If so, you need this book.

You can purchase Designing With Web Standards 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

What about CMS solutions?

[RichardtheSmith]

Forgive me if this sounds clueless, but most people who are given the
task of setting up a web site are going to be looking at ways to not
have to do it from scratch. There are a lot of CMS (Content
Management Systems) out there, some free, some not. What *I* really
need is an O'Reilly book about CMS that helps wade through all the
stuff that's out there right now so the reader (me) can make an
informed decision about which way to go.

I did a quick check of the O'Reilly web site and all their CMS info
revolves around XML and Java. This does not help me.

Re:What about CMS solutions?

[mblase]

Forgive me if this sounds clueless, but most people who are given the task of setting up a web site are going to be looking at ways to not have to do it from scratch.

Then this information is equally valuable to those coding those CMS systems, writing the modules that generate HTML and CSS and JS and all that good stuff. Actually, it's more important -- if you're generating HTML from a single module in a larger CMS site, it's essential to use good HTML-compliant code so that it doesn't accidentally break the modules written by others.

web standards are really only half the battle.

[UrgleHoth]

To add to this, one can follow all the rules making pages comply yet still provide poo usability due to ill-thought layout and navigation on top of a good framework.
For starters, if you're not familiar with him, here is Jacob Nielsen's site. He is usability guru formerly from Sun.

here's one thing to make sure you don't to

[Stevyn]

Do not use style sheets to adjust the font size and the spacing between lines. I am not alone in having a high resolution laptop screen and I've seen too many pages that are unreadable. I adjust the settings in my browser to increase the font size so I can read it. However, when I get to one of these pages where they make the font size really small I adjust the font size so it's big enough to read. However, the font is larger but the spacing between the lines is the same, so all the words are crowded together. I hate this standard and it should be avoided at all cost

Re:Check out the css Zen Garden...

[iangoldby]

My first view of this site was like yours. But then I began to think - all these designs are basically similar. A lot of bitmaps, and clever positioning CSS.

What is more interesting is what is missing:
1. No liquid layouts.
2. Few designs that are fully robust against changes in font size.
3. Almost all designs rely 100% on bitmaps for their graphic design. Has anyone tried a pure CSS no bitmap design using borders, styled text, etc? That's much more of a challenge.

Re:Mmmhmm

[Performer Guy]

Except that flash is an overly complex implementation nightmare that is never the same on any two platforms especially when you start getting into animations.

The SMIL animation spec is ambiguous in places and tries to be all things to all men, failing badly.

Show me one SVG implementation that is adequately functional. Even Adobe's SVG implementation fails miserably on some very simple tests.

This stuff is important

[faust2097]

I know most of the /. crew thinks of web design as a frivolity [the people who manage /. certainly do] but adopting CSS [yes, even for layouts] is important for a number of reasons. It introduces structure to the content that makes it easier to generate, maintain and manipulate. It means that people using old/weird clients [yes, even line-mode browsers] can still use your site. It means that search crawlers have a better chance of getting good info from your site. It means that engineers won't have to support wonky javascript for rollovers or browser sniffing. It also means that programmers never get that Friday at 4:30 pm phone call from angry marketroids who are upset that something is a pixel off. Isn't that worth it?

For designers this is important as well, as it can make your job easier in some ways. It can also make it more difficult, explaining to your client/marketing person/product manager that it's not going to look identical in every browser is a tough sell at this point. Also, web design is finally becoming its own discipline. As designers we are now responsible for helping our clients and coworkers structure their information in ways that is more flexible and useful. We're not painters anymore, we're part of the construction team.

Is support perfect across all clients? Nope. Will it ever be? Hell no. Is it good enough? YES.

Here's some links that show off the potential of CSS:

• CSS Edge
• Taming Lists
• The CSS Zen Garden

latest web standards != largest audience

[Skapare]

If you want the largest audience possible, then using the latest web standards, such as promoted by Zeldman, is not what you want to do. The reason for this is because not all web browsers in current use work with these standards. And there are many reasons people won't or can't upgrade those browsers.

There is a way to make web pages so that they can use standards, and still work on older browsers. However, you might not like the end result. What you get on the older browsers is a very poor presentation. For example, if you define the look of your page in cascading stylesheets, when viewed on a browser with no support for CSS, you get crap.

Boundary conditions are even worse. If the browser is a version that tries to support something, and does it wrong, you can get even worse that crap. It might not work at all.

Mixing standards can cause problems as well. Here is an example. Lots of designers seem to like blue backgrounds for the side rail menus. But lots of web browsers default to blue for hyperlink text. If you specify the color of the text in a stylesheet, but specify the background color of a table cell (or worse, the whole page), in HTML, then you can end up with a situation where some of what you specify is acted on, and some is not. You'd end up with blue text on a blue background, and therefore unreadable.

It would be great if everyone could upgrade to the latest browser. But if you are trying to reach the widest audience possible, you do have to consider that many in that audience will be using older computers which have smaller drive space, smaller RAM space, slower CPUs, and can only run older versions of operating systems and browser software. While Linux might well be a great replacement for old versions of Windows on those machines, you still have the problem if shaving a recent version of some Linux distribution down to fit, and getting a huge obese browser to run on a tiny, slow, machine.

Here is an example of a real web site done in a way that displays terrible on some browsers. You can see what it looks like in Netscape 4 in PNG, or JPEG, or true color GIF (works on Netscape 2 and later) formats. If you scan very close in the blue area on the left (this does not work with the JPEG image), you can see that the colors are #5a61a9 for the background, and #5b61a9 for the text (specified by their HTML in the body tag, so they intentionally did this). By radically exaggerating the red plane (e.g. everything #5a and below is made #00, and everything #5b and above is made #ff), you can see (PNG, JPEG) the text was really there. And you'd think that a state government would be concerned enough about making their site available to all audiences, including the economically disadvantaged who can just barely even get a computer and internet access. But no, they don't actually care (I talked to these people, and they really don't care). Here is another crappy web site. By comparison, this site and this site look fine in this older browser.

Re:latest web standards != largest audience

[RedSteve]

What you get on the older browsers is a very poor presentation. For example, if you define the look of your page in cascading stylesheets, when viewed on a browser with no support for CSS, you get crap.

If you do your css correctly, what you get in browsers that don't support css at all is a page that looks like it was coded in plain vanilla html. Oh no! Big H1s! Purple vlinks! And no carefully crafted marketing widgets! But at the very least, the MESSAGE contained within the html is still available and legible.

As for browsers with partial css support, this is where an understanding of the shortcomings of different browsers and, more importantly, testing comes into play. (You do test your sites, don't you?) Regardless of whether you are going to make a nested-table, font-tag infested site or a css-complaint site, or anything in between, any web designer worth his or her salt is going to a) know the methods for effectively rendering the content in most browsers and b) test the hell out of those designs to make sure his or her assumptions are correct.

The designs you cited as displaying poorly had as much -- if not more -- to do with poor testing as it did with CSS support/non-support. You even note as much in your aside about the Texas site:

"But no, they don't actually care (I talked to these people, and they really don't care)"

The construction of the page itself is sloppy. The author uses nested table hell to construct the page, and even with the sloppy-friendly doctype of html transitional, it STILL doesn't validate as valid html 4.01. You cannot put that page's problems all at the feet of CSS.

You note that "Mixing standards can cause problems as well." True enough...but that's even more reason to pick one standard and use it!

Ironically, the pages that you cite as two that "look fine" in older browsers simply don't validate as well. That's great for the users who use Netscape 4. It's also great for whatever designer ever gets to redesign those sites...because they're so full of nested tables and inline half-assed styles that they'll easily be able to charge those States for 3 or 4 or 10 times what a css-centered update would cost.

This is not to say that designers only use CSS because it is easier for them to reprogram, but if you accept the basic premise of css -- that html is for structural markup and css is for presentation -- the ease of redesign is a happy side effect. If done correctly, the content (which, many would argue, is the most important part of the page) is not dependant on the whims of styling that may or may not display on a given user's browser.

In fact your concern that "many in that audience will be using older computers which have smaller drive space, smaller RAM space, slower CPUs, and can only run older versions of operating systems and browser software" is actually helped by a page that depends on properly coded html/css. Because, after all, those older browsers on older systems will ignore the css sheet and display the raw HTML, delivering just the content. This means less time spent rendering unnecessary display tables, less time futzing with every font styled inline, less time loading the widgets the user doesn't need.

Done properly, html/css really does help reach a larger audience. It may not look exactly like the marketing manager wants it to, but it is still better than nothing.

(And really, if your boss doesn't mind you coding separate pages for every possible os/browser combo, more power to you. Your job is probably more secure than mine. ;-)

Re:Buy It Link

[Phil Gregory]

According to ISBN.nu, amazon.co.uk has it for $21.73, and overstock.com has it for $20.59.

--Phil (Transparent plug for ISBN.nu, one of my favorite book-pricing sites.)

Convince your PHBs

[Aquitaine]

If you are having trouble convincing management that your site needs to be comply with web standards and you are at all involved with Federal contractors, academia, or any kind of service agency, drop me a line; I am a developer for the Program on Employment and Disability, and we do a lot of work with Section 508/W3C WCAG guidelines in addition to encouraging XHTML, and a big chunk of that is trying to make policy wonks and PHBs aware of these issues in terms that mean things to them. (especially if there is a legal risk to not writing compliant pages, as there is for many people that may not realize it).

using Mozilla+PHP to validate XHTML on the fly

[linuxbaby]

Since many Slashdot readers are Mozilla users, I think you'll appreciate this little code bit for your devbox, below.

This PHP code (and following head tag) put at the very top of any HTML page will tell Mozilla that the .html page following is actually application/xhtml+xml.

Then if you make ANY little mistake at all in your (X)HTML code, it will completely fail on you, as if it was a script, showing you the exact error and where it lies. It's been a priceless way to check my XHTML syntax without always linking over to w3.org

<?php
/* XHTML proper header for browsers that accept it. If using Mozilla, this is a GREAT way to make sure your XHTML validates! */
if(isset($_SERVER['HTTP_ACCEPT']) AND stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml'))
{
header('Content-type: application/xhtml+xml');
}
else
{
header('Content-type: text/html');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

etc. (not sure why slashdot comment is adding ; before html xmlns

Re:The back cover

[HumanTorch]

> portable devices

Commercial wisdom says: It may work, but its not optimized, so users don't get the best possible experience. There are other valid reasons why you may not want to stream the same markup and/or content at all devices, such as bandwidth speed and low device memory, not to mention readability. W3C device independance working group deals with this.

Also, there are other more effective ways to increase visibility on Google, such as increasing your link popularity and, unfortunately, paying them.