The goal of responsive web design is to serve the needs of the users, regardless of which type of screen they’re using. So a responsive layout changes as the width changes, yes, but it’s important to preserve the visual hierarchy as well. This means that if you have a page with a hero image, large headline, CTA, and a couple of related links, then it should be obvious which elements demand focus at any screen size.
Elements can stack on top of each other, but an element of primary importance (like a crucial photo, button, or bit of copy) should still look “primary.” We can distinguish them through size, color, imagery, or any other method of conveying importance. Above, I’m showing how a hero image remains primary, even on small screens.
Subtle changes in content can work as well. Take, for instance, a National Geographic graphic on Alex Honnold being the first person to complete a free solo climb of El Capitan. On wide screens, like your laptop, you’ll see a full description of the mountain, and verbose labeling — but if you make your browser window smaller (narrower than 800px) or view it on your phone, the copy itself is shorter, while still conveying the same message.
The labeling on the graph changes as well — the larger-screen version has more detailed measurements marked on Honnold’s climbing route, for example. Not only can we use responsive design to subtly change content, but we can adjust visuals for the context as well. We can show our small-screen users larger technical diagrams — ones that don’t require zooming in on details, but that are formatted to match their screen. In the coming years, we’ll surely uncover even more ways to adjust both copy and visuals to best serve our users.
Websites aren’t the only products that benefit from the methodology of responsive design; apps do, too. A native app on iOS should look good and maintain visual priority in either portrait or landscape mode. In fact, Apple’s Human Interface Guidelines recommend it, whenever possible. Since landscape is wider than portrait, this translation often ends up requiring responsive design.
Designers use both quantitative and qualitative data to decide which screen widths we should target, due to customer behavior and the context in which customers are using the solution. What did analytics tell them about the users? What contextual insights emerged from usability testing or user interviews? What feedback did they receive from users in the previous version of the product? Designers take these data points and work with developers to define certain widths. Ideally, UX designers, visual designers, and developers work together in prototyping, side by side, so that any potential problems are quickly spotted, especially as they may relate to development.
When all involved reach decisions, developers implement the responsive web design, often by identifying the exact widths at which the layout changes, which are called “breakpoints.” Once breakpoints are set, they use techniques such as media queries in CSS to apply different sets of rules to different screens or devices, so that users have a delightful experience no matter the context.