An Introduction to Responsive Web Design

With our increasingly busy lives and ever growing interest in all things gadget related, it’s easy to see why almost 50% of US internet users are now going online via mobile phone data connections (compared with 31% in 2010) – and that’s before we begin to consider WiFi connected mobile and tablet use.

Because of this, more and more organizations are recognizing the need for their online presence to work well across these platforms and deliver the same level of user experience as they would expect on desktop or laptop computers – and who can blame them? Forecasts suggest that tablet sales are set to rise this year from 18m to 62.5m and in addition, rapid sales of smart TVs have been reported from Samsung, selling 2m in the first 3 months of their global launch.

Responsive websites are sites which make use of simple bits of code called ‘CSS media queries’ which identify and then ‘respond’ to the browsing environment or device through which they are being viewed. In essence, this means that a single website (usually running off a single content management system, and serving the same content) can recognize the viewing environment and apply a defined set of styles to alter the layout and appearance.

For example, a responsive website viewed on a desktop computer may have a horizontally arranged navigation bar, but when the same site is viewed on a mobile device, the style of navigation changes to a vertically stacked set of links or buttons.  This is not a separate mobile website, but a single website that adapts to its ‘surroundings’. At face value, this seems like an instant solution to the problem of having to design separate websites for multiple devices – and it’s easy to see why. But is it a perfect solution?

Here are some pros and cons:

Pros:

• You only need to manage one set of content rather than multiple versions for different site versions.

• Time and money saved by not having to commission the design and development of separate sites.

• Site updates only have to be applied once, with usually only a short amount of time spent adjusting styles for the different environments.

• Responsive design techniques can easily turn a desktop site into a tablet site, but replacing a few formatting rules (styles) and providing alternative images.

Cons:

• A responsive website is only really an application of an alternate stylesheet (a file which holds a set of formatting styles that can be applied to elements on the page – CSS for short), which is essentially hiding off and changing elements that are not suitable for viewing in certain environments (mobile, tablet, smart TV etc). All of the markup (the HTML code that places elements on the page), JavaScript and content is still downloaded. This means, for example, that download times when browsing over a mobile network can be quite long.

However, some mobile browsers are addressing this problem and workarounds are starting to become available (although not widely supported yet).  Whereas the very information architecture of a website is often (quite rightly) re-planned for mobile and tablet sites to maximize conversions in what are often very different browsing environments, responsive sites are more of a streamlined version of a desktop site with the same user journey. For example, a desktop eCommerce site may focus on promotional content, images and branding in equal (or slightly lesser) measure to shopping functionality, whereas a mobile site should place much more emphasis on a simple quick route to sale as screen real estate is at a premium and typically, users viewing on a mobile are on the move and need to get to what they want quickly. A user logging onto an online store on a mobile is far more likely to have a product in mind that they wish to (quickly) purchase over a desktop user who is more likely to have a browse around the site at multiple products and content before purchasing.

Whilst the majority of modern mobile and tablet browsers support CSS3 (The version of CSS code needed for reliably dealing with media queries and therefore making responsive design work), some devices are further behind and rely on the older CSS2, which does not have full support for media queries. This means that currently, some devices would still be served with the ‘normal’ desktop website.

Pros and cons notwithstanding, responsive design is a very powerful strategy in certain situations, but it is, at least in its current guise, not an ultimate solution. Therefore, organizations should not instantly drop plans for a mobile website in favour of the responsive design route.

Every website has particular, defined objectives and it is important to approach the issue of multi-device experience from a strategic standpoint to ensure these are fulfilled. It’s worth getting expert advice before embarking on a course of action – carrying out some research into what devices people are using or consulting with trusted developers is a solid first step.

Colin Turnbull

Tags: Digital, Ecommerce, Mobile, Strategy, Technology