Screenshot mockup of website on different devices


Question

Which is the best way to show how a website differs on various devices for responsive web deisgn such as the screenshots found here

1
-2
4/1/2014 7:22:00 PM

The process I use for my websites, create a template with all the devices with masks for different screen sizes in photoshop or illustrator.

To get the website screenshots at the correct aspect ratio, I use firefox developer tools.

1)open the site in firefox,

2)right click anywhere, "inspect element"

then there is a button with an aspect ratio (highlighted in screenshot) click that and you can select different device widths, for a screenshot, click the camera and you get the screen without the tags.

enter image description here

2
4/1/2014 8:29:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^