When creating a mobile version of your website, there are several functionalities that differ from a desktop version. Not only are visitors viewing your site on a much smaller screen, the way they interact with it is different, as well. Here are 10 mobile design tips to incorporate on your site.
Keep it quick: Given that many mobile users often use their devices during spare moments, it’s crucial a mobile site loads fast and is pain-free to use. That means prioritizing content and features that mobile users need most. Also, reduce large blocks of text to bullet-pointed text, and ensure images are small and compressed for easy loading.
Simplify navigation: As much as possible, minimize the need for scrolling. Any scrolling required should be vertical, and establish a clear hierarchy in menus. Make navigation easier by offering clear back and home buttons. Use seven navigation links or fewer per page, and have a search box prominently available on complex sites.
Be thumb-friendly: With mobile, the thumb rules. So use large, centered buttons for easy thumb navigation, and give users breathing room to reduce accidental clicks.
Design for visibility: Mobile users are often in low-light environments. So always be sure to create contrast between background and text. All of the content should fit onscreen without forcing the mobile user to pinch or zoom. Use size and color to indicate link/button priority.
Make it accessible: In a perfect world, a mobile site should work across all devices. Consequently, look for alternatives for Flash, since that video format does not work on all devices. Try using HTML5 for interactivity, and adapt the site for both vertical and horizontal screen orientation.
Make transactions easy: To increase sales and calls-to-action, focus on information that will spur a transaction. Reduce the number of steps to complete a transaction. Forms should be short, using the fewest number of fields possible. Use check boxes, lists and scroll menus to make data entry easier. Also, use click-to-call functionality for all phone numbers.
Make it local: If your landscape business depends heavily on local clients/customers, be sure the address is on the landing page.
Sync traditional and mobile sites: People now use multiple screens throughout the day. So, make it easy for visitors to visit on both by allowing them to save popular searches and shopping cart contents.
Use mobile site redirects: Such redirects are code embedded in a site that automatically senses a visitor is using a mobile device and sends them to the mobile-friendly version of the site.
Listen, learn and refine: Use free analytics programs to understand how people are using your site and to continually improve their experience.