Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!


Forgot your password?
The Internet Books Media Programming Book Reviews IT Technology

Designing With Web Standards 384

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.

This discussion has been archived. No new comments can be posted.

Designing With Web Standards

Comments Filter:
  • The back cover (Score:4, Informative)

    by Sir Haxalot ( 693401 ) on Tuesday September 30, 2003 @01:16PM (#7095476)
    You code. And code. And code. You build only to rebuild. You focus on making your site compatible with almost every browser or wireless device ever put out there. Then along comes a new device or a new browser, and you start all over again.

    You can get off the merry-go-round.

    It's time to stop living in the past and get away from the days of spaghetti code, insanely nested table layouts, tags, and other redundancies that double and triple the bandwidth of even the simplest sites. Instead, it's time for forward compatibility.

    Isn't it high time you started designing with web standards?

    Standards aren't about leaving users behind or adhering to inflexible rules. Standards are about building sophisticated, beautiful sites that will work as well tomorrow as they do today. You can't afford to design tomorrow's sites with yesterday's piecemeal methods.

    Jeffrey teaches you to:

    * Slash design, development, and quality assurance costs (or do great work in spite of constrained budgets)
    * Deliver superb design and sophisticated functionality without worrying about browser incompatibilities
    * Set up your site to work as well five years from now as it does today
    * Redesign in hours instead of days or weeks
    * Welcome new visitors and make your content more visible to search engines
    * Stay on the right side of accessibility laws and guidelines
    * Support wireless and PDA users without the hassle and expense of multiple versions
    * Improve user experience with faster load times and fewer compatibility headaches
    * Separate presentation from structure and behavior, facilitating advanced publishing workflows
  • Standards (Score:-1, Informative)

    by Anonymous Coward on Tuesday September 30, 2003 @01:19PM (#7095495)
    Standards are for pussies
  • Related resources (Score:5, Informative)

    by polyhue ( 38042 ) on Tuesday September 30, 2003 @01:20PM (#7095510)
    He also has an excellent list of related resources and links on design and accessibility:

  • by ColoradoSkier ( 684478 ) on Tuesday September 30, 2003 @01:23PM (#7095550)
    Eric Meyer on CSS. I finished Zeldman's book about a week ago and am now going through Eric Meyer on CSS. Zeldman tells you what needs to be done, and gives some examples, Eric Meyer gives you a bunch of practical examples. Guess this is why can be purchased as a pair at Amazon...
  • First Book is Better (Score:4, Informative)

    by Davak ( 526912 ) on Tuesday September 30, 2003 @01:24PM (#7095559) Homepage
    I agree that he is an excellent tech writer. However, I thought his first book was much better than this one.

    A Review Can Be Found Here [codekit.com]

    Although I am not very good at web design... what I have learned, I learned from this guy. He rocks.

  • by Lord_Slepnir ( 585350 ) on Tuesday September 30, 2003 @01:24PM (#7095562) Journal
    The only standards you need to follow are the W3C Web Standards [w3c.org] They even have a validator for your convience if you need to make sure that your code is valid. I did that at my summer internship and over the course of a summer was able to make our 1000+ page website 99% w3c complient. It might take you a few days to get in the rythym of doing things, but once we had our site up to html 4.01 standards, we never had a problem with any browser compatability issues, and we tested all the way back to Netscape 4.7.
  • by phallstrom ( 69697 ) on Tuesday September 30, 2003 @01:25PM (#7095577)
    I happened across this site the other day... it really shows off what CSS can do. No idea how it looks in IE, but in Firebird it's pretty amazing. Pick a design from the left and note that it's all style sheets...

    http://www.csszengarden.com/ [csszengarden.com]
  • Buy It Link (Score:3, Informative)

    by _newwave_ ( 265061 ) <slashdot@paulwal ... v minus caffeine> on Tuesday September 30, 2003 @01:26PM (#7095593)
    Bookpool [bookpool.com] is always cheaper!
  • Re:The back cover (Score:4, Informative)

    by bamurphy ( 614233 ) on Tuesday September 30, 2003 @01:28PM (#7095610) Homepage
    I picked up this book about 2 months ago and it really is one of the best buys on my shelf. Zeldman's book and his sites are wounderful resources that not only contain a good deal of info themselves but point you in the right direction to a really great community of like minded, forward thinking developers.

    XHTML & CSS are tough sometimes, and Zeldman's realistic approach to transitioning to a standard web language is refreshing - he's not a zealot.

    I hope more web designers will jump on board this movement - if we ever want to get paid really well and escape the image of the teen with frontpage coding his uncle's website we need to embrace these kind of ideas.
  • Re:Related resources (Score:5, Informative)

    by Penguin ( 4919 ) on Tuesday September 30, 2003 @01:33PM (#7095663) Homepage
    In general, a lot of the stories at A List Apart is worth reading: http://www.alistapart.com/stories/

    A site worth visiting is http://www.csszengarden.com/ - having lots of alternate stylesheets.

    I'm currently working on a project with a designer w/clue. Everything regarding looks and design has moved into stylesheets. All I have to do is to structure the data in suitable divs/blocks (with regard of continuity for the simple text-based browsers).
  • by Phroggy ( 441 ) * <.slashdot3. .at. .phroggy.com.> on Tuesday September 30, 2003 @01:45PM (#7095779) Homepage
    A site I'm building has a lot of browser-specific CSS code - stylesheets that will only be loaded by certain browsers. Every bit of it validates at validator.w3.org (except for internet-explorer.css, which is only loaded by MSIE 5 and 6 on Windows, and is loaded using conditional comments which the W3C validator doesn't parse). The problem isn't creating code that the W3C says is valid, the problem is creating code that works as you intend across multiple browsers, which the W3C won't help you with.

    Don't get me wrong, it's a wonderful tool, but it doesn't eliminate the need for practical books like this.
  • Re:Mmmhmm (Score:4, Informative)

    by t_allardyce ( 48447 ) on Tuesday September 30, 2003 @01:46PM (#7095788) Journal
    Flash isnt a web standard (it has quite a large user base though). The W3C standards answer to flash is SVG which is pretty similar except it ties in with HTML/XML/CSS etc much better, flash is just a hole in the browser where a plug-in is put, while SVG (can also be a plugin) is much more integrated. SVG is also a 'text' based standard like HTML - ie its made up of tags and stuff so its in theory much easier to write generating software for it and link it with server-side scripts and even with client side java/vbs etc scripts (why re-invent the wheel with flash scripting and proprietory expensive server-side software when you can use existing layers like perl,PHP,java,asp, basically anything?). While flash is a more closed system designed by Macromedia to fill a gap in a business like manner, SVG is structually better - kindof like the way HTML tables were/are used to design sites, they are a work around where-as CSS (if the browser supports it properly) is a far better more structured way to do the job.

    Flash probably runs faster and has more support, plug-ins and editors on most computers at the moment but SVG is catching up (also SVG supports compression which is cool so it can match flash in file-size).

    So basically the book would talk about SVG if it talked about any vector/animation system.

    (And without trying to sound like a troll:
    Flash = Cheap Hack, SVG = Potentially Structured Nirvana)
  • by jdeisenberg ( 37914 ) on Tuesday September 30, 2003 @01:46PM (#7095797) Homepage
    1) He's married.

    2) As for his site sponsorship, see: this link [zeldman.com]
  • by Cyphertube ( 62291 ) on Tuesday September 30, 2003 @01:48PM (#7095810) Homepage Journal

    It depends on what you need. CMS is a very, very broad term, and most people are looking for a WCMS (Web Content Management System) when they say it, even though their true needs may be different.

    I would recommend getting the Content Management Bible, which you can learn more about here [metatorial.com]. It covers the various systems out there. One company I worked for realised they needed a Digital Asset Management system, like Artesia [artesia.com], and not something like Interwoven [interwoven.com].

    Good luck! And remember that O'Reilly isn't the only reasonable tech publisher out there.

  • by xenoc_1 ( 140817 ) on Tuesday September 30, 2003 @01:49PM (#7095815)
    Couldn't you see the rather obvious box for selecting different text contrast/size? He uses alternate stylesheets. That even works in IE6. So no problem in the "most prominent browser".

    But it's easier to complain...
  • by rjh ( 40933 ) <rjh@sixdemonbag.org> on Tuesday September 30, 2003 @01:51PM (#7095844)
    And then when XML-only browsers pop up, all these old pages become unviewable.

    Yes. Just like you can't view a WordStar 6.0 document in a Web browser.

    Free hint: XML is not HTML. It's close, but it's not the same. Any HTML document that is conformant to a given HTML specification can be rendered by any competent HTML browser that's conformant to that specification. If you don't believe me, I can find some very, very old web pages that far predate the 4.01 standard, yet are conformant to the standard of their time, and Firebird renders them perfectly.

    Saying "yeah, and when XML-only browsers pop up, all these old pages become unviewable" is a trivial statement. If it's XML-only, then it's not a freaking HTML browser, and it makes no sense to complain that an XML-only browser can't grok HTML. Just like it makes no sense to complain that Firebird can't render WordStar 6.0 documents.
  • by Jonas Öberg ( 19456 ) <jonas@gnu.org> on Tuesday September 30, 2003 @01:53PM (#7095862) Homepage
    Our faculty of the university at which I work has decided on a new layout for their web pages. This was done and delivered to us by a PR agency. I feared that it might be bad, but that fear didn't even come close to what I had to witness.

    Imagine having to tell our users (many of which are using GNU/Linux or Macintosh) that our web site only works reliably in Windows with Internet Explorer 6.0 and above. Just because a PR agency can't develop web pages. It's impossible. I had to do something about it.

    So when I implemented the layout for our department (scheduled to go live later this month), I scrapped everything they had done. I took a printout of their page (as it looked in Internet Explorer) and marked up what colors and fonts they had used.

    Then I set down and wrote the same thing using XHTML/1.0 Strict and CSS1. This was about two days work, but the finished result now validates using w3c's validate tools, and it works reliably in all browsers I've managed to try, all the way back to Mosaic and Netscape 3, with or without images (yes, Lynx, Links, w3 and other text browsers work very well indeed too).

    Not only did I get the pages to validate. By using CSS, I was able to get rid of several images they had been using with their design. The overall size of a page, including graphics and CSS, now weighs in at about 35 kbytes. This is compared to around 120 kbytes with the proposed code.

    And even better, most things can be cached by the browser (CSS code and images). The only thing that needs reloading when you hit subsequent pages is the dynamic XHTML code, which weighs in at around 5 kbytes, compares to 40 kbytes in the proposed code.

    Now, I think our students will like us. This result is even better than the pages that we have today. They render quickly and effortlessly even on old equipment or on extremely slow links.

    I havn't been able to convince the faculty to make my code the "default" yet, but they might get the idea once people start noticing that our pages load much more quickly than the rest of the faculty pages.

    So, using standards isn't always about making things render nicely in all browsers. It gives you a while heap of nice side effects that isn't worth sneezing at.
  • Re:Ummm (Score:5, Informative)

    by dastrike ( 458983 ) on Tuesday September 30, 2003 @01:56PM (#7095889) Homepage
    Internet Explorer violates a lot of standards. And is otherwise nasty to work with.
    • CSS level 1: Not full support despite MS claiming so. E.g.background-attatchment: fixed; works only on the <body element.
    • CSS level 2: Quite a mess, lots of things are broken, e.g. the infamous issues with the box model, and lots of things are not implemented, e.g. position: fixed;
    • XML support is flaky at best, it tends to complain about DTDs even though they are valid.
    • Other nasty quirks such as when having a <?xml ... ?> declaration, then it ignores the doctype and reverts to quirks mode with all the broken box models and such.
    • Violation of the HTTP specification by ignoring the media type received from the server. Internet Explorer will most of the time second-guess the media type instead.

      http://www.w3.org/Protocols/rfc2616/rfc2616-sec7.h tml#sec7.2.1 [w3.org]
      If and only if the media type is not given by a Content-Type field, the recipient MAY attempt to guess the media type via inspection of its content and/or the name extension(s) of the URI used to identify the resource.
    I design according to the standards and using Mozilla and Opera 7 as the design references, and then adjust the stylesheets for IE's buggy behavior, so that it renders fine there as well.
  • Re:You mean... (Score:5, Informative)

    by Phroggy ( 441 ) * <.slashdot3. .at. .phroggy.com.> on Tuesday September 30, 2003 @01:57PM (#7095896) Homepage
    Make your main stylesheet, then figure out which things don't work correctly in Netscape 4 (e.g. the width of a box incorrectly includes the padding, so for NS4 you should add the left and right padding when specifying a width). Where they differ, put the Netscape 4 code in the main stylesheet and the standards-compliant code in a second stylesheet. Comment the main stylesheet so you remember which code is specific to Netscape 4. Then load your stylesheets like this:

    <link rel="stylesheet" href="/main.css" type="text/css">
    <style type="text/css"><!--
    @import url(/not-netscape4.css);

    Any browser except Netscape 4 will load both stylesheets, so the standards-compliant code in the second one will override the Netscape 4-specific code in the main one.
  • by Infonaut ( 96956 ) <infonaut@gmail.com> on Tuesday September 30, 2003 @02:03PM (#7095941) Homepage Journal
    Using XHTML and CSS makes maintenance a lot easier. It makes for leaner code, which results in faster-loading pages. Zeldman's book shows you how to apply XHTML/CSS in a manner that actually works in the real world. In order to get even more value out of the Zeldman book, check out its logical companion, Speed Up Your Site [websiteoptimization.com], which focuses on optimizing your code for speed, and for search engine visibility.

  • Re:Ummm (Score:3, Informative)

    by Phroggy ( 441 ) * <.slashdot3. .at. .phroggy.com.> on Tuesday September 30, 2003 @02:05PM (#7095964) Homepage
    Try the opposite approach: start by getting it to work in Mozilla, then check it in other browsers. Along the way, use the W3C Validator. If you can't make it work in IE/Win and still validate, there may be a better way to do what you want that is standards-compliant AND works in IE/Win in addition to what you're used to. When that's not the case, use conditional comments (google if you don't know what they are) to let you write code specifically for IE/Win (or specifically for everything else).
  • Re:The back cover (Score:5, Informative)

    by mbrubeck ( 73587 ) on Tuesday September 30, 2003 @02:16PM (#7096066) Homepage
    You fool. Microsoft's Internet Explorer sets the only "Standards" worth following. Who do you want to view your pages...95% of all users out there, or some wierdo from flyover territory with his pre-paid cell phone?
    I'll take the bait: I want Google to index my site, and Googlebot isn't one of the "95% of all users" running MSIE. Making full use of web standards helps search engines index my pages, saves bandwidth costs, reduces development and maintenance effort, and makes pages load faster for MSIE users, in addition to helping users of other browsers, portable devices, and assistive technologies for the disabled.
  • by GeorgeH ( 5469 ) * on Tuesday September 30, 2003 @02:57PM (#7096456) Homepage Journal
    His site is http://www.zeldman.com/ [zeldman.com], the book's site is http://www.zeldman.com/dwws/ [zeldman.com] and one of the sites he's built using web standards is http://www.wired.com/ [wired.com]
  • by Phil Gregory ( 1042 ) <phil_g+slashdot@pobox.com> on Tuesday September 30, 2003 @03:34PM (#7096800) Homepage

    While it's a paid service, Browser Cam [browsercam.com] looks pretty good. You give them a URL and pick a browser/OS combination; they give you a screenshot of your page rendering on that browser and OS.

    --Phil (Think I'll be buying this book soon.)
  • by elemental23 ( 322479 ) on Tuesday September 30, 2003 @04:47PM (#7097589) Homepage Journal
    How does one go about getting OLD versions of browsers to check their sites with?

    All the old browsers you'll ever need can be found at http://browsers.evolt.org/ [evolt.org].

    With IE, can you install mult. versions on the same machine?

    On a Mac, yes. On Windows, no. That, combined with IE's frequent security updates, means I never test my sites on anything but the most current version of IE available. The alternative, leaving IE unpatched, doesn't really appeal, even though I don't normally use it for day-to-day stuff.
  • Re:The back cover (Score:3, Informative)

    by SoupIsGoodFood_42 ( 521389 ) on Tuesday September 30, 2003 @04:59PM (#7097707)
    They don't make me cry. Maybe your just not a skilled web developer? It doesn't take that much to support screen readers. A couple of hidden (from screen) links, and a few meanful alt tags, a bit more care in the layout, and that's it.

    There is always someone who moans about how hard it is. But the truth is, it's not very hard at all, and if you can't learn how to do it, the I really have to wonder how you managed to learn HTML in the first place.

  • by Devil ( 16134 ) on Tuesday September 30, 2003 @07:04PM (#7098974) Homepage

    The point of web standards is not--I repeat not--to make your site look the same in all browsers, but that it should be readable or usable in all browsers. A fancy-schmancy table-based layout may look good in most modern browsers, but just try viewing your wonderful page in lynx [browser.org], or using a screen reader like JAWS [freedomscientific.com] and you'll find your fancy table-based layout has been reduced to ashes.

    Using web standards, we can design sites that look good and are still usable, all the way back to the first text-based browsers. Did you know that Netscape 1.0 did not even support tables? So, if there's some schlub out there using it (and if he is, please upgrade... this is 2003, for goodness' sake), your wonderful table-based design is worth squat to him. My site, on the other hand, designed with web standards, will look fine in his copy of Netscape 1.0, so if two similar sites were designed--one with web standards and the other without--who is more likely to keep those readers who are disabled or using old or out-of-date browsers?

    One final note before I get off my soapbox. If you need proof that you can do more with standards than without, look at K10k [k10k.net]. While it does still use tables, the site uses style sheets to do most of the work and as a result, the site looks great. CSS is the way of the future, whether you're designing with or without tables. You'd better get used to it.

  • by telbij ( 465356 ) on Wednesday October 01, 2003 @12:27AM (#7100908)
    First of all, those sites you mentioned are anything but shining examples of using the 'latest web standards.' Not only do they not validate, but they aren't even attempting to follow Zeldman's philosophy at all. Your close-minded self-righteousness only reveals your lack of knowledge about the web standards movement. Zeldman is no idealist; he is not espousing 'the latest web standards'. He specifically talks about using web standards to solve real world problems. Using his approach you can create sites that look great in IE 5, 5.5, 6, IE Mac 5, Opera, Mozilla, Netscape 6, 7, Konqueror and Safari while degrading to be perfectly accessible in Netscape 4-, IE 4-, Lynx, etc.

    Now, depending on your audience, you may have to make sure the Netscape 4 version looks visually impressive, but don't think for one second that building your site using tables, bgcolor attributes, and font tags will be done without sacrifice. In web design there is ALWAYS sacrifice, it's just a question of what. If you build a web site using Zeldman's method you sacrifice:

    • Complex layout in browsers v4 and under.
    • Certain techniques that were refined during the era of the v3 and v4 browsers for pixel precise layouts.
    Now if you resort to tables and font tags and the rest you are sacrificing:
    • Size - pages quickly become bloated with nested tables, redundant font tags and unnecessary images.
    • Legibility - Everything is nested in table after table with no clear meaning to different tags.
    • Forward-compatibility - You are betting on browser makers continuing to support non-standardized metrics that arose by coincidence.
    • Accessibility - You don't need standards to support accessibility, but the two really go hand in hand. Using HTML tags as they were intended improves accessibility for non-standard user agents. Adding alt attributes, summaries, skip navigation links and more advanced techniques that are possible with standards make your site infinitely more usable for a blind person.
    • Degradability - If your tag soup doesn't work in a browser you likely get something messy. If a browser doesn't support a standards-based page then maybe you lose the text formatting, but the information is still there.
    • Development time - sure standards are hard to use if you've spent 10 years perfecting image slicing and table nesting, but table-based layouts are much more difficult to modify, update, output from server-side scripts, screen-scrape, or otherwise mess with in typical ways that web designers/developers are often asked to do.
    Your excuses for dismissing standards are all red herrings. No matter how you develop, you are going to have to test your pages in all your target browsers anyway. However, using standards gives you a better chance with untested and future browser releases. Of course they are far from perfect, but resorting to outdated techniques doesn't improve the situation, regardless of how comfortable you might be with it.

There are running jobs. Why don't you go chase them?