Good to Great

In the book Good to Great, Jim Collins asserts:

"Good is the enemy of great."

I read the book a few years ago and that statement resonated with me then as it does today. Over the past few months, I've had the opportunity to work with other designers, critique other designers' work, have my work critiqued, defend my own design decisions, defend web standards and see up close and personal examples of good design and examples of great design.

What I'd like to do, in a series of forthcoming blog posts, is to talk about some areas in which designers can move from merely "good" to truly "great". With your help via the comments, I expect to learn some things along the way, too. Before I begin, let's talk definitions. I'm using the term "designer" very broadly here. For purposes of discussion, let's say "designer" applies to your typical web designer / developer / front-end developer / web producer- type "web person". Also, to make sure we're all on the same page, let me be clear that in this discussion that good does not mean bad - obviously. This is not a good vs. evil comparison. Good is good, but who wants to be good? Don't we all aspire to be great? I hope so, but I digress. Let's jump in to Part 1 of this series.

Good to Great, Part I: Good designers write valid (X)HTML, great designers understand the value of semantic markup and code accordingly.

This is a subject near and dear to my heart, because I just happen to love (X)HTML. I love the order, logic and structure that can be harnessed with (X)HTML. But this isn't about a Utopian approach to writing (X)HTML, its about doing what makes sense and using the markup language to provide a logical structure and meaning to web pages. Writing markup that validates perfectly against the W3C specifications does not make one a great designer. Indeed, this goes further than mere code validation.

In my projects, I definitely try to ensure that my code validates - in most cases. But I could write perfectly valid (X)HTML that is junk in terms of achieving a semantic structure for a web page. A great designer is able to write valid code, but also takes it a step further and writes efficient, well-structured, easy to read, semantic markup that enables future flexibility, lends itself to accessibility and reduces page weight as much as possible.

Let me illustrate below two ways to code the same information:<div class="headline">My Favorite Music</div>
<div class="text">Following is a list of my favorite bands (or artists), sorted alphabetically:<br />
Cofield<br />
Coldplay<br />
Collective Soul<br />
Frank Sinatra<br />
Switchfoot<br />
The Fray<br />
Third Day<br />
Tim McGraw<br />
U2<br /></div>

<h1>My Favorite Music</h1>
<p>Following is a list of my favorite bands (or artists), sorted alphabetically:</p>
<li>Collective Soul</li>
<li>Frank Sinatra</li>
<li>The Fray</li>
<li>Third Day</li>
<li>Tim McGraw</li>

Both of these code examples are valid (X)HTML, but the second one is more semantic, making use of appropriate tags to create meaningful relationships between the pieces of content. Which is the better code? Well, the critics would say they are the same - that you get the same result visually in the browser. But a great designer knows that what lies beneath the visible is just as important as what the users actually see.

So what's the big deal?

Have you ever had a conversation with someone that liked to use the word "thing" too much? For example, "Hey, could you hand me that thing over there? Its there, next to the box thing. No, not that thing, the other one. Thanks." If you've had such a conversation, you'll remember that while you were probably able to understand them in the end, it was not as easy as if they would have used more descriptive words. To me, non-semantic markup is the same way. Code like <div class="title"> gets the job done on the surface, but does not use the tags that were meant for describing a heading, which makes it much harder to understand, by humans and by machines that will read the code.

I think Joshua Porter and Richard McManus said it best in their article, written for Digital Web Magazine:

"Practically speaking, however, semantic markup is markup that is descriptive enough to allow us and the machines we program to recognize it and make decisions about it. In other words, markup means something when we can identify it and do useful things with it. In this way, semantic markup becomes more than merely descriptive. It becomes a brilliant mechanism that allows both humans and machines to “understand” the same information."

Therein lies the power of semantic markup. Good designers writing valid, yet non-semantic markup are able to put a check in the "valid code" box, but they are missing out on the flexibility and forward-compatibility that is attained when great designers build a website with semantic, well-structured (X)HTML.

So do you have what it takes to be a great designer? You're on your way if you understand the value of semantic markup and practice writing meaningful, rather than merely valid (X)HTML.