How much of your screen time is spent staring at a mobile device? When you research a business online, do you do it on a computer or on your phone?

If you’re like most people, you probably answered phone. According to Statista, over 59% of web traffic was done from a mobile device in the last quarter of 2022. That’s huge!  

But what does it mean for you? Why should you care?

Because if your website isn’t mobile friendly, you’re missing out on a whole bunch of potential business. 

Google likes mobile friendly sites

In 2015, Google announced that it would rank websites based on their mobile, not desktop version. That means, if your site isn’t mobile friendly, you’re gonna be missing out. Big time.

If your website is built on WordPress, you’re already halfway there. WordPress themes have been designed to be “responsive” — they automatically resize and restructure the content on a page so it displays correctly on smaller screens. 

So, if your pages are already responsive what sort of things do you need to consider when creating your website? 

Here are some of the basics to keep in mind…

Page layout and formatting for mobile

Even though most platforms now support responsive web design, it’s still important to manually check your page layout will work properly. Here are some of the biggest problems to be aware of:

Hero section mishaps

If you use a full width hero image it may not display well on a mobile device. The text will shift and can easily end up lost in the image behind. Also, images get cropped and resized. That beautiful picture of your dog? On mobile you might find that the only part visible on a mobile screen is his right ear…

The best solution is to create a separate but similar section that only displays on mobile devices and lay it out so it looks good on the smaller screens of tablets and phones.  

Shifting elements

When you put your content elements together, check that when the page is viewed on a mobile device, they still display in an orderly way. Depending on how you structure and stack elements such as images, blurbs, and buttons, they can shuffle into nonsensical configurations when the page is reduced to mobile size. Three cute dog pictures followed by three class blurbs and then three “sign up here” buttons won’t make sense to your mobile visitors, and they’ll probably opt out of all three.

Page layout aside, there are some other usability issues to consider when making your website mobile friendly. Some are obvious, but some not so much…

No cursor; lots of cursing

When we’re creating a website using a desktop or laptop it’s easy to forget we have an unfair advantage over mobile users. We’re using a mouse or touchpad. You might be wondering what difference that makes…

Well, we have a cursor — an easily aimed, small movable target that we can use to hover over elements to get more info (if that’s been included) and to click buttons, icons, and links. On a phone or tablet, we don’t. And that can leave people at a disadvantage. 

Fingers as cursors

The first tip is to make sure your buttons are big enough for fingers (especially thumbs) to hit easily. Given that buttons are the main way a user can interact with your website it makes sense to ensure clicking them is easy. 

According to Uxbucket, buttons on mobile should be somewhere between 42px and 72px, with your most important buttons being the biggest and least important being the smallest.  

Why? Because the average index finger is 45-57 pixels wide, and the average thumb is approximately 72 pixels wide. Small buttons are simply a pain, and site visitors won’t struggle for long before leaving.

A related problem is having touch targets  (buttons, icons, or text links) too close together, often one above the other. There needs to be adequate space between targets so that the user doesn’t accidentally click the wrong one. This goes for your form fields and dropdown menus, too.

Make it legible

Make sure your font is legible — even when viewed on a tiny screen with reflections and fingerprints all over it. How do you do that?  Unfortunately, you can’t reach out and clean someone’s screen for them, but using an easy-to-read font at a large enough size is a great place to start. (Learn UI Design suggests at least 16 px for body text.) 

Again, in the interest of legibility, make sure your text isn’t all squished up. Having a line height of 1.5 makes reading on a small screen far easier on the eyes.

Things like the appearance and layout of your pages are simple to test on a mobile device. However, there can be other, sneakier, problems with your website setup. Here are some you might overlook:

Pop-up mess-ups

Many people include pop-ups to encourage visitors to sign up for newsletters and access free content. However, not all pop-ups play nice on mobile devices. And Google is choosy about the ones it finds acceptable.  

How so? Simply put, if your pop-up prevents the user from accessing their desired content (and it’s not behind a paywall), and/or the pop-up is difficult to dismiss, it could affect how your site is indexed — which can lead to your site not appearing in search results.

If you want to use pop-ups, make sure they only cover a small percentage of the screen and they’re easy to dismiss. Some pop-up designs with the “dismiss” X outside of the banner area are impossible to dismiss as the “X” doesn’t appear at all on a mobile screen.  How frustrating is that!  

Some tech experts advise against using pop-ups on mobile at all, but if you’re determined to use them, you can find Pop-Up best Practices here.

Forms of torture

Most people dread filling in forms, especially on their phone. It sometimes takes 2-3 times as long to type in the information and people are more likely to make mistakes because the information disappears off the screen as they scroll through the form fields.

Another problem can be form fields that are tiny (no cursor, remember!), which makes users unable to activate the right box to fill in answers. They might call you instead, but they’ll probably just leave the site altogether.

If you don’t want your web visitors to bail at the last hurdle, it pays to put some thought into how your contact forms work on mobile. Here are some points for you to consider:

Limit fields

Unless you’re actively trying to introduce barriers to making contact, limit the number of fields you ask users to fill out. Remember, you can always send a full form by email once they’ve made initial contact — but if they never make that contact the conversation never gets off the ground.

Use drop-down lists where possible

If you really need information like a dog’s sex, neuter status, or age, try to use tick boxes and drop downs to limit typing.  

For example, age can be broken down into categories for a drop-down choice: 

• less than 4 months, 
• 4–11 months, 
• 1–3 yrs, 
• 4+ yrs

The more easily a form can be filled out, the more likely a visitor is to do so. Just as you’d make the correct choice easy for a dog, it pays to make preferred behaviors easy for web visitors.

Final steps

Once you’ve made your website as mobile friendly as possible, always double check the end result carefully. You can do this by using Google’s mobile friendly testing page and by physically viewing your site on as many different devices as you can.   

Don’t forget to check under different lighting conditions too — mobile screens darken and lighten in response to the ambient light, and that can change the way colors are displayed, making text over images hard to read if the contrast isn’t high.  

Once you’re happy with your shiny new mobile-friendly upgrade, relax with a beverage of your choice and a dog to cuddle — you deserve it!