What is Responsive Web Design?
Responsive web design (RWD) is currently the hottest buzzword in the web design and development industry. Ethan Marcotte first coined the term in his List Apart article “Responsive Web Design” two years ago and it’s rapidly taken off since. Google has officially endorsed it, Adobe recently announced plans to develop an entire application dedicated to it called Reflow, and the Boston Globe’s responsive redesign has made the biggest splash in the design community in over a decade. But what exactly is responsive web design and why does it matter?
Every client wants a mobile version of their website. And with the recent popularity of tablets, they want that too. They want one design for the iPhone or Android, another for the Kindle, iPad, Galaxy Note, and eventually web TV. And let’s not forget about the good ol’ desktop. If that’s not enough, in the next five years it’s likely we’ll even have more inventions with different resolutions and standards to design for. When will the madness stop? It won’t, of course. Responsive web design aims to bridge the gap between all of these devices and provide an optimized, albeit consistent user experience. Let’s face it — it would be nearly impossible to design a separate website for each of these devices, and frankly, inefficient to do so with such an impetuous landscape. So rather than losing visitors due to a poor user experience on a specific-sized device, responsive web design affirms that a website should change (or respond) based on the user’s screen resolution and orientation.
How Do Responsive Websites Work?
So how does it all work? In theory, it’s easy. Responsive web design uses a mix of adaptive or fluid grid layouts and CSS3 media queries to show and/or hide certain page elements based on the user’s browser or screen resolution.
First, let’s talk about grid layouts. There are two primary types of grid layouts: fixed and adaptive or fluid (delving into the subtle differences between the two isn’t necessary for this article). Traditional websites use a fixed grid layout, meaning the width is fixed and resizing the browser window has no effect on the website. Many newer sites, including Amazon, Microsoft, and Sony use adaptive or fluid grid layouts, meaning the width of the website increases and decreases based on the size of the browser window. An obvious advantage of this would be “User A“ viewing a website on a small 10” laptop and “User B” viewing the same website on a larger 27” monitor. For the best user experience, the width of the website for these two users should be different. To simply design for User A would provide much too narrow of a website for User B and to design for User B would render a website much too wide for User A and subsequently result in horizontal scrollbars.
The second half of responsive web design includes CSS3 media queries and is a bit more complicated. Basically, media queries allow us to gather information about a user’s device and/or browser and allow us to serve specific CSS (Cascading Style Sheets, or the code that makes a website pretty, e.g. colors, font sizes, etc.). For example, suppose we want to display a different website layout for iPad users. This is easily accomplished with media queries and more specifically, the device width property. When held in portrait mode, an iPad has a device width of 768px. To target the this, we can write a media query that triggers the Safari browser to display our specific CSS layout for any device with a device width of 768px. Any device other than this (e.g. a laptop or desktop) would use the default layout. In summary, media queries simply allow us to change the layout of a page based on the media that’s displaying it — whether that means adapting it to fit a smaller screen or just stripping it down to the essentials before it heads to a printer.
Now that you have a basic understanding of why responsive website design is important and how it works, you might be asking yourself how it affects content population. A common misconception surrounding a responsive web design approach is that it requires you to deliver all of your website’s content to the user. Responsive web design is about delivering the right content to users based on the context of their interaction. It requires an additional content strategy plan, just like a mobile-specific web design approach. It flips the paradigm of traditional web design on its head: instead of building a web framework and fitting content to it, content comes first.
Hopefully this article helped, but if you’re still feeling confused about responsive web design, don’t be afraid to leave a question or comment. We’ve recently used responsive custom web design for one of our clients, Aegis Energy Partners, LLC. Check it out by visiting their website. Also, check out mediaqueri.es for a fantastic collection of responsive web design layouts.
