Why Does My Website Not Look Right on A Mobile Device?

Is your website looking all kinds of wrong on mobile devices? We discuss what might be causing your site to look askew on mobile devices and how to fix it.

Have you ever looked at your website on your phone and thought “Why does my website look so bad on my mobile? It looks fantastic on my desktop or laptop?!”

With more than half of ALL web traffic coming from mobile devices in 2022, mobile optimisation should be a priority for every business. This is where the majority of consumer journeys now begin. Google has introduced several algorithm updates through the years that favour websites that provide a strong mobile experience.

Here are the top common reasons a website that looks terrific on a traditional computer might look awful on a mobile device.

Why Are Mobile-Friendly Websites Important?

As mentioned above, the majority of traffic now coming from mobile devices, this is where most of your marketing strategies are going to be focused. Poor mobile experiences are going to kill your chances before they’ve even begun.

That’s not all…

• Almost 59% of all web traffic came from mobile in Q2 in 2022.
• Google rewards mobile-friendly sites (and penalises the not-so-friendly).
• Various studies have shown users don’t return to a website after a bad experience.
• That means a poor mobile experience could cost you 59% of visitors.
• Today’s consumers move between multiple devices, making a consistent experience increasingly important.

If you review how much time, money, and resources you plough into lead generation, increasing traffic and other marketing strategies, and then consider that almost 59% of that is wasted because you don’t have a mobile-friendly website.

That is the answer to the question, “why it is important?”.

Reasons your Website Doesn’t Work on Mobile

Now we have covered why it is important let’s look at the top reasons your website isn’t working or doesn’t look good on a mobile device.

1. Your Website Isn’t Mobile Responsive

Let’s begin by stating the obvious. The number one reason why your site might be failing to work on a mobile device is that it is simply not mobile-responsive. This means the website doesn’t proportionally resize for varying screen sizes.

Responsive design isn’t the only approach to mobile optimisation, but it is the one Google recommends. It also makes a lot of sense from an SEO perspective. There are challenges with taking the responsive route, particularly when it comes to optimising page content for multiple screen sizes. 

The biggest mistake businesses often make is designing layouts and copy for desktop screens only, and then attempting to scale them down for small screens. This won’t work — not because it’s impossible, but because it doesn’t consider how people actually interact with your brand/website. You should design for mobile first, and then build out your desktop site around those designs. This ensures that everything works together seamlessly across platforms and allows you to avoid creating separate sites for desktop and mobile users. Aim for a consistent experience across all devices so users can move from mobile to desktop and understand where everything is. 

2. Un-Optimised Images

If the structure and text of your website look fine on your smartphone but your logo or images are blurry, there’s a good chance that they haven’t been optimised for mobile screens.

Each year phone manufacturers scramble to outdo each other with ever-increasing screen resolutions, adding more and more pixels for extra sharpness. When each pixel takes up less room on the screen, so do your images, so the phone enlarges them to display at the correct size compared to the rest of the content. If it enlarges an image to more than 100% of its original size, that image will look pixelated or blurry.

This issue can be corrected by providing alternative images for devices with a retina or high-resolution display. This also applies to 4K and 5K desktop monitors.

3. Your Media Is Unsupported or Too Big

If your videos, image carousels, or animated graphics aren’t displaying, they could be in a file format that doesn’t work on mobile devices (for example, Adobe Flash, which was officially discontinued in 2020) Additionally, if they are very large files, they may be slow to display, or not load at all if the device is in a poor cellular reception area or connected to a slower data stream.

4. Unfriendly Navigation Design

The menu is one of the most important, if not the most important thing on a website. Small websites have quite a simple job, with the desktop menu being easily duplicated on the mobile version of the website. Large sites, however, can have difficulties.

Some menus display many pages going up to third-tier navigation levels.

If this is transferred across to the mobile site, there is a potential that the user will spend a long time scrolling through vertical menus trying to find the right page. Amend the mobile menu to only include top-level pages.

Tip: Experiment with ways to include the lower-level pages on the main page to let users navigate to find out more should they wish to do so.

5. Clickable Elements Aren’t Optimised for Touch

This is something that can often get overlooked whilst optimising for mobile. If you want people to actually interact with your website, you need to optimise for touch. Navigation menus, CTA buttons, web forms, media players and just about everything that turns casual browsers into potential customers revolves around touch gestures.

Make sure touch elements are large enough to interact with. Don’t try squeezing too may touch elements into a small space because people are only going to end up hitting the wrong thing, which as we all know is highly frustrating. Make sure users can still see the content they need when touch elements pop up on the screen. For example, don’t leave people trying blind because their device’s native keyboards have covered up the text field they are trying to interact with.

Tip: Find a sample of people whose hand size varies to test your website navigation; they will soon find any potential issues.

6. Page Content Isn’t Immediately Obvious

Scaling is always an issue with a responsive website and getting it to scale correctly whilst showing the correct information can be the difference between engaging the user and the user leaving your website. Having a logo, menu, slider and breadcrumbs before the content can look great on a desktop. When this is scaled down, the user may need to scroll a lot before they actually get to the page content. This has other issues as well if your pages al; have the same header, with the user thinking the page didn’t even change.

There are several steps you can take to make your content more prominent on mobile:

• Reduce loading times
• Ensure the main content I visible in the first view of every page when. It loads on mobile screens (*above the fold)
• Reduce the size of elements above the main content (headers, nav menus etc)
• Optimise title sizes to main content more visible
• Avoid using popups that block access to content
• Implement lazy loading so text content leads before images, videos etc

If you’re going to take the lazy loading approach, make sure you follow Google’s best practices to avoid indexing problems. It’s a good solution for improving content access and mitigating loading times if you implement it correctly.

7. You haven’t Optimised Your CTAs For Mobile

Optimising your website’s layouts for mobile devices is great but your success is going to be short-lived if your CTA (Call To Action) is not getting results on mobile. The effectiveness of your calls to action will depend on how you optimise the content surrounding them, their visibility on mobile, where you place them on the page and all kinds of other factors.

Don’t assume your CTAs are going to perform on mobile just because they’ve been getting results on desktop. Effective CTAs need to be incredibly concise and so does the rest of your page content. Remember that text is going to bunch up on mobile displays, pushing your CTAs further down the page and forcing users to scroll further to reach them.

Make sure you really hammer home the key benefits of your offer using the appropriate headings and don’t be afraid to add extra CTAs for mobile displays.

8. You Haven’t Optimised For Mobile-First Indexing

Responsive design isn’t the only approach to mobile optimisation and many brands have opted to develop separate mobile websites. The thing is Google is changing the way it indexes web pages to reflect the fact that most searches now take place on a mobile device.

Mobile-first indexing essentially means Google will now show the mobile version of a page by default, only showing desktop pages when no mobile version is present.

For responsive websites, nothing really changes because the mobile and desktop versions of each page are the same. However, websites running separate mobile pages need to optimise for the change.

A few things you need for mobile-first indexing:

• Your mobile and desktop pages contain the same content
• Both versions of your page have the necessary structured data
• Both versions of your page have the necessary metadata
• Both versions of you page are verified in Search Console
• Any rel=hreflang tags for internalisation include separate links for mobile and desktop URLs
• Your servers can handle any increase in crawl rate for the mobile version of your site
• Your robot.txt directives are the same (and optimised for. Both desktop and mobile versions)
• Correct use of rel=canonical and rel=alternate link elements between mobile and desktop versions

Although mobile-first indexing will apply to your entire website, any ranking changes will happen on a page-by-page basis. So, start by optimising the most important pages on your site and work from there.

Key Takeaways

How To Make Your Website Mobile-Friendly

Here are some key steps to take towards making your website mobile-friendly:

• Choose a responsive design
• Strip back your content
• Make images and CSS as light as possible
• Avoid Flash
• Change button size, design, and placement
• Space out your links
• Use a large font which is easily readable
• Eliminate pop-ups
• Test, review and amend

Interested in building a mobile-friendly website, or fixing your existing site?

Get in touch and we can chat about the services we can offer to help!