The difference between a mediocre and a good web developer


<div class="left-col">Content here...</div>


<div class="navigation">Content here...</div>


(Note: I’ve used my fair share of left-cols, so this is no way meant to be elitistic.)


  • Phil Sherry says:

    You should really point out that calling it "navigation" is only really applicable if it's holding navigation elements. Or is knowing that the difference between a good and a great web developer?

  • @Phil, I would say that knowing that is the difference between a mediocre and a good web developer. You shouldn't have to be a great web developer to know the difference.

  • Teddy says:

    Robert have you applied KISS to this blog entry? πŸ˜‰

    I'd say by watching the source code written by different people you're code is very often true. But I think one of the main differences between a medicore and good code monkey is the level of understanding for the markup itself. Understanding the true concept of separation between the layers.

    Hmm, I've been sharing my thougts a lot this morning… most have something to do with the fact I've not even seen a coca cola can for the hole weekend :/

  • Siegfried says:

    @Jeena: "Mittelmäßig".

  • Matt Round says:

    Surely a really good developer uses <code>id="navigation"</code> if it's a unique area of the page? πŸ™‚

    (especially if using a 'skip to navigation' link)

  • Nick Cowie says:

    I am with Teddy, a great web developer would use < div id="navigation"> Navigation here…

    I have more than a few class="left-col" in my past.

  • Martin says:

    As a mediocre amateur (ie. I've only done my own site), it could be down to forgetfulness. In my case anyway.

    Mr <code><div class="nav-col-to-left-of-content-just-below-the-header"></code> πŸ™‚

  • Lachlan Hunt says:

    An exceptional web developer would not over use divs:

    <code><ul id="navigation">…</code>

  • so i shouldn't use flash for the navigation anymore? πŸ˜‰

  • Kalle says:

    Lachlan Hunt: True, but what if the navigation consists of several menus (lists)?

  • Jens Meiert says:

    <blockquote cite="#comment-8278">

    An exceptional web developer would not over use divs:

    <code><ul id="navigation">…</code>

    …and since he knows that <code>nav</code> is quite understandable as well, he'd even use that as the ID. Except he's exceptionally exceptional and uses no classes and IDs at all, since a) his site doesn't use other unordered lists, b) is suited to do it via context, or c) it's 2015 and CSS 3 selectors are supported in all major user-agents. Nah, then he already uses <code>nl</code> elements for stuff like that.

    However πŸ˜‰

  • Robert Nyman says:

    Thanks for your comments, very good and interesting feedback and discussions!

    The basic idea was just to convey the importance of semantic markup, in this example regarding class names. How to choose a good class name that isn't dependent on the layout of the web site, and which will also convey meaning to other web developers and search engines.

    Did you like this experiment? If that's the case, I have many more of these… πŸ™‚

  • Nick Cowie says:

    <blockquote cite="Robert">Did you like this experiment? If that’s the case, I have many more of these…


    I have other bad habits I need to lose

  • Robert Nyman says:


    Good! πŸ™‚

    Let's see what I can dig out in the future then. πŸ™‚

  • Gerald Cameron says:

    More please!

    It never hurts to touch base with the fundamentals.

  • Stephen Hill says:

    <blockquote cite="Kalle">Kalle: "Lachlan Hunt: True, but what if the navigation consists of several menus (lists)?"

    I Would suggest using nested lists:

    <ul id="navigation">


            Menu 1











            Menu 2











  • jason says:

    An efficient designer would use:


    This way col is reusable.

  • jason says:

    hmm… the code tag didn't work they way I thought it would in my previous post.

    it was supposed to look like:

    <code>div class="col left"<code>></code>content<code>/>

  • Robert Nyman says:


    The idea is to have class names that aren't in any way dependant on where it's supposed to be in the layout (for instance, just imagine the web page without CSS). Therefore, I don't' think left is a good name.

  • I've had the pleasure of outsourcing many small css template projects out to CSS developers around the world. Bad id and class naming is the first sign of more scary code to come.

  • Robert Nyman says:


    Absolutely, it's usually a good sign of where the level of the web developer in question is.

  • Rowan Lewis says:

    Im going to argue against the ainti-specific-classname rule, why? Well take this as an example:

    I was working on a website which made use of placable "blocks", which would consist of a div, with a header and some content. Each block is placed either to the left or to the right of the content. Now, because a block can be changed position by a user of the website, it only makes sense to attribute it with a "left" or "right" class:

    <code>< div id="BlockName" class="Col Left">…</code>

    Btw, if I remove the space in the above line between the < and the DIV tag, you get the following code in the preview: <code><div></code>…

  • Rowan Lewis says:

    Well, what do you know, its only broken in the preview, but here it is:


  • Robert Nyman says:


    Then the class names are only applicable to the actual layout; class names should be layout independent. Imagine the the web site without CSS. Or the way Google or Technorati sees it. Then it will definitely not be to the left or the right.

  • Rowan Lewis says:

    Right, I understand the reasons behind it, however in practice it was completely impractical.

    If not left and right what else do you call them? The website changes frequently, some users want the content on the left and some on the right, what other choice is there but to give them specific left and right class names?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.