Grok

My first article for A List Apart, How to Grok Web Standards, has gone live with issue 230. I’m giddy with excitement, as this is a fairly momentous event in my career. ALA has been instrumental in my growth as a web designer-slash-developer, and to think that I have progressed to the point where I can perhaps offer some guidance to someone else is enough to swell the ego to Hindenburgian proportions.

I discovered ALA around 2003 while reading Jeffrey Zeldman’s seminal masterpiece “Designing With Web Standards.” As has happened to so many others, it was DWWS that finally made me sit up and pay attention to web standards. Prior to that I was using tables to lay out my pages and CSS was only good for removing underlines from links. But Zeldman’s book is a wakeup call for presentational designers. It’s as much about the “why” as it is about the “how.” I took it upon myself to learn more about the mysteries of CSS, and it was zeldman.com and ALA that were my gateway.

I followed links and discovered Mezzoblue, Simplebits and StopDesign (I had seen and enjoyed the CSS Zen Garden, yet oddly had never visited Dave’s home site, Mezzoblue, until following a link from Zeldman). From there the linktrail led me through the broad network of standards-oriented blogs: Andy Budd, Shaun Inman, Jeremy Keith, Jeffrey Veen, Molly Holzschlag, Ethan Marcotte, Richard Rutter, Joe Clark, Dunstan Orchard, Andy Clarke, Eric Meyer, and many many more names that deserve dropping. Every new site I discovered brought new links of its own to expand the network of know-how, and it was through reading the writings of these people, these bright luminaries of semantics and style, that I found a new passion.

It began with technique. Faux columns, elastic layouts and horizontal navigation lists with sliding doors were handy reusable design patterns, tricks to employ to make my pages look good. But gradually came the realization that this whole “separation of content from presentation” hullabaloo was more important than mere technique; it’s the very cornerstone of the web medium.

I realized that the web isn’t really visual by nature, it’s merely a visual representation of the underlying ideas. The web is a conduit for the transmission of thoughts. Thoughts articulated in words, made portable by markup and given presence through style. If any one of those aspects of the medium takes precedence over the other two, it’s the thought behind it that suffers the damage. I developed a new appreciation of HTML as nothing more than markers to denote the meaning of text. It’s the text that really matters and the ideas behind it, the message driving your content, that thing that something about something is about. Presentational markup hurts content, and design that harms content is bad design.

Until a few years ago, browsers’ support of CSS wasn’t strong enough to make CSS design practical. We resorted to table hacks because there were no other options. But today’s generation of browsers, bugs aside, support CSS well enough that we needn’t keep designing pages the way we did in the olden days. We must unlearn what we have learned, readjust our attitudes and start doing it right. When I see the work of a designer who still uses tables and font tags, it just broadcasts loud and clear that they haven’t updated their skillset in half a decade. There is simply no acceptable excuse for designing web pages today the same way we did in 1999.

So why are there so many practicing designers — those who would call web design their profession — who still haven’t jumped ship? For some it’s just a symptom of ignorance, a lack of exposure to the books and blogs that have been preaching web standards methodologies. Those people need to be welcomed with open arms, offered understanding and guidance on their new journey. But others willfully resist, dismiss CSS as “too hard” and all this web standards mumbo jumbo as hype. They’re comfy with the sloppy, inaccessible presentational pasta that has cluttered the web for far too long. After all, it seems to get the job done. Everything looks just as it should, right?

I couldn’t comprehend that mindset, how anyone could learn about web standards and still reject them by choice. I finally figured out what the problem is; their brains just don’t work right.

A strictly visual thinker is not concerned with semantics and accessibility. They’ll treat a web page as a picture of a web page, and commit whatever HTML sins are required to bend pixels to their will. They don’t appreciate the significance of markup as a support system for content, don’t understand that every presentational tag and attribute is an obstacle hindering the movement of information. They’re thinking like an artist, obsessed with the experience while neglecting the message and the mechanics. Understanding web standards — not just how they work but what they mean — takes more than memorizing techniques for presentation. A web page serves a purpose above and beyond surface aesthetics.

Nearly two years ago I started drafting a post on this topic, exploring the mentality of standards-aware design and the thought process that goes into it. It’s difficult to articulate without a lot of hand-waving and abstraction, so the post lamented in draft stasis, occasionally being dusted off and reworked before going back into the locker unfinished. When Krista Stevens contacted me about writing something for ALA (on a reference from Aaron), I decided it was high time I brought that post out of storage and gave it to the world. I hope someone out there can glean some nuggets of truth and inspiration from How to Grok Web Standards and will use that to further the advancement of the web as a whole. I’m honored to contribute to a publication that has contributed so much to me.