6 Tips for Creating a Seamless Mobile-First Website Experience

Tim Holdsworth
Posted by Tim Holdsworth on January 16, 2018
Mobile First.jpg

Mobile First.jpgRedesigning a website involves a lot of big-picture thinking — How can we create the best experience for visitors? Who do we want to attract to our website and how can we get them there? However, recent trends suggest that thinking small (mobile) and simple is becoming increasingly critical for reaching today’s Internet users.

In fact, eMarketer forecasts there will only be 10.7 million Americans who will solely rely on PCs for Internet access by 2021 — already around 4x less than the current number of mobile-only users!

It’s critical to optimize your website experience for the devices your audience is using — not those they aren’t. So now that we’ve established that a mobile-first redesign is the way to go, we’ll dive into what a mobile-first redesign approach entails, including six tips for creating a seamless mobile-first website experience for visitors.

1. Mobile-First = Smallest Screen First

A mobile-first approach emphasizes creating an enhanced user experience for mobile devices over desktop and other platforms. And why not? If everything users can see on mobile can also be viewed on desktop, it makes sense to start small and work up to larger sized devices for the best functionality.

Optimizing for the smallest mobile platforms first also allows you to focus on what’s absolutely necessary on a website rather than trying to fill in negative space with “fluff” features and content as you might with desktop. By focusing solely on the users’ wants and needs with a mobile-first approach, you’ll create a much better user experience.

2. Keep Navigation Simple

Mobile web users want navigation to be clean and simple, but just how simple is a hotly contested topic. Many favor the “hamburger” menu characterized by several lines stacked on top of each other denoting a drop-down menu. However, those in the other camp believe that users typically won’t interact with what they can’t see. What’s behind the menu is a mystery and some users might not even recognize what it is.

The key is to understand your website users and audience demographics. It’s less likely that an older audience that isn’t used to the menu method will recognize this menu style, and if that’s the case, considering a navigation like the one below makes the most sense.


It also won’t hurt to run A/B tests for both methods to determine which menu generates the most clicks and engagement.

3. Keep Content to a Minimum and Reduce User Inputs

As touched on earlier, a “clean” layout is demanded by users and it’s one of the biggest trends in mobile design today. A clean layout is characterized by the use of negative space to emphasize what’s most important on a web page (e.g., a form to capture conversions), and should extend to larger devices as well to create a consistent, streamlined browsing experience that enhances user experience.

However, while you want to make conversions simple on mobile, you don’t want to create unnecessary clutter. Six form fields in addition to other page content can be an eye sore and make visitors less likely to convert than a simplified form with dropdowns to help users fill in information.

4. Optimize for Mobile Connectivity

Nothing makes the importance of mobile page load speed hit home harder than this statement from Google: “The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of visits are abandoned if a mobile site takes longer than three seconds to load.”

Two ways to combat slow page load speeds are to minimize page size — think mobile-first — and reduce the number of images and size of images on a page. Instead, replace images with larger, more expressive typography that captures the interest of visitors, making them more likely to not only see the web page in the first place, but stay there.

5. Think Video

While more images are a thing of the past, more video is the wave of the future. According to the Ooyala Q3 global video index, roughly 58% of online video plays were seen on mobile devices in the third quarter of 2017. Even more striking is that Cisco’s Visual Networking Index projects that global Internet traffic from videos will make up 80% of all Internet traffic by 2019.

Industrial manufacturing companies, for example, should make video blogs a part of their content strategy, along with b-roll video footage of their facility on the homepage to engage visitors. As for mobile devices, landing pages with video are a great way to help educate the audience on a specific content piece rather than relying simply on text. It’s also an innovative approach to enhance mobile user experience and boost conversions.

6. Create an Integrated Experience Across Platforms

We talked about creating a seamless browsing experience across all devices earlier, but more than anything, users want a similar experience. If they log in to your website to view content on your “resources” page, it should be just as accessible and easy to navigate on mobile as it is on desktop. Although some features will accentuated on one platform compared to the other, a similar look and feel will create a seamless experience for visitors, while also maintaining brand consistency.

Make Engagement on Mobile Simple

Whether it’s deciding between a “hamburger” style menu or a more visible-style on the front end or how to display forms on specific pages, don’t make engagement paths more abstract than they need to be. The key is to continue testing different methods — the same approach used in Growth Driven Design — to find the best way to engage visitors and convert them into customers.

Growth-Driven Design eBook

Topics: User Experience, Website Design

New call-to-action