Note: Please use these mobile site best practices if designing a mobile-friendly site/landing page is your only option. I believe that responsive design sites are your best option, but I understand the costs associated with creating a whole new site so if you are unable to create a responsive design site, here are some tips from Google’s GO|MO for creating a mobile-friendly site.
1. Keep it quick. Most mobile users are searching on-the-go and don’t have time to wait for your site to load or to read all the content that your well-optimized desktop site contains so create content that can be quickly scanned.
- Use only the most relevant content on your mobile site.
- Reduce text blocks by breaking your content down into bullet points.
- Compress images on your site for faster load times.
2. Simplify navigation. Mobile users are looking to find what they are looking for fast and don’t want to spend time browsing your site to find it so make navigation easy.
- Minimize scrolling with vertical navigation.
- Enable search functionality on large, complex sites.
- Display clear back and home buttons.
- Use 7 links or less per page of navigation.
3. Be thumb-friendly. Make buttons friendly for every shape and size thumb.
- Use large, centered buttons opposed to linked text.
- Give buttons breathing room to avoid accidental clicks.
4. Design for visibility. Make sure users can see your site without having to strain their eyes or do that little annoying pinch.
- Create contrast between the background and text.
- Make sure the content fits on the screen without having to be zoomed or resized.
- Use lots of white space.
- Indicate buttons by highlighting them as different colors and sizes.
5. Make it accessible. The Samsung commercials are true, the iPhone still does not have Flash so neither should you mobile site unless you want to exclude the 250+ million iPhone users and the 100+ million iPad users.
- Do not use Flash-based sites. HTML5 can pack just as great of a punch.
- Adapt your site for both horizontal and vertical orientations.
6. Make it easy to convert. Mobile customers are still customers too. Keep in mind that 4 Ferraris are sold a month on mobile device. If Ferrari can make a sale on mobile, you can too.
- Focus on information that will aid conversions.
- Reduce the number of steps to make a transaction.
- Keep forms as short as possible. Only ask for the necessary information.
- Use checkboxes, lists and scroll menus to make data entry easier.
- Enable click-to-call functionality.
7. Make it local. ~50% of mobile search is local in its nature, your mobile site needs to be too.
- Have your address or store locator on the landing page.
- Include maps and directs. Use GPS when possible.
- Allow users to check stock at nearby stores.
8. Make it seamless. Since users search and shop across many different devices, try to make your mobile site as functional with your desktop as possible.
- Allow users to save popular search and shopping cart content.
- Maintain key features of the desktop site on your mobile site.
9. Use mobile site redirects. This code snippet on your site can determine if a visitor is coming from a mobile device and will automatically take them to your mobile site.
- Give users the option to visit the desktop site with the access to the mobile site again, should they wish to return.
- Let users choose which version they prefer for later visits.
10. Listen, learn and iterate. Listen to what users have to say about your mobile site and make the necessary improvements. Make testing and optimization an ongoing process.
- Use Analytics to see how visitors use your site.
- Collect and implement user feedback.