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:
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.
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.
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:
Whatever you do, don’t let all their hard work go to waste.
Learn the top mistakes to avoid in mobile.
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.
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.