Revamp project: The difference between markup and good markup
When I first started working at my current job, I was immediately given responsibility of the entire company website. All future updates, content additions and edits were to go through me. It took a while for me to get familiarized with the markup and CSS structure, and there’s a specific reason why.
The website was built on a (kind of) 960 grid system, or at least based off of the idea of it. ‘This will be easy as pie’, I thought, and started digging around in the markup and CSS, trying to get to know it a little bit before I’d be sent work orders to add, edit and remove both content and layout components. And the more I dug around in it, the more horrified I got. I’m in no way trying to disrespect the person who wrote this, but my <head>, <body> & <soul> started crying when I saw it all. Pun intended.
<div id="wide-content" style="padding-bottom:70px; margin-bottom:0px; background:url(images/bg-branches.gif) no-repeat bottom center;">
<h1 style="font-family:Georgia, Helvetica, Sans-serif; font-weight:normal;line-height:1.5em; font-size:30px;">
[Headline went here]
</h1>
<div class="wide-content-tagline" style="margin:0;">
<h2 style="font: 16px Georgia, Times, serif; font-weight: normal;">[Lorem ipsum dolor <em><strong>sit amet</strong></em>, <em><strong>consectetuer</strong></em> adipiscing <em><strong>elit</strong>]</em>.
</h2>
<br /><br /><a href="learnstuff"><img src="images/button-learn-more.gif" width="152" height="43" style="" /></a>
</div>
<!-- end wide-content-tagline -->
</div>
<!-- end wide-content -->
<div id="wide-content-3-col" style="margin-top:0px;">
<div class="wide-content-3-col-column" style="">
<a href="category1"><div class="icon-business-icon1"></div></a>
<a href="category1"><span>[Category 1]</span></a>
<p style="text-align: center;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<!-- end services-col -->
<div class="wide-content-3-col-column" style="" >
<a href="category2"><div class="icon-business-icon2"></div></a>
<a href="category2"><span>[Category 2]</span></a>
<p style="text-align: center;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<!-- end services-col -->
<div class="wide-content-3-col-column" style="background:none;">
<a href="category3"><div class="icon-business-icon3"></div></a>
<a href="category3"><span>[Category 3]</span></a>
<p style="text-align: center;"><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<!-- end services-col -->
<div class="hr-break" style="background: none; margin-top: -70px;"></div>
<div>
<div class="wide-content-3-col-column" style="margin-bottom: -100px;">
<p style="text-align: center;"><a href="subpage1">» Learn more «</a></p>
</div>
<div class="wide-content-3-col-column" style="margin-bottom: -100px;">
<p style="text-align: center;"><a href="subpage2">» Learn more «</a></p>
</div>
<div class="wide-content-3-col-column" style="margin-bottom: -100px;">
<p style="text-align: center;"><a href="subpage3">» Learn more «</a></p>
</div>
</div>
</div>
<!-- end wide-content-3-col -->
I’ve changed some attributes and content to make this code a little more anonymous.
This is the markup for – and bare with me now – a heading, a tagline and three icons with text underneath. What?
First off, the inline styles made me shiver. Secondly, the "wide-content-tagline" class ticked me off, having a containing <div> around a perfectly good <h2>. Wait, correction – the whole idea of prefixing all layout classes with "wide-content-". There were no "narrow-content-" classes, or components, or anything narrow at all on the entire website. Made no sense what so ever. I mean, just because I drink my coffee black, it doesn’t mean I’d name my coffee’s class ”black-coffee-cup” — I’d just call it ”coffee-cup”. The same goes for this markup.
On a related note, the semantics of this entire markup continues to kind of baffle me. I mean, "wide-content-3-col-column" sounds weird. It’s supposed to say ”I’m a column in a three-column row”, but instead it’s saying ”I’m a three-column column (?) who lives in a wide content container”.
And to put the cherry on top, the code indentation were either non-existing or wrongfully executed (and space-indented, yuck).
The sad part is that the design, the visual part, the side of the page that regular people see each time they come visit the website is a real beauty! It’s elegant, classy, using color with wise moderation in the exact right places, and is an awesome visual buffet of eye-goodness. This designer really knew what he was doing all the way, until the markup were written.
My solution? To rewrite the entire markup and CSS, and add some discrete visual effects simply to make this fantastic design even more… fantastic! This next code block shows my take on the markup, which does the exact same as the above one did, only with an additional headline picture and one extra category + icon.
<div id="front" class="columns"> <div class="column-duo"> <img src="images/frontpicture.png" alt="[Headline picture]" /> </div> <div class="column-duo"> <h1>[Headline went here]</h1> <p class="excerpt">Lorem ipsum dolor sit <em><strong>amet</strong></em>, consectetuer <em><strong>adipiscing</em></strong> elit.</p> <a href="learnstuff"><img src="images/button-learn-more.gif" alt="[Learn stuff]" class="learn-more" /></a> </div> </div> <div class="columns"> <div class="column-quadri"> <a href="business#category1"><img src="images/icons/category1.png" alt="[Category 1]" /></a> <h2><a href="business#category1">[Category 1]</a></h2> <p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> <div class="column-quadri"> <a href="business#category2"><img src="images/icons/category2.png" alt="[Category 2]" /></a> <h2><a href="business#category2">[Category 2]</a></h2> <p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> <div class="column-quadri"> <a href="business#category3"><img src="images/icons/category3.png" alt="[Category 3]" /></a> <h2><a href="business#category3">[Category 3]</a></h2> <p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> <div class="column-quadri"> <a href="business#category4"><img src="images/icons/category4.png" alt="[Category 4]" /></a> <h2><a href="business#category4">[Category 4]</a></h2> <p><em>Lorem</em> ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div>
First off, I made a universal class called "columns", which could contain column rows of four different types – "column-uni" (1 column), "column-duo" (2 columns), "column-tri" (3 columns), and finally, "column-quadri" (4 columns). Secondly, I switched the whole <div><h2> ordeal to a simple <h1> with an accompanying <p class="excerpt">, the latter one I also made universal, since excerpts were used at several places and pages on the website.
40 lines of code instead of 52 for the same layout block, despite the fact of two additional columns. When you take care of CSS where it belongs (in a separate stylesheet), name your classes appropriately, and use some sensible code indentation, you eliminate lots of problems and increase readability.
Finally, I could breathe again while swimming in all this code. Easy? As pie.
