How often do you need to test responsiveness of a website? If your answer is any number more than 10, I’m guessing you are a theme developer 😀 . I used to find myself re-sizing the browser every now and then, when testing a theme. But surely there were (and are) better methods.
Across the web, there are quite a few services available which allow you to test the responsiveness of a website. For example StudioPress has their own Responsive Design Tester. It is a great tool to test a site across mobile devices. You can try it out. But the mobile device options provided, are limited. Another service, and one which is quite popular, is the Responsinator. The Responsinator works the same way, and provides additional device options.
Are Available Services Showing You Accurate Results?
One thing you should know, is that such services have a flaw. Every site being tested on such a service, is initially loaded on a desktop device, and then re-sized as per the mobile device dimensions. As you would know, this isn’t the right technique to check the appearance of a site on a different device. You might not always get accurate results. And for websites which have a dedicated mobile site, you’d want to use a better option.
Is There a Solution Which Has More to Offer?
Why yes there is! The Responsive Image Generator for WordPress, which we built, is a one-of-a-kind plugin, which allows you to view the layout of a website across various mobile devices. So how does it work differently, you ask? It makes use of a service, which retrieves a snapshot of a page, for the specified device dimensions. Thus we are guaranteed the actual representation of a page for the device.
And that is not all. Along with this, it offers a really cool functionality. It allows you to download a consolidated view of the website across various devices. Something like this, which was possible only with an Image editing tool like Photoshop, is now possible with this plugin. You can use such images to advertise the themes you create.
Responsive Image Generator: Responsive Checker Functionality
The Responsive Image Generator for WordPress plugin installs and activates like any other WordPress plugin, and is simple to use. It makes use of the Mashape and Google API, to retrieve device screenshots for various devices. Hence, you will need a Mashape and Google API Key to use the plugin.
- After activating the plugin, there will be a settings option created, where you will need to enter and save, both (Mashape and Google ) API keys.
- Upon saving the keys, an acknowledgement message, ‘API keys stored successfully!’, will be displayed.
- You can then use the [responsive_tester] shortcode, on any page to display the responsiveness test functionality.
- The shortcode adds an option, which accepts a site’s URL, to test the responsiveness of the site across various devices.
- The snapshots of the site are then displayed across various devices. Instead of the actual device size, proportionately smaller images are shown, for easy viewing.
Interested in knowing how we built this plugin? You may like to read: ‘How to Create a WordPress Plugin to Check Responsiveness across Various Devices’.
Responsive Image Generator: ‘Arrange Devices’ Functionality
The USP of this plugin, is the ‘Arrange Devices’ functionality. This functionality provides you the option to save an image of the website (as it would appear) on a mobile device. And it’s not just limited to a single device. You can even combine screenshots of your website across several devices, and download it as an image.
- After the screenshots for a website are created, there is a one-click ‘DRAG Image’ option, to select a screenshot and move it to the ‘Image Capture’ container.
- You can drag any number of images into the container.
- Once you’re done selecting the desired number of images, click on the ‘Arrange Devices’ button.
- You can then drag and drop images to change the image position, and download the arrangement as a single image.
The functionality offered by the Responsive Image Generator for WordPress plugin, surely makes it stand apart from any other plugin available in the market. You can also use it on your WordPress site, to allow potential customers to test the look of a theme across various devices. Instead of having to depend on external websites for their services, isn’t it a better option is to have a responsive design tester for yourself?