3rd August 2011

Responsive Design vs Dedicated Mobile Sites

Scroll down

Over the last couple of years we have seen web browsing on mobile devices take off. Latest figures show that 31% of UK adults now own a smartphone, and of these, 50% have completed some sort of online purchase using their device. These figures clearly show the increasing need for organisations to provide mobile accessible websites.

The benefits of targeting mobile devices are clear; create a better user experience on a mobile, and the customer experience of the brand as a whole will be higher. So let’s look at the two main methods of doing this:

Responsive Design

One of the biggest trends we have seen over the last 18 months has been the move to websites being planned, designed and developed with a responsive design in mind. The idea behind a responsive design is that an adapted layout of the exact same website will be presented to the end user, based on the screen size of the device they are using. Some beautiful examples of this can be seen at http://mediaqueri.es

Berkshire Salon & Day Spas Media Query Example

An Example of a Responsive Design (via mediaqueri.es)

Responsive designs utilise CSS Media Queries to apply different styles to elements based on varying viewports, and is often used for reducing the number of columns on the screen for smaller devices. The benefits of this is that it is quick and easy to implement (utlising the same stylesheet as used for the main website display), and easier to maintain when new content is added to the site or global styles changed. It also means we can produce multiple “versions” of a single site efficiently, for different screen widths, such as:

  • Desktop – 1024px and above (current industry standard)
  • Legacy desktop & Tablet – 768px
  • Mobile – 480px

There are some drawbacks to this simplicity however. Because responsive design is all about changing the style and layout for mobile users, the actual content loaded will always be the full web page (including all media content). Whilst the appearance may appear lighter, as elements are simply hidden (but not removed), the actual load time of the site will not change. This can be a crucial issue for users trying to load your website on their “g” connection.

Dedicated Mobile Sites

Dominos Mobile Website

Dominos Mobile Website

Creating a dedicated mobile site for users is, without doubt, a bigger job. You are essentially building two versions of the same site, with different templates, stylesheets and (sometimes) content. Upkeep and maintenance will take longer, and more planning will need to go into the UI and UX. The task increases further if the intention is to build an additional tablet (or iPad) specific site.

However, there are benefits that counter the problems highlighted with a responsive design. Everything presented to the user is added to the page specifically for them. Smaller image sizes (and no hidden media), less content to load and more compressed/optimised graphics should make improvements to the page load time.

We are also able to present the design on a mobile specific domain (or more often subdomain), so users are not only aware that they are on a mobile version of the site, but so they can also switch to the “full” version if desired. We can also track and analyse user behaviour a lot better through this mobile domain, and redirect users to our mobile site if browsing using a mobile device or originating from other mobile sites such as http://m.google.com.

Conclusion

As this is only a rough introduction to the options available to “mobilise” a website, there are a number of other pros and cons you should consider before choosing a direction to proceed in. I have also completely ignored the world of apps which is a 3rd option to the above, but one which would take even further examination. Whatever the selected direction; embrace it early, and make your users aware of it. It’s their experience that is key.

References

http://www.ipsos-mori.com/ne…
http://www.edigitalresearch.com/ne…