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>
<ul>
<li>Cofield</li>
<li>Coldplay</li>
<li>Collective Soul</li>
<li>Frank Sinatra</li>
<li>Switchfoot</li>
<li>The Fray</li>
<li>Third Day</li>
<li>Tim McGraw</li>
<li>U2</li>
</ul>

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.

No Comments

  1. Gianluca Negrello says:

    Damn Chuck, I’m a “great” designer ;-)
    Good post!

  2. Andy Knight says:

    All I knew was non-semantic code until the summer of 2003. I had gotten my hands on a book called *Designing with Web Standards* by Zeldman. When my sweet wife was awake in the middle of the night feeding our newborn son, I sat up with her with a flashlight reading this book, so I wouldn’t feel too much like a louse while she was up doing the hard work. That’s when the lights came on for me.

  3. Alan Ortego says:

    Semantic code also allows you the pleasure of being more efficient with your work. More semantic the code the less CSS that you have to write as I have begun to find out in my transition from just a developer to an all-in-one web person. =)

  4. Colin Williams says:

    Shouldn’t this be “good coders” and “great coders,” or am I being too picky about semantics? I don’t see what markup has got to do with design.

  5. admin says:

    Colin, you could look at it that way. Please note that I said I was using the term “designer” loosely and defined a designer as possibly more than just someone that does graphic design. You could be a web designer and write code, right?

  6. Colin Williams says:

    Must’ve scanned over your aside about the term. And I am a designer that writes code, I was just lookin for a fight!

  7. Pat Thornton says:

    Very nice post. I wish more people wrote code like that.

    I disagree, however, that the two codes are the same and would produce the same result. Using an unordered list with list items gives you precise control over the spacing between the items. Using puts you at the mercy of the browser and its rendering engine.

    Further, if you ever wanted to change how that list looked, it would require a lot more work with the first example than the second. Ah, the power of CSS.

    ~Pat
    http://www.patthorntonfiles.com/blog

  8. Dennis says:

    Great article. Funny thing was my old boss used to use this phrase a lot and for the most part I thought he came up with it. Guess not, lol.