As the volume of mobile and tablet search traffic grows, companies are realising more and more how important it is to have a website that is tailored to a variety of screen resolutions. Responsive web design is an art that is only now starting to be refined. There are many different approaches to responsive web design, some working better than others. From completely fluid sites that adapt to any screen resolution, to sites that use known break points to style the site for specific resolutions.
Building a responsive website the functions well on every device is no mean feat. Below are 6 examples of brilliant responsive web design, along with the reason why I think they deserve to be praised and a screenshot of what they look like on a Desktop, iPad and iPhone.
One of the prettiest sites on this list but certainly no “dumb blond”. Fork’s website is carefully crafted to look stunning at any resolution. This is a non-fluid design that changes based on set resolutions, giving the site more control over its imagery and content.
With its striking colour palette the office zebra site successfully arranges its content to perfectly suit desktop, tablet and mobile devices. This site was built by my colleague Ian Flynn (@CreativeFlynn) and I’m particularly fond of the way it handles the site navigation. Navigating a mobile site can sometimes be tricky. It’s key that a site is easy to get around whatever platform you are viewing it on.
Smashing magazine is a web designers dream. Not only does the site provide great articles on responsive web design and the like but it’s also a brilliant example of well thought out design and construction. The site has a double menu running vertically down the left side of the site that is cleverly repositioned and adapted to suite the screen resolution. The sites content is completely fluid as well ensuring that the articles can be viewed successfully on any device.
Arnold Tyres manages to combine some tricky fixed position elements with a faultless responsive layout. It also tackles the tricky use of a drop down menu on smaller screens very well, allowing uses to swipe up and down the menu on their touch screen devices. This site was built by my colleague Bertram Greenhough (@BertyGreen).
The Starbucks site uses a fluid grid with the addition of a few break points to make changes for smaller devices. I’m particularly impressed with the way they handle the banner section of their homepage. As the device gets smaller the banners layout and content are adapted to suite.
I may be slightly biased on my views towards the Perrys Accountants site as it is in fact my own handy work. Again the navigation plays a big part in why this site is so successful. It has an ever present menu that follows you as you scroll down the page, allowing the user to navigate through the site with ease. The menu also has a contact tab that reveals phone numbers and a contact form so users can contact the company where ever they are on the site. An idea that was reborn in our own site as you can see at the top of your screen. Coupled with a clean design and responsive layout I hope you’ll agree it’s a winner.
If you know of any other responsive sites that should be praised, share them in the comments below.