Grow your CSS skills. Land your dream job.

How to take “responsive screenshots”

  • # February 19, 2013 at 7:52 am

    Hello everyone! =)
    I would like to know if there is a tool that can help me take some screenshot of my website like it’s viewed on mobile devices.
    I thought to use responsinator and do it manually, but if there is an “automatic way” to do that, I would prefer.
    thanks!

    # February 19, 2013 at 8:49 am

    It would be nice to know which Os you are using.
    Personally I use an app named Papparazzi! on Mac OS X

    # February 19, 2013 at 11:36 am

    I use Windows 7 x64

    # February 19, 2013 at 12:44 pm

    This website is pretty cool for responsive screenshots [http://placeit.breezi.com](http://placeit.breezi.com “http://placeit.breezi.com”)

    You can choose to grab screenshot by URL and it places it for you.

    # February 19, 2013 at 3:14 pm

    It’s a cool service but I need something different =)

    # February 19, 2013 at 3:24 pm

    @sorrentandrea, I use the chrome plugin for fullpage screen shots, but I think [Adobe's Edge Inspect](http://html.adobe.com/edge/inspect/ “”) also has a screenshot tool, but I’ve never used that part of Edge Inspect.

    # February 19, 2013 at 5:14 pm

    @ChrisP what plugin are you using for chrome?

    # February 19, 2013 at 6:56 pm

    @sorrentandrea, it’s called Webpage Screenshot, it’s very basic, but gets the job done..

    http://www.webpagescreenshot.info

    # February 19, 2013 at 11:06 pm

    If you have any of these mobile or tablet devices at your disposal, they may have internal screenshot capabilities. For instance, just do a google search for something such as “how take screenshot with iphone” or “how take screenshot with android” and you’ll get instructions.

    If you don’t have access to these then I recommend installing a general screenshot capture program on your computer and taking captures using a resized browser window. You want to use something that’s capable of capturing a “window” or “control” instead of a “region.”

    That’s the dirtiest method, but it can get the job done.

    # February 20, 2013 at 5:13 am

    @treeRoot I’m able to do the job without any program, I was asking for something automatic, but it don’t seem to exist. =)

    @ChrisP thanks I’ll give it a try =)

    # February 20, 2013 at 7:24 am

    Well, depending on how much you feel like experimenting and doing things yourself in preparation for automatic, there’s always phantomjs. A good start for this kind of thing is [this blog post](http://aventures-logicielles.blogspot.se/2011/11/website-screenshots-with-phantomjs.html)

    # February 20, 2013 at 1:32 pm

    I’ve been experimenting with phantomjs. If you take the example rasterize.js file and alter it ever-so-slightly so that you can plug in values for width/height, you can get a screenshot in a split second.

    Furthermore, if you have a basic understanding of JS, it should super easy to make a script that will hit the site you specify, and take a series of screens at specified resolutions and spit them out into a folder for you, named appropriately.

    Many thanks to Melindrea for mentioning phantomjs in another topic — it’s awesome.

    # February 20, 2013 at 2:33 pm

    Really thank you all =)

    # February 21, 2013 at 10:31 am

    Here’s a (very) basic script to take a screenshot with a set viewport width:

    var page = require(‘webpage’).create(),
    system = require(‘system’),
    address, output, size;

    if (system.args.length < 3 || system.args.length > 5) {
    console.log(‘Usage: rasterize.js URL filename [viewport width] [zoom]‘);
    console.log(‘ Viewport Width: “800″‘);
    phantom.exit(1);
    } else {
    address = system.args[1];
    output = system.args[2];
    pxWidth = system.args[3];
    page.viewportSize = { width: pxWidth, height: 600 };
    if (system.args.length > 4) {
    page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
    if (status !== ‘success’) {
    console.log(‘Unable to load the address!’);
    phantom.exit();
    } else {
    window.setTimeout(function () {
    page.render(output);
    phantom.exit();
    }, 200);
    }
    });
    }

    Usage: `phantomjs path/to/screenshot.js http://example.com example.png 1024`

    Or you could alias it in your `.bashrc` like I do: `alias screenshotjs=”phantomjs ~/Development/phantomjs/examples/screenshot.js”` and call it like: `screenshotjs http://example.com example.png 1024`

    You could just as easily set up a script to take several shots at predefined viewport widths, too, like in this post: http://jonathanmh.com/automate-mobile-testing-phantom-js/

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".