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

2014/04/01
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

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