The title of Jeffrey Zeldman’s book (Designing with Web Standards) says it all - this book promoted accessible, usable, search engine friendly web design and development through the use of XHTML and CSS while debunking the myths surrounding web standards. Zeldman is a well recognized name among web developers and designers - he’s the the founder of A List Apart, and co-founder of The Web Standards Project (WaSP). His writing is entertaining, witty, easy to read, and insightful - it’s very much like the content we’re used to reading at A List Apart. It’s also fair to mention that this book has been edited by industy experts and influencial writers like Eric Myer. Any developer that works with the web should read this book along with JavaScript: The Good Parts by Douglas Crockford.

Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page. The affliction dates back to the early days of semi-CSS-capable browsers and the many designers’ initially childish comprehension of how CSS works.
Alas, many have not yet outgrown that childish misunderstanding of CSS … Classitis is as bad in its own way as the <font> tag ever was; rarely does good markup require it … At other times classitis is exacerbated by a still more serious condition … divitis … Classitis and divitis are like the needless adjectives with wich bad writing is strewen. They are the weeds in the garden of meaning. - Jeffrey Zeldman, Designing with Web Standards

An example of markup wraught with divitis and classitis:

13 div elements and 11 classes for a single item. What a stench! :)  View this markup in action.

The equivalent markup disease free:

Cleaner, more meaningful, and with all the functionality of the former code. One div element and 3 classes for a single item.  ShamWow! View this markup in action.

Both of these markup snippets are visually and functionally equivalent. In the first example the divs, classes, and cryptic ids weigh down the page and pollute the meaning of the markup. In the later, a more semantic / structural approach is taken  Both these snippets were pulled from my attempts at the Google Web Developer Exercise.

Clean meaningful markup is the API that users and web crawlers consume - it’s important and easy to keep things clean, it just takes a little experience. Thank goodness for patterns like MVC that let us control our API (the markup).

What Is Semantic / Structural Markup?

Markup is “semantic” when tags are chosen according to what they mean. For example, tagging a headline h1 because it is the most important headline on the page is a semantic authoring practice. Tagging a headline h1 “to make it look big” is not. … I use the phrase “structural markup” to mean pretty much the same thing as “semantic markup.” (”Structural markup” takes its name specifically from the idea that the web document has an outline-like structure.) - Jeffrey Zeldman, Designing with Web Standards

Zeldman goes on to make many great points on why semantic markup matters, here’s my paraphrase.

Why Does Semantic / Structural Markup Matter?

• it helps make web sites more accessibile
• it provides a means to meet government mandatied web accessibility guidelines
• it’s a critical component for Search Engine Optimization (SEO) because the Google search engine is the biggest blind user on the web - Zeldman
• doing the right thing is the right way to do things - developers should have a sense of pride in being a craftsman :)
• did I mention Search Engine Optimization?

If you’re interested in learning more about semantic markup then view A List Apart’s source code, or read their many online resources: Topics: Code: HTML and XHTML.

MVC Public Service Announcement #6 : Modularity from EnvyAds on Vimeo.

Keep watching these videos here: http://www.railsenvy.com/tags/MVC

I did the exercise yet again (the third time) because my last attempt needed some improvements:

• it suffered from chronic classitis and divitis (too many classes, ids, and divs were making me itchy)
• it wasn’t really using semantic / structural markup (all the extra divs etc… cluttered my markup, and some of my class names like container-borders are non-semantic altogether)
• it performed poorly and wasn’t accessible (everything was being rendered in the DOM, there was no immediate rendered markup which kind of violated the idea of unobtrusive JavaScript, nor was it screen reader friendly)
• it wasn’t making use of any JavaScript libraries to abstract browser inconsistencies out of the code
• it suffered from my software ethnocentrism (my variable and object naming like GoogleExercise was mirroring statically typed languages and not the native language they were being written in)

Here’s my latest Google Exercise (addressing all the above concerns):
View this post outside your RSS reader to see it in action or view it here.

This attempt makes use of jQuery and uses 57 lines of JavaScript (almost 200 lines less from my last one).

You can view the code for this attempt here: google.contact.widget.js, index.html, google-contact-widget.css.

You can view the old code here: GoogleExercise.js, index.html, GoogleExercise.css.

If you think I can improve on my code then let me know. Oh yeah, and if you’re a recruiter from Google then hire me! :)

It feels like Web Standards have always just existed, but they’ve only been around since the 90’s. Today, they’re the default for cross-browser compatible web applications. However; some people still like to talk them down - fingers are pointed at ambiguities within the written specifications, imperfections, and various edge cases between browser implementations (most of which can thankfully be resolved through test suites and browser vendor collaboration). Today, if you’re not embracing Web Standards, then you’re missing a bigger point.

The importance of Web Standards lies in its unified language. Web Standards offer a common paradigm, a starting point, they’re intended to be built upon / extended, and (like everything else we’ve created as a species) they’re not perfect. Web Standards and the Object Paradigm (Object Oriented Design / Object Oriented Programming) share these similarities. Eric Evans describes the value of the Object Paradigm to be its widespread adoption, not its technical superiority:

Today, the object paradigm also has some significant circumstantial advantages deriving from its maturity and widespread adoption … Objects are already understood by a community of thousands of developers, project managers, and all the other specialists involved in project work. - Eric Evans, Domain Driven Design

On a similar thought Bill Bryson describes the dark ages of chemistry - before standardized conventions and the periodic table was formed:

chemists for so long worked in isolation, conventions were slow to emerge. Until well into the second half of the century … Chemists also used a bewildering variety of symbols and abbreviations, often self invented … Despite the occasional tidying-up, chemistry by the second half of the century was in something of a mess … [Mendeleyev] began toying with a way to arrange the elements … thanks to Mendeleyev’s invention [the periodic table], chemistry was now on a firm footing. - Bill Bryson, A Short History of Nearly Everything

Today, Web Standards are understood by a community of thousands of developers, designers, project managers, and most of the other specialists involved in web work. Web Standards are our firm footing. Web Standards aren’t about being perfect, they’re about a common language, about working collectively towards (or at least embracing) a goal. Web Standards are here to stay.