Annoyance. Frustration. Exasperation. Is this how your customers feel when they try to browse your website using a mobile device?
The truth of the matter is that mobile web users are a picky bunch: They have limited patience for overly complicated menus or minuscule links. That grumpiness is understandable — using a thumb to navigate on a tiny screen can bring out the disgruntled user in anyone. But as people increasingly access information via their phone, more and more potential customers will navigate your site using their phone or tablet.
If they are driven off by bad mobile design, they just might be driven off for good: Karim Temsamani of Google says 61% of customers who visit a mobile-unfriendly site are likely to go to a competitor’s site.
Creating a mobile-optimized site may already be a top marketing priority for you — but with half a dozen other top priorities vying for your attention, what’s the most efficient way for you to help your site put on its best phone face? Here is a step-by-step guide to transform your website from mobile purgatory to mobile nirvana.
1. Know what mobile devices see.
The first step to fixing a faulty design is identifying the mobile-unfriendly elements: You need to look at your site through a smartphone. If you don’t have one in hand, there are several useful online tools for this:
- Google’s Go Mo offers a visual site test, as well as a follow-up questionnaire that guides you through analyzing your current mobile design.
- iPhoney provides “a pixel-accurate web browsing environment...that you can use when developing websites for iPhone.”
- iPad2 Simulator lets you use Safari to view your web app as it will appear on an Apple tablet.
Thoroughly browse your site with a pen and paper sitting next to you. Make note of problem areas, such as tiny text, large images and densely populated links. (More on design issues in the next section.)
Then conduct a user test. Recruit some friends to spend one to two minutes browsing your site. Afterwards, have them share what they liked or disliked about the experience. Armed with this knowledge, move on to the next step.
2. Determine your mobile site’s focus.
Because smartphones and feature phones have limited screen space, your mobile site design must be pared down to the essentials: Unnecessary graphics and rambling copy must be ruthlessly eliminated. Pull out that pad of paper again and jot down the answers to the following questions:
- What do I want my users to do and/or see on each site page? By giving every page a focus, it will be easier to identify and remove extraneous content. This is a great time to utilize analytics. Knowing what content is already popular with users will help guide the focusing process.
- Where should navigation elements reside? If your site viewers are primarily interested in your home page content (such as with a blog), put menu links on the bottom. If users will be immediately searching for something (such as on a retail site), put the menu and/or search button at the top of the home page.
- Are my forms as simple as possible? If you want users to enter data, only ask for the most vital info. Filling out long forms with a smartphone keyboard is a hurdle few visitors will have the patience for.
- Are my links thumb-friendly? Another reason to weed out unnecessary links and menu options is so your user can use their thumbs to navigate with ease. Icons and buttons should be at least 26 pixels, and put ample space between links to reduce the chance that your user will click on the wrong link. For more about this topic, read Luke W’s excellent post on touch target sizes.
3. Create mobile nirvana.
Now it is time to take all those notes you jotted down earlier and adjust your mobile site accordingly. If you want to have complete control over your site’s customization, or just do not have the time to deal with it, consider hiring a web developer through oDesk. A good developer can take your mobile site to the next level.
If you are more of the do-it-yourself type, there are several online tools that will allow you to create a basic mobile site:
- Landr - If a full-fledged mobile site seems like overkill, then check out Landr. This startup will create the mobile version of a business card — a landing page of sorts for your smartphone visitors. There are quite a few customization options, from adding Twitter feeds to providing a simple contact form, all starting at $9/ month.
- Duda Mobile - Start with a template, then customize your site using CSS and HTML. Duda Mobile offers a decent range of tools to create a basic but useful mobile site for free. If you want more advanced features, such as click-to-call functionality or a custom domain, you will need to pay $9/ month.
- Google's Go Mo - Referenced earlier, Google has provided an extremely useful service with their free mobile site creation app. The Go Mo site will test your current website, provide suggestions on how to make it more mobile friendly, then offer templates and a domain for your mobile site.
- MobilePress - If you live and breathe WordPress, then check out MobilePress. This plugin creates a mobile version of your WordPress site, as well as customized themes, analytics and the ability to deploy mobile ads.
As Google’s Go Mo site is quick to remind you, "More Americans have a mobile phone than have a passport." If you are serious about reaching an online audience, you need to be serious about your mobile site.
Do you agree? Tell us what you think about mobile websites in the comments section below.