The Mobile Web Comes of Age

You’ve all read about this being the year for “mobile” (hang on, wasn’t that supposed to happen last year, and the year before?) but what does that mean for you and more importantly your business?

To get to the point, it means that if your website isn’t “mobile friendly” you risk losing your audience to competitors who have a website that is optimized for browsing on smartphone and tablet devices.

By 2015, it’s predicted that m-commerce (mobile online shopping) will reach US$163 billion worldwide, which is 12 percent of global commerce turnover*. In 2009, PayPal mobile payments totaled US$141 million and at the end of last year, that number had grown to US$4 billion.

The total number of smartphones entering the world per day has risen to about 1.45 million devices, and the majority of these users are using their phones at home, where there is usually easy access to laptops and desktops. People also use their smartphones while traveling, in public places, and in the office.

This trend to browse on mobile devices rather than traditional desktop computers represents a paradigm shift in user preferences and offers brands new business opportunities.

A report by Gartner in Jan 2010 predicts that by 2013, mobile phones will overtake PCs as the most common web-access devices worldwide. To further contextualize the extent of this phenomenon; Facebook has over 901 million users, some 500 million of which are using the mobile version of the website – more than half their user base.

So, now would indeed seem the time to start “thinking mobile” (if appropriate – some companies might not get substantial enough mobile use to warrant the time and investment), and certainly mobile considerations should be at the heart of any digital strategies and planning if you have recognized the need.

Unfortunately, it’s not usually a simple process as there are new technology, interaction, and user behavior considerations. Gone are the days of the mouse – all hail the mighty finger swipe! As usability expert Jakob Neilsen so eloquently declares, “Designing for mobile is hard.”

Mobile users expect a different experience

Look at the size of your phone screen, now look at your laptop or desktop screen – what you should notice first is the obvious difference in screen real estate. High if not first on your list, should be a consideration for single column layouts with vertical scrolling, so that your users don’t have to “pinch” to zoom in and out across multiple columns to read text.

Mobile design differences go far beyond simple layout issues, however, content should be shorter and simpler; images should be cropped differently; interaction techniques change considerably due to the differences mentioned above regarding finger and mouse-driven input; and feature sets should be scaled back to fit the smaller screen sizes and ensure better usability.

When you are making design and usability considerations for smaller screens, disregard anything that’s not relevant – you don’t have the space. You’ll have to make decisions about what should go and what’s useful enough to stay, so that you can concisely present your products, services, and ideas to visitors without frustrating them. They will thank you for this.

Under Armour Desktop version

Under Armour Mobile Version

(The Under Armour mobile site does a great job of simplifying the mobile experience, optimizing the navigation, and also minimizing the click path to achieve desired actions. They also use color well for strong CTAs and larger, clickable buttons.)

Responsive web design vs. mobile optimization vs. apps

Responsive web design is a design philosophy and front-end development strategy that makes desktop websites accessible on a number of devices through the use of advancements in HTML and CSS technology. Instead of serving your users multiple URLs depending on the device that they’re accessing your site with, responsive web design allows you to design a site once, and format it differently for many devices, eliminating the need to maintain multiple sites, which can sometimes dramatically decrease the costs of going mobile.

Starbucks iPhone version

Starbucks iPad version

Starbucks website version

(iPhone, iPad, and desktop versions of the Starbucks website – same content, automatically reformatted to fit the device screens. More examples at http://mediaqueri.es)

As helpful and cost-effective as this approach sounds, the fact remains that in some cases, providing mobile-specific content to a mobile user is a better solution than reformatting it with responsive web design. For example, car insurance company eSurance realized that its users needed accident resources and towing help that desktop users didn’t. Consequently, on the mobile version of its website this information is front and center. ESurance did a great job of understanding the different user needs and requirements across different platforms here.

While it is true that HTML5 has substantially improved mobile site capabilities and will continue to do so over time (an excellent example being the FT HTML5 web app that now has over 2 million users), there are some instances where developing a native app will work best for your business objectives.

Nielsen again is all too happy to declare: “It’s a fact that apps beat mobile sites in testing.” Further, he goes on to say, “An app can target the specific limitations and abilities of each individual device much better than a website can while running inside a browser.” This is certainly true if you need to utilize push notifications, location-based services, or photo editing features such as the kind that Instagram offers.

Try thinking ‘mobile first’

The popular strategy for mobile design to date has been a case of developing the desktop website, and then trying to cram as much of it as possible into smaller devices, without giving any thought at all to the different needs that a mobile audience might have. As more people start to use their mobile and tablet devices over their desktops or laptops, this attitude needs to change – we need to stop thinking “mobile friendly,” start thinking “mobile first,” and scale up from there.

*ABI Research