This article was written in 2015. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Making screenshots of responsive websites

I’m writing an article for a magazine in which I need some pictures of responsive websites on multiple devices. I could open all these webpages on a view devices here at home and take a picture, but that’s too much work. So I created a simple webpage that lets me take a screenshot of several devices at once. You can drag this screenshot-bookmarklet to your toolbar to use this tool.

It’s quite simple. I created four iframes. These are exactly the size in pixels as a few devices that I own. I gave these iframes a border that looks like a device. I scaled some of the devices with CSS transforms in order to mimic different pixel sizes. And every time you reload the page the devices are shown in a random order.

Where’s the UI?

When I posted this little tool on Twitter some people were confused. It’s not clear — at all — what this tool does. There’s no explanation, and there seems to be no user interface. I use the interface of the browser to interact with this tool. For instance, you can change the website in the URL bar of your browser.

Another thing that’s confusing is that the devices don’t fit in the viewport. This can be easily solved by zooming out. Most browsers have a built in interface for zooming, there’s no need for me to recreate this (CMD + - for my Firefox). Now you can zoom until it fits your screen and take a screenshot.

An image of this webpage, displayed on a few devices

If you use Firefox you can take a screenshot with a higher resolution without zooming. You can use the weird Developer Toolbar that opens when you press Shift + F2. Simply type screenshot --fullpage into the toolbar and your image of one single webpage in four different devices is in your downloads folder.

There is also the possibility to bring each device to the front by clicking on its border.