Responsive design: optimizing for mobile

As of early last year, the world hit a landmark; one billion people were surfing the web from mobile devices. That’s right, one in eight people worldwide now have a smartphone, Kindle Fire, iOS device, Kindle Displayschutzfolie or similar gadget from which they can and do access the internet through wi-fi or a cellular plan. And the development of wi-fi hotspots like Clear and similar devices have made it possible for even non-cellular devices to use a cellular connection for internet access on the go. Estimates are that some fifteen percent of Black Friday e-commerce sales in 2011 were made from mobile devices. That adds up to millions (perhaps billions) of dollars in purchases.

This is sending a pretty clear message to Internet entrepreneurs; you’d better have a mobile-ready website, or you’re giving up at least 10% of your potential profits. But to complicate the issue, you can’t just put your normal website onto a mobile-device screen. Even the ones that have enough pixels to display the whole thing at once (like an iPhone’s retina display) will display your buttons at such a tiny size that they’ll be impossible to click.

That’s why you need to optimize your website for mobile devices using a system of media queries and fluid proportion-based grids (through CSS3 language) collectively referred to as ‘responsive design’. Responsive design software asks each device that accesses the website about itself, getting information back about the size of the device’s display. The software can then use those grids to determine where to put what elements of the website so it looks clean and usable no matter what size it actually displays at.

The User Experience

The critical part of responsive design is to ensure that, no matter how little or how much content is able to be displayed at any one time, the most important stuff is always front and center. That’s because mobile websites are increasingly being used by people in fairly extraordinary circumstances. For example, while riding the subway with one hand on the loop and the other surfing, while walking up stairs listening to their boss talk about the quarterly report, or at the playground pushing a toddler on the swing. These people, to use a learning design term, have highly extraneous cognitive loads. In other words, they can’t afford to spare any neuron firings trying to analyze your web site.

How do you know what parts of your website people consider the most important? Simple, you test it. A multivariate testing utility can set up a few dozen variations of your website and then use the data on user clicks and dwell times to determine which elements of the page are having the most positive effects on the user. Even if you can’t use a multivariate tester, some simple A/B tests performed consistently over a long period of time can improve your results.

A particularly clever designer might even start with an in-depth multivariate test of their normal website in order to figure out what people actually use most, and then use that data as the basis of their mobile site. Of course, mobile users don’t always have the same priorities, so more testing will always be in order, but learning what parts of your website your visitors actually use most is always a good place to start.