Search
Close this search box.
Search

Create WordPress Plugin to Check Site Responsiveness on Various Devices

Listen to this article
Responsive on Various Devices
Test Your Theme 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.

[space]

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:

[pre]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>”[/pre]

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.

[space]

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.

Responsinator Plugin

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.

[space]

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.

Akshaya Rane

Akshaya Rane

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads