Skip to content

Instantly share code, notes, and snippets.

@dotherightthing
Last active August 15, 2019 03:26
Show Gist options
  • Save dotherightthing/fc11deb6710e1d3dfc33abef24b5fe9f to your computer and use it in GitHub Desktop.
Save dotherightthing/fc11deb6710e1d3dfc33abef24b5fe9f to your computer and use it in GitHub Desktop.
[Cost-effective mobile screenshots] Services for taking full-length device screenshots. #android #ios

Cost-effective mobile screenshots

Created: 2017.07.12

A while ago I started taking full-length screenshots of my work. I use these to dress up my portfolio collateral and to give a human face to the code that I write.

BrowserStack

BrowserStack mobile testing options.

Up until a few months ago, I was using the excellent BrowserStack screenshot service. I say excellent because there are a wide range of devices on offer. I'm unsure whether these are real devices or emulators, but the stitching is always excellent and it is just so fast and convenient.

But, as I've learned, convenience always comes at a price. For BrowserStack and its rival Cross Browser Testing, that price is a whopping USD 348 per annum. Putting that into perspective, I pay a much more meagre USD 150 per annum for 100 minutes per month of their live testing service. Now, for the extra USD 198 you do get access to automation and the API, but I don't need that stuff. I just need to screenshot as many websites as I complete in any given month.

Budgeting has taken on a whole new meaning since quitting my job in 2015 to travel and support myself with freelance work. Although I am still a sucker for shiny new software, I am becoming increasingly hostile to unnecessary upgrades, and products that want to lock me into subscription deals priced for high-performing design agencies.

On-demand services are far more appealing to me, and that's what I'm looking for with my mobile screenshots.

On device screenshots

The whole point of my BrowserStack account is to avoid accumulating a pile of ageing hardware. Because I travel a lot, I need my baggage to stay light, and I want to avoid catastrophic scenarios caused by theft or failure-by-nature.

That said, I am aware of BarryApp on iOS, and have trialled many apps on Android, with mixed results.

Browshot

Browshot mobile testing options.

So I was happy to find Browshot, in amongst the plethora of desktop-only screen capture services.

The Browshot experience is decidedly downbeat. The interface is a bit old-school, and, even though I can successfully make screen captures, I get errors all through the process up to that point. The Ajax refreshes are slow and the devices on offer are old and the selection laughable. It really just seems like a way to sell upgrade packages at hourly rates.

But, it does what I want it do - on-demand screenshots at a low on-demand price.

There are many price packages available. Being the cautious guy that I am, I purchased 60 credits for USD 2. With each mobile test costing 2 credits, that works out at USD 0.06 (NZD 0.09) per screenshot. That's infinitely preferable to 10 minutes manually taking screenshots and stitching these together in Pixelmator.

Browshot scales images up to the device resolution, rather than displaying them at the screen width. An iPhone5 has a resolution of 640px but a screen width of 320px. The 2x pixel density squashes the pixels into the available space for that crispy look.

Screenshots are available at resolution, for compatibility with mockup tools (see below). However I found that screen sized screenshots had weird scrolling offsets, whilst full page ones got everything. You can just strip the ?scale=2 from the URL, to get the design at the screen width.

Browshot also has an API. You still need to pay for screenshots from the Premium (mobile) browsers, but this puts it into the same ballpark as the bigger players. More or less.

Microsoft Edge Browser Screenshots

Browser Screenshots is powered by BrowserStack - but it's free!

That said, it is a lot slower than BrowserStack, but speed is not a big concern for me. There are 8 desktop options and 4 mobile ones.

MockUPhone

A photo-realistic MockUPhone mockup.

MockUPhone isn't actually a screenshot service, but it can transform screenshots into things of beauty. Screenshots are comped onto product photos at different angles, to create photo-realistic renderings.

MockUPhone offer a range of devices including laptops and desktops.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment