As a web developer, one of the most important (and frequent) quality checks I perform is a mobile responsiveness test. It may not have been all that important years ago, but with more than 50% of all website traffic coming from mobile devices, mobile optimization is one of the primary focuses of modern web developers. As a result, many developers – myself included – take a ‘mobile-first approach to web development, ensuring that projects function and scale correctly across all devices.
Since mobile optimization is crucial for modern websites and applications, we must have a reliable process for ensuring our projects are optimized for mobile use. In this blog, I’ll discuss my quality-checking process and some of the tools I use.
One of the mobile responsiveness tools that most people are familiar with is Google’s ‘Mobile-Friendly Test.’ This tool allows you to check the mobile-friendliness of any live website and receive feedback – albeit somewhat vague in detail – about your website.
While this tool is popular for performing a quick check, it is not very comprehensive in its scope. For example, it doesn’t provide a way of testing how your website displays on different devices. Instead, opting to produce a generic “yes” or “no” response to a website’s mobile responsiveness. For this reason, while it is a convenient tool for a quick mobile-friendliness check, we opt to employ a range of tools in our mobile responsiveness checks. Furthermore, as developers who depend on visual, device-specific feedback, this tool is not comprehensive enough to be of much use in our daily work process.
Additionally, it is only possible to test websites that are live on the web. This provides little help when working with projects under development with a local host (hosted on a small local server that runs on your PC). As we’ll discuss later, Google Developer Tools is especially helpful in this scenario.
That said, this tool is a reliable option for quickly checking mobile optimization from Google’s perspective and can act as a supplementary mobile optimization checkpoint (post-development) during the deployment phase.
Search Console Live Test
Google Search Console is an extremely powerful tool that provides insight into site performance (both site-wide and page-specific), manual actions (Google’s disciplinary actions), security, backlinks, and mobile optimization.
Once you’ve registered and verified your website ownership, you’ll be granted access to a comprehensive dashboard that provides valuable insight into all the areas mentioned above. However, as we’ve just discussed, this platform contains a convenient mobile-friendliness checker. There are two ways to check mobile functionality with this platform. The first is the ‘Mobile Usability’ tool situated on the toolbar, under the ‘Enhancements’ tab. This tool performs a running site-wide assessment of mobile functionality and provides an alert if it detects mobile functionality errors.
In the dashboard above, we were notified of a page that had developed several mobile display issues due to a malfunctioning stylesheet. After fixing them, we marked them complete, and Google is now undergoing a validation process to resolve them.
The second tool is the ‘Live Test’ tool, where you can perform a live audit of a specific URL. The audit renders the page in real time and tells you whether the URL is indexed, how well it’s performing, and whether or not it is mobile-friendly. This is a handy feature for testing a URL on the fly and receiving immediate feedback.
While both are valuable tools, they only work with web pages live on the web – just like the ‘mobile-friendly test’ discussed above. This aspect makes these tools nearly useless during the development phase when your development environment uses localhost. However, for the same reasons, this makes our following tool extremely valuable to developers. It allows us to test projects on various browsers and devices before deploying them to the web.
Google Developer Tools
One of the most valuable and time-saving tools I use for checking mobile functionality during development is Google’s Developer Tools (or DevTools), available on Chrome. While Google DevTools offers many valuable tools that we can use, we’ll focus specifically on reviewing mobile functionality using device mode.
Let’s get started.
First off, in order to open DevTools, in Chrome, you’ll need to right-click anywhere on the browser window and click on ‘Inspect’ (also Ctrl-Shift-I). This will open up the DevTools console.
Click Toggle Device Toolbar (Ctrl + Shift + M) to open device mode. This will change the window on the left from the regular website window to the mobile viewport.
With DevTools in device mode, you can now choose to view your website exactly as it would appear on any device size. In this case, we’re viewing how the website would look on an iPad Pro.
There is a dropdown menu with many standard device sizes to choose from, but you can also create a custom device size by selecting ‘Edit.’
This feature will open a window where you can create a custom-sized viewport to use. This is useful if you’re testing responsiveness on a device that is not mainstream or has non-traditional dimensions.
Another excellent option you have is to set the viewport to ‘Responsive.’ This will allow you to either drag your viewport to freestyle dimensions or enter specific pixel dimensions to select your viewport size.
Here, the main benefit is that you can test multiple “breakpoints” for your website by dragging around the resizing toggles (highlighted in the image above). This will help you check if your elements are changing sizes to scale appropriately across devices at the correct points.
Overall, Chrome’s Developer Tools provides a valuable toolset to help you test device viewports either on a live website or within your development environment.
In this article, we’ve explored some of the commonly employed tools for testing mobile responsiveness during and after development. While they each have their strengths and weaknesses, they can be used in synergy to provide a reliable and comprehensive mobile optimization process.
While Google’s ‘Mobile-Friendly Test’ and ‘Search Console Live Test’ provide a keen overview of how Google interprets your website, the Developer Tools platform offers a broader understanding of how your website or application will function on various devices helping to guarantee a fully responsive user interface.
Leighton is the founder of ARTIISEO, a content marketing agency. With over 10 years of experience in digital marketing, Leighton has worked with some of the top agencies in North America and possesses a deep knowledge of the industry. He also writes extensively about marketing, entrepreneurialism, and business in general.