Understanding Mobile First Design Strategy in 2024

Importance of Mobile Navigation

While it’s true that many searches on Google take place from a mobile device — and it could be easily deduced that users are navigating to interior webpages to answer their question — it doesn’t mean they find what they need and leave the site.

According to Nielsen Norman Group, navigation is used more on mobile than on desktop. With this knowledge, it’s become increasingly important that information architecture and navigation terms remain clear and intuitive, as well as visible on mobile devices.

Nielsen Norman Group also cautions the overuse of hamburger menus. While UX professionals know what the hamburger means (a symbol of three horizontal lines), it’s not familiar to all users, especially those with lower tech literacy.

In any case, keeping navigation visible is favorable for all audiences. Start with an intuitive sitemap that lays out the website and its page relationships clearly. Then, make navigation “sticky” in mobile, and labeling the menu appropriately with high contrast and clues that it’s “clickable” can be helpful to people on mobile devices.

How Slickplan can help: To ensure you’re thinking through your navigation, and how many levels you’re proposing to your users, check out Slickplan’s Site Map tool to map your site’s architecture.

Design for Everywhere

Nielsen Norman Group is one of many UX professional networks emphasizing that mobile-first doesn’t mean mobile-only. Ensuring your site works on mobile devices, like tablets and smartphones, doesn’t mean it will work perfectly on desktop.

Likewise, building a responsive site on desktop first means you need to consider pre-launch testing of your design on devices of all sizes. Through all of this, your design, no matter the screen size, must be an inclusive experience. With around 15% of the world’s population experiencing some form of disability, following accessibility guidelines like Web Content Accessibility Guidelines (WCAG) ensures your site meets their needs.

When considering a mobile design experience, whether you start with mobile or you start with desktop, keep an eye on the functionality and ease of use of things like:

• Keep your brand colors and design simple. Busy designs look busier on smaller devices. That includes your color palette: Stick with simple and contrast-friendly, especially for users who have color blindness.
• Make the navigation intuitive and easy to reach. To eliminate long scrolls, make the navigation ‘sticky’ to the top of the screen, and label hamburger menus with “Menu” for users who may not be familiar with the hamburger icon.
• Ensure phone numbers and calls-to-action are in easy reach. According to a study by UX expert Steve Hoober, 75% of mobile users use their thumb to browse, so making elements “thumb friendly” can help them convert quicker.
• Keep media file sizes minimal. While you may be able to resize images in your CMS, it’s best to resize them before you upload, so you’re optimizing your storage space and site load time from the start.
• Embed media rather than upload. If you have videos on your site, consider uploading them to YouTube and embedding them, which saves space on your site. YouTube is a bonus because it automatically makes its videos responsive for your site, no matter where you embed them.
• Test animation and JavaScript first. Not all animation or JavaScript works on mobile the way it does on desktop, and some users might have JavaScript disabled on their mobile device. Test this first or build around the need when considering the mobile audience.

How Slickplan can help: Need help putting a design together and getting appropriate feedback from your team? Check out Slickplan’s Design Mockup and User Flow tools.

Page Speed Carries Weight

In 2018, Google rolled out a speed update that impacted websites around the world. This, of course, was an effort to get answers to people as soon as possible, with as little delay or load time as possible. That’s why page speed became a much bigger weight, especially as mobile-first took over the headlines.

Slow-loading pages are less likely to be prioritized, indexed, and ranked by Google search engine spiders, or any other search engines. Only if the content is highly relevant and well-written will it continue to succeed.

Before you assume you can keep slow pages because they have great content, remember that people are expecting faster downloads these days. Even a one-second delay in page load can decrease page views, conversions, and customer satisfaction. According to Kissmetrics, nearly 47% of consumers expect a site to load in two seconds or less, so there’s no time to spare if you need to improve your website’s speed experience.

If you’re guilty of slow page load speed, check elements most guilty including:

• HTTP requests, including redirects
• Image sizes
• Code, including JavaScript or CSS
• Amount of text
• Hosting options or solutions

The Fold Exists, But Its Value Varies

When websites first came to be in the early 1990s, whatever was visible on the screen, without scrolling, was considered “above the fold” — an old newspaper phrase with the same meaning. It still holds true: When content is first visible to users, they’re likely to engage with it. Such is the case with search engine result pages (SERPs), which often display advertisements, videos, and rich snippets above the fold. According to Google studies, this results in higher engagement and click rate.

But when it comes to websites, the fold is losing its value. In 2010, Nielsen Norman Group studied above- and below-the-fold mobile UX and found that above-the-fold clicks accounted for 80% of people’s time. But by 2018, that number had dropped to just 57%.

With our handheld devices, from tablets to smartphones, we’re more inclined to scroll, and understand that not everything can be on that tiny screen at once.

Still, placing important information like calls-to-action and callouts above the fold is a good practice when considering mobile-first. Your logo, navigation, and vital “need to know” content should always appear higher on the page, whenever possible. Work with your team in building mockups that take these elements into account.

Implement UX Testing

Before you go live with your new site, it’s a good plan to get it in front of real people. Whether in the wireframe and prototyping stage, or in the pre-launch testing phase, having real feedback from users will help you eliminate any obstacles on mobile.

By putting the website or app in the hands of your users, you have the opportunity to watch them:

• Use the navigation
• Site or app search
• Read content
• Engage with conversions
• Complete online forms
• Browse articles or marketing

While you test with users, ask them to be vocal about what they find difficult or challenging. By hearing and understanding their struggles, you and your team can make improvements when your site is ready to go live. Check out tips from Treehouse on running a real-life mobile user test.

How Slickplan can help: Before you get your website or app off the ground, try building a user flow to plan for possible obstacles and paths in their journey. Check out Slickplan User Flow tool to get started.

Google’s Usability Report is Your Friend

If you’ve registered your site with Google’s webmaster suite, you’ll be happy to learn they’re keeping a close eye on your site’s mobile usability with its mobile usability report.

This report tracks any errors in your mobile presence including:

• If you’re using incompatible plugins, such as Flash, that are no longer supported by mobile browsers
• Content wider than the screen, which can cause a poor UX or necessary scrolling for your users
• Text too small to read, which impacts readability and accessibility for people, often requiring users to “pinch to zoom”
• Links or clickable elements are too close, making it hard for people to take the action they want

Aside from that, the usability report can just tell you, in general, if a page or your whole site is mobile-friendly or not. If it’s not, you’ll get a list of ways to improve the experience.

Get Your Site Mobile

Don’t wait on your website’s mobile-friendliness. People around the globe are relying on mobile devices more than ever — from using it as their main communication line to relying on it as their personal computer. By ignoring what they need, you’re abandoning an opportunity to connect with potential consumers and advocates for your brand.