A bit of history
Way back when, if you were browsing on a mobile phone, then the chances were pretty good that you were looking at a version of the website in question that was specifically built for, and only show on, mobile phones. There was no other way of doing it - when we first started with Magento 1, about 15 years ago, there was a clever bit of code that figured out the dimensions of the screen and served up either the mobile theme or the desktop theme, accordingly.
Then along came some things called "media queries" - essentially a way of writing CSS (the bit that controls how the page displays its content) but saying "if the screen size is X or less, then display it like this, but if it's more than X, display it like that".
Overnight, it changed the game - you could build one site, and through media queries hide and show elements depending on the amount of room. Scale text, images, and the like, to adapt to the size of display.
In 2010, web traffic on mobiles was about 3%. By 2015 that had risen to 40%. And now it's at around 65%. So rather than being an after-thought, how your site works on mobile phones must be the fore-thought.
How are mobiles different?
Let's start with the obvious - less space. That impacts everything - the size of fonts for legibility, the amount of space for logos and images - content in general.
There are other things to consider, though. Those lovely hover effects you can get when your mouse is over an element on a desktop just won't work on mobile - broadly speaking, there's no 'hover', so things like dropdown menus won't work.
They also tend to be slower to load - 4G typically is around 1/3rd the speed of the average non-fibre-to-the-premises connection at home. Whilst 5G is expanding, so is the overall size of websites as better screens call for higher resolution images, and the growth of videos, and similar, thus counteracting, to a degree, the increase in connection speeds. The average load time on a mobile is probably no different to what it was 20 years ago, but the amount of content being loaded is many times larger.
How do you check your website?
The easiest way is just to use it yourself, on a mobile. If you're office based, you may well not do that that frequently, and it may be that things that look absolutely fine on a desktop are hard to read, off-screen, or otherwise inconvenient on a mobile phone.
But it's also worth checking on multiple mobiles - there are a host of different screen sizes and resolutions, and what works on one device may not work, or may not work as well, on another (welcome to the world of web development!).
For a more objective tool, try SE Ranking's Mobile Friendly Site Test which will give you a score of your mobile performance, and pointers as to what's wrong.
It's also worth testing on Google's Page Speed Test - the results there use 'throttled' speeds to reflect real-world conditions, but it, too, should give you
Google used to have their Mobile Friendly Testing Tool, many years ago, but it was retired. If your site gets enough traffic, then the Page Speed Test and Google's Search Console will show what it calls "Core Web Vitals", which is actual data from actual users.
What are you looking for?
It's not what you're looking for so much as how you're looking at it. Stop looking at your website as though it's your website. Look at it as though you're a potential customer, and critique it from that standpoint. Is the site clear, easy to read, easy to navigate. Does it load quickly. Does it get to the point. Do you have to scroll through reams of text to get to what it is that you do? Does the site inspire confidence?
These are all things which are relevant to your site overall, but on mobile, it's much more important.
Missed the previous post? Catch up with Day 8: Local SEO.
In the final post in the series, we look at web accessibility in Day 10 of our 10 Days to a Healthier Website series.