The Road to Version 2.0
There wasn't much wrong with this site in its previous incarnation. It was a simple, clean design. The XHTML was good. It was accessible, to a point.
But I was bored with it. Oh so very very bored with it. It happens a lot with me - I'll finish a design, ship it out and will have developed a dislike for it within a few days. Its why my personal sites have a tendency to reinvent themselves every once in a while…
And so it begins!
So on went the headphones. Fire up iTunes, find a playlist full of loud music, then click on the TopStyle icon. In we go…
The revamp began in the XHTML code. I had completely hand coded the site the first time around, so it was pretty clean. But I've learn a lot since then, in terms of XHTML and CSS. This time the code is even more minimalist than it was the first time around. The XHTML is stripped right back to the content, and just about all of the presentational stuff now lies in the CSS. As a result the site is more Accessible and Search Engine Friendly (ooh look - buzzwords!). In this case, less is most definitely more.
High Contrast Pastels?
With the clean-up completed, it was time to fire up Photoshop. iTunes was pumping High Contrast, iLs and a variety of other high tempo music into my skull, so how I came up with such a calm, restrained, pastel coloured template I'll never know. But I did and I liked it.
Translating it to CSS proved to be a bit more challenging. I used a styled h1 for the main header image - its the right tag for the job really. Next I got the main content div nailed down, and put it in the right place. Then came the footer - again, not a problem.
Then came the tricky part. How on earth was I going to put the navigation where I wanted it? position: relative; seemed ideal, except that it doesn't take content out of the document flow, so a big gap was left where it would otherwise have been. What I really needed was position: absolute; but without a left value. I didn't think such a thing would work, so it didn't occur to me to try it until I had done a lot of faffing around trying other things. In the end it was as simple as putting:
#navigation {
position: absolute;
top: 240px;
}
…which put the navigation right where I wanted it.
Unintentionally Similar?
Its at about this point in the proceedings that I logged onto Dale C's Oxygen Kiosk. He's redesigned again! Its a fixed width colunm with a drop shadow either side. There's even a gap below the header image. Both designed at about the same time without any knowledge of the other. It must be true what they say about great minds thinking alike.
Tidying Up Loose Ends
With all of the main elements in place it was just a case of tidying everything up. I thought the h2 tags looked a bit boring as a plain cream box, so I toddled off to Photoshop again and knocked up a background image with a couple of quotation marks in it. A big of padding later and the h2s look 100% better.
Its little things like that which make the site. Another was leaving the relevant navigation link highlighted when you enter a section of the site. To do this, I set a class on the relevant link, like so:
<a href="/articles/" class="currentsection">
…and then set up the relevant class in the CSS like so:
a.currentsection {
background-color: #F0F3E7;
font-weight: bold;
text-transform: capitalize;
background-image: none;
}
Its a simple enough trick, but it finishes off the site a treat.