Responsive & Viewports cheat sheet

A viewport is the space a browser or app actually has, in CSS pixels. It is not the screen's resolution and not the device. One CSS pixel is drawn with several physical ones, and a window can be any size on any device.

Senior designer note“Design for the space available, not the name of the device.”

A breakpoint is a width at which the layout changes. Choose it by when your layout needs to adapt, not by a device. The ranges here are for quick reference only, and are not strict or universal.

Mobile

Under about 600 px

Tablet

About 600–1024 px

Laptop

About 1024–1280 px

Desktop

About 1280–1600 px

Large desktop

1600 px and up

Depends on your content, your navigation, your densest screen. A starting point, not a correct value.

Senior designer note“Add a breakpoint because the layout breaks, not because an iPad exists.”

Design the narrowest layout first, then add as space allows. It forces the question of what matters most before there is room to avoid it.

Between breakpoints the layout should stretch and shrink smoothly. Give things a minimum and a maximum width instead of a fixed one, and let type and spacing step down at small widths.

Min width

The narrowest it still works. Stops a card, a column or a field collapsing into something unusable.

Max width

The widest it is still useful. Stops lines of text, forms and whole pages stretching across a large screen.

Type

Steps down, modestly. Titles shrink on small screens. Body text barely changes.

Spacing

Large gaps shrink first. Section spacing and margins tighten on small screens. Small gaps stay.

Overflow

Decide, do not discover. Say what wraps, what truncates and what scrolls before the content decides for you.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

When space runs out, something has to move, stack, collapse or go. Decide the order of importance first; the layout change follows from it.

Stack

Side by side becomes top to bottom. The most important column goes first, not necessarily the leftmost.

Collapse

Visible becomes one tap away. Secondary navigation, filters and details.

Swap

One pattern becomes another. A table becomes stacked rows; a side panel becomes a sheet.

Remove

Only what nobody needs here. Decoration can go. A step in the task cannot.

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Viewport and input method are separate things. A small window can be driven by a mouse, a large tablet by a finger, and a laptop by both. Do not assume mobile means touch and desktop means mouse.