Edinburgh Web Development

Do you need responsive design?

by Iain Wilson

23 November 2012
Boston Globe

The web world seems to be crazy for something called 'responsive design'.

The Boston Globe website (pictured right) was one of the first sites that went 'responsive' and it's held up as a shining light.  Try it on a smartphone, then try it on a desktop to see the differences and how it 'responds' to the media that is using it.

Design blogs, magazines, news feeds, industry figures, academics and people who 'know' about this kind of thing have whipped themselves into a frenzy about it.

Sweeping the industry is an almost religious fervour that says 'everything must be responsive'.  

But let's hold the bandwagon for a minute and ask a few questions:-

  • Do clients in general want 'responsive' design?
  • Do web users want a 'responsive design' website when they are visiting a website?
  • Do all sites need a 'responsive' design?
  • Does a responsive site cost the same or less than a non-responsive site?

Right now, the the answer to these questions are generally NO (especially the last  question!).  

Where did responsive design come from?

What is driving the responsive design bandwagon?

It's the fact that people have really started to use their mobiles and tablets on the internet.  'The rise of the mobile web' they call it.  

There are heaps of statistics out there - it's up 70% from last year, 40% of access is now from mobile, mobile usage will overtake desktop access very soon, etc.

One of the first published documents on responsive design was the seminal 2010 article from highly respected designer, Ethan Marcotte.  

The gist of his article was that the web now has loads of different media sizes and types. Designers may now need to adopt flexible web design methods that are 'responsive' to the media the site is being viewed on.  It should present information in a way that is best for the device (and device users), rather than one-size fits all.

It also means that if you really do need to cater for different media platforms, the development team don't have to create multiple versions - a single body of code handles all platforms - and rolling out updates and new features can be more efficient.

All sounds reasonable and logical?  We've built a couple of responsive sites at Blot and know why designers and developers are interested like it - it's new and cool and fun to learn and do.  

The user's view

But what about the user?  The theory goes that a webpage tailored for viewing on each media type will be a better experience for the user.  

Well, I'm not sure I've come across many web users who are desperate for a different website on their mobile or tablet to what they see on the desktop.

Most want to see the same website on their mobile or tablet as they would see it on the 'normal' site.  They're familiar with it and know how to find what they're looking for.  

The phone and tablet manufacturers have also done a great job in providing browsers that are able to scale 'big' websites onto smaller screens.  

A website written to web standards will render nicely on smartphones available today.  Granted, they may not work so well on an old basic phone with proprietary browser, but you wouldn't expect them to either - that's why they had WAP browsers!

The cost aspect

One point that seems to have been broadly missed is the increased cost and effort involved in producing a responsive site.  

Effectively, you're creating 3 or more different websites (desktop, tablet and mobile).  

OK, there may be an amount of reusable development across the platforms but it is extra work and therefore cost.  

Maybe in future developers will just have to include 'responsive' as part of the standard service but right now it's an option that's going to cost more.  

Can you or your client justify the extra budget?

The aesthetic aspect

Design is a subjective area, but it seems to me that one of the fundamental problems responsive design has is the very aesthetics of the mobile designs.

If you're a client who has spent a lot of money on a cool, evocative, professionally designed website, you want your visitors to experience that, right?

But often responsive designs are pared down versions, often with the blocks stacked on top of each other and totally missing out on the 'vibe' of the original design.

Things will change of course, and new design motifs and approaches may evolve, such as 'design for mobile first'.  

Right now though, there is a feeling of 'dumbed down design' on the mobile side.

A case study

Let's have a look at a real-world example of a responsive site.

Newspaper websites were one of the first generic industries to have embraced responsive design.   Reason being that visitors need to easily read the text of the news stories.

Recently the UK's Guardian launched their responsive platform(s) and it is a good example.

Desktop version

Here's the desktop version of the Guardian newspaper site.  This is a snapshot from a 1280px width screen.  It's what you would expect for a major site that has probably cost hundreds of thousands, if not millions, of pounds.  

You can see there is a massive amount of content to manage, both current and archive.  

The navigation requirement is huge, but they've made a good job of making it relatively easy to find your way around and most importantly to read the stories.

Guardian desktop version

iPhone 'responsive' version

Guardian iphone versionNow, here is the the same story, but on an iPhone in 320px portrait mode.  

Notice how pared down the screen is.  

Gone is the comprehensive navigation that was in the desktop viewable version. It's now hidden away in a drop down menu that appears when you touch an icon.

No story teasers or adverts are immediately in view, although there are thumbnail pictures and intro text for some stories underneath the main story.

The site automatically senses the device is a smartphone and serves up the mobile responsive version.  The news story is clearly the main item and it's easy to read.  Unlike many responsive sites, you can actually zoom in to make the writing and image(s) larger.


iPhone full version

Guardian iphone version full

Now here's the same story again on the iPhone but in ordinary 'Desktop version' mode.

The smartphone software has scaled down the page so the whole page is  viewable on the phone screen, and you can zoom it on the area you want to view.

This image is half actual size.  On the phone, the display is big enough to read the headlines and just about make out the story text without zooming.

If you normally use the desktop version, everything is where you'd expect it to be. No missing/different navigation, no missing sections - it's familiar and comfortable.

Which one is best to view on the mobile device? The 'responsive one' or the normal one?

It's down to the individual but in this case, there is a lot to be said for using the smartphone version because you can read it easily. And it makes complex navigation relatively straightforward. 

But there are a lot of people who would still prefer to see the desktop version on their mobile device.  

In summary

Mobile use and responsive design is here to stay, and at some point you are going to need a site design optimised for mobile but do you need it yet?

The browser software on smartphones is highly sophisticated and can deal with 'big' sites right now.  Don't expect that software to stand still - it will get even better.

There are clearly areas where a responsive site for mobiles and tablet smaller screens can be worthwhile.  Examples are:-

  • Sites that have a massive amount of textual information that needs to be read (eg newspapers).
  • Sites with complicated transactional processes and a lot of user input or interaction (eg CMS, web apps, ecommerce).

If your site falls into these categories then you probably need a responsive design right now.  Or you may have a real good reason why your site needs it, but don't just jump blindly.

It's going to cost more, and it might not be something that your web visitors like or want.

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy