What is responsive design?

Over the last few years, we've seen a fundamental shift in how people consume online content. The rise of smartphones, tablets, and other connected devices means that designing your sites for a fixed screen size is no longer a best practice.

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

One of the biggest challenges faced by web designers is the lack of control that they have over their medium. Take print design for example. If I'm designing this magazine layout, I'll need to deal with variables such as paper stock, what type of press it's printed on, and which inks I'll use. While these choices may influence my design decisions, I'm still designing for fixed dimensions. I'm largely in control of the entire process, and the people that consume this content will experience it in exactly the same way. Now, contrast that with web design. When I create content for the web, I have to deal with an almost overwhelming set of variables in how that content will be consumed. For example, I have to consider the wide variety of browsers and operating systems that people might be using, whether my content is accessible to screen readers or other accessibility-enabled devices, how my content will look if and when it's printed, or whether they're attempting to access my content on any one of the growing number of diverse web-capable devices that don't really resemble the traditional screen and browser configuration. Of course, the change that's been getting the most attention recently is mobile. The recent explosion of clients accessing the web on mobile devices has made designing for the mobile screen a requirement, not an additional consideration. But mobile is only part of the story. As you can see by the small sampling screens that I have here, screen sizes are not only getting smaller, they're getting bigger as well. That means that as a designer, trying to design separately for each context that your content might be encountered in is almost impossible. That's where responsive design comes in. Responsive design is a design strategy that is centered on designing your content so that it responds to the environment it's encountered in. The term was first coined by Ethan Marcotte who identifies three fundamental techniques for responsive design: fluid grids for flexible layouts, media queries to help you adapt content to specific screen sizes, and flexible images and media that respond to changes in screen sizes as well. For the most part, Ethan's sticking to his guns on those three techniques defining what responsive design is, but like most new terms, its meaning is still evolving. Many people are using it to refer to any techniques or strategies that allow designs to respond to different environments. I feel it's a very broad term and one that can encompass almost anything that frees your content from the restrictions of a single context. To me, learning and understanding responsive design is less about learning specific techniques and more about changing the way that you think about designing for the web. It means totally rethinking content strategies, taking more time to consider how people might use and access content based on specific context, and how to take advantage of the diverse capabilities of the different devices that your audience is likely to use. To that end, I think you'll find that embracing responsive design will dramatically change the way you plan and execute your sites.