treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] How to take "responsive screenshots"

  • 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!

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

  • I use Windows 7 x64

  • This website is pretty cool for responsive screenshots http://placeit.breezi.com

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

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

  • @sorrentandrea, I use the chrome plugin for fullpage screen shots, but I think Adobe's Edge Inspect also has a screenshot tool, but I've never used that part of Edge Inspect.

  • @ChrisP what plugin are you using for chrome?

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

    http://www.webpagescreenshot.info

  • 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.

  • @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 =)

  • 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

  • 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.

  • Really thank you all =)

  • 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/