You’ve been slaving over your new website for weeks, if not months. Going back and forth with your web team to get those final changes ready for launch day. But wait… you’ve been viewing and checking your new website on a development/testing site through a desktop device, not even bothering to check how it looks and responds on a mobile.
The visual results and user experience on a mobile device can be very different.
According to Statista, during the third quarter of 2022, internet users worldwide spent 57 percent of their time browsing the internet via mobile phones.
The evolution of smartphones, and the possibilities of what users can do with their phones is increasing at a fast pace. For this reason, we along with other good web designers adopt a mobile-first approach to ensure that our designs don’t just look good but function well on a mobile device.
What is a mobile-first approach?
‘Mobile first’ is a method that considers the mobile user experience and visual results via a mobile device, enabling the web page to fit the screens of different devices automatically, displaying the content in a way that people feel comfortable. This greatly reduces users’ having to pan, zoom and scroll when browsing the web on their iPhones.
Here are some things to consider when designing a new website when it comes to prioritising mobile phone users:
Call-to-Action Placement
The prominent position of a Call-to-Action (CTA) button will help drive more sales and enquiries for your business. Where you place your CTA buttons affects how fast users complete their task, and you don’t want them scrolling too far down on a mobile device to find those all-important buttons that are going to bring you new leads or sales.
Most users start by scanning the content first before they make a decision whether to interact with it. According to the Gutenberg Principle, their eyes move from the top half of the screen towards the bottom. When the content ends, they’re looking for a call to action.
A top button placement goes against your users’ natural scanning flow from top to bottom and veers them away from the path of conversion.
Not only that, but a top button is often smaller in size as it’s competing with other titles and content at the top of the screen.
Navigation Bar
The navigation bar on a mobile-first design needs to be simplified more than a desktop. Otherwise, known as the ‘burger’ menu (3 lines shaped like a hamburger). This strips out any menu links that may not be needed to keep the menu looking clean and minimalist.
Adopting a burger menu for desktop is also being more widely adopted, as more users get familiar with it. It looks clean and keeps the top bar free to display key information such as phone number and logo etc.
Visual hierarchy of content
When planning out the content for each page, you should consider the order of content on a web page, showing the most important parts first so they’re guided towards performing the desired action. What do you want your customers to see first, and what do you want to make sure they don’t miss?
Page Speed on mobile
A website’s loading speed on mobile has become a gamechanger for SEO since Google’s Page Experience Update. It can impact how your website ranks in search results and as many as 57% of people leave a website if it takes longer than 2 seconds to load.
Quite often, in a website migration, the focus is on optimising your site speed for desktops, yet failing to test the speed on a mobile device before going live.
We recommend using new image formats such as JPEG 2000, JPEG XR, and WebP because compression is more efficient, and they load faster than PNG and JPEG images.
Best practices for adopting a mobile-first approach
- Think about your users: how are they going to interact with your content on a mobile device? What content should you prioritise to help them easily find what they’re looking for?
- Reduce number of links in navigation: Keep your navigation on a mobile device simple to avoid making it look overly cluttered and long.
- Clear CTA: Keep them high up on the page. Make the bright, bold and keep them all the same consistency with colour so users get familiar with them on your website.
- Speed matters: Don’t make users wait. Compress images where you can and don’t overly use WordPress plugins that can slow things down.
A mobile-first design also eliminates many of the issues associated with scaling down from desktop to mobile, such as difficult navigation, more usability and slow load times. By prioritising the design of your mobile site, not only will your users thank you for it, but you’ll also see better results in your search engine performance too.
We take all our clients through this process when we design a website, making sure that all our designs adopt a mobile-first approach and enhancing the user experience for mobile users.
Book a Call with us to discuss your website project.