2026-07-18 · 5 min read
How to test responsive design on every screen size at once
Responsive QA in most teams still looks like this: open DevTools, pick a device preset, eyeball the page, pick the next preset, repeat. One viewport at a time, and the breakpoint you skip is always the one that ships broken.
The problem with one-viewport-at-a-time
Device mode in Chrome DevTools is a fine tool for inspecting a single viewport, but responsive bugs are comparative: a nav that wraps at 393px but not 412px, a hero image that overflows only between two breakpoints, a font that jumps at the tablet boundary. You can't see comparative bugs one screen at a time.
See every size simultaneously
Tessera takes the opposite approach: an infinite canvas where each tile, a tessera, is a real browser viewport at exact device dimensions and pixel density. Lay out an iPhone SE next to an iPhone 16 next to an iPad next to a 1080p desktop, point them at the same URL, and every screen renders at once.
Because each tile is real, you can click, type, and scroll inside any of them. Turn on Sync and scrolling one tile scrolls them all; Follow mirrors navigation, so clicking a link in the phone takes the whole mosaic to the next page.
A workflow that actually catches things
- Open the canvas and drop in your URL (or run
tessera devagainst localhost). - Lay a responsive set: phone, tablet, laptop, desktop.
- Turn on Sync and scroll top to bottom once. Comparative bugs jump out.
- Corner-drag any tile to scrub through in-between widths.
- Export DPR-accurate screenshots of the whole wall as a ZIP for the PR, or send a read-only share link to a designer.
Try it in fifteen seconds
The demo needs no signup and the free plan needs no card. If you do responsive work every day, this replaces the resize loop entirely.