Create WordPress Plugin to Check Site Responsiveness on Various Devices

Responsive theme development, involves investing a lot of time and effort in creating a fluid theme, that can be seamlessly viewed on any resolution and device. There are several tools available, such as Screenfly or Responsinator, that help you view the appearance of a site (in-turn the theme) across different devices. This can be really helpful when testing a theme. Also, if you sell themes on your site, you can even offer such a tool, to allow potential buyers to test a theme.

This article will give you an overview, using which, you can create your own custom plugin on WordPress, to provide the same functionality as Screenfly or Responsinator.

Fetching Images for Websites on Various Devices

You need to start by finding a way to get the screenshot of a website, as it would appear on a device. The Mashape Web Screenshot API can be used to fetch the view of a website, for a given height and width dimension. The GET request is used to take a screenshot of a page, specified in the ‘url’ parameter, and the resolution is specified using the ‘h’ (height) and ‘w’ (width) parametes. For example:

curl –include –request GET ‘https://shepik-web-screenshot.p.mashape.com/screenshot.php?url=http%3A%2F%2Fgoogle.com%2F%3Fhl%3Den&h=1000&w=1024’

–header “X-Mashape-Authorization: <mashape-key>”

Thus Mashape provides us what we need, a way to get images of a website for several device resolutions. A point to be noted, is that you have to sign up with Mashape, to avail their services.

• The image is not merely a screenshot, or cropped image with the specified dimensions, but an actual responsive image of a site, for a particular device or resolution.

• Using cURL, we have to make a GET request, for the website whose screenshots we want to capture, along with a device width and height.

• In the response, we will receive a link for the needed image. Using this link, we can upload the image on our site, for the associated device.

Consolidated Screenshot of Different Views

A really cool feature to offer, is an option for users to create a consolidated view of the website across different devices, which they can then save as a single image. For example, if you show a preview of the website, on a laptop, a tablet, and a mobile device, you can provide user the option, to drag and drop images into a container, and to download the arrangement as a single image.

Something like this, could be done using an image editing tool like, Photoshop. But using something like jQuery Droppable UI, we can provide a user the option to do this dynamically.

The Responsive Checker Plugin, would be really helpful as a tool on any theme marketplace, to dynamically test the responsiveness of a theme, and also to create a consolidated image of a site, for advertisement purposes.

• WordPress Tips & Tricks
• With tags: Responsive, WordPress Plugin