Gone are the days when everyone accessed websites from a desktop or laptop computer. Many people now browse the web from their smartphone or tablet daily, and some have even completely replaced their computer with these more portable devices. Businesses that plan to stay competitive have got to optimize their sites for mobile. I'm not talking about making an app - apps require downloads and challenge users' normal routine. Let's face it: when people are looking for something on the web, they still rely on search - not apps - to find what they need. So to succeed in the mobile environment, you've got to have a site that allows people to quickly find what they're looking for and/or do what they came to do.
Read on for some of the more important considerations:
First Things First: Consider the Context
The absolute worst thing you can do when creating your mobile site is to assume that people will visit the same pages and try to navigate the site in the same way they do when sitting at a computer. In fact, there's probably only a fraction of your total content that needs to be included on your mobile site. Think about what your visitors might need out of your site when they're on the go: your phone number, directions, a quick price check. Make this information easy to find with just a couple clicks.
You can probably take a good educated guess at what would be most important to a mobile user, but don't forget to validate that by checking your analytics. Most suites today make it easy to separate data based on browser and device. Take a look at entry pages, search terms, and pathing data of your mobile users to be sure your gut instinct is correct.
Keep It Simple
As important as it is to strip extraneous content from your mobile site, it's equally critical to simplify your overall design and layout. Consider removing all graphics and streamlining your navigation. In many cases, the optimal mobile home page contains nothing more than a short menu that allows people to quickly navigate to the content they need. Forget about drop-down menus or even second-level navigation - they just don't work well with touch screen and they take up valuable screen real estate.
The wording that you use on your menus is extremely important in a mobile environment. Remember, there is no hover tool tip here so your words need to be concise and easily understood. There is no room to be clever on a mobile site.
Also resist the urge to have a consistent header on each page of your mobile site, although this is considered a best practice on a desktop site. With mobile, you're better off using a streamlined breadcrumb navigation to provide visitors context and help them navigate to other areas of the site. And don't forget the search box - if possible, include it on the top of each page of your mobile site so visitors can easily jump to another section.
But keeping things simple doesn't mean you should abandon all of your company's normal brand requirements. Your mobile site has to have visual similarities to your full site that immediately assure visitors they're in the right place. Including your company logo and primary web colors is the bare minimum - if possible, also try to adapt your button style, fonts, and other elements (if they translate well to the small screen).
After years of thinking about website design in terms of a horizontal configuration, you've now got to think narrow. On traditional web designs, designers go to great extents to reduce vertical scrolling, but in mobile, this is acceptable and users are quite accustomed to the vertical scrolling action. However, avoid at all costs having any images in your design that extend beyond the width of the design and require horizontal scrolling. The experience of scrolling horizontally on a smartphone is unnatural and most users won't bother. Keep your layout to one column and check your code to make sure you don't have any tables or images with widths set larger than your mobile page width.
Know the Technology
There's a lot that can be done to make your website friendly to mobile browsers. First and foremost is to set up your server to detect mobile users and automatically redirect them to the mobile version of your site. This needs to be done at the page level; don't take the easy way and route all mobile traffic to your m.home page. Set your redirects to send visitors to the specific page they requested, in mobile form. But also include a link that allows people to easily go to the full site if they'd like.
Another basic requirement is a fast load time. Most mobile website visitors are on the go, meaning they have limited time to wait for pages to load. If you want your site to be useful to readers, it needs to be blazing fast. Smartphones don't have the same bandwidth as computers, so eliminate large file downloads and keep images to a minimum.
Make It Easy for Visitors to Act
Mobile site visitors are looking to take action, usually by making a purchase online, locating a map or phone number, or even filling out a request form. Make it easy for them to accomplish their goals with just a couple of clicks. Use large icons and bolded text for important information about products, and make any helpful links large. Don't miss out on sales because your text is too small to read or the links are too small to click.
If one of the main goals of your mobile users is to contact you, prominently display a click-to-call phone number and make sure your address links to a map with driving directions. And any time you require a visitor to fill out a form, whether it's a simple log-in form or a longer purchase form, make sure you have optimized your form to reduce frustration and errors. Use the absolute minimum number of fields required to complete the transaction and don't require your visitors to type any more than necessary.
It's a Never-Ending Cycle
The term "continuous quality improvement" has never had more relevance than in the mobile website arena. It's impossible to simply build your mobile site and forget about it. You've got to test it constantly, on multiple devices with multiple browsers, update it as technology and devices evolve, and tweak the content and navigation based on user feedback. Even your most loyal customers will refuse to use your mobile site if it doesn't meet their needs.
Meet Your Favorite ClickZ Contributors
Many of ClickZ's leading expert contributors will be at ClickZ Live, the new online and digital marketing event kicking off in New York (March 31-April 3). Hear from the likes of: Jeremy Hull, Lisa Raehsler, Andrew Goodman, Bryan Eisenberg, Mathew Sweezey, Aaron Kahlow, Stephanie Miller, Simms Jenkins, Jeanne S. Jennings, Dave Hendricks and more!
Tim Ash is CEO of SiteTuners.com, a landing page optimization firm that offers conversion consulting, full-service guaranteed-improvement tests, and software tools to improve conversion rates. SiteTuners' AttentionWizard.com visual attention prediction tool can be used on a landing page screenshot or mock-up to quickly identify major conversion issues. He has worked with Google, Facebook, American Express, CBS, Sony Music, Universal Studios, Verizon Wireless, Texas Instruments, and Coach.
Tim is a highly-regarded presenter at SES, eMetrics, PPC Summit, Affiliate Summit, PubCon, Affiliate Conference, and LeadsCon. He is the chairperson of ConversionConference.com, the first conference focused on improving online conversions. A columnist for several publications including ClickZ, he's host of the weekly Landing Page Optimization show and podcast on WebmasterRadio.fm. His columns can be found in the Search Engine Watch archive.
He received his B.S. and M.S. during his Ph.D. studies at UC San Diego. Tim is the author of the bestselling book, "Landing Page Optimization."
Connect with Tim on Google+.
March 19, 2014