Talk to us today 0845 86 22 122

Blog.

13th December 2012 |  Written by Dave Ashworth

Top 10 Responsive Designs of 2012

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:

 

smashingmagazine.com

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

Smashing Magazine Responsive Designs

 

safc.com

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

 

koozai.com

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

 

distilled.net/blog/

Keeping things simple on the Distilled blog:

Distilled

 

thenextweb.com

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

The Next Web

 

css-tricks.com

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

CSS Tricks

 

lancs.ac.uk

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

Lancaster University

 

fork-cms.com

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

Fork CMS

 

clearairchallenge.com

Nice navigation and layout on all formats:

Clean Air Challenge

 

sasquatchfestival.com

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:

Sasquatch

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>