Things you should know about your website’s mobile design for the best mobile experience.

This week I’m talking all about mobile websites, and it’s important. A lot of people who visit your website are on their phones. The average percentage is going to vary based on target audience and industry. Ninety-seven percent of Americans owner a cell phone of some kind, and 90% of those use a smartphone. ¹

Does this mean all users to your website are on their phones? No. Industry and target audience plays a huge role. Restaurants will have a higher percentage of mobile users than say an insurance company. But regardless of what percentage of your visits are coming from mobile, the fact is, that you WILL have mobile visitors, and so there are things you need to know when it comes to your website’s mobile usability so your customers have the best mobile experience.

Speed Matters

Your website’s speed is important for all users, but it’s most important to pay attention to that mobile speed. Here’s why:

• Lower Attention Spans & Impatience: People tend to be less patient on mobile compared to desktop. With smaller screens and potentially distracting environments, users are more likely to abandon a slow-loading website if they can’t find the information they need quickly.
• Limited Data Plans & Connectivity: Mobile data plans often have data caps, and users might be on weaker connections depending on their location. Slower loading websites consume more data and can take longer to display on spotty connections, further frustrating users.
• Search Engine Optimization (SEO): Google prioritizes mobile-friendliness and factors website speed into its mobile search rankings. This means a slow mobile website is less likely to show up on search results, hindering your overall reach.

Certain elements, like video and excessive or large images, are going to cause your website to load slower, so make appropriate choices. Less is more when it comes to your mobile website.

Here are some statistics that highlight the importance of mobile website speed:

• 53% of mobile users abandon a site that takes too long to load [Source]
• A one-second delay in page load time can reduce conversions by up to 7% [Source]
• Google’s mobile-friendly update made mobile page speed a direct ranking factor [Source]

Make sure your website loads quickly for your mobile users. You can use Google’s Page Speed Insights to get a feel for how your website is doing, and it will give you some good data for both desktop and mobile. But don’t freak out if you don’t have a perfect score. Just make changes you can make to try to start seeing improvements.

Navigation is important

One of my biggest complaints about mobile websites is the navigation. It needs to be clear, simple and familiar. Don’t try to be fancy or unique when it comes to your mobile menu.

1. Keep it Simple: Mobile screens have limited space, so prioritize simplicity. Stick to the most essential navigation items to avoid cluttering the menu.
2. Prioritize Content: Arrange menu items based on their importance and relevance to your audience. Place the most important items at the top for easy access.
3. Clear Labels: Ensure menu labels are concise, descriptive, and easily understandable. Ambiguous or overly complex labels can confuse users.
4. Consistent Design: Maintain consistency in design elements such as color, font, and layout across all menu items. Consistency fosters familiarity and improves usability.
5. Visible and Accessible: Place the navigation menu where it’s easily accessible, at the top, either in the center or on the right. Ensure it remains visible as users scroll through the content.
6. Thumb-Friendly Design: Optimize menu items for touch interaction by ensuring they are large enough to be tapped accurately with a thumb. Adequate spacing between items prevents accidental taps.

Make sure typography is readable

The most important trait of your website’s content is that it’s readable. I’ve been in discussions with people who felt like their font was the most important part of their site design. And while font is important, it’s more important that it be readable. If you want to use fancy script fonts, I might recommend avoiding that on mobile devices.

When designing for mobile, adhering to certain font rules can enhance readability, usability, and overall user experience. Here are some important font guidelines for mobile design:

1. Font Size:
   • Use a minimum font size of 16px for body text to ensure readability on smaller screens. I prefer at least 18 personally, but that may be because I’m getting old!
   • Ensure sufficient contrast between text and background colors.
2. Whitespace:
   • Incorporate ample whitespace around text elements to improve readability and reduce visual clutter.
3. Font Style:
   • Choose fonts that are easy to read on small screens. Sans-serif fonts like Arial, Helvetica, and Roboto are popular choices for mobile design due to their clarity and legibility.
4. Hierarchy:
   • Establish clear hierarchy through font size, weight, and color to guide users’ attention and aid in content comprehension.

Less is more when it comes to images

There is a time and a place of images. Images add a lot of context and character to your website and are important. But, for mobile websites, they also take up a lot of space. Use images wisely on your mobile website to ensure that users can find your content.

Funny story. Back around 1995, when I was in college (geez I’m old) and the Internet was new, I built a website on my university’s server. This was back when you had to write it old school with HTML. I was showing my website to a friend, and he saw my photo on the website and asked how I got it there, jokingly asking if I just pressed it against the monitor to scan it. Lol. Of course, this was before cell phones existed, so mobile usability was not a thing.

Anyway, when it comes to your site’s mobile design, choose your images carefully. Reduce the number of images on the site, size them appropriately, and make sure to compress them for faster loading.

Conditional Logic for Mobile Design

You might be wondering how you can have five images on desktop, but only show one on mobile. We use something called conditional logic for that. Conditional logic in WordPress refers to the ability to display or hide certain elements, content, or functionalities based on predefined conditions. It allows you to control the behavior of your WordPress website dynamically, depending on factors such as user roles, page types, dates, or any other custom conditions you define such as desktop or mobile.

Just for fun, I’m hiding an Easter egg in this post, with a message just for my mobile users. If you are on desktop, sorry, you can’t see it!

Popups are obnoxious

The truth about popups are that they can be very effective… but they can also be very annoying, especially on mobile. The number one piece of advice I can give you about a mobile popup is to make sure that the X for closing it is big enough to click on and exist out of it. If people can’t get out of your popup, they will exit your site.

But, my second piece of advice is to skip popups on mobile unless they are absolutely necessary. People on their phones are there for a reason, don’t distract them from their purpose if you don’t have to.

---

Things you don’t need to include on your mobile website

Sliders: Trust me, nobody is going to see your slides. Just have a great call-to-action instead.

Animations: They slow down your site and distract from your user’s purpose.

Social share icons: I’m talking about the icons people can use to share your content, not the icons that link to your own social platforms. Most people don’t use social share icons, so you don’t need them in general, but they can slow down your site and if they are the floating kind, they can cover your content on mobile. Just skip them.

A few things you should include

Back to the top button: Let your users easily scroll all the way to the top of the page no matter where they are.

Click to call: If you have your phone number on your site, make sure that people can click it to easily call.

---

Don’t forget to test it!

You probably only have one phone. Be sure to see how your website looks on your phone, but check it on other devices too. There are tools you can use to test your website on other devices, such as BrowserStack, Responsinator, and CrossBrowserTesting.

Your phone is going to be set up and optimize for you, but be sure you know how people on other phones are going to see it too.