Until earlier this month my personal website was little more than a holding page; it had been that way for 9 years. Since 2004 I designed dozens of other websites, but somehow never got around to doing my own. Recently sorting through my archive and backup disks, I discovered so many web design folders, some of which I’d completely forgotten about…

In no particular order, some of the sites I have designed down the years. There’s a pang of nostalgia in seeing the particularly early ones using frames and scroll bars. Wow. Crazy how quickly design for the web has developed. And strange to realise—despite never calling myself a web designer—I designed, coded and hosted over 50 different websites.

It’s a bizarre turn of events, because I was one of the first people I know who had a personal website. That was around ’96 and it was hosted on GeoCities (remember that!). I fondly recall creating mouseover images and image maps in JASC’s PaintShop Pro, coding the navigation so when you clicked on buttons things went ‘ding’ or played little sound-clips. (I never had blinking or flashing text on my site—I was far too classy for that.) All this awe and wonder was created on—drum-roll please—a Pentium MMX 166MHz processor; a pretty big deal at that point. Amazing. I luxuriously furnished the PC with a SoundBlaster AWE 64 Gold (yes, that’s right, GOLD) sound-card, and dutifully created MIDI files in Cubase to—wait for it—embed as website background music.

Good ol’ days

In ’98 I remember a friend spending an unimaginable amount of money on an nVidia RIVA TNT graphics card (these days, the average fridge-freezer has more GPU power than that) and I remember spending a similar fortune upgrading from the SoundBlaster Gold to SoundBlaster Live! (ditto) and editing audio to—you guessed it—embed in the background on my website, thusly:

<bgsound src="../bgmusic.mid" loop="-1">

The 8th cardinal sin. Mmmm. Seeing the above code makes me feel all warm and fuzzy inside. Just what every teenage web designer in the ’90s wanted for his website: a nauseating and endlessly looping background MIDI file. (Is it too late to apologise?)

And so it was between 1996 and 2004 I redesigned my site time and time again: in the early ’00s moving to self-hosting and learning the dark art of cPanel, WHM and DNS management; dipping my toes into the murky waters of Adobe Director, ShockWave and Flash (which I soon learned to despise); and eventually discovering the joys of cascading style sheets, java and CMS. I began designing sites for friends, family, friends of family and ultimately colleagues and strangers. You could say that up until 2004 I was fairly web-design savvy. I continued designing sites for myself and others over the next few years, but I knew I was falling behind. HTML spec was developing at a phenomenal rate, there were new browsers springing up every five seconds, mobile devices to cater for… I wasn’t keeping up with best practices, my coding was out of date, and cross-browser compatibility was, well, incompatible.

I was at a point where I had ideas, but no clue how to execute them. I would see other websites using nice typography, subtle Flash-free animations, dynamic sorting, rounded borders, glowing links, smooth scrolling, but how to incorporate these things remained a total mystery. I was copy-and-pasting like nobody’s business, hashing sites together from fragments of code. It was messy and ultimately very difficult to maintain, becoming a total pain to design and implement. The learning curve now seemed exponential. So, I decided to call it quits and simply start using templates.

Yep. The steady rise of Web 2.0, HTML5 and CSS3 had rendered me well and truly baffled and in the short space of 5 years I had gone from being quite clued-up to expertly clueless.

Wayback Machine

But earlier this year I realised the time had come to brush up on my skills. Around Christmas time I rediscovered Wayback Machine, a fantastic resource which allows you to visit archived versions of websites. Apple.com in 1999 is good for a laugh—7cm thick 3.5 Kilo PowerBook with built-in 33.6 Kbps modem anyone? Anyway. I was sort of surprised to discover that for 5 years, my website was a single page, which read little more than:

Dear visitor,
I’m hopefully going to get around to sorting my own website this year…

Fast forward to 2009 and it reveals:

I’m hopefully going to get around to sorting my own website this year…

2010:

I’m hopefully going to get around to sorting my own website soon…

2011, 2012, 2013:

Dear visitor,
I’m hopefully going to (…) etc.

You get the picture. There I was. A musician without a website. What the hell? How did that happen? I went from being the first musician I knew to have a website, to the only one I knew who didn’t. It was time to bite the bullet and do something about it. I had some specific ideas about what I wanted, but no template fit the bill. I knew I just had to knuckle down and learn to code.

Progress has been slow, the learning curve even more sheer than I expected. 3 days to get a header menu to align as I wanted. 4 days to work out how to get a media player working across all browsers. That sort of thing. If you’d have asked me last month what a polyfill was, I’d have probably said ‘something you use to patch up a hole in the wall’. Rem units? Modernizr? HTML5 Shiv? Media Queries and Responsive Web? GitHub? The expression drawn would have been well and truly blank. Today, these words are as familiar to me as a comfortable pair of slippers.

Typography, layout & code: everyone needs a bit of TLC

One of the most exciting things about designing a website in 2013 is that there is finally the ability to create subtle, type-centric websites which don’t totally pale in comparison to print. Look at a well typeset turn of the 20th Century book; it just exudes beauty. No fancy tricks, but human touch, attention to detail, beautiful layout and typography, with minimal but thoughtfully chosen colours.

Photo ©2013 Douglas Whates

For the web, we now have some sort of control over typography. Sure, it’s not perfect, there are still bugs and unanswered questions (in a responsive design, how do we deal with orphans and widows, for example), but it is coming of age. And I’m so happy to see that most of the major browsers are now supporting ligatures. I can finally design a site which isn’t totally let down by mediocre looking type.

Another plus is the industry and consumer’s move towards screens with higher DPI. This website takes full advantage of that—the higher res your screen, the more gorgeous this site will look. Reading content on a digital device is starting to become almost pleasurable. Almost.

As ever, the real challenge has been trying to ensure the site functions across all the various browsers on all the myriad of operating systems and devices. After a lot of frustration and messing around, I decided to ditch IE6 and IE7 support. So for all browsers except those ugly brothers, this site should look good, or at the very least, work. This doesn’t mean that it will look exactly, pixel-perfect, the same (I have learned that is not a possibility or even particularly desirable), but it should flex, re-size and otherwise accommodate to whatever device and browser combination you’re using.

Although all the HTML and CSS is hand-coded, Javascript/jQuery is still something of a mystery to me. But with a bit of judicious copy-paste-tweak things seem to be working. A big thanks to the guys behind Isotope, MediaElement and TypeKit. I’m not going to say you’ve made it easy, but you’ve made it possible. On the CMS side of things, I’ve gone back to using the mighty TextPattern—a much more mature program now, very clean, bloat-free and flexible.

All that effort for this!?

I know what you’re thinking. Is this it? After 9 years without a site, this is the best you can do? It seems so basic. Where’s the glitz and glam, huh? Why can’t I ‘like’ your page? My answer: in a web full of like-buttons, share-counts, tags, adverts, comments, subscribe requests, and other distractions, I think it’s kind of nice to strip it all away. I’m tired of browsing websites where the last thing I read is ‘don’t forget to leave your comments’ or ‘remember to like us on Facebook’. For certain websites, certain people, okay, but Dulux Paint (468,160 likes · 17,000 talking about this)? Weetabix(147,657 likes · 31,867 talking about this)? McDonald’s (28,574,476 likes · 250,841)? Pampers (1,625,812 likes · 52,613 talking about this)? I’m not making these figures up. It’s a sad state of affairs.

So simplicity and de-fuzzing the fluff was important. And if I’m tired of seeing inappropriate social media links, I’m equally weary looking at stuff trying to be stuff it isn’t. I’m aware that it’s suddenly hip to be taking a flat, anti-skeumorphic approach to web design (well, all UI design, I guess), and in some ways I’m glad to hear it. But it seems not so much a design innovation as zeitgeist; a product of the opportunity designers now have to exploit long-standing principals of design and apply it to the web; to focus on layout and type over drop-shadows or photo-realistic backgrounds; to allow the typography to set the mood and content do the talking.

And here it is. Ta-daa! A work in progress, but already pretty in black, white and blue. Now I just need to add some content.