Responsive design has been a hot topic on the Econsultancy blog lately, and is obviously something that will become more important as we move into 2013.
There was a lively debate on one post about the BBC's new mobile site as it wrongly claimed to have built it using responsive design, when in fact it appears to be adaptive design.
So to bring some clarity to the issue we asked three industry experts for their opinions on how we should define responsive design and whether website owners really need it.
It turns out that the easiest way to test if a site is responsive or not is to simply resize your desktop browser – if the page realigns itself to fit the new screen size then it is most likely responsive design.
So with that in mind, here are 11 of the most exquisite uses of responsive design that I could find...
The Boston Globe
The Boston Globe is perhaps the best-known example of a site using responsive design.
For publishers that give away their content for free its vital that users can access it on any platform, and The Boston Globe's site is intuitive and easy to use regardless of the device you view it on.
But is that really the best abbreviation it could come up with for 'second term'?
Smashing Magazine
Tech site Smashing Magazine is another publisher embracing responsive design, though in my opinion the way it condenses isn't quite as slick as The Boston Globe.
Food Sense
This foodie website has loads of eye-catching content which, thanks to responsive design, looks great on any platform.
As you resize the browser the navigation tabs jump from the left to the top of the screen and social buttons disappear, but the email subscribe tool retains its prominent position in the middle of the screen.
Sasquatch Music Festival
This is a great looking site, though it does take a few seconds to load when you resize the screen and there was a slight glitch with one of the images on my smartphone.
But the desktop site is great and thankfully the graphic of a squirrel flying a plane is one of the last things to disappear when you resize browser.
The Cacao Trail
Unfortunately the first thing that disappears from The Cacao Trail's website on smaller screens is the awesome cover image, but from a usability and load time point of view that's probably actually a good thing.
On a mobile screen the navigation tabs are realigned vertically rather than horizontally, which is a design that most mobile users will be familiar with.
Hello Fisher
Web designer Steve Fisher has used a simple tile layout for his homepage which means it scales easily to different size screens.
But there's a hidden extra – watch his image change as you resize the browser.
Simon Collison
Writer/designer Simon Collison has a simple but great-looking website with a grid layout that is perfectly designed for scaling to different screen sizes.
Daniel Vane
Illustrator Daniel Vane is another advocate of the grid system, which means his fantastic drawings are easy to navigate and view on any device.
Sweet Hats
A simple site with an awesome name, Sweet Hat Club is just loads of user-submitted images of people wearing hats.
The simple design means it scales well to any screen, and the Theme Song is well worth a listen.
Illy issimo
If it weren't for the fact that one of the mobile CTAs doesn't work, illy issimo would offer one of the smoothest user experiences of any site on this list.
If you resize your desktop browser the text and images quickly realign themselves with zero loading time, while the navigation and social tabs switch from tiny text links to become big CTAs in the mobile version.
All of this is fantastic for the user experience, except for the fact that the 'Buy Illy Online' CTA doesn't link to anything.
Flow Festival
This site is designed in columns so you can actually see the different sections zoom around the screen as you resize the browser.
It renders perfectly on mobile with no obvious glitches despite displaying a lot of content.
No hay comentarios:
Publicar un comentario