Tools for testing website responsiveness on a budget
Even an experienced designer can meet some common problems when creating a website, as there are many challenges to overcome. For instance, when it comes to displaying the website properly across various devices. Are there any effective ways to make things easier?
The number of devices people use nowadays to browse the internet is a nightmare for web developers and designers. That’s why, before you decide to publish your site, you need to test its responsiveness first. What if I tell you that you don’t have to grab all the devices and do this manually, as it would be really hard, especially when you don’t have all the devices in place? The good news is that you can find many great tools and solutions to perform tests in no time.
Below I will describe how we test when we build corporate websites for our clients or generally do drupal development on a web application. But remember that there’s no one-size-fits-all solution so choose wisely and find one that will fully meet your needs.
Responsinator
The Responsinator is really easy and quick to use. All you need to do is entering your website URL and click ‘GO’. Then you’ll see how your website is displayed across different devices (mostly Apple ones). You can browse the site, check any clickable elements and… draw conclusions on what should be changed.
Mobile browser emulator
Another one, Mobile browser emulator, is a browser extension for Chrome. This tool will help you find out how the pages you work on look like on the most common mobile screen resolutions that cover up to 90% of all traffic. The extension also works on local files, so it can be helpful when designing a brand new service.
resizeMyBrowser
ResizeMyBrowser was made to investigate how your website is displayed across fifteen popular resolutions. OK, it’s similar to some other tools mentioned here, so are there any differences? The answer is ‘Yes’. The tool could be helpful when you need to create a website that has to look good on certain, non-standard devices, as the ResizeMyBrowser supports custom resolutions. You can choose either outerWindow size (including toolbar, address bar and such) or innerWindow size (interior of the browser window) to display the project.
Google Resizer
The Google Resizer is a tool that helps web designers test user interface and it’s created for those who use Material Design (a visual language for building digital experience). With this tool, you can simply test your design across platforms to spot the flaws and responsive grids. Just place the URL of your website in the input bar and check how the site looks like on both desktop and mobile. If you need some help, there are two demo projects showing off how the tool works.
Ghostlab
Most of the tools presented above are free of charge and the Ghostlab is a paid one but comes with more advanced options. Other tools need your manual involvement and you had to switch each resolution separately while with the Ghostlab, the magic happens automatically.
It is especially helpful when you need to manage a website with a number of subpages. Think of all this time you would need to spend on checking everything manually and then modifying each and every issue that needs to be fixed.
With Ghostlab, you can synchronize a number of different devices and browsers, so it makes you see how the website looks like on all selected devices at once. When you make some action in one browser, you can see how the specified elements are changing across other devices at the same time. You can simply inspect your CSS code, just open different browsers on a local device and check how it works without having to save code changes and refreshes the site each time you write a few new lines.
You can also use Ghostlab to debug JavaScript remotely. The software supports HTML, CSS, JavaScript Haml, Pug (Jade), Sass, Less, Stylus, TypeScript, and CoffeeScript. Just take a screenshot within the tool, add some comments and then pass it to your team. Ghostlab supports A/B tests and provides a presentation mode for teams. The tool costs $45 and it’s a one-time fee.
Make sure that your website displays properly on every device
As you can see, there are many free tools you can use to check how the website will look like on different devices. Responsive design is what everyone who creates a website need to remember of, so use the tools wisely to create outstanding services. Keep in mind that the given tools can help you especially in a designing phase, but won’t tell you if the website works properly or whether it will come with great performance. So still, you need to test your website in order to make sure that it comes with the best user experience possible and simplified navigation, and that is well-optimized for search engines.
