Responsive Design and Mobile Websites

Originally posted by Marc Price

Statistically I know that there’s something like a 25% chance you’re reading this on a mobile device (or so our website analytics tells me). Earlier this year it would have been below 20%, and this time last year it was less than 10%. And for the 25% of you reading on a mobile device, you'll be pleased to know that mobile phones (not tablets) can access a new 'mobile' version of the main pages of the Oculus site!

The irony is, not all pages have been moved over yet – so if you're reading this on a mobile device you'll be seeing one of the old 'desktop' pages.  Click through to the homepage here to see the mobile site in action.

I hasten to add, this mobile version of the site is a stop-gap solution whilst we take a step back and look at redesigning the whole Oculus website responsively. “Responsively? What’s that?” some may ask… well, let me explain…

Given the high volume of ‘mobile’ website browsing that takes place these days, no one can ignore the need for a mobile-optimised website. Crudely speaking the options available are:

The basic (cop-out) option

A normal website (all the original desktop content) but with some care and attention to make buttons a little larger, provide space around links, increase font-size, etc. to mean it can be read and navigated on a small screen. Care also needs to be paid to ensure the pages all work correctly on mobile devices (oh, and remove Flash content or at least provide a fall-back for mobile devices).

The stylesheets option

This is essentially the basic option, but with a little thought given to the needs of different screen sizes – serving different style sheets to provide better layout, font-sizes and general styling across a number of different devices. There is a key drawback though – one stylesheet per device means a lot of stylesheets and no guarantees of a future-proof solution.

The multiple-sites option

This is what we’ve applied as our stop-gap solution. It’s often the quickest (cheapest) fix in the short term. Essentially this solution is to develop a second website that is served when a mobile device tries to access the normal website. This is typically a smaller set of pages from the main site, reduced functionality and cleaner, stripped-back styling.

The challenge here is where to draw the line. Building a second mobile site for say just iPhone 4 users might cater to the bulk of your mobile demographic, but then what do the increasing numbers of android and iPad users see, can you make the same site work across multiple devices without having to make it fully responsive?

Do you create a third site for tablet users? This is a compromise, but often cheaper than building a fully responsive site (at least in the short term). We’ve drawn the line at tablet users in our implementation – serving them the desktop site for now.

The responsive design option

Responsive website design will be the future of website design. The old arguments against this approach (i.e. you don’t want all the desktop content displayed on a mobile device) are almost irrelevant now. Designing responsively requires a lot of planning, and will often be a bigger job than simply designing a desktop and mobile version of the same site. However, it does mean that all your content is held in the same location, and a change to the website can affect both mobile and desktop sites simultaneously – streamlining administration.

Essentially responsive design means that the layout and content of pages rearrange to better display at different screen sizes. For a full desktop screen all the content will be visible, spaced out nicely with full-resolution images. For a small mobile screen, content may align into one single column with a large (easy reading) font, perhaps some of the copy will be cut to streamline the reading experience, navigation realigned, images will be resized, cropped or simply not displayed depending on how important they are to the usability and aesthetics of the page.

Not only are responsive pages the best way to ensure information is displayed in an optimal fashion across all devices, but Google actually prefers pages designed in this manner – meaning better SEO.

Responsive design is best approached with ‘mobile first’. This ensures that the key functionality is in place on even the most basic/small mobile screens. The next step is called ‘progressive enhancement’ which basically means adding styling, functionality and content as more space becomes available.

Most designers will start with a flexible or fluid grid – providing the framework onto which the layout can be hung. Then attention needs to be paid to specific breakpoints – i.e. screen sizes – and make sure these have the necessary content and functionality. The latest trend is to consider breakpoints as variable depending on content, rather than just occurring specifically at a set viewport area.

The next consideration should be the handling of images. Ideally images should only be served at the right resolution – mobile users don’t want their bandwidth being used up by downloading desktop-size images that are simply switched off by media queries. There are an increasing number of tools out there to handle serving appropriate image sizes/resolutions.

Finally, it is the media queries that tell the pages how to realign at various sizes – switching off or even switching on specific functionality to serve the different needs of different device users.

A great resource that explains the various tools out there to help designers (and developers) is the .NET article here. However, I’ve also listed out some great examples of responsive sites, themes and articles below.

We’re implementing responsive designs for a number of clients now, whether these are in .NET CMS environments like Kentico, or open source environments like WordPress, the same considerations apply. Talk to us today if you’d like to know more about our approach, or if you have a project you’d like us to get involved in.

Oh, and in-between all the demand from clients (yes, you always come first!) – we’ll be working on the new designs for the Oculus website. We’ll not be going live with that until late Spring 2013, but it will be a masterpiece once completed – watch this space…

Responsive examples:

Great responsive tools: