msanroman / pageres

Responsive website screenshots

Responsive website screenshots

Takes screenshots of websites in various resolutions. A good way to make sure your websites are responsive.

It's speedy and generates 100 screenshots from 10 different websites in just over a minute.

Install

$ npm install --global pageres

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall pageres if that happens.

Usage

$ pageres --help

Specify urls and screen resolutions as arguments. Order doesn't matter. Group arguments with [ ]
Screenshots are saved in the current directory.

Usage
  pageres <url> <resolution>
  pageres [ <url> <resolution> ] [ <url> <resolution> ]
  pageres [ <url> <resolution> ... ] < <file>
  cat <file> | pageres [ <url> <resolution> ... ]

Example
  pageres todomvc.com yeoman.io 1366x768 1600x900
  pageres [ yeoman.io 1366x768 1600x900 ] [ todomvc.com 1024x768 480x320 ]
  pageres --delay 3 1366x768 < urls.txt
  pageres unicorn.html 1366x768
  cat screen-resolutions.txt | pageres todomvc.com yeoman.io

Options
  -d, --delay <seconds>    Delay capturing the screenshot
  -c, --crop               Crop to the set height

<url> can also be a local file path.

You can also pipe in a newline separated list of urls and screen resolutions which will get merged with the arguments. If no screen resolutions are specified it will fall back to the ten most popular ones according to w3counter.

API

The API is still in flux and might change between minor versions. Feedback welcome!

Install

$ npm install --save pageres

Usage

var Pageres = require('pageres');

var pageres = new Pageres({ delay: 2 })
	.src('yeoman.io', ['480x320', '1024x768', 'iphone5s'])
	.src('todomvc.com', ['1280x1024', '1920x1080'])
	.dest(__dirname)

pageres.run(function (err) {
	if (err) {
		throw err;
	}

	console.log('done');
});

Options

delay

Type: number
Default: 0

Delay capturing the screenshot.

Useful when the site does things after load that you want to capture.

crop

Type: boolean
Default: false

Crop to the set height.

Google Analytics screen resolutions

You can use the most popular resolutions for your site with pageres by following these steps:

• In Google Analytics go to the site for which you want screen resolutions
• Select Audience => Technology => Browser & OS
• Click the Screen Resolution link in the middle of the screen
• Click the Export button at the top, then Google Spreadsheets, and select yes for importing
• Select all the resolutions and copy them into a new file and save it
• In your terminal run: pageres website.com < file-from-above-step.txt

Credit

Sindre Sorhus (creator)	Kevin Mårtensson (maintainer)

License

MIT © Sindre Sorhus