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.
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.
Check them out below, roundtable them with your mobile marketing team, and let me know what you think in the comments!
25 Ways to Maximize Your Mobile Revenues
The slide deck embedded below includes all 25 design improvements for driving mobile revenues.
Inside, you’ll be able to compare what a mobile site looks like both before and after a design best practice has been applied. Sometimes the difference is subtle, other times it is night and day.
The complete checklist
If you want the entire checklist ‘to go’, enter your email below and you’ll get a printable PDF that contains all the checklist items with their corresponding explanations.
1. Make buttons and touch targets at least 44px by 44px.
The bigger a touch target is, the less likely a user will hit the wrong button. Apple’s design guidelines recommend touch targets at least 44px by 44px. (Click to Tweet)
2. Make the font size of body copy at least 14px.
Rather than requiring users to double tap (or worse, pinch) your content, make sure the font size of body copy is 14px and above for maximum legibility. (Click to Tweet)
3. Make the line height at least 1.5 for paragraph text.
A line height of 1.5 dramatically increases readability, although it can be set tighter or looser depending on the context. (Click to Tweet)
4. Check that all aspects of the site are touch-friendly.
Your visitors expect to use common mobile gestures like swiping, tapping and dragging –
so you’ll need to build in functionality for different kinds of elements. Accordions, drawers, carousels and off-canvas flyouts are great for increased usability. (Click to Tweet)
5. Make sure that information found in hovers can also be found on mobile.
On mobile, hovers tend to work unexpectedly (or not at all). Make sure that any information found on your mobile site does not require a hover state to view it. (Click to Tweet)
6. Ensure the website reflows for both portrait and landscape orientations.
Mobile devices are held in portrait and landscape orientations, so you’ll need to make sure your site adapts for both. It’s also an opportunity to think critically about how users might use the website differently in each orientation. (Click to Tweet)
7. Make sure common touch actions fall within the easiest to reach areas.
Take advantage of common touch ‘hot zones’ by making actions easier to reach. Place key interactions like menus, add to cart and purchase buttons in these easily accessible areas. (Click to Tweet)
8. Optimize navigation for common mobile actions.
Use analytics to understand how mobile users are browsing your website. If there are common pages or features they are using the most (e.g. a store locator) be sure to place them prominently in navigation menus. To learn more, you can check out our free guide: How to Build a Better Mobile Website Using Analytics. (Click to Tweet)
9. Move non-essential menu items to the footer.
Similarly to the previous point, remove non-essential / infrequently used pages out of the primary navigation and into the footer. Are many mobile visitors going to your ‘Terms of Service’ page? Maybe it would be better served in the footer, thereby reducing clutter in mobile navigation. (Click to Tweet)
10. Make sure that page context is extremely clear.
Smartphones have a much smaller viewport than larger desktop devices. This means that there are less visual cues to remind users what page they’re on. Breadcrumbs, distinct headers, and fixed navigation are great ways to remind users where they are, and what task they’re doing. (Click to Tweet)
11. Include a home screen icon on your site.
If a user adds your website to their device homescreen, it’s a great sign that they plan on visiting frequently. When a user opts to add your site to their device’s home screen, make sure you have an icon that stands out among dozens or hundreds of other apps on their device. Check out Apple’s guidelines for creating site-specific or page-specific icons. (Click to Tweet)
12. Remove text from images.
Separating text from images is a standard web design best practice, but it’s especially important for mobile devices. Images with text in them will become unreadable and poorly formatted when scaled down for smaller screens. (Click to Tweet)
13. Use vector-based icons instead of images.
Mobile screens typically have resolutions and pixel densities equal to or higher than a lot of desktop monitors and laptop displays. The result is that graphics can look fuzzy or blurry if they’re not designed for such high quality screens. Vector-based images will look great on every screen, no matter what resolution it is. (Click to Tweet)
14. Ensure that images are high resolution / Retina quality.
Extremely high resolution images are a great way to surprise and delight your customers, because most images on the web still look fuzzy, pixelated or even blurry when viewed on a Retina quality screen. This can have a big impact on performance, so you need to make sure that devices are only sent the images appropriate for their screen type. (Click to Tweet)
15. Feature images prominently on relevant pages.
Large product images can increase conversion rates by as much as 9%, so give them as much room as possible. Other content, such as editorial and product copy, can be inserted into panels, accordions, or simply placed further down the page. (Click to Tweet)
16. Make sure image carousels are swipable.
On a desktop, using buttons to control a carousel is easy. On mobile, trying to hit small navigation touch targets is a pain. It’s much more effective to provide a carousel that can be swiped backwards and forwards. (Click to Tweet)
17. Make buttons with CSS rather than images.
Buttons that are images render poorly on mobile devices. CSS buttons give you much more flexibility, and require less resources to download on a user’s device. (Click to Tweet)
18. Ensure that elements which toggle open do not cover other elements.
Elements that sit on top of other content can provide a quick and easy way to navigate on a desktop site. However, on a mobile device they’re more difficult to manage. Instead of creating stacked user interface elements, use accordions to push content down the page (or let customers navigate to custom landing pages). (Click to Tweet)
19. Check that forms use custom input types.
One of the benefits of software keyboards is that they include multiple layouts for different types of data input. Make typing tasks easier for your visitors by loading up context-aware keyboards. (Click to Tweet)
20. Make forms as short as possible.
Since it’s more difficult to input data on a software keyboard, try to minimize the number of typing tasks required on your website. Your customers will thank you by being more likely to stick with the task at hand. (Click to Tweet)
21. Turn off autocorrect and auto-capitalize on form fields.
Mobile devices have more aggressive autocorrect systems than their desktop counterparts. However, fields like email addresses, home addresses and usernames should never be autocorrected and autocapitalized. (Click to Tweet)
22. Use device APIs where appropriate.
When making a desktop site mobile we sometimes forget that smartphones can access user location, make phone calls, take pictures and much more. (Click to Tweet)
23. Label calls to action with descriptive information.
Making your CTAs more descriptive will give your customers a better understanding of where links will take them next. This will make it easier for them to move through the site. (Click to Tweet)
24. Make sure calls to action in the conversion path follow a common design scheme.
When a customer moves through a conversion path, make sure CTAs that lead through that path follow the same design scheme. This will help users move through a series of pages faster. (Click to Tweet)
25. Ensure your website loads in under three seconds on a 3G connection.
Modern web design practices (including large responsive designs) can have a negative effect on the performance on your website. 57% of users are likely to leave your website if it takes 3 seconds to load, so building performance into your design is critically important. (Click to Tweet)
If you’re having difficulty with performance, give our Performance Suite a try!
Looking for the PDF?
Want to save this list of mobile upgrades as an actual checklist? Fill out the form below and we’ll send you the PDF version.
Have you made any of these optimizations to your mobile website before? What kind of results did you get?
If you have some success stories to share, we’d love to hear them in the comments!