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.
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.
