Almost everyone is using a mobile device to access the internet…with the exception of my Mother in-law. So it makes sense that it’s important that your website be mobile responsive. In this post, you’ll learn what testing involves and free tools you can use.
What Exactly is Mobile Responsiveness?
Let’s start with the basics. Mobile responsiveness is just a fancy term for a website that changes its layout based on the size of the mobile device you’re viewing it on.
Let’s get into some of the simple and more complex steps you can do and make adjustments if necessary.
How Do You Test Your Website’s Mobile Responsiveness?
Sitenote: links to the testing tools will open in another browser window, so you don’t lose your spot here.
Google Mobile Friendly Test
The first step in testing your website’s mobile responsiveness is to use Google’s Mobile-Friendly Test. This free tool will analyze your website and provide you with a report on its mobile responsiveness. Simply type your domain name (domain.com) and it will analyze your entire website and report back any problems.
Website Speed Tests
You can have the most beautiful and perfectly functioning website in the world, but if it’s slow to load, what’s the point right?
To really get a grasp on your site’s performance, you’ll want to conduct tests at varying times of the day. This approach can highlight where enhancements might be needed. Keep in mind, though, if you run a test during a busy period, you might be tricked into thinking your site is lagging. Near the end of a site’s development, I typically spend about a week running tests at different times of the day to get a well-rounded average.
A warning: The words used on the results page for the following tools is “geek language” and can be hard to understand. So take advantage of any tool tips or drop down arrows to view additional information.
Here are some free tools you can use to test your website and individual pages for speed.
Very detailed results. You can also test your page speed from inside your Google Analytics account in the site behaviour section.
I love the simplicity of this tool, it gives you a grade and percentage rating. But you can dive deeper into it’s reporting to get specifics on what needs to be improved.
You can choose the location from where the test is being run. Helpful if let’s say your located in Canada and the majority of your clients are in Germany. You can choose the testing server in Germany and it will give you results based on accessing your website from Germany.
What is Mobile Device Testing?
Mobile device testing is simply looking at your website on different mobile devices. From tiny screens to huge ones, sharp resolutions to softer ones, and a whole spectrum of operating systems — the variety is simply staggering! In a perfect world with unlimited time and resources, your website would look spectacular on every single device ever made.
Let’s be practical though. Your website needs to be functional and look good on a small phone, medium phone, tablet and laptop.
By peeking at your analytics, you’ll gain a pretty good idea about the devices people are using to check out your site. Here’s a little snapshot from my own site: only 2% of all my site’s traffic comes from tablet users. The big winners are laptops, followed closely by smartphones. How does this shape my strategy? If I’m going to spruce up my site, I’m going all in on laptop optimization first, then smartphones, and tablets last. That’s the sequence I’m sticking to until the data tells me something different!
Key Takeaway: optimize for the #1 device used first, then second, then third and so on.
How Do You Perform Mobile Device Testing?
You should test on a range of devices, including smartphones, tablets, and laptops. Make sure you have rotation turned on, so you can preview your website in portrait and landscape mode on the devices.
If your website is based on WordPress and was built using modern themes such as WPAstra and pagebuilders such as Elementor, Themify or the built in WordPress block builder Gutenberg, you can preview the site under desktop, tablet and mobile. I still prefer using actual devices to guarantee it’s accurate.
Next, you can use a mobile device testing tool like Sauce Labs to test your website on multiple devices simultaneously. They’ve got a free version of this super useful tool. It helps you see your website through the lens of different devices.
For laptops, dive into a browser testing spree with your website — Chrome, Firefox, Opera…the more the merrier! And remember, your Google Analytics is a treasure trove of insights, telling you the browsers your audience uses when they swing by your site.
You can also use browser based inspectors in Google Chrome and Firefox. These tools can be overwhelming if you’ve never used them before.
The Easy Way to Perform Mobile Device Testing
Simply have your friends and family check it out on their own mobile devices! Plus, getting their feedback is one of the most accurate ways to make sure your website is working great. You’re so close to your website, you may not notice things that someone else may see.
They will be able to pick out things that don’t look right, such as :
- the hero section on your home page is HUGE
- something being too hard to read
- words that are too small to read
- words that are so large they break in half
- a contact form that is squished
- the hamburger icon (the three horizontal lines for mobile menus) is too hard to see
- the mobile menu is too hard to read
These are all common problems when viewing a website on a mobile device such as a phone in portrait mode.
Sidenote: don’t worry if people don’t know what your website is about. The goal is if it’s functional and looks good.
What We Do: a couple of years ago, Joe and I decided that when we upgrade our phones after every 2 year term, we’ll keep the old phones for testing. 5 phones and 2 tablets makes it so easy to tweak and preview changes in real time.
Wrapping it Up
Just think about it this way: When you test your website across various devices and apply some nifty testing tools, you’re like a detective finding and fixing all the little glitches.
The end result?
A super smooth ride for every user, regardless of the device they’re using.
Now, who wouldn’t want that?
Until next time, stay inspired.