2008 vs. 2013: Reverse-Engineering the Redesign of kadavy.net

February 12 2013 – 09:50am

It has been nearly 5 years since I redesigned my blog. I admit it: It was a bit “out-of-date,” or “dated,” as some may put it (especially for someone who wrote a book claiming to dissect every aspect of design). But what does it mean for a design to become “dated?” How is it possible that something that at one time looked “good” starts to look “stale,” or even just plain “bad?”

Here’s the TL;DR

As is true for any artifact of humanity, there are forces that bring said artifact into being, and forces that shape the form of that artifact. Over time, those forces change, as that artifact remains the same. This is how something begins to look “dated.” Here’s what a blog post page on my site used to look like. I last redesigned it in May 2008.

A blog post in the old design

With my 2008 eyes, that design looked pretty good. With my 2012 eyes, it looked cluttered: too many elements, too many colors, too many subtle spacial relationships trying to organize all of it. To remember why the design looked like this, I took a look at the technology my users were using in April 2008.

snowfall-infographic-3@2X


Technology, Culture, Intentions

The overarching viewpoint behind Design for Hackers, is that technology, culture, and intentions of a design work together to shape that design. Here is how those factors interacted to produce the new kadavy.net, starting with the technology.

Cause: Internet Explorer acted like Internet Explorer

In April 2008, 52% of my users were using Internet Explorer. 71% of those users were on IE 7. I didn’t even bother with IE 7 on this redesign. In fact, IE 8 – the oldest version of IE I’m (loosely) supporting – comprises only 4% of my visitors today.

Effect: Less than pixel-perfection

Because so much time development time was eaten up trying to get things to look good on IE 7, and IE 6, it was hard to get very picky about the placement of different things. This often resulted in things being off by a couple of pixels, and simply accepting that as part of the design process.

Cause: “iOS” as we know it, didn’t exist!

In April 2008, .26% of my visitors were on the “iPhone” platform. That’s .26%, not 26%. Today, 24% of my visitors are on an “iOS” device of some kind.

Effect: more “stuff” on the page

In 2008, we were designing for a different kind of user. They were almost certainly using a computer, rather than a mobile device, and chances are they were even using a desktop computer. Once a user was on your site, you had a better chance of funneling them into another part of your site.

Cause: One resolution ruled

29% of my visitors in April 2008 were on 1024 x 768 resolution screens. It was the most popular of roughly 100 different screen resolutions of my visitors. 100 may sound like a lot of different screen resolutions, but in January 2013, visitors had 600 different screen resolutions.

Effect: more granular layout, one layout fits all

In 2008, desktop users ruled. They had longer attention spans, larger screens, and most of their screens were about the same size. You could just stick to a 960px wide grid and fill it full of stuff. Since they were desktop users, they didn’t need as large of click targets either. This made it very common to have three or more columns in a layout. A user could scan around the page with their eyes, and if something grabbed their attention, they could just click on it. These days, we don’t have so much real-estate to work with, and I posit that users get impatient more quickly if they’re unable to find what they’re looking for.

My Intentions: 2008 vs. 2013

In 2008, my goals for kadavy.net were far different than they are today.

Compare that with my goals today for kadavy.net

2008 User Culture vs. 2013

The technology of 2008 and my own intentions are of course tightly intertwined with the culture. Here’s how today’s user culture differs from that of 2008


Guiding Principles

No matter how formulaic all of the above may seem, a design is also shaped in part by a designer’s point of view. Here are some things I believe that have also shaped this redesign.

The Results

The above comprises the most important facts, thoughts, and feelings that have shaped the new kadavy.net, which is:

The one agonizing disappointment is that I can’t style the Disqus comments because they’re in an iframe. Don’t get me wrong: they look good – they just aren’t as integrated with the look of the site as I would like. This is my first time using them, so hopefully the features will be worth it.

Credits

Initially, I considered hiring someone to code and even help out with design, but I ended up handling that on my own. It was a good experience in catching up with HTML5, LESS, CSS3, and JavaScript. But, I have to thank Alex Baldwin, who has been an invaluable advisor in keeping abreast with front-end technologies. Also, Aaron Crowder helped with the translation of static HTML into a WordPress theme. Of course, there are numerous others who have been a big help on Twitter, or on the D4H email list. The background texture used is “Cream Dust,” created by Thomas Myrman and posted on subtlepatterns.com.

Lovingly Hosted on WPEngine (get 25% off)

A few years ago, I messed around with WordPress Optimization on Rackspace. But, it turned out that I didn’t enjoy (and wasn’t very good at) managing my own server. I got tired of updating it, trying to set up my own CDN, getting hacked, and having to worry about backups and traffic spikes. I’ve since hosted sites on several of the available hosted WordPress solutions, and have concluded that WPEngine is the best one for me. So, the new kadavy.net has a new home on WPEngine. They keep my WordPress up-to-date, keep it secure and backed up, make it fast, and handle scalability. From the other providers I’ve tried, they have the best user experience (“how the %&*# do I get into my SFTP again?”) and customer service. They’re going to cost me a few bucks more than the other providers, but I’m serious enough about my blog that it’s worth it for me. If you want to try them out, I’ve lined up a special coupon for them just to celebrate the redesign. Get 3 months free with this WPEngine Coupon Code (when paying for a year up-front).

Get a look under the hood: D4H newsletter

If you’ve enjoyed this run-down, and would like to learn more about the technology and process behind my redesign, I’m preparing an under-the-hood screencast just for folks on my Design for Hackers newsletter that will cover:

I’ll be sending this screencast to D4H list members for free – one time only – on February 26. You can sign up here.

This post is filed under Design.