The world is flat. Sometimes.

This is a story about a web design world full of static screenshots and a tool that can take responsive and interactive screenshots of your website or web app. Say hello to snapx.io

With the rise of HTML5 web technologies, we got a bunch of new features: Flexbox, JQuery, Bootstrap, SVG images, Responsive layouts, interactions, CSS Grids, just to name a few. Every feature adds a new layer of complexity to the final website.

But when it comes to screenshots, we ditch all of the complexity and create a flat pixel-based .png or .jpg image.

Websites are not pixel based.

Your browser rendering engine interprets HTML markup, image content, JavaScript and CSS information to construct the DOM tree and the visual layout of the render tree (how to position all the elements on your screen). In the last step the render tree is painted and the website finally appears on your screen.

All this happens in milliseconds, and is therefore mostly invisible to the human eye. Zoom into a webpage (Ctrl+Scroll wheel) and — poof! — all elements will be rendered again. Pixel-perfect and sharp.

Let’s try the following:

1. Take a screenshot with the tool of your choice (e.g. Awesome Screenshot for Chrome, FireShot, Snipping Tool, Jing, InVision LiveCapture…)
2. Open the screenshot file and simply zoom in.
3. Watch sadly as the pixels grow and the image blurs. :(

All these tools only save the content of your screen, pixel by pixel. There’s no chance to change the resolution or viewport dimensions afterwards.

The screenshot world is flat.

Just like our planet — or so we thought, for most of human history.

The Flammarion engraving (1888) depicting a flat earth — (original image has been cropped and altered)

Don’t worry. Screenshots are still useful. They keep things simple. If we don’t want to look beyond the firmament (speaking of the Flammarion engraving above) they’re perfect.

But we believe that most creative teams need a smarter screenshot. What if we could change a website without masking and retouching a flat image in Photoshop?

It’s time to inflate our screenshots and add a little layer of complexity:

Let’s call it a snapshot!

Think of it as a layer-based screenshot where you can still select and inspect one or more elements. – just as you do in Photoshop or Sketch.

• Components & Elements
• HTML + CSS
• Responsive & interactive
• Resolution independent
• Inspect — Improve — Share

This is perfect for front-end designers and creative teams. Instead of sending your current website through a hydraulic press everytime you take a screenshot (flattening all elements to one layer) take an interactive and responsive snapshot with snapx.io.

We’re more than happy to share a little preview of what we built over the past few months and it would be nice to hear from you (feedback, ideas or just discuss front-end stuff).

For more information visit snapx.io and request an invite.

We’re set to launch in early 2017.