5 Best Practices to Improve Your Mobile Experience

Posted by | Comments

Tags: , , ,


5 best practices for mobile experiences

Mobile experience is on its way to becoming just an aspect of digital experience. It’s still worth discussing separately, for now, but that may not be the case in the next 3-4 years.

One can argue it took all of us too long, but things are definitely starting to look better at the 9-year mark:

  • Standards are emerging
  • Best practices are more widely being adopted
  • While you’re going to see the odd site with no mobile play at all here and there, those sites are being pushed to the fringes

In other words, we’re exiting the wild, wild, west phase of mobile.

If there are days where you still feel like you still live in the Wild West, these 5 tips should help you get out.

1. Optimize Your Content-to-Chrome Ratio

First, some cleanup.

The part of your site that contains the navigation elements is called the “chrome.”

On desktops, you have a lot of space for the chrome - you’re supposed to show all the primary navigation elements on all pages.

On mobile, you should optimize the chrome-to-content ratio better. That is, you should devote what little space you have to more of the content, and less of the navigation.

We’ve talked about these in the past, but sites like Everlane devote pretty much all of the screen to content, with a small area for the hamburger menu:

Chrome to Content Ratio

Then, when users signal that they want to see navigation elements by tapping on the hamburger menu, you can actually devote as much real estate as needed to the navigation elements.

Win-win.

2. Design for Speed

47% of consumers expect a web page to load in 2 seconds or less.

40% abandon a website that takes longer than 3 seconds to load.

If you think your desktop visitors have the patience of a lit match, thinking about the patience people with mobile devices have will give you a headache.

There are a few things you can do to keep most of those visitors from bouncing off your site due to speed:

  • Use images sparingly
  • Hide latency - serve what you can above the fold, then have the rest of the page load in the background
  • Serve smaller images

Smaller images deserve to be called out, because there’s a technique from LukeW that should help significantly:

Double your dimensions, set the quality of the image to zero, and save your JPEG.

That should not only reduce the size of your image, but also improve the quality.

LukeW

Once again, that’s a win-win.

3. Improve the Return Visitor-Experience

If you have entered any data at all into a form on a mobile device, or attempted a multi-step checkout on a smart phone, you’ll know how much losing all the work you’ve done so far hurts.

Plugging in values into the tiny devices sans proper keyboard is a pain.

And if you value your returning visitors at all, you’ll get them to avoid doing all that work again.

That’s why you need to incorporate these guys:

cookies

If your Content Management System requires cookies, you can use cookies. If your CMS is cloud-based, use the cloud-based counterpart.

Whatever you do, don’t let all their hard work go to waste.

Learn the top mistakes to avoid in mobile.

Click here to read The 7 Deadly Sins of Mobile Web Design.

4. Ensure Your Hotspots reach the Minimum Viable Size

Making your call-to-actions larger is something that doesn’t just apply to mobile sites.

That said, there are some specific measurements that you have to meet for mobile, given that thumb actions are far less precise than mouse actions.

Generally, thumbs are about 1-inch-long, which translates to about 72 pixels. As many visitors use their thumb pad instead of the thumb tip, you need to meet these size requirements:

  • Apple: 7mm (44 pts) min width; 2mm min gap (where 1 pt = 1/72th of an inch)
  • Android: 9mm (48 dp) min width; 2mm min gap (where ‘dp’ is density independent pixels)
  • Windows Phone 7: 9mm (34px) min width; 2mm min gap

5. Test Your Site Thoroughly

Even if you have a key mobile device to test your site on, UX gaps will still be likely to fall through the racks.

To ensure that doesn’t happen, you can start testing with sites like https://crossbrowsertesting.com.

crossbrowsertesting site

Then, you can check on 3-5 actual mobile devices after you launch features or sets of pages. Make sure you get to multiple types of functionality, including your video player.

Putting It All Together

Getting mobile experience right is hard, but ultimately, rewarding.

Those who use multiple tools to test their sites, design for low page load time, care enough to improve the user experience for returning visitors, use the right sizes for hotspots and CTAs, and optimize the content-to-chrome ratio ultimately have a significant leg up in the age of mobile.

'Want to optimize your conversion funnel but don't know where to start? Find out how we can help you with conversion rate optimization