A Beginner’s Guide to Responsive Web Design

Design Monitor

By Phil Bolles

In its early days, the web was rigid. Designers and “webmasters” built functional sites that looked great, but they had a major weakness, revealed in the smartphone era: They weren’t flexible, so they didn’t work well on small screens and narrow browser windows. Their rigidity became their downfall.

All of this became clear in 2007, when the iPhone arrived with its 3.5-inch-diagonal screen and full web browser. Developers and designers’ first thought was to make an alternate, mobile version of the site for smartphone users, but keep the so-called real site at 960 pixels wide — and have perfect layout down to the pixel. They chose a certain subset of user actions to address on the smartphone, believing that two entirely different sites — with two codebases — was a good idea.

But no. Pixel perfection is often the enemy of good design. We’ve realized that we shouldn’t obsess over exactly how many pixels tall each headline is, because what really matters is the context in which it’s seen. That means it needs to have an appropriate look for the screen on which it’s being used. For design to be good, it has to serve its users, convey its message, and be almost seamless, effortless, and problem-free.

Ethan Marcotte, the influential web designer who coined the term “responsive web design,” helped us let go of pixel perfection and realize that the web isn’t static, but fluid. He helped developers and designers realize that we should think of the web as proportional and scalable. Responsive web design — the design of layouts and hierarchies that preserve visual emphasis and change as a screen changes size — has reshaped the modern web.

We now think of the web as a spectrum, a range of screen widths corresponding to a wide range of devices. A website shouldn’t care whether the user is viewing it on a phone, laptop, or flat-screen TV via a Playstation 4. Instead, a website should respond to its viewer’s screen width, preserve content structure even as the layout changes, and maintain readability at any size — all of which leads to a positive user experience. Plus, with responsive web design, developers only have to deal with one code base, not two, as was the case in the days of stripped-down mobiles sites that often had their own subdomain (e.g., “m.[sitename].com”). Now, a single site can work for any context.

How Responsive Web Design Works

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.

Computer and Phone Website

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.

Responsive Design at General Assembly

In General Assembly’s full-time User Experience Design Immersive and part-time User Experience Design course, instructors frequently challenge students to think about how their digital products will look at different screen sizes and give them tips on maintaining visual priority. Recognizing that they can’t guarantee which device their audience uses, students learn to think of the web as fluid.

When it comes to bringing responsive designs to life, you can learn the fundamentals in our part-time Front-End Web Development course or online HTML, CSS & Web Design course, or launch a career building seamless, responsive websites in GA’s full-time Web Development Immersive or Web Development Immersive Remote program.

Meet Our Expert

Phil Bolles, a senior experience designer at nclud and User Experience Design instructor at GA’s Washington, D.C., campus, loves researching, prototyping, and building out engaging experiences that serve users well. He has a strong background in code and visual media, which he utilizes in his core UX skills. Having worked for many corporate, nonprofit, and startup clients, he appreciates a wide variety of methodologies — especially a fast-paced, lean approach to design. When he's not nerding out about aspect ratios, Phil shoots photos, wakeboards, and drinks light-roast coffee. Phil has a BFA from the Tisch School of the Arts at NYU.

“More and more companies are realizing the importance of empathizing with users, prototyping quickly, and creating products that solve specific problems in delightful ways — making now a great time to learn UX design.”

Phil Bolles, User Experience Design Instructor, GA Washington, D.C.