With mobile browsing constantly on the increase, it’s more important than ever to make sure that your website looks good and works properly, no matter what device it is viewed on.
“Smartphones and tablets are becoming more and more powerful, as the share of desktop web browsing traffic shrinks to 48.7%”
If your site takes too long to load, or is too hard to navigate on a mobile device, you can potentially miss out on a tonne of opportunities!
For example: You’re promoting day in day out on Instagram and your bio link brings people to your site. If someone clicks through and the site is all glitchy and hard to read, you can bet your arse they’re going to click back to Instagram within seconds.
On top of all that! Google gives you preferential treatment if your site is “mobile-friendly”. So if you’re working to get your site to rank high on the search results pages, top of your list of things to do (before getting bogged down by keywords) is to make sure your site can be read by Google robots and humans alike!
A quick and free way to check how your site displays on mobile devices and small screens is to use the built-in inspect tool on your browser.
The inspect tool on the Chrome browser:
- Open the page you’d like to test in your Chrome browser on a desktop device (computer/laptop)
- Click the three vertical dots icon at the top right of the page. It will open a drop-down menu.
- Select “more tools” then “developer tools”.
- The inspect view will open up in a side bar or as a section at the bottom of your screen.
- You’ll see an icon that shows a little mobile and tablet (the blue icon in the image below)
- Click that and your page will stack down to show you how it looks on various screens.
- Then use the dropdown menu to go through the most popular devices like a Google Pixel, iPhone, iPad, etc.
Here’s how to open the Inspect tool in Firefox
and
Here’s how to open the Inspect tool in Safari
What to check for…
Your top priority is to make sure things are readable.
- Check that your text fits within the screen so that the site visitor doesn’t have to zoom in and out. (Uch, that’s so annoying!)
- Check that the images and text don’t overlap. And if there is overlapping text by design, make sure it’s still very readable.
- Make sure buttons are still obvious and clickable.
- Check that the start-to-finish experience of your lead magnet (or “Freebie”) is as friction-free as possible. Can they sign up, opt-in and get the freebie on their mobile device without too much hassle?
- Also, make sure the site visitor still get’s a good sense of your brand, visually.
What to do if it’s all wonky?
Go through your site page by page to make sure everything is smooth and readable. Some website platforms allow you to create alternate versions of your pages for small screens. If you can make a special version for mobile, do it! It doesn’t have to be an exceptionally cool or fancy design, just make sure it can be understood.
If your website platform doesn’t allow for a small screen alternative you may have to compromise on how the page looks. If it turns out to be too hard to read on mobile forget about how long it took to get the desktop version just right! Your site should serve you up a steady stream of leads and clients and if half of your visitors get p*ssed off within a few seconds, a fancy design isn’t doing anything for you!