{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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.

David Moth

Published 8 November, 2012 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1674 more posts from this author

Comments (26)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Sam Driscoll

Responisve web-design is becomes necessary for all the websites which are visited on different platforms like iPad, iPhone, Windows OS, Android etc. Since user impressed by design of your website, so make it responsive as much as you can.

over 3 years ago

Avatar-blank-50x50

Forrest

Re: "wrongly claimed to have built it using responsive design, when in fact it appears to be adaptive design"

"Responsive Design + Progressive Enhancement = Adaptive Design" http://www.ampagency.com/what-is-responsive-and-adaptive-web-design/

over 3 years ago

Avatar-blank-50x50

Peter Harrington

A really great list! I find that the more sites I look at, the more solutions become clear as to what content to leave in, what to take out, which I think is key to a successful responsive design.

Would love the community's feedback on our newly made responsive eCommerfe site!

http://www.alwaysriding.co.uk

Thanks,

Pete

over 3 years ago

Avatar-blank-50x50

Richard Borrie

There is far more to making a site accessible to mobile users than just resizing it. Fonts, images, navigation will all need re-thinking and adapting for a mobile audience. Having said that, I thought the Food Sense site worked pretty well across platforms.

over 3 years ago

Avatar-blank-50x50

SEO Works

It may be responsive - but The Boston Globe looks more like a default Wordpress template to me!

CSS tricks, a site we use often for resource purposes, is a great example:

http://css-tricks.com/

over 3 years ago

Ryan Taylor

Ryan Taylor, Head of Digital at City University London

When's e-consultancy going responsive? And when are you making your best practice guides in e-reader format?

over 3 years ago

Avatar-blank-50x50

Alan

We took a slightly different approach with our responsive designs when we updated Joindup.com. We created a special content-front-and-centre layout using bootstrap for desktop and tablet, augmented by some HTML5 magic to create a slightly repositioned version for smartphone, which you can see if you compare our homepage on a tablet versus the smartphone.

Smartphone users still get all the content and functionality that the desktop and tablet users receive. Responsive templates we found online all seemed to leave the smartphone as the poor relation in many cases as the content just gets stacked up in really long pages.

over 3 years ago

Dean Marsden

Dean Marsden, Digital Marketing Executive at Koozai Ltd

Good examples of Responsive design. I think there is a real positive drive in the industry now for more and more websites to become fully responsive. If anything, website owners are going to benefit the most because what they do or don't already know is that a huge percentage of their users are already viewing their site on a mobile device.

On a side note, here is an excellent tool for checking how your website displays in different browser sizes:

http://lab.maltewassermann.com/viewport-resizer/

over 3 years ago

Avatar-blank-50x50

George, Project Manager at Penna

Not loving all of them. Dragging a desktop window horizontally is my way of seeing how responsive a site is and too many of them display horizontal scroll bars before the layout switches. To me, that's not truly responsive. Colour me picky! :)

over 3 years ago

Dean Taylor

Dean Taylor, Head of Creative at BT Fresca

High quality responsive design (like the Boston Globe) are aspirational for us all.

From an ecommerce point of view, it's also very well worth considering the purpose customers might have in viewing your site on different devices. Their mission may be quite different if viewing the site on a mobile phone than if they are using a tablet or desktop.

On a mobile phone it might be far more likely that the customer wants to know where your nearest to them is and whether the products they are interested in are available there (this might also be true of the smaller tablet devices now available).

My point being that customising the view of the site to suit the device is only part of the story.

over 3 years ago

Avatar-blank-50x50

Frank

>> But is that really the best abbreviation it could come up with for 'second term'?

2d is a standard abbreviation for "second" in American English :-)

over 3 years ago

Avatar-blank-50x50

Nick Johnson

I don't know about that, Frank - it makes the headline seem a bit flat to me...

over 3 years ago

Avatar-blank-50x50

Richard Borrie

>> customising the view of the site to suit the device is only part of the story.

I agree with Dean Taylor. There's a lot more to engaging your mobile users than just scaling the screen. For ecommerce sites in particular, RWD seems more like a distraction than a technique for enhancing the mobile experience.

over 3 years ago

Avatar-blank-50x50

Paul Sharp

A UK site just launched with great responsive design is www.londis.co.uk
This site was built in a week by our very able developer Matt Sherwin and we were really happy with the way it works - first responsive design site I've ever been involved with.

over 3 years ago

John Braithwaite

John Braithwaite, Managing Director at Ergo Digital

We personally are of the view that Responsive Design, whilst seeming to be a 'winner' for all concerned actually ends up being a 'better than nothing' rather than best case solution.

For most very small sites, I guess responsive design is easier to bear than a different mobile solution.

However for any site with considerable commerce or sales opportunity, where every visit matters, a proper bespoke Mobile solution will perform considerably better.

We wrote a blog post on this which can be found at this URL:
http://ergodigital.com/responsive-design-not-smart-mobile-marketing
(not an active link, of course, but definitely on topic and worth a considered read if you have the time)
... It lists our 5 reasons why Responsive Design is not smart mobile marketing.

over 3 years ago

Avatar-blank-50x50

Rab Caine

@Richard Borrie - here here, well said.

over 3 years ago

Avatar-blank-50x50

Steve Henderson

As well as websites, email is a great example of were responsive design can work really well. For anyone interested, we have a free HowTo guide to help make your email design responsive: http://www.communicatorcorp.com/blog/post/stephen-hill/2012/09/07/communicator-corps-responsive-design-guide

over 3 years ago

Avatar-blank-50x50

Deb J

The Web Developer plug-in for Chrome by Chris Pederick has a great feature where you can see all the responsive layouts in one scrolling window.

It is an option in the plug-in under "Resize"

http://chrispederick.com/work/web-developer/chrome/

over 3 years ago

Avatar-blank-50x50

James

@George,

You do know responsive web design is nothing to with catering to you dragging a browser window right?!

over 3 years ago

Avatar-blank-50x50

Matt Hampshire

How about retailers? Are there any doing decent responsive design for e-commerce?

over 3 years ago

Roland Latzel

Roland Latzel, Online Marketing Manager at Kyocera Document Solutions Europe B.V.

I pretty much like responsive design as well, but quite often viewing a responsive website on a smartphone can be tedious, because sites like that tend to be laggy and slow. Furthermore, complex sites with lots of content and applications are difficult to deal with regarding responsive design.

over 3 years ago

Avatar-blank-50x50

Tanielle Lobo

I visited the World Travel Market 2012 show in London recently and heard about responsive design and HTML5 for travel websites. The question that came up was whether responsive design would negate the need for a mobile website.

over 3 years ago

Avatar-blank-50x50

James Clarke

Responsive design does work well and Simon Collison's site is just stunning.

However, a mobile site should be well designed, look good but also easy to navigate and ideally this means a dedicated mobile site.

over 3 years ago

Avatar-blank-50x50

Elton Boocock

This is a debate that will continue for some time yet. Re aligning elements in the design is obviously important, but what about the content? Do mobile users want the same text? There will be varying levels of how 'adapted' the site is when seen in different browsers/devices/sizes and I think the main driver will be client budget. Grid design is just the start me thinks?!

over 3 years ago

Avatar-blank-50x50

Ganeshan Nadarajan

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.

over 3 years ago

Avatar-blank-50x50

Hima Javvadi

It Include Media Query ,CSS ,Making Height and width :100% ignore px use % .

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.