Responsive Screen Captures

Stephen Hay gave a presentation at Breaking Development Conference in Orlando on Responsive Design Workflow. Hay stated that he would refuse work if it involved delivering Photoshop comps. His process instead involves building sites in code and delivering screenshots of the site to the client for approval.

If you are designing in code, previewing in the browser and capturing screenshots to deliver to the client for approval, there are a few tools that help out a lot in the process.

I started searching around to overcome a limitation with Little Snapper. The full screen capture that can be taken within the application does not allow resizing the window to 320 pixels wide or 480 pixels wide to simulate the width of an iPhone or small mobile device screen.

So, the best solution appeared to be a Google Chrome extension called Screen Capture. But, unfortunately, it was not. The extension captured each image by scrolling the page and capturing, then knitting together the resulting images. However, it also activated the scroll bars in Mac OS X Lion, which would cause this weird offsetting effect on the resulting image as the screen redrew. Not something that you can deliver to a client.

Awesome Screenshot in Chrome works great except for one really annoying issue: it captures the scrollbars as well. Not very awesome.

The Responsive Resize extension for Safari does a great job of being able to quickly view multiple responsive breakpoints. I thought that this in combination with the Awesome Screenshot extension would allow the ability to save the full page. It looks like it would have done a great job of it, since it goes through the motions of scrolling the page. But the resulting image shows only the visible area of the screen in a full page sized image. The rest of the image is transparent. Not very awesome.

In Firefox, there is Fire Break and Awesome Screenshot. I’m still looking for a screen resizer that works well in Firefox. Those that probably would work are not compatible with the latest version of Firefox. Again, Awesome Screenshot saves the scrollbars. Still not very awesome.

I think I found the solution. Remove the scrollbars when taking screenshots. https://chrome.google.com/webstore/detail/lkfmjedfjkmfmckgcadelnfjebccjdcf

This works great! So, Awesome Screenshot becomes awesome again, as soon as scrollbars are removed.

Apps

Chrome Extensions

Rather than purchase apps to use on my iOS devices and try to figure out an efficient way to sync images to the laptop, I decided to do everything in the browser. Chrome has the better extension ecosystem, and the solution ended up being a combination of extensions:

By setting up presets with Window Resizer, I could easily view responsive screen size breakpoints. Remove Scrollbars enabled Awesome Screenshot to be able to capture images which did not include the browser scrollbars.

The Olde Fashioned Way

If you can’t give up the idea of delivering Photoshop comps as a precursor to developing pixel-perfect designs, then the PerfectPixel Chrome extension might be the way to go.