When you are trying to build a website, early on you you will need to answer the question “Is my website mobile friendly?”
To do that, first, we need to understand what that means. What characteristics determine if a website is mobile friendly and then how do you judge if it meets those criteria.
What Makes a Website Mobile Friendly
A website needs to be usable for your audience. This needs to be true no matter what decide they are using. Early on, mobile devices displayed the same sites as on a desktop. We had to scroll arounda page, zooming in and out to get the information we wanted. It was infuriating.
Readers expect more now and if we don’t give it to them, they will go somewhere else. Our site needs to be properly formatted and usable for our device…any device.
A responsive design is a site that changes format regardless of the service it knows if you are holding the device in a portrait orientation or a landscape orientation. It changes the font for a mobile device and changes the layout.
Thankfully, most themes handle this automatically. Between the theme and any page builder that you use, more often than not, it’s all handled for you. However, if you’ve made alterations to the theme, this may not be the case. You need to make sure you test each page and post to make sure that you have the look and feel that you want.
Things Need to Stay in Their Place
When you create a page or post, sometimes elements like images and frames (like when you embed a YouTube video) load more slowly than the rest of the site. If you don’t build your site right, your site won’t save space for these elements. On loading, other content will move. This can be really frustrating for readers. It’s called a layout shift.
When you add up all of the layout shift on a page, it’s called the cumulative layout shift (CLS). Too much layout shift can make it really frustrating for users.
When you look at a page on a mobile device, of course if look different than when on a desktop device. Fonts that are too big can take up too much real estate on a phone or tablet. Small fonts are hard to read.
Fonts should adjust for readability on any mobile device.
Proper Display of Media
Large images, videos and other elements will be unusable on a smaller device. A large image will force you to have to move the display around seeing pieces of it. Smaller images will be unusable. Images need to adjust their size for the smaller screen, or not be shown at all.
Why Mobile-Friendliness Matters
Making sure that your website is mobile-friendly is important for SEO. A website that looks beautiful on desktop but not on mobile devices will not rank as well on Google. This happens for several reasons.
Google Ranks Based on Mobile
In 2019, Google switched to a mobile first strategy. This means that when Google ranks your site it does it as if it were a user on a mobile device. So, it your site doesn’t work well on mobile, it doesn’t rank well in be search results either.
Your Users Need a Mobile Friendly Site
As of 2019, almost half of all users access the world wide web on a mobile device. This number grows every year. When you look at international users, the proportion is even bigger. In many countries, a mobile device might be their only internet access.
So, usability on a mobile device (in other words “is my website mobile friendly”) is really important. We all like to focus on how our site looks on desktop but in many ways, the view on mobile is more important.
The first step to checking how mobile friendly your website is is pretty simple. Pick up your phone and look at it. Ask a friend to give you their thoughts. That’s a big test. No matter what Google says, if your site isn’t usable to people then all the SEO rankings in the world won’t help.
Once you’re past that, there is a more technical solution so that you can see things as Google sees them. This is a useful tool for determining how mobile friendly your site is. Think of it as a starting point. It’s not the only thing to checks but it’s the first thing to check.
Here are a few tests to take a look at.
Checking using Google Mobile-Friendly Test
- Go to Google Mobile Friendly Test page.
- Type in your website URL into the box.
- Click on the “Test URL” button.
- Wait a while for “Analyzing” to finish.
- Then you will be presented with results. If your page is not “mobile friendly” you should consider changing to another theme or edit an existing one.
Determine if You Website Is Mobile-Friendly By Inspecting It
Google offers us a great tool to help debug website issues. Some of it is pretty technical, but some of the tools are pretty easy to use. They let us try out different aspects of the site. We can check out the CSS for styling and try different things. Most importantly for us, we can look at the mobile view of our site. It isn’t perfect, but it does a pretty good job.
- Go to your website using “Chrome Browser”
- Right Click anywhere on free space of your website and choose “Inspect”.
- The “Developer Tool” will appear. Choose Toggle Device Toolbar in the upper left-hand corner. This will cause the screen to look like it will on a mobile site.
- Your cursor (which now looks like a gray blob on the screen) will now behave like your finger would on a mobile device.
Look At It On Your Mobile Device
It’s worth trying out the other methods too, but after all is said and done, just take out your phone and look at your website. Look at it the way that your users will. This is important and don’t forget to do it. You might miss some of the technical things that Google will but you still need to do this test to see the real thing.