Top 10 Responsive Designs of 2012

Keep up with the very latest developments in the digital marketing world

By Dave Ashworth
on 13/12/12

Mobile search has been hard to ignore in 2012 - take a look in any analytics profile and over the course 0f 2011 and 2012 you are likely to see a pattern similar to the following under "mobile visits":

Mobile Tracking

Mobile Visits

Whilst there are many things to consider with regards mobile search, one aspect that could be key to conversion is how you serve your content to your visitors.  This can be crucial for ecommerce sites (for example, in fashion).  Your choices consist of an app, a mobile site or, the increasingly popular responsive design.

The drawback of a mobile site is that you need to design templates and potentially manage content across 2 sites, depending how you set up, whereas responsive design allows you to have one site that changes it's appearance depending on the dimensions at which it is viewed, by implementing the latest in CSS and HTML techniques.

Below are a list of sites that I have come across which have implemented a responsive design which I think work well.  If you want to see how a responsive design works from your desktop browser, simply click on the browser border edge and move from left to right to simulate the different window sizes:

Inevitably, the biggest design website on the web has responsive design.

Smashing Magazine Responsive Designs

Normally, football websites are old and outdated and tied into a deal for 20 years in which time the website doesn't get updated.  But fair play to Sunderland - what I also like is that it retains dynamic elements that use jquery in all versions - many sites I see keep it simple as the site reduces.   Nice to see they have a Korean version of the site as well, presumably they've had an influx of far Eastern visitors since signing Ji Dong Won - and there's no doubt they will be visiting the site on a wide range of modern tablet devices.

Dirty Monkey Mackams Website

I like how the site's quirky personality is maintained across the various browser sizes.

Keeping things simple on the Distilled blog:


Another design conscious website that maintains it's cool look across the varying platform sizes.

The Next Web

I'd be dissapointed if a site called CSS Tricks didn't have a responsive design:

CSS Tricks

Another excellent example of a site that retains dynamic page elements on the various browser sizes:

Lancaster University

If the CMS produces websites with as nice responsive designs as this, that is a cracking USP right there:

Fork CMS

Nice navigation and layout on all formats:

Clean Air Challenge

Another very cool design that maintains it's feel across the varying sizes, I imagine a lot of work was involved, but it was worth it: