Designing for Desktop and Mobile Before Development

Deciding how a layout, its type scale, and its interactions should change across screen sizes, as part of the design work, rather than only reacting to breakpoints once the site is being built.

A design that only exists as a single desktop frame leaves every mobile decision to whoever builds it, under time pressure, without the context the designer had. Planning responsive behavior up front keeps that intent intact.

On ERTH the approved design already defined a desktop and a mobile layout, split at 1080px in JavaScript; the build's job was to carry that intent over faithfully, including how the four-step flow collapses on mobile.

It still had to be checked rather than assumed. Rebuilding the approved design found two grid definitions that forced horizontal scrolling below 400px, fixed with a minimum column size and a released column span, and the prototype's desktop-or-mobile decision, which it computed in JavaScript from the window width, became a media query at the same breakpoint so the correct layout paints on the first frame. A responsive plan made at design time is what made both of those quick to resolve; it did not make them disappear.

Decide early which elements are core to the experience at every size, and which are desktop enhancements.

Test type and spacing at the smallest realistic width, not just the most common one.

Keep the core user flow (the actual steps someone takes) identical across sizes, even when the layout around it changes.

Responsive design done well is invisible: the site simply makes sense at whatever size someone is using.