demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Turn Web Development On Its Head: Design For Mobile First

mobile / introduction

Estimated reading time: 3 minutes, 15 seconds

This year’s NMPD industry advisory council generated some valuable feedback. One point that was emphasized was the fact that we increasingly need to consider web development for mobile users first and foremost, rather than as an afterthought.

Mobile users still constitute a minority of visitors to most websites: 15% of all visitors to this site currently use an iPhone, iPad, iPod Touch, Android or Blackberry. The most important aspect, however, is the rate of change: mobile web growth is 2000% over desktop internet over the last two years; next year, smartphone sales will pass PCs in absolute terms for the first time. Worldwide, there are 5.3 billion mobile subscriptions. (That’s 77% of the world population!). Increasingly, our audience is going to see and interact with the content on a website primarily through a mobile device.

For web designers, this epochal change presents a series of challenges: historically, designers have been spoiled with huge screens, quad and octo-core processors, high speed internet connections and browsers that are continually updated. As a result, they see and interact with the web in a different way from their users. The smartphone revolution is the first in which we are using the same tool as everyone else.

What’s different about the mobile web experience?

Smartphone screens are smaller; mobile sites need to be tightly focused as a result.

Typical desktop and mobile screen sizes comparedIt may seem obvious, but this is probably the hardest transition for traditional web developers to make. There is no room for dozens of buttons or grandiose designs in the mobile version of a web site; using rigorous discipline, the interface must be reduced to nine or fewer clear tasks.

High-speed broadband is continuing to improve; mobile sites must be light and quick.

In many ways the smartphone revolution is back where the desktop internet experience was a dozen years ago, when broadband was beginning to penetrate the market: the price of data is high, performance outside of urban centres can be sketchy, and processor speed is low. Mobile versions of sites must load quickly and respond nimbly to requests; users have even less patience for slow websites on smartphones than they do on the desktop. 25% of mobile users will give up and go elsewhere if a page takes longer than four seconds to load.

Smartphone users are task-oriented; mobile sites must get right to the point.

Mobile users are “opportunistic foragers” rather than “browsers”. They want to do one thing – check their news feeds and status on social networks, reply to messages, buy tickets, get information – and move on. Interaction is frequent, but brief: 50% of mobile users stay less than 10 seconds on a page.

Smartphone users expect sites to be intelligent, and to work with their devices.

Modern smartphones have GPS, which means that users expect their devices to present information that directly relates to where they are and what they are doing. Online offers to “find a store near you” that require me to enter a postal code should not exist in the smartphone version of a site: the site should know where I am.

Increasingly, mobile users will expect a seamless transition between desktop and mobile interaction.

Shifting between a mobile and desktop experience of a site, I should be treated as the same person. My needs may be different, but the interface should be similar, and my information – including patters of use and interests – should be carried seamlessly between both realms.

If we acknowledge these changes and design for mobile users first, we will create a cleaner, lighter, faster, more focused and intelligent site. Both desktop and mobile users benefit as a result.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.