It’s a mobile-first world. If you don’t want to take our word for it, ask Google. The search giant now predominantly uses the mobile version of online content for indexing and ranking.
The internet is gaining an average of a million new users each day. More than 5 billion are unique mobile users, which is a 2 percent increase over the previous year. Of those 5 billion mobile users, 3.26 billion are accessing social media on their devices. That raises a question: What’s going on with your website and content? Here’s what you need to know about optimizing both for mobile navigation and user experience (UX).
Sure, mobile devices have grown a bit in size over the years – but it looks like foldable phones might not be ready for prime time. What that means for you is that there’s only so much space on the screen for content and navigation. It’s time to rethink the relevance of a navbar on the mobile version of your website.
The navbar makes sense for a desktop or laptop screen because you’ve got plenty of space. But on mobile, there are more valuable things that can take the place of your navbar. Consider replacing it with the mobile hamburger menu that slides neatly open and then gets itself out of the way.
Switching to a hamburger menu might also make you think about how to prioritize what content should be accessible with a navbar. Big screens offer more comfort in drill-down navigating, but most people don’t have the patience for that on a mobile device.
Another option is to dispense with navigation altogether and create a single-page layout for the mobile version of your website. We took that approach for the mobile version of our ContentBacon website. Our story unfolds as you scroll, with appropriate embedded links to other main areas of content when relevant and necessary.
You can also use collapsible sections, otherwise known as accordions. They let your mobile users see the headlines and decide for themselves if they want to explore further.
If you speak French or are a serious cook, you know this term stands for “putting in place” or “everything in its place.” That kind of thinking is très bon for mobile navigation and user experience, and it should guide how you design your site’s layout.
Most people hold their mobile device with one hand and do most of their navigation with a thumb. It doesn’t matter that phone screens have gotten bigger. Your hands have stayed the same size – and so has what we can comfortably reach.
The area we can most accurately tap with our thumb while we’re holding the device in our hand is the center of the screen. The same cannot be said for the extreme upper and lower edges of the device.
Best practices for an optimal user experience suggest that you locate the primary functions necessary for interaction toward the middle of the screen, with secondary actions at the bottom. We might still have to engage our other hand to get at those secondary actions, but we can do much of our navigation and interaction with just the thumb.
Google will give you less love in terms of ranking when your website has a slow load time. That’s even more of an issue now that Google’s ranking algorithm favors mobile search.
Wi-Fi hotspots are everywhere, but design based on expected broadband connectivity is a dangerous assumption – at least until 5G is available everywhere. Meanwhile, our mobile devices need content precisely designed and optimized for fast loads.
Dispense with the idea of mobile-friendly design. It’s time to move to a responsive design with a mobile version that uses images sized specifically for mobile screens. You and your website visitors may be underwhelmed if you leave it up to your website-building software to generate layouts that are supposed to work on both desktop and mobile screens. Here’s a few reasons why:
If you’ve ever shopped or provided information to an organization with a global footprint, you know what it’s like to select “United States” from the pulldown menu. Or you’ve struggled to find “Central Time” from the list of GMT locations.
Is that what awaits your visitors if they’ve got a form to fill out? And moving beyond pull-downs, do they have to enter a lot of text-based information? Don’t forget about our mobile friend we love to hate, autocorrect.
Best practices recommend reducing the number of form fields. Approach it from the standpoint of asking for only what you absolutely need instead of what you would really like to have. Combine fields where it makes sense.
Help users manage expectations by breaking up forms into a series of steps along with a progress bar.
We’ve transitioned from mobile-friendly to responsive. Now it’s time to stop thinking about your mobile website as a slightly tweaked version of the desktop site. Many organizations now approach web design by leading with the mobile version.
It’s not a smaller experience. It’s a different experience. The best practices for mobile navigation and UX suggest you approach design as if you’re starting from scratch. Learn how we can help.