Blog

Viewport sizes for design QA

Why three widths cover most layout reviews, and when a custom size is worth it.

Device labs multiply quickly. A public-page screenshot service should not pretend to be one. SnapSite ships three presets and a custom size with a hard ceiling.

The three presets

Desktop is 1440×900. That is wide enough for a typical marketing grid and short enough that a viewport shot still shows a fold. Tablet is 768×1024, a portrait layout that catches nav bars which collapse somewhere between phone and desktop. Mobile is 390×844 with a mobile user agent and a touch flag, which is what many sites use to choose a phone layout.

These are CSS pixels at a scale factor of 1. They are not a photo of a particular phone, and they are not Safari. A bug that exists only in WebKit will not appear.

When to go custom

Use a custom size when a breakpoint in the design is nowhere near those three. Stay inside 320 to 1920 pixels wide and 320 to 4000 pixels tall for a viewport shot. Full-page mode uses the width you picked and follows the document height up to the configured cap, which cannot be raised past 8000 pixels.

What not to collect

A folder of twenty nearly identical widths does not make a review clearer. Pick the widths your CSS actually changes at, capture those, and write down the width in the ticket. If a layout depends on a logged-in cart or a geolocation prompt, say so. The empty browser will not invent that state.