25 Top Design Upgrades to Make Your Mobile Revenue Skyrocket

13,738 views

Published on

Only a few short years ago, the idea of building a mobile-friendly web experience for your smartphone visitors had almost zero business value.

Mobile traffic was barely noticeable, and the few visitors who did come to your site from slow-performing smartphones weren't there to go shopping.

Today, however, one in five people in the world (over 60% in the US) owns a smartphone, and they are readily using it for researching and purchasing products online.

These same smartphone owners have come to expect great (not just average) mobile experiences when they browse the web. They don't enjoy pinching and zooming, they hate waiting, and they want to quickly and easily complete tasks on any device.

And since there's up to 50% of your website traffic now coming from mobile, you need to start paying as much attention to your mobile visitors as you do to your regular desktop visitors.

When you do, you'll immediately see your mobile conversion rates, average order values, and revenues begin to skyrocket!

So, to help you and your team get the most out of the mobile channel, I wanted to share with you the top 25 mobile web optimizations that successful companies like Threadless, Beyond the Rack, ideeli, Garmin and Expedia use to drive millions of dollars in mobile revenues.

Published in: Design, Technology, Business

25 Top Design Upgrades to Make Your Mobile Revenue Skyrocket

  1. 1. 25 TOP DESIGN UPGRADES TO MAKE YOUR MOBILE REVENUE SKYROCKET
  2. 2. 20% Did you know that 20% of the world’s population owns a smartphone? Source: ABI Research
  3. 3. And 63% of these people expect to do more shopping on their mobile devices over the next couple of years. That’s a lot of mobile shoppers! Source: Latitude
  4. 4. With so many visitors looking to shop on your website, user experience is now more important than ever.
  5. 5. Because if your users are happy, your business will see higher conversion rates, average order value, and mobile revenue.
  6. 6. “I like what you’re saying, but how do I start optimizing my mobile user experience?” Great question...
  7. 7. There are 25 easy upgrades you and your team can make right now to help your customers fall in love with your mobile website!
  8. 8. You’ll find them throughout this deck, and if you need expanded descriptions and a printable checklist, you can download it at mobify.com/checklist. Now let’s get started!
  9. 9. $4.99 $4.99 1 Make buttons and touch targets at least 44px by 44px
  10. 10. $4.99 2 10px 14px Make the body copy at least 14px
  11. 11. $4.99 3 1x $4.99 1.5x Make the line height at least 1.5 for paragraph text
  12. 12. 4 Check that all aspects of the site are touch-friendly
  13. 13. $4.99 $4.99 5 Make sure that information found in hovers can also be found on mobile
  14. 14. 6 Ensure the website reflows for both portrait and landscape orientations
  15. 15. 7 Make sure that common touch actions fall within the easiest to reach areas
  16. 16. Mobile Visits 8 Shop Search About Support Contact Q&A Links Gallery Optimize navigation for common mobile actions
  17. 17. 9 Move non-essential menu items to the footer
  18. 18. 10 Make sure the context of a page is extremely clear $4.99
  19. 19. 11 Include a home screen icon on your site
  20. 20. 12 Remove text from images
  21. 21. 13 Ensure that images are high resolution / retina quality
  22. 22. 14 Use vector-based icons instead of images
  23. 23. $4.99 Feature images prominently on relevant pages
  24. 24. 16 Make sure image carousels are swipeable
  25. 25. $4.99 17 Make buttons with CSS rather than images $4.99
  26. 26. Sign In Sign In Shop Shop Search Search About About Support Support $4.99 $4.99 Ensure that elements which toggle open do not cover other elements
  27. 27. Email-specific Numbers-specific Check that forms use custom input types
  28. 28. Make forms as short as possible
  29. 29. 21 Turn off autocorrect and auto-capitalize on form fields
  30. 30. 22 Use device APIs where appropriate
  31. 31. 23 Label calls to action with descriptive information
  32. 32. 24 Make sure that calls to action in the conversion path follow a common design scheme
  33. 33. 25 Ensure your website loads in under 3 seconds on a 3G connection After 3 seconds
  34. 34. Thanks for reading! Before you go, don’t forget to download these 25 design upgrades (with expanded descriptions) in a printer-friendly PDF. You can get it here: mobify.com/checklist
  35. 35. Mobfiy helps businesses build faster, easier to use mobile web experiences that drive exceptional business results. If you have any comments, questions, or would just like to learn more about how to launch a mobile-optimized website, please feel free to reach out to us and say hello. Share this deck! LinkedIn Facebook Google+ Twitter

×