Mobile: why the answer isn't always go responsive

"Really? But everyone's telling me that I *must* have a responsive site..."

With many companies becoming increasingly keen for their website to be optimised for mobile and tablet use (and rightly so), we've heard the above from quite a few clients when we've suggested that responsive web design (RWD) might not actually be the best route for them.

We've noticed that buzzwords often get thrown around with no real understanding of what they fully entail, and the core concept of having a single website to fit all purposes is quickly lost... It's important to remember that there are other options available.

What exactly is responsive web design?

The term 'responsive web design' is widely acknowledged to have first been coined by Ethan Marcotte in a 2010 article for the A List Apart website. It's centred on the production of a fluid design or layout which 'responds' at certain breakpoints in the viewing environment. These breakpoints are built to emulate common device sizes, e.g. mobile, tablet and desktop, and can be achieved through the use of CSS, in particular Media Queries.

A common approach when choosing RWD is 'mobile first', whereby the page is designed and built for the lowest denominator -- usually mobile -- and then enhanced accordingly, depending on the capabilities of the device/browser.

It's worth noting that in a RWD build, the browser (and device) is primarily responsible for handling and changing the website accordingly; therefore, it's worthwhile keeping scripts/images as optimised as possible to alleviate any performance related issues and help support a wider range of older hardware.

All sounds pretty good, doesn't it? But RWD's not automatically the best way to go.

Responsive vs. adaptive vs. mobile

If you want to do more to your site than simply alter the visual look -- for example, if you've a large site with lots of hi-res images, or if you've a site with an intricate or complex interface -- then an adaptive approach will probably suit your needs better.

Adaptive design pretty much does what it says on the tin -- the website 'adapts' to both the size and capabilities of the device. Things like images and videos can be targeted and, after being cropped or edited on the server to suit different scenarios, can be output accordingly in differing layout's which favour different device types. This helps to reduce loading times and offers the user a far slicker and ultimately more enjoyable experience

By taking an adaptive approach, we can use the server to do some of the initial work and optimisation for us. Aside from batching and minifying scripts/CSS, it allows us to send better images as per the device -- something which is currently lacking if using pure CSS on the client side.

The other benefit of using an adaptive approach is that we can still take advantage of all the great parts of RWD and incorporate them into our solution. So whilst we'd be using the server to send out images at a lower size for mobiles, or script/CSS files specific to touch devices, we can still use breakpoints to target a range of device sizes and allow for improved control for design and layout.

There is one final alternative -- to simply have a specifically designed mobile site. This seems to be a less popular option these days as it only allows for basic content, but it's still a viable option for those who only need to offer a more limited experience.

Finding the right solution

Mobile is growing at a rapid rate and, as a result, it's becoming increasingly difficult to justify not improving your overall mobile experience, regardless of the complexities involved.

What's most important is that you consider all the options and then pick the right solution for your site -- not just in terms of how the website looks and performs, but also in making sure that the content is tailored to meet the demands of the user (and whatever device they happen to be browsing on).


A day in the life of a Front End Developer - March 2013