5 Must-Haves for Mobile-Friendly Websites
You don’t need to read statistics to know that teenagers are welded to their smartphones. The latest statistics, however, show that adults are also tightly coupled to their cellphones. More significantly, according to the Pew Research Center’s surveys on cellphone Internet use in April 2012:
- 55% of adult cellphone owners access the internet on their mobile phones; nearly double from three years ago.
- 17% of all adult cellphone owners are “cell-mostly internet users” — meaning, they use their cellphones for most of their online browsing.
- Overall, 31% of cellphone internet users say that they mostly go online using their cell phone, and not using some other device such as a desktop or laptop computer.
As more consumers upgrade to smartphones and carriers drop their data package prices, mobile Internet usage will continue to climb. When you plan your next website, think mobile and make sure you accommodate the needs of both desktop and mobile users. This holds true for B2B as well as B2C websites.
The Google SEO factor
In case you think all this effort is just to make mobile users happy, remember that the Google gorilla is making plans to favour websites that optimize for mobile usability. It’s no longer possible to ignore the growing number of smartphones and the untapped advertising revenue opportunities mobile users represent. Google recognizes three types of approaches for supporting mobile devices:
- A responsive website. This is Google’s recommended configuration for desktop sites.
- A website that detects device type and dynamically serves up different HTML and CSS.
- A website with separate URLs for desktop and mobile-specific versions of the site.
If you can afford it, build a website that is specifically designed for mobile devices . If you can’t afford that, at least make your desktop site mobile-friendly. Yes, smartphones allow users to see a full-screen webpage, then pinch-to-zoom in on text or images of interest. Nonetheless, there are a few things to consider which highlight the user experience differences. (To successfully build a mobile-friendly website, use a Website Planning Roadmap.)
Button size: you rely on your call-to-action buttons to move users along to other pages, to convert them, or to make a purchase. A small button that’s hard to press can be incredibly frustrating.
Small fonts and text links: it’s bad enough when users see small fonts on a small screen, but when important hyperlinks are nearly impossible to select and click, it can make mobile users abandon their efforts.
Small text fields: as if miniature buttons and tiny text hyperlinks weren’t bad enough, typing into tiny text fields just adds to the inconvenience.
Easy text entry matters
With smaller keypads or touch-screen keys, it’s a lot harder to enter information on a mobile phone. When designing web forms, use one row per field, and give each field a decent amount of height (size matters, remember?). When possible, use drop-down menus for data selection rather than making the user type all the time.
This is a tough balancing act. The average Internet user tolerates 4 seconds of delay waiting for a page to render. Online activity still happens mostly on desktops and most homes have high-speed Internet, so it’s tempting to build flashy sites with beautiful images that look like TV commercials. But most mobile users are still on 3G connections. The tips below benefit mobile performance, but at the same time they also speed up desktop performance.
- Strip it down:
Have your designers do their best to compress images and strip out unnecessary dynamic content such as automatic refreshes. These features eat up bandwidth and you want to avoid that, especially on the Home page
- Get rid of automatic pop-ups:
These can seem cool on desktops but they are amazingly annoying on mobile devices.
- Reorganize content:
Images and animation are not the only culprits. Be ruthless when editing content for your website. Reduce word count and consider whether some information can be relegated to secondary pages. (For more, read The 3-step content creation cycle.)
- Strip it down:
Multiple screen sizes matter
Your site needs to be responsive and adjust to different screen resolutions. This approach delivers the most consistent user experience. Once upon a time there was the smartphone. Now there are different brands of smartphone which support different screen sizes, and tablets are increasing in popularity. According to Forrester Research in 2012, 20% of the US population owns a tablet. While the difference in user experience between larger tablets and desktop PCs is minimal, users tend to research purchases using whichever device is close at hand; a responsive implementation gives you -- and the user -- flexibility.
When you design for responsive sites and have small mobile screens in mind, one of the things you can do to is adopt a single column layout to minimize horizontal scrolling. This simplifies development and works well on any size of screen.
Every website is different
Your metrics for website success are specific to the business goals you want to your website to support. All of your design decisions need to be weighed against your goals. Rather than implement every little tip you read about mobile-friendly design, just remember this rule of thumb: a positive experience for something that is used often makes it easy to forgive a negative experience for something that is used rarely. In other words, begin by optimizing what really matters. Take a look at your analytics to see which pages are visited most often and where visitors go from there. (To analyze your website performance in-depth, perform a website audit.)
Remember -- not only will you score points with mobile users by implementing mobile-friendly features, you'll also preserve your hard-earned SEO results.