10 Steps to a Website Looking Good on Mobile

Jul 13, 2021Website Tips

10 Steps to a Website Looking Good on Mobile

With more than 3 billion mobile users in the world it makes sense to make sure your website delivers a dreamy experience on mobile. Here’s 10 simple steps that turn a rubbish mobile experience into a dreamy experience so that visitors sign up for your free thing or buy your products or services.

Why look good on mobile?

10 Steps to a Website Looking Good on Mobile

There are more than 3 billion mobile users in the world that are using Smartphones.

Those smartphone users are using their mobiles to look for information, businesses, and services.

They’re checking out websites and booking and buying from them.

All from the little screen on their mobile.

So, it makes sense to ensure your website looks good on mobile.

What Google Thinks About Mobile

Google responds to what its users want.

It’s why Google give priority ranking to websites that give a good mobile experience.

How your site looks on mobile is often neglected because you design your website on desktop and assume it looks ok on mobile.

Even if you’ve chosen a mobile responsive theme, that doesn’t guarantee what looks good on desktop, gives as good experience on mobile.

Hard-Wired To Conserve Energy

The key to remember is that humans are hard-wired to conserve energy. Thinking burns calories.

If a user has to ‘think’ in order to decipher your website, then they likely won’t stay long because their reptilian brain is telling them to conserve energy and move on to the next site.

Obviously, you don’t want that to happen.

Ideally your website visitor should instantly recognise that they’re in the right place and it’s beneficial for them to carry on consuming your content and be guided to buy a product or service from you.

10 Steps

Here’s 10 Steps to check your website looks great on mobile.

These 10 simple steps can make the difference between a rubbish mobile experience that makes your website visitors click the back button and leave, versus a dreamy experience that guides your visitors to signing up for your free thing or buying your product or service.

1. Logo that fills the screen or is too small.

Whilst a logo is good for branding, unless you’re a mega brand, the reality is, the only people who care about your logo is you and your logo designer.

It absolutely doesn’t add value to a website visitor (or your potential client) to have your logo dominate the first screen.

The very first screen should confirm to a dream client that they’re in the right place – that you solve the problem they have.

On the opposite side of the scale is a logo that has shrunk down so much in size that is too small to read.

This is a particular problem if you have text built into the logo.

Use a version that doesn’t have text built in and shrinks to a recognisable size that still looks good on mobile.

2. Header info that fills the first screen

You might have a header area that includes your logo, strapline and a offer image that on desktop fills the width of the screen.

That header area typically repeats on every page of your website.

However, on mobile, check that it hasn’t stacked the 3 elements and filled the first screen so that you have to scroll down to see the title and page content.

It’s not a good experience for a user if they must scroll down past a logo, strapline and offer image to get to the meat of your page.

It’s annoying and burns additional calories, so you risk losing them to the back button.

3. Text that is too big (or too small)

Check the size of text is still a reasonable size on mobile and hasn’t shot up to a massive size that words have been split to be unreadable.

And check the opposite hasn’t happened and the text shrunk too small that you need to pinch to zoom in and pan left and right to read it.

Having to pinch, zoom and pan is not a good mobile experience.

It’s a nuisance for the user and their reptilian brain will urge them to conserve energy and hit the back button.

4. Columns of text that have become too narrow that you can’t read the text

I see this happen more on testimonials or where columns have been used to emphasise some text.

However, the column has resized itself and become so narrow that the text shows up one letter per line and is completely unreadable.

If this is happening, then you either need to try a different layout or twiddle with the spacing and margin settings.

5. Images that contain text and can’t be read on mobile

First of all, DON’T have text embedded in images. Google and anyone using a screen reader (visually impaired) can’t ‘read’ text on images.

It’s fine to embed text within images on social posts and printed materials but it doesn’t work on a website.

When shrunk down to mobile size, the text becomes too small, pixelates and is difficult to read and, guess what happens?

The user’s brain decides it’s not worth burning the calories to decipher and hits the back button.

Separate the images out and have the text typed into the page itself.

The text is valuable for SEO and helping Google know what the page is about.

6. Elements reordering themselves in a way that doesn’t flow

This can happen if you have 2 or more columns and rows of content that spreads nicely across the page on desktop.

But on mobile, the content reshuffles and rearranges the order so they no longer appear in the order you want readers to consume them.

It confuses the user and if we confuse, we loose.

7. Pop up forms

Pop-up forms are great for growing your list.

However, check that on mobile the form doesn’t fill beyond the screen boundary so you can’t read what you’re supposed to add to the field boxes.

Another error I see sometimes (which is very annoying) is that the form is so big that you have to and/or can’t scroll to see it all or hit submit.

8. Pop up forms that can’t be closed

In a similar vein to 7, if the form is too big and the x to close is out of view then the user is stuck.

They can’t consume your site anymore, they can’t close the pop up.

And if they return to the site, the same annoying pop-up reappears.

Make sure this isn’t happening on your site.

9. Clickable links that are too close together

It’s good to have links in your content that both link to other content on your site (internal) and external links. Google likes this.

However, make sure that the links are not so close together that you end up tapping the wrong link.

Users don’t like this and consequently, neither does Google and this will affect your ranking.

Links that are too close together can also show up on footer menu bars, so check these too.

10. Too slow to load

This is perhaps the trickiest to fix, but definitely worth getting resolved.

If a page takes too long to load, then that is not a good user experience and Google’s takes this into account when ranking sites.

From a user’s point of view, slow page load speeds are annoying. You get impatient, assume the site isn’t working and click away.

There can be many reasons for a site running slow and if it’s not obvious to you, then get in touch and learn about our website speed enhancing service.

What next

Take a fresh look at your website from your mobile and imagine you’re a potential customer visiting your site for the first time.

How mobile-friendly is it really?

I’m interested to hear what you discover, so email or message me.

Photo by Plann on Unsplash