ScreenView







Phones

Tablets



Changelog

15.12.13 - sent out to the world

Notes

What is ScreenView?

Check out the video instructions.

I developed ScreenView for taking screenshots of sites for my portfolio. I have tried many solutions but this works out quicker for what I wanted to accomplish. Pick url/domain, resolution, change background colour if needed, printscreen, crop, save. Done in seconds.

It is ugly, unsemantic and untested on most browsers. It works well on my 1080p display, if your on something smaller it might be a bit funky.

Send your complaints to tom@developedbytom.com or @developedbytom

What does it do?

It gives a decent representation of what a site would look like at a given resolution without the mess.

Taking a screenshot on a phone/tablet will usually lead to including the browser chrome (menus etc). I've tried various extensions for resizing the browser and they have all either had scrollbars, been awkward to change around and then taking the screenshot means more resizing to actually be able to capture/save it.

No Scrolling?

That's right. Scrolling presents some problems:

1. It's meant to declutter everything so you can take a pretty screenshot. The scrollbar adds more clutter.

2. Some browsers count the width of the scrollbar for the device-width, some don't. Using the iPhone width of 320px as an example: This means a media query for 320px may not activate even if the iframe is set at 320px wide and would want it to be ~300px or ~340px wide. Also showing the scrollbar means the website displays at ~300px wide instead of 320px. Adding 20px to all the widths would give the appearance of working but then you'd start to activate media queries for 360px. Fun.

3. I had created a workaround using a 3000px high iframe with a div as a "window" to see into it (the buttons would then control the dimensions of the div). This would allow scrolling without a scrollbar, but you are really just moving the iframe up/down behind a fixed div. It means any fixed elements in the iframe don't work as expected. Also any height based media queries wouldn't work. Not a great solution.

This is Not Device Testing

ScreenView should not replace actual device testing. Check out BrowserStack or use the real thing. ScreenView cannot replicate actual device behaviour, user agent, pixel density, browser chrome etc.

Check resolutions for popular devices at ScreenSizes.

"Retina" / Pixel Density

"Retina" iOS devices have an equivlanet website display resolution of half the width/height of the device. I have therefore used 320x480 for iPhone (1-4) and 320x568 for iPhone 5+. This also means it only needs one iPad button (at 768x1024). I have done the same for the Android devices which are a mixture of 1:1, 1.5:1 2:1 and 3:1 pixel densities.

Broken?

Some websites (e.g. google and tumblr) don't work well in iframes. For little sites you have made yourself it should work fine.