Responsive Design

A given in every interface we design.

Sites and products that work on whatever screen they’re opened on.

Responsive design means a site or product adapts to the screen it’s on, from a phone to a large monitor.

We plan each interface around the devices that matter most to the people who’ll use it, and make sure it holds up on the rest.

What it involves

Decided early, checked on real devices

Responsive behaviour is set in the design system, so every page that uses it adapts the same way.

Layout and type for each size

Grids, spacing and a type scale defined for phone, tablet and desktop, so a headline scales sensibly and nothing breaks at an odd width.

Fingers and keyboards

Touch targets sized for thumbs, and layouts that still work with a keyboard.

Speed on the phones people carry

Images served at the right size for each device, and performance measured on the devices people use. A fast laptop flatters everything.

Web or app

When the phone needs more than a responsive site

For many products, a fast web app is the better choice. It runs on any device with a browser, needs no app store approval, and updates for everyone at once. We recommend a native app when the phone is the point: background location, reliable offline use, deeper camera or hardware access, or a daily habit.

AI coding tools follow the breakpoints and type scale that are written down and improvise where nothing is. Interface & Interaction Design and Mobile & Web Applications cover this in more depth.