Mobilising the masses: getting responsive web design for mobile right

The term “responsive design” is being bantered all around the online community at the moment as the ultimate technology solution to dealing with multiple screen sizes and resolutions across mediums like desktop and mobile and is being confusingly associated with the use of HTML5.

Firstly, we need to separate the terms responsive design and HTML5 as they are not mutually exclusive. Responsive design is a methodology, not a technology, whereas HTML5 is one possible enabler to perform responsive design but it is one of many solutions and not necessarily the best solution.

So what’s the actual need for responsive design? With so many different screen sizes and resolutions out there across desktop and mobile it’s difficult for the designers to cater for everyone from one design and a single code base. When designing for desktop, designers would often design for a single resolution e.g. 1024×768 or the not too long ago 800×600 and hope the user would have a good user experience.

Now let’s think about this problem on mobile. There are roughly 9500 different devices out there to cater for, particularly in countries which are home to a “hand me down” society where the dog old feature phone reigns supreme with even the top end devices varying in their sizes and capabilities.

With so many devices out there it would be naïve of us as designers and developers to take a cue from the desktop era of design and pick a single resolution to design for as this would lead to an exceptionally poor user experience for most users.

Responsive design is also not just about making everything fit.

A very important aspect of responsive design which is all too often overlooked is context: you need to take into consideration how and from where the user will be accessing your site and tailor the experience and the content to those situations. For example, a desktop user accessing your site is likely sitting at a desk or on the couch with a laptop whereas your mobile user could be anywhere doing anything. So should the mobile user simply get a scaled down desktop version?

Context is king and determines content.

Always remember when designing, it’s about designing for people as you don’t get to decide what device someone has or from where they will be accessing your site – they do!

So what do we do then?

At the agency I work at, we have always followed the responsive design methodology and approach which only starts with technology. That’s because responsive design is not just a technology and you need to always take context into consideration. Given the context, technology can come together to create highly interactive and engaging user experience for the higher end devices but also successfully degrade all the way down to the lowest end device based on what the device can and can’t support.

HTML5 alone is not a solution for anyone as the supported device penetration are not there. Responsive design is what everyone should be doing — giving a perfect contextual experience from wherever they are on whatever device they choose.

HTML5? We have a fair few years to wait.