Every pixel counts: the next stage of mobile web design

Mobile device screens are small.

My cellphone, an iPhone 6, has a screen that’s more than 11 times smaller than the desktop computer I’m writing this on.

Small.

Imprecise too. The screen may be extraordinarily sensitive and up to the task, but my fingers are no match for the precision of my desktop’s trackpad. On my cellphone I can’t even see what I’m touching when my finger is on it.

And don’t get me started on typing.

Yet despite all these hindrances:

• People, on average, now spend more time on mobile devices than desktop computers.
• For a small but sizeable percentage of people, a mobile device is their only Internet device.
• In many situations throughout a person’s typical day, a mobile device will be the only Internet access they have.
• Mobile experiences have arguably more demanding expectations, such as accounting for when the user is distracted and time-limited.
• Every statistic and trend shows mobile usage increasing at an incredible rate.

So here’s the crucial question: why do we design web experiences that are so poor on mobile?

Why is a mobile experience often second best, by some distance, to its desktop counterpart?

We flick our finger down screenful after screenful of a web page. We select something, pause, watch the screen turn white, and then—when the next page loads, a few seconds later—resume our flicking, starting from the top again. And all along the way, we spend mental time and energy sifting through huge amounts of page content that have no relevance to us.

Enough!

We need new design patterns and thinking for the next stage of mobile web design. (A lot of these ideas apply to apps too.)

• We become far more refined. We treat every pixel as special. You have justification for every last item you place on your web page, because there simply isn’t the visual space to be lazy or expansive. Every word, every image, every link. You are painting a picture on the user’s canvas, and it needs to be a masterpiece.
• We move away from the concept of pages. Real-world pages of paper are flat and barely interactive. You read, you turn them over or change pages. And so surprise, surprise, that metaphor has carried over to web pages in a way that’s far too literal. You read, you select something, you go to the next page, and repeat. The ‘pages’ metaphor and the resulting online design patterns are dated and grossly inefficient. Interaction and progressive disclosure enter a new phase of importance.
• We double down on context. And I don’t mean the obvious physical context opportunities on mobile. I mean, everything is presented in context, at all times, during every interaction with a mobile web experience. Help information; supporting tasks; personalized content—all made available to the user far quicker, and far more easily, than through the loading of a new page. Sorry Copernicus, I am indeed the centre of the universe around which my technology should revolve.
• We simplify. Simplify does not mean ‘remove’ or ‘hide’. Instead, it means we present complexity in the most seamless, understandable manner possible. We prioritise the most important actions, and develop intelligent ways to reveal and present the supporting actions. We use one word instead of five. We focus.
• We think beyond linear experiences. A web ‘page’ or app screen need not be a flat, vertical-scrolling experience. Stop and digest that, because there are hundreds of design patterns that can emerge when you challenge this bizarre convention. (Hint: you know when a navigation menu slides in from the side of a web page or app? That’s pattern number 1 of 500.)

The exciting thing is, there are no technology barriers to any of these ideas. We simply have a maturing of the online environment, and there are evident emerging trends on which a savvy business can capitalize.

Next step: detail. I’ll be writing lots more. Who’s along for the ride?