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”:
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.
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.
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.
I’d be dissapointed if a site called CSS Tricks didn’t have a responsive design:
Another excellent example of a site that retains dynamic page elements on the various browser sizes:
If the CMS produces websites with as nice responsive designs as this, that is a cracking USP right there:
Nice navigation and layout on all formats:
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: