Presenting v6
Welcome to the 6th version of this site since its online debut 8 years ago.
My previous design lasted for almost half of that time. Despite its shortcomings (lack of a feature-rich CMS) and obvious design flaws, and given the amount of recognition that it received, I became hesitant to change it much. Until the waves of spam attacks began.
Since my blog was running on a bespoke system, it became increasingly difficult and time-consuming to manage, which partly explains why I haven't been posting as regularly.
So after a tricky data migration and clean-up (the volume of crap I've written in the past 6 years is embarrassing), a tiresome metadata capturing process (adding titles and tags to 770+ posts), and a couple of design revisions later, this blog has undergone a complete overhaul and is now powered by WordPress 2.5.1 with a super collection of plugins.
I had a couple of goals for this new design to improve on my previous one:
- Readability was top of the list. I ignored all instinct saying that bigger text is less aesthetic and am now happily using a large font size for primary text content. I've decreased the number of words per line, and colour contrasts have been tested to meet the W3C's accessibility guidelines. But I'd also love to hear your honest feedback.
- I actually started off with a white background in mind, but never quite got it right in any of the conceptual designs and ended up with what you see now. I quite like it, but it still feels unfinished in places - especially if you compare the home page to the rest of the site, so I might work on it a bit more.
- Another goal was for the design to be more elastic and scalable, ie. by adjusting your browser's text size, the grid remains intact while page elements resize accordingly. I still need to make a few tweaks to get this right.
I've adopted a progressive enhancement strategy:
- The behaviour of this site is designed to downgrade - disabling JavaScript doesn't numb any functionality. I'm using the jQuery library - sorry mootools, I gave you a good chance, but I'm just not that into you!
- The presentation of this site is 100% contained in external CSS files - the way it should be.
- The better your browser, the better this site will look. I'm using PNGs with alpha transparency for all images. For the 10% of you visiting my site with IE6, you get crappy JPGs. I'm not going to use ugly PNG hacks that are too limiting in any case, so may I suggest that you get a real browser.
Some other big changes worth noting:
- You might have already noticed my new logo in the header, which I redesigned earlier this year.
- Permalink and RSS feed URIs have changed, but permanent redirects are in place, so hopefully there won't be any hiccups. Please let me know if you experience any weirdness.
- If you're subscribed to my RSS posts feed, you can now also subscribe to comments, or individual posts.
- I have a tag cloud! I think this is the most efficient way to navigate a blog. A lot of designs - my previous one included - use a calendar view or lists of months and years, which don't engage or captivate. Tag clouds provide a quick and accessible overview of the blog's content, so fare much better. Together with the "Related Posts" list on individual post pages, these two features have really shaken the dust off my archive.
- I have a blogroll! If you're linking to me and you're missing from the list, please let me know and I'll hook you up.
The rest of this site has also undergone some big changes (most noticeably the new "splash" home page and omission of my "weblob", "projects", "words" and "links" sections), but I'll leave that for another post.
An appreciative hat-tip to Grant for his awesome photography on the home page, to Craig for his Flash expertise, and to Avi for his blog icons.
- leave a comment
63 Comments
Love the new look! Good job!
(although I don’t know if I like the font/text on the submit button, but that is nitpicking :P).
Love the new look. I’m impressed with what you’ve done with WP.
Superb work, my friend. I’m in awe of what you’ve done; can’t fault a thing – you’ve achieved all of your re-design goals. I’m sure Jacob N, Eric M and Zeldman would all give you a thumbs-up. :)
Like it so far, though its fundamental change. With your expertise you might give the popularity of Wordpress another kick. Have you considered a “How you enable Wordpress to love you” forum? The few times I’d to customize Wordpress themes for clients always made me think WTF.
Absolutely love it! There are tons of incredible little cms additions that are great and make this design stunning! B-e-a-utiful.
Nice work- I like the way you’ve bent Wordpress to make it look so fresh. I would have suggested you went with Drupal as a CMS (we sorely lack leet designers) but hey….
Wow.
This really does rock! A couple of points:
- The background lends a really good amount of depth, I don’t think white would’ve done the same (although I guess if gradiented it might have). I like it.
- Grey and black together is timeless.
- The list bullet hover “light-ups” are a nice little touch.
- Is there any particular reason you went with flash for the main nav besides the fading (which is another nice touch)?
Overall, the colours work really well, and together with the text size contribute to very good readability.
I like it :-)
Great design, very jealous!
Can I suggest that you change the hue of the search box slightly to make it a little more obvious?
Hey Damien,
Been eagerly awaiting this re-design and it’s definitely lived up to my expectations. I love the attention to detail in everything from colour contrasts to icon design to typography to the grid structure. The bigger text fonts are much easier to read, comment text still requires a bit of a squint to read though.
I’d be very interested to read a follow up post on how the re-design has effected your site traffic, e.g. bounce rates, etc. Also whether your new CMS, Wordpress, has increased your presence on Google, etc.
Also love to know what plugins you are using.
Top notch job bro.
Constructive criticism , please don’t take it tooooo seriously,
i think ur design looks abit too plain for me bru,
wonder how v7 gon be?
Hurray!! Finally!! Looks good, D :)
Nice surprise seeing your site up today. It’s looking great!!!
Wow! This has to be the best Worpress theme design I’ve seen. Nice upgrade!
Great stuff Damien! The text is much more readable compared to your previous version, and I’m glad you jumped the gun and are using WP for your blog.
Any fancy plugins you using that you might care to share?
BTW, I’ve given you some link love on my blogroll, so please return the favour!
Love it! I knew it would be great though since I’m a huge fan of your work. Loving the subtle areas which “highlight” on roll-over (tags for example). The new logo is brill as well. Congrats!
I’ve been meaning to redesign to something more “fitting” and you may have just inspired me to get going on it.
Didn’t expect anything else, it’s true Damien style, well done bro – fantastic redesign!
Nicely done Coda. The background is the kicker for me. This is also one of the few uses of a tag-cloud that I like, it is there but doesn’t take up 3/4 of the sidebar. My only gripe are the RSS and Technorati links near the top left, they just don’t seem to fit.
Awesome.
Your new site (never knew the former one) is very beautiful. Congratulations.
Love it!
Love the static background and fluid overlays, love the contrasting mouse-over colours you used, LOVE the font, though I would suggest increasing it a bit on the comments.
The Tag cloud is great, well sized and well positioned, by I think that a colour that contrasts the background more will be nicer. Im squinting to read “advertising, email, branding and reflection”
Otherwise awesome dude! Nicest blog I’ve seen!
Good job! Definitely much slicker than the previous version, yet in my opinion this design has a little less character…
As always, an excellent design. I think you’re one of the few designers I know who can really pull off dark designs well – nice work. I do miss the imagery from the old design a little, but man, this is slick!
Hi Coda
I echo what others say here, I absolutely love it. Very easy on the eye, very readable, well done. (I had know idea this site has been online for that long that alone is a remarkable achievement design aside)
Wow, thanks all for the valuable feedback everyone – much appreciated!
@Martin: I’ve used Flash for the nav simply because it’s easier to maintain a single file than a list of images (with cross-browser transparency issues) marked up in XHTML/CSS. Less than 1% of my visitors will need to upgrade their Flash plugin to view it, but this site wasn’t built with them in mind in any case. ;) I still need to provide a fallback though.
@Eishman: by “hue” I assume you mean contrast? ‘Search’ isn’t an important feature for this site, but I’ll track it’s usage and make changes based on that if I find it’s not getting hits. Or that could also mean that it’s not required, which is a good thing. :)
@Mark: Thanks mate. Comment text is an interesting one, because it’s the same typeface and size as my previous design. But when you switch from reading the big post text to the smaller comment text then it does take some adjusting. I’ll have to play around with this.
I definitely expect my Google traffic to increase, mostly because each post now contains a unique title which is also embedded in the permalink structure.
@Yasser: I agree, in places the design is a bit plain. But I did say I felt it’s unfinished, so maybe that will improve.
@The Bagley: hooked you up brother! Will post a list of plugins in a follow-up post.
@Lorissa: You know I’m a fan of your work too. I hope you find the time, and inspiration!
@Paul: thanks! The background extends to 1600px wide so the bigger your viewport the better effect it gives. I’ve used that header area throughout my site in a consistent manner, maybe it makes more sense in that context. The Technorati link was an afterthought, I added it out of interest to see if it gets any hits! And the tag cloud – I was hoping to launch with Cumulus but it’s not customisable enough (yet). Best tag cloud I’ve ever seen!
@Avi: thanks for visiting, glad you like it!
@HoTsTePPa: Agreed on the small items in the tag cloud, I’ll bump them up a bit in size and contrast.
You just keep get better and better! I think its absolutely beautiful and I’m sure its gonna get lots more attention that v5… Well done D :)
2:53am — hmmm? Perfect time to drop anything —
something about the ‘grahite’ background — if i can call it that — it reminds of the good old days of late 90’s —
it does look well crafted, thought out, and dam you did that with wordpress — and to me it’s those little things — attention to detail — dam it i could go on and on about how this is dope —
it’s so dope, that i’m jealous — ;-)
very nice – it took me a minute to figure out what you did for the search shading and other form fields. Nice thinking outside of the box.
@Michelle: nancy to that! ;)
@lebogang: haha yeah I see the graphite treatment.. going back a few years it’s very similar to what I had for v2, but completely unintentional!
Quick observations…
Blog entries require horizontal scrolling even when maximized at a common resolution of 1024×768 (with current Opera 9.27).
The colour difference between paragraph text and background is insufficient: score 420, threshold 500 (WCAG 1.0; text background: #484c50; foreground: #d0d8e0).
Charset declaration should appear first in head element. See: http://www.w3.org/QA/2008/03/html-charset.html
Images should have width and height specified. This helps browser render layout, otherwise each image on arrival can cause (drastic) layout reflow.
Avoid CSS absolute unit of measurement (WCAG 1.0; see for example classes img.getflash, img.za, div.hr etc). See: http://www.w3.org/TR/WCAG10-CSS-TECHS/#units
Always specify CSS foreground and background colours together (to avoid unforeseen cascade).
Just my R0.02… your mileage may vary…
Wow, awesome, dude this is an absolutely fantastic re-design and even mroe so due to all the functional bits you’ve added in there. I love the fact that u’ve used wordpress to such perfection. Would be interested to know how you achieved some of the subtle refinements like certain rollovers etc.
Tell me dude,would you be interested in speaking at the next wordpress meetup in cape town about your redesign? Check out http://www.wordpress.org.za. Would be great to have you there.
Congrats all around man, inspiring stuff. How long did all this work take you?
Good form! I like it.
Awesome dude, super fresh and easy to read – really really like it ;-)
Keep up the good content, it’s not embarressing at all – you’re a leg end…
@Paul: thanks, some good points to consider.
I can’t reproduce a horizontal scrollbar in Opera 9.23 with my viewport at 1024px wide. And if I go below 800px I can still read the post without being forced to scroll.
Colour difference: Well caught, I’ll lighten my text a notch.
There’s only one inline image on this page (in the body of this post) which contains inline width and height. Otherwise I try to specify all my images and their dimensions in CSS because they’re presentation-related. Most modern web browsers will respect this. And since they have a fixed width and height, pixel is the unit of measurement.
Re: keeping colours together in CSS – could be useful, but depends on context and personal preference. In my case the background colours of my elements is almost always transparent, and I prefer to group elements based on layout first, and then appearance.
@nomad-one: thanks! Hover effects are mostly CSS-based, with the exception of the tag cloud and header intro paragraph where i’m using jQuery for the opacity fade effect.
Re: WordPress meetup – am interested in attending, will keep an eye on the site. Thanks for the link.
Oh my hat, LMAO!
So where is the “hire me to redesign your site” button????
@Daniel: you mean this one?
Very well done, nice job.
In love with this template. White and grey !
Awesome design! :)
Very nice, major improvement!
One of the best blog redesigns I have seen in awhile and love the fact that you take W3C seriously, to many designers don’t. I’m a bit of a standards fanatic myself…
Hey buddy!
I thought you were to come and let me know when you got the new design up? ;-) (only messing).
Absolutely wonderful work my friend. I’ve started using ‘noise’ in some of my work too. I just love the ‘dusty’ effect.
I also love the ul rollover effect. Fabulous attention to detail.
Liked v1, never understood v2, thought v3 & v4 were a bit meh, loved v5 and really dug watching it grow over time… and now lots to like about v6.
Top work fella, you continue to inspire.
Awesome! This is just great. Good Job!
Wow, it looks amazing!!!!
Very slick man. Very slick indeed. These days, anyone can design a decent looking website (provided they have an eye for design). But the thing that really turns a good website into a GREAT website is the fine details – the little things that often go unnoticed… until they are gone. Absolutely LOVE the detail!
Keep up the great work.
I’ve just seen the design on deviantART, and thought I’d see it live here! It’s very, very nice, so well done!
However, it looks a bit messed up on Firefox!
Hi man!
As usual, you did an impressive job! For sure, this design is really fresh because it is something I have never seen yet on Internet.
I really love it!
Just realised that’s my faultfor having a smaller than normal font size on my browser – never mind!
Thanks for the inspiration this site has given me!
Always loved your design. The new site is great once more. Keep up the good work and greetz from Germany. ;-)
@Armen: thanks for visiting, appreciate the feedback!
@Jon: wow good memory! Hopefully this design will grow/mature over time too.
@Adam: thanks, that means a lot coming from you! I’m keeping an eye out for Stonewall+’s redesign! See you at the WP meetup.
@Kai: Vielen dank! Digging your fluid site too, nicely done. I have a small fetish for that smoke effect and had to resist using it here too, haha.
oh wow!
just catching up on all my feeds since getting back from Thailand… I must say Damien; you keep on going from strength to strength. Another excellent design – speachless!!
infinite KUDOS!!
WOW. This is completely off the hook! I saw your MSN icon and knew exactly what had happened. Really awesome… nice work D!
FYI – your site came in fourth on Smashing Magazine’s 50 Excellent Blog Designs
Check out: http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/
Congrats!
Way cool dude! Kudos to you.
Very Good Design
VEry nice and minismalistic design.I am a designer based in Kolkata,India and liked your designs a lot.
Taking off…
I spent nearly a month designing this website, and now that it is finally done, I feel quite lost for words and I don’t know where to start.
I created the site to share things I’ve learnt about life that were valuable to me, in the hope tha…
Amatomu, the South African hub for Ama-blog buddies…
I recently joined up with Amatomu, and so far I’ve found it to be the best place yet to meet other South African bloggers.
The South African blogging community is still quite small compared to the rest of the world, but I’m proud to say …
@Ben: thanks. I intended to animate it, but haven’t gotten around to it. ;)
Leave a Comment
Your e-mail address is required, but will not be published.
29 April 2008
lebogang nkoane05:48 am
Fresh, I like it!
Will write more when I get back — i love the background thing you — plus, I’ll be honest all my ‘form’ designs where inspired by you — ;-)
word.