Responsive design / Adaptive design

Thinking about responsive design

It's important to consider the screens in different formats (where it actually matters, of course) to design interfaces that match user needs and anticipate possible friction points.

Preparing and framing the design

Components should be designed with screen size in mind. Buttons, navigation menu, images, text, and so on will automatically resize and reorganise based on the space available on the device.

Defining the breakpoints

Mockups are usually presented in desktop format for a standard computer screen and in mobile format (sometimes the tablet format is asked for specifically), with the various breakpoints called out for minimum and maximum screen sizes. That lets you observe how components behave depending on the screen. For instance, an image alongside text will appear horizontally on a computer (image on the left, text on the right) and vertically on mobile (image on top, text below). The component stays the same, but its structure adapts to the screen dimensions to make reading and navigation easier.