Google’s Top 10 Best Practices for Mobile Landing Pages and Sites

All it takes is a quick look at your landing pages on a browser-enabled phone or tablet to understand the challenges your visitors face.

→ Compare Kumon’s mobile landing page compared to the desktop version:

Kumon's mobile landing page compared to the desktop version

Not sure if your website is mobile-friendly? Enter a URL in Google’s Mobile-Friendly Testing tool and find out.

Top Ten Best Practices for Mobile Sites

Google shares its mobile best practices live at SMX West.

#1. Keep it Quick – Mobile Pages Must Load Fast! In Less than 3 Seconds

Mobile users have high expectations with 58% expecting that a mobile landing page will load as fast, or faster than the desktop version. Use these two awesome speed test tools to measure the speed of your pages: GTMetrix and Google’s Page Speed tool.

  • Compress images – users may be on 3G or the much slower Edge network. Use this free image compression tool to miinimize the size of all your images.
  • Prioritize content and features that the mobile users needs the most. (use your web analytics)
  • Text must be easy to scan. Less is better – take the time to make it short and sweet – think “tweet”.
  • Reduce large blocks of text and use bullet points.
  • Headlines really matter, make them compelling!

#2. Simplify Navigation for Small Screens

  • The visitor should only have to scroll one way – from top to bottom.
  • Always have a search box at the top of the page.

#3. Be Thumb-Friendly – Design for “Fat Fingers”mobile landing page conversion improvements

  • Use large buttons and links to reduce accidental clicks.  Make sure text links are isolated from other links.
  • Increase the size of action buttons – add drop shadows to buttons and surround with generous cell padding

#4. Design For Visibility

People are often looking at the screen at arm’s length; they may be walking down the street, or multi-tasking on the sofa.

  • Create good contrast between background and text
  • Use size and color to indicate link/button priority.
  • Use plenty of negative space.

#5. Make it Accessible to Everyone on Every Device

  • Find alternatives to Flash because it doesn’t work on some mobile devices.
  • Use HTML5 for animation
  • Keep users in the same place when they change orientation
  • Tablets are very different from smart phones. Detect screen size and deliver the correct page size.

→ See how text placement changes across devices.

#6. Make it Easy to Convert for Lead Generationcompare a lead generation form on mobile

For every field you add to the form – expect a 50% reduction in conversion.  Keep forms short and use the fewest number of fields possible. Request only the information that will aid conversion, even if it makes the sales team work a little harder.

  • Use click-to-call functionality for phone numbers
  • Use checkboxes, lists and scroll menus to make data entry fast and easy
  • Reduce the number of steps required to complete a transaction – show the zip code field first and auto-fill the city and state.

#7. Make it Local and Findable for your Geography

Mobile visitors are often looking for geographic information.

  • Have your address or store locator on the homepage.
  • Include maps and directions.  Use GPS to personalize when possible.

#8. Make it Seamless As Visitors Navigate to your Site from Any Device

  • For users who move between your desktop and mobile pages maintain key features of the site across all channels when possible.
  • Provide prominent access to login information.  Give visitors the option to “remember” their login so they don’t have to type it in every time they visit from their devices.
  • Provide the same key information for product and services.

#9. Use Mobile Site Redirects

  • Give users the choice to go back to the desktop site by providing a link in the footer.
  • Let users choose which version they prefer to see for later visits.

#10. Listen, Learn and Iterate

  • Use your desktop web analytics to understand what your mobile users are doing
  • If possible do user testing before launching a complex site.
  • Implement and collect user feedback after launch.
  • Do A/B testing – Google Website Optimizer is a free tool to make this easy.
  • Iterate often and continually improve your site.

Responsive website layout samples

More Resources from Google on Building Mobile Websites

Check out Google’s go mobile program offering a DIY mobile site builder with free hosting for a year, templates and features such as “click to call”.

Lead conversion depends on making the mobile landing page as user-friendly as the desktop version.   To create landing pages that will convert, learn what your mobile visitors are doing on your site now.

Analyze web analytics to see the pages and features they are visiting.  Then deliver that experience on your mobile site/pages.

Learn about designing a responsive website starting with wire frames.