interesting bits and bobs about design, web and social media, the useful, the useless and everything in between.

Responsive web design for mobile, tablet, desktop... and beyond?

More and more the importance of having a Mobile ‘friendly’ version of your website is coming to light. Back in November we reviewed the Mobile First Approach book. To recap, here are some of the statistics that hit home when thinking about what devices clients and consumers are accessing your site with: 

• Smartphones were boldly predicted to out-ship the combined global market of laptop, desktop, and notebook computers in 2012. They did so in the last quarter of 2010 – two years earlier than predicted! (source: SmartOnline). 
• Traffic to mobile websites in 2010 grew 600% after tripling between 2009 and 2010 (source: Bango).
• While half a billion people accessed the mobile internet worldwide in 2009, heavy mobile data users will triple to one billion by 2013 (source: Morgan Stanley).

So ask yourself, “How does my website display and function on a mobile?”. You’ll now be pulling out your phone and having a look, and unless it's been specifically built or optimised with mobiles in mind then it probably doesn’t display or function very well. Lots of zooming and fumbling to touch links that haven’t been intended for that sort of interaction.

The next thought might be “I need to get a mobile version of my site so customers can view it on their iPhones!” and that may be the case, but what about Blackberries, or the range of different size tablets now on the markets. And what about the ‘next big thing’ that will come out next year, what ever that may be? Shouldn’t it really be optimised to work for all of these as well?

We’ve been looking into the best ways to approach mobile site design, as well as integrating it with established desktop design and content, for some time now. As part of that quest I’ve just read a book called Responsive Web Design by Ethan Marcotte. This book suggests that websites could be independent of a ‘canvas size’ and should flow and adapt to whatever device it is viewed on while maintaining a high level visual and functional experience. Essentially, instead of having two different versions of your site, desktop and mobile, why can’t one website do it all and also fill the gap in-between?

What’s the difference?

An example of a responsive website is bostonglobe.com. View it on a laptop or desktop computer and try dragging your window smaller in stages and you can see how it adapts and reflows the page structure to suit. Go ahead and make it really small and you should end up at the view you would get on a mobile device, say an iPhone. About half way to that size would have seen what it would look like on a tablet, say an iPad.

Now go to smh.com.au and try the same thing. Doesn’t budge a bit does it? Very non-responsive. To see the mobile version you need to go to m.smh.com.au, which is basically a different site. This is a common approach to keep these two sites separate, but if you are viewing the mobile site on a desktop or a tablet it doesn’t display very well does it? Again very non-responsive to the device you are viewing it on (remember that for later!).

And it's not just how the website reduces in size; a responsive site can enlarge for an optimum view also. When viewed at full screen on my laptop, the Boston Globe site enlarges to use more width in the layout of information, fitting more content on the screen and allowing larger images. Whereas the SMH site is fixed width and doesn’t use about a third of my screen width, meaning that I will need to scroll further to view the full page content. Refer to the screenshots below.

Two versions of your site or one?

There is a view that the two versions (desktop and mobile) should stay separate as the content can then be tailored to each user type. There may be cases where reducing the content of a site to key information for easy access for a mobile user is appropriate, eg; a restaurant opening hours and location. But based on the stats below it seems that the assumption that all mobile users are standing on a busy street and in somewhat of a rush is not actually the case.

A recent survey looked at where people used their Smartphones and found:

• 84% use them at home
• 80% use them during miscellaneous downtime throughout the day
• 74% use them while waiting in lines or waiting for appointments
• 69% use them while shopping
• 64% use them at work
• 62% use them while watching TV (a different study claims 84%) 
• 47% use them during their commute.

How to go about responsive design.

It’s quite technical obviously, but the key components are:

• Designing and building the site with a flexible layout. These are proportional layouts which expand or contract equally, preserving the readability and the visual aesthetic, no matter what size screen it is viewed on, small or large.
• Flexible images and media. Using mobile-friendly sized images as the default, the site can detect if it is being viewed on other devices (eg; desktop or tablet browsers) and serve up enhanced experiences for those devices that are capable of viewing them. For example larger images or video, and additional design elements like headers and background images, where appropriate.
• Finding breaking points. The flexible grid layout can then be set to change when the viewing area drops below a certain size, eg; 2 columns drops down to one column to view more effectively on a mobile.

Advantages I can see to having one responsive website over two separate websites and tailored content.

• It’s simpler. Your content management and SEO efforts are simplified by only having to concentrate on one site and one set of content.
• It’s clearer. If you use Mobile First thinking to optimise your content, then you will cut out the fluff and clutter and bring better prioritisation to your content, which is a necessity when your site is viewed on a mobile. This will also greatly benefit the desktop view of the site, as Luke Wroblewski says in Mobile First, “If you can agree on the most important set of features and content for your customers and business, why should that prioritisation change with more screen space?”.
• It’s fair. Unless there is a very good reason, why penalise your mobile users by taking away some of your content or functionality? Nothing is more annoying than going to a mobile version of a site you use frequently on a desktop and some of the functionality is missing!
• It’s more findable. SEO is more straight forward, as your search results can suffer by having content that is repeated on different pages, which is what happens if you have duplicate cut down versions of other pages on your mobile site.
• It links better. Stops the problem of someone tweeting a link from your mobile site which may then be viewed by people on a desktop browser (remember m.smh.com.au from above?).
• It’s flexible. Not only does it display and function well on a desktop and a laptop… and an iPhone, but on lots of mobiles, Smartphones and everything else like the menagerie of tablet sizes in-between.
• It’s future proofed. We don’t know what the ‘next big thing’ around the corner for viewing the web will be, but there will probably be many of them, and all at different sizes and resolutions. So instead of adapting an approach to optimise websites specifically for different devices, maybe the right approach is to create websites which should adapt to any?

Ben.
The Creative Type

bostonglobe.com adapting to each screen size and always retaining the same content

smh.com.au and m.smh.com.au, having to scroll for content as screen gets smaller and different content offered on mobile