I had a very interesting and illuminating class with Molly Holzschlag (molly.com). The topic was Progressive Web Design, centering mostly on standards and CSS. Come on, don’t fall asleep already! Read on and you hear about the luscious 3-layer cake!

Molly Holzschlag‘s focus with the class was on the importance of standards (www.w3c.org) in web design and development. Being a W3C spokesperson/advocate, you can understand that she might be more academic than reality. But as the 2-day class progressed, it was clear how valuable using standards really can be. Now, it’s not that I (or any other designer or developer) *purposely ignores* standards, it’s just that, I had never really seen the value in it. And this was made pretty clear with her 3-layer cake analogy. The “cake” or site is divided into 3 layers; 1) the most important, the document, 2) the presentation layer, and 3) the behavioral layer.

The document is the content you are trying to communicate, the words. That basic document becomes an XHTML document. XHTML is stricter than standard HTML, with requirements such as all HTML tags must be in lower case, etc. There are some tough parts of it, like that all “&” must be deliminated, like “&” (even in included querystrings like, id=4&s=p). The point of this is to make the document as MEANINGFUL as possible, stripping out anything unnecessary. A good example is when you have:

< p >< a href=…link1… >< br / >< /a >< a href=…link2… >< /a >< /p >

which is basically a LIST of links, right? So, you convert that to a list:

< ul >< li >< ahref =…link1… >< /a >< /li >< li >< a href=…link2… >< /a >< /li >< /ul >

Looks like almost the same code right? Well, not exactly. The first one has layer 2 information (presentation) in it, with breaks and paragraphs, but, adds nothing to the semantics of the list of links. With example 2, it’s a list of links still, but to search engines and those 508 (ADA) visually-impaired visitors using screen-reading software, it now has added meaning, they know it’s a list of links. And, yes, search engines like it better too. I’ve had small test sites, testing out some of those SEO *tricks* that they say will help, and most don’t do much for very long. With this site (built with WordPress using W3C standards as much as possible), I’ve seen a clear indication that Google now likes this site and finds things easily. The content is more meaningful.

OK, layer 2, presentation. So, what about all those < font >< span > etc. tags you had in the document previously, what do we do now? Well, they go into CSS files. Yeah, CSS, you knew it would come back to bite ya, didn’t ya. If you are like me, you played with CSS years ago, found it really lacking in browsers, or just confusing, and promptly forgot about it. Well, it’s baaaack! 😉 If you haven’t visited www.csszengarden.com in a while, go back. (Or, you can buy Molly and David Shea’s book on it The Zen of CSS Design ) The idea with CSS Zen Garden is that, all of the various versions (and there must be hundreds), are built off the same document, but changing the CSS attached to it. But you say, “the images are completely different”. Yes, they are, but they are all just listed WITHIN THE CSS. Another words, within the layer 1 document, you add < div > tags that have *functional* meaning, such as < div class = “navigation” > then in the layer 2 CSS you specify all the goodies about that class, including images, colors, fonts, positioning, etc.

So, you’ve made the document meaningful as is, and the CSS has all the presentation information in it, what does all that work get you? Well, one of the most beautiful is, a complete site redesign by changing out your CSS file! That’s what csszengarden.com is doing, switching the CSS files on the document. Now, if you’ve ever had to work on a site that’s rather large and has all sorts of font tags embedded within it, or, even worse within the scripting language (such as within ASP or PHP code), you know how painful it is to do a redesign the old way. Find/Replace doesn’t work well because the tags don’t always open and close correctly (HTML is very forgiving, XHTML is not). With all the presentation in the CSS, drop in a new one, and get a complete site redesign. (Time to go home now boss, thanks! ;-))

The final layer is behavioral, and that deals with Javascript and things that happen on the client side. (Like that “learning experience” of DHTML, between rivals MS and Netscape! :- ) This layer still has some work to do to make it work better across browsers. In fact, the presentation layer also needs a lot of work, especially from IE6 or other, older browsers. Check: http://www.positioniseverything.net for tips on how to get CSS to work with different browsers. And http://www.w3schools.com has lots of tips on XHTML, CSS, and more. A good place to validate your XHTML document is here: http://validator.w3.org and for CSS try here: http://jigsaw.w3.org/css-validator .

So, there you have the luscious 3-layer cake of Progressive Web Design. If you get the chance to take one of Molly’s classes, do it, she covers a lot of really interesting topics!

Additional resources:
The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter) | Spring Into HTML and CSS