Slashdot Mirror


Web Standards Solutions

William Nichols writes "With a couple of projects coming up that are going to require complete W3C CSS and XHTML validation (with 1 client requiring just a pure CSS layout) I thought it was time to brush up on some CSS knowledge, and maybe learn a new thing or two. I have spent the past week with a newly released book (and one of the smaller CSS books out there), the Web Standards Solutions The Markup and Style Handbook. The author, Dan Cederholm, has now become my right hand man, so to speak." Read on for the rest of Nichols' review. Web Standards Solutions: The Markup and Style Handbook author Dan Vederholm pages 253 publisher Friends of Ed rating 8.5 of 10 reviewer William Nichols ISBN 1590593812 summary A clear reference on designing with XHTML and CSS through a standards based approach

With the title Web Standard Solutions (which we will refer to as WSS from here on), you might expect this to be a book that is going to solve your problems, and without disappointment that is exactly what is does.

WSS takes a problem based approach instead of the commonly used project based approach to teaching you the value of designing to strict standards. I found this approach very refreshing, WSS kept my attention by presenting a problem, and then presenting 3-5 solutions on how to accomplish the task at hand. With each example Dan takes you through several ways to achieve the required result. Each of the methods shown are common patterns that different developers/designers would use, and the pros and cons of each are well articulated.

A lot of you may know Dan from his Simplebits. website. If you frequent Simplebits you will immediately recognize his style in the writing of WSS. Much like the mini quizzes that are used on his blog, this book is really a compilation of the hurdles that you are likely to face when trying to design to strict standards, and the solutions presented will get you over them.

WSS will also help the budding developer realize the business value of designing to standards. Once you start designing with standards, search engine rankings can jump, continued maintenance becomes a breeze, and the accessibility to screen readers (or other requirements) can be elegantly met.

One of my favorite parts of the book is the in-depth techniques used to style lists. WSS shows you how to take a regular non-formatted list and, using CSS, style it in several ways: as a vertical shopping list; without bullets and indenting; with custom bullets; and eventually as a horizontal navigation bar with changing bullets.

This book really stands out when covering the most basic foundations of layout such as paragraphs, lists, headers, titles and the like. The first half of the book really gets into the proper use of the most basic CSS techniques and proper selection of tags for headings, quotations, etc. While the second half of the book requires you to use what you have learned along the way to start building CSS based layouts.

If you are a regular at some of the advanced sites like CSS ZenGarden or A List Apart this book may be a little basic for you. Even still you will probably be able to take some techniques from it that you can use, this book is really more for the designer that is capable but not quite deadly with their CSS knowledge.

Overall I would give Web Standards Solutions the Markup and Style Handbook an 8.5 out of 10. I really think it does a fantastic job at keeping the reader interested in the subject (something that is often very hard to do in technical books) and will definitely be a great business tool for you. A quick read it is, but a valuable reference that has earned a spot next to my keyboard, my 3 bars of caffeinated soap, and the trusty case of bawls.

You can purchase Web Standards Solutions: The Markup and Style Handbook from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

16 of 157 comments (clear)

  1. error in the infobox in the review by darxpryte · · Score: 3, Informative

    looks like his name is Vederholm instead of Cedarholm in the stats box on the review. Minor pebkac!

  2. Karma whoring information by bartash · · Score: 5, Informative

    The book has a home page here where you can download a sample chapter.

    --
    Read Epic the first RPG novel.
  3. Sounds interesting by RangerRick98 · · Score: 5, Informative

    I'll have to check that out, along with the sites you mentioned. I do a lot of web design myself, and I've found the W3C's site to be a pretty helpful reference for what I do, but I'm always interested in learning more from additional sources. Incidentally, another helpful tool when doing CSS is the EditCSS extension for Mozilla Firefox. It can save some time in trying to get everything looking just right.

    --
    "You're older than you've ever been, and now you're even older."
  4. Tip for auto-validating PHP generated XHTML by Boss,+Pointy+Haired · · Score: 5, Informative

    During development, you can easily setup PHP.XPath to automatically validate every page you create.

    Simply turn on output buffering at the top of your script using ob_start(). It's best to do this in a common header script called by all your pages.

    Then, in a common footer script, load the output buffer (retrieved as a string using ob_get_contents()) into an instance of PHP.XPath using the importFromString method.

    If your page displays, it will at least be valid XML (most of the way towards being valid XHTML). If you break the well-formedness of your output your page will not display because PHP.XPath will raise an error.

    1. Re:Tip for auto-validating PHP generated XHTML by linuxbaby · · Score: 4, Informative
      Here's another thing you can (and some say SHOULD) do for that same purpose.

      Put this at the very top of every HTML page:

      <?php
      /* XHTML proper header for browsers that accept it. If using Mozilla, this is one 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">

      Then if you do your development in Mozilla/Firefox, it will die any time your XHTML is malformed.

      It has the added benefit of something you would leave in on your production server.

    2. Re:Tip for auto-validating PHP generated XHTML by scragz · · Score: 2, Informative

      // This one also checks the optional q value in HTTP_ACCEPT to see if they prefer HTML to XML.

      /**
      * Sends the content type as XHTML if the agent supports it.
      *
      * @return bool $sent True if XHTML was sent, false if HTML.
      */
      function xhtmlHeader()
      {
      global $client;
      Base::logMessage(__CLASS__.'::'.__FUNCTION__ , null, null, PEAR_LOG_DEBUG);

      $qHTML = 1;
      $qXHTML = 0;

      $accept = PMK_Util::param($_SERVER['HTTP_ACCEPT'], '');
      $uAgent = PMK_Util::param($_SERVER['HTTP_USER_AGENT'], '');

      $xhtml = preg_match("/application\/xhtml\+xml(;q=([\d.]+))? /i", $accept, $xhtmlMatch);
      $validate = preg_match("/W3C_Validator/", $uAgent);

      $html = preg_match("/text\/html(;q=([\d.]+))?/", $accept, $htmlMatch);

      if ($xhtml || $validate) {
      $qXHTML = 1;
      if (isset($xhtmlMatch[2])) {
      $qXHTML = $xhtmlMatch[2];
      }
      }

      if ($html) {
      $qHTML = 1;
      if (isset($htmlMatch[2])) {
      $qHTML = $htmlMatch[2];
      }
      } else {
      $qHTML=0;
      }

      if (($qXHTML > $qHTML || ($qXHTML == $qHTML && $qHTML != 0))) {
      header('Content-Type: application/xhtml+xml; charset=utf-8');
      return true;
      } else {
      header('Content-Type: text/html; charset=utf-8');
      return false;
      }
      }

    3. Re:Tip for auto-validating PHP generated XHTML by Dom2 · · Score: 2, Informative
      Actually, it won't be valid, it'll be well-formed. Which is still a good goal.

      But you can go further get validity if you want. Instead of putting that stored content into PHP.XPath, try writing it to a temp file and running onsgmls -wxml -E0 -s -c /etc/sgml/catalog $tmpfile 2>&1 over it. You'll need to ensure that you have nsgmls and the W3C DTD's installed, but that's exceedingly simple in debian; you just need the opensp and w3c-dtd-xhtml packages. Any output from that you can stuff into the page somehow. In Perl, I just do $page =~ s/<head>/<head>$err/;.

      -Dom

  5. Re:re standards by TedTschopp · · Score: 4, Informative
    Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:

    Ummm... you might be suprised at the varity that is allowed when you know what you are doing with CSS. I would have to say that the sites at CSSZenGarden look quite different. I could point out other examples, but I'll promote a bit of myself, just click on my URL and check out the code for both the front page and the Forums. Both use tables only on imported content from outside sources. The rest is full CSS.

    Ted Tschopp

    --
    Fantasy remains a human right; we make in our measure and in our derivative mode... -- JRR Tolkien
  6. Re:re standards by typhoonius · · Score: 5, Informative

    I would have to say that the sites at CSSZenGarden [csszengarden.com] look quite different.

    Funny you should mention it. I followed your link and checked out the C-Note design, which has overlapping text in the sidebar in Opera 7.5. Whoops.

    The grandparent is right in that CSS is not a panacea for designers and that it can be hard to guarantee perfect compatibility.

    However, for the CSS Zen Garden, no matter how badly the CSS renders, I can always just drop into user mode and read the content thanks to its lovely semantic mark-up (of course, the design is the site's draw and not the content, but that's beside the point). In my opinion, flexible data is more important than pixel perfection, so I ultimately disagree with the grandparent's half-hearted tables-with-CSS approach. Clearly, you'll never, ever get pixel perfection for every user without a lot of hacks (using tables for anything other than tabular data is a hack), so you should really just give up and focus on fluid designs.

    (And yes, I know, ideals don't get you far with clients and compromise is often necessary, but maybe you should be compromising your design whims for accessibility instead of the other way around?)

  7. An assload of useful online CSS resources by mmmuttly · · Score: 5, Informative
    Misc.

    Lists

    Floats

    Filtering

    • Explorer! - + - this is extra copy so this would post
    • safari filtering! - + - this is extra copy so this would post
    • filters! - + - this is extra copy so this would post

    Type Issues

  8. I didn't like it by booch · · Score: 2, Informative

    I didn't think this book was all that great. It wasn't terrible, but it didn't cover much that Designing with Web Standards by Jeffrey Zeldman didn't cover better. I would highly recommend Zeldman's book over this one. Zeldman's writing style is reads more quickly, and actually makes it fun to read. I'd give WSS a 5.5, and Zeldman's book a 10.

    --
    Software sucks. Open Source sucks less.
  9. Missed two of my favorites... by Anonymous Coward · · Score: 2, Informative
  10. Re:Not So Easy by Nurgled · · Score: 4, Informative

    The Perl bit is already written. You just need to write a set of Template Toolkit templates. I seem to remember from looking before that the way they are used in Slash is pretty obvious once you find the template files in the source distribution.

  11. Re:re standards by Anonymous Coward · · Score: 1, Informative

    The problem is that only browsers based on Mozilla code (Camino, Firefox, Netscape, etc.) have support for these standards.

    Opera and Konquerer-based browsers do as well. They have some minor rendering differences, but it's trivial to make things look identical across these. The trouble is that the dominant browser is crap. Still, it's easier to design for standards and tweak for IE than to design for IE and tweak for anything else.

  12. Some other XHTML/CSS references by SpaceTaxi · · Score: 2, Informative
    • Eric Meyer on CSS -- goes through several hypothetical projects that demonstrate techniques for laying out pages. I found ideas for navigation menus and sidebars a helpful start. Also, would have otherwise had no idea that you can specify a separate style sheet for printing!
    • Dynamic HTML: The Definitive Reference by Danny Goodman who will actually explain to you the difference between relative and absolutely position layers. Also, as per the title, this book is a great introduction for manipulating pages with Javascript and includes references for HTML, CSS, DOM and Javascript. A great resource, it perpetually sits open on my desk.

    Of course the most interesting way to learn the new standards is to practice coding and to look at how other folks have coded their sites. I think that what is interesting about XHTML/CSS is that there are several different ways one might go about coding a page to reveal the same layout. Its also interesting to see just how much you can manipulate what amounts to very simple HTML into something more complex and attractive.

    The challenge, however, is to come up with a finished design that has the same visual polish as those you might have chopped up from Photoshop or some other graphics program. Not to say that it is impossible to have a graphics heavy design using new standards. Rather, I have found that in working with CSS encourages a bottom-up process in designing a page starting with your code, while earlier Web design methods follow a more top-down approach, starting from a design comp.

    However, I think that the new standards also encourage a certain simplicity aesthetic. I think many Web folks are appreciating designs that aren't so clutered, that download and render really fast, and have built in accessibility and search engine performance advantages.

  13. Re:Ooooh... CSS! by marsu_k · · Score: 2, Informative
    Living in the future, are we? First of all, as you can see for yourself, Gecko's CSS2 support isn't perfect either. What's even funnier is the CSS3 link you posted - if you'd bother to read it yourself, you'd see that most of the CSS3 spec is currently a "Working draft", i.e. the spec isn't finished yet!

    Having said that, I'm looking forward to CSS3 as (AFAIK) it'll offer transparency support, that feature alone makes it worthwhile to me (yeah yeah, you can get variable opacity with current browsers using proprietary CSS. I'd prefer standards.)