UX Playbook

Responsive

Description

Digital products such as websites and apps are used on a wide range of devices: from smartwatches to fridges, from a small ‘smart feature’ phone to an ultrawide 4K or 8K monitor. Keeping the design and layout of a product the same across all those screen sizes would lead to horrible user experience. Here’s where responsive design comes in.

The idea of responsive design is that the design adapts to the device the product is viewed on. The most important variable is the viewport: the screen size and orientation of devices like phones, or the window size on a laptop/desktop. A common method is to make a default design for 3 standard sizes: mobile, tablet and desktop. However, to support a range of screen sizes and to be future proof, it is best practice to design for continuous scaling (and not for three static sizes). Additionally, you could also consider something like dark mode, by responding to a device setting or the amount of light in the device’s surroundings.


\

Viewport responsiveness

It’s easiest to start with the smallest viewport (width) first, which could be 320 pixels wide. That will pose the most restrictions, while forcing you to order content and interactive elements based on the user’s priority (this might remind you of priority guides). Then, change the design where needed for larger screens: make rules for resizing, reflowing and just changing elements. Don’t try to draw out all possible screen sizes, though.

Tips

Learn more