A responsive layout, in more familiar terms, is the act of leveraging CSS media queries to restructure webpages dependent on a browser's window size or host device. CSS media queries were first suggested as a specification in 2001 by the W3C, but laid mostly dormant for many years until 2007 when the flood of hand held devices began really hitting the market. So what are responsive layouts good for, what are the alternatives, and do we want to use responsive layouts? To figure these questions out we'll need to discuss issues of browser support, potential benefits to users, and potential benefits to developers along with all of the pitfalls along the way.
Responsive Layout Browser Support
If I told you that almost all of the major browsers support media queries except for one, do you think you could guess which one doesn't? I'll give you a hint, it eats at your very soul and says mean things to cute kittens. Figure it out yet? Right, all versions of Internet Explorer previous to nine do not support media queries. All of the other contenders such as Firefox, Opera, Safari, and Chrome do. So right off the bat there is a serious drawback to using responsive layouts in production. While many of us who don't enjoy pain use a modern browser, there is an abundance of people not only still using Windows XP, but still using IE7. I know of many state agencies and private businesses who will only support IE7 on their networks. Chances are good that you may know someplace like this as well.
- A JQuery Plugin that claims to add support for media queries.
- Getting better, maintaining separate mobile and non mobile style sheets. As described later in the post this is actually less maintenance for the developer and accomplishes the same ends.
- Option four, I like this one, designing your site so it's not dependent on a resolution. Flexible grid layouts are great for this purpose, but if you've used a smart device lately you'll find the browsers do a great job of handling 960px layouts as well.
The benefits of Responsive Layouts for end users
The benefits of a responsive layout for an end user varies wildly based on the type of content, the type of user, and the device being used. In many situations you'll find that any potential benefit is a giant "Meh" when compared to the typical setup of having an alternative mobile device stylesheet.
A user surfing on a desktop might have their screen maximized at something like 1280x960, or they might have their window teeny tiny at 400x200 as an after thought off to the side. Assuming you developed it correctly, a benefit to a responsive layout is that the site will look nice and flow correctly regardless of window size. A potential drawback is the nonstandard behavior of making the layout change as the user casually resizes their window. As the the window is resized elements may shift around causing the user to lose focus of whatever element he or she is interested in. When compared to the alternative idea of using an alternate mobile style sheet the webpage will behave as expected without much fuss. A user surfing on a mobile device stands to benefit as well, but the end results will most likely be precisely as they would be if you had used a mobile device style sheet as smart devices typically don't change resolution or window size.
What do Responsive Layouts mean for developers?
Good luck explaining to your clients what their websites will look like at different sizes. Unless you're working for a hip agency, or you have the final say on the design, you're setting yourself up for some puzzled looks and an uphill battle explaining what all this means. In this situation an alternative mobile device style sheet is a much easier sell and gives your client the nit picked control they're ultimately paying for. Once again, any advantages of responsive layouts over an alternative style sheet here are a big "meh."
Responsive layouts give you more to maintain, and can start a potentially slippery slope of handling multiple resolutions. Since a media query can be embedded within a CSS file you have more places to look and more places to maintain throughout the project's life cycle. It's possible to have different layouts based on any number of different resolutions and parameters. Since many selectors will need to be completely over ridden as resolution drastically changes size it begs the question, "Why not just have a separate mobile version?" This type of fine grained control might be something you need for your project, but in many cases it only adds an unneeded layer of complexity on top of a normally simple answer. Maintaining a separate mobile stylesheet can be straight forward in the long run while still getting the same results.
Should I use Media Queries and develop Responsive Layouts?
Just like everything in this industry there are multiple solutions to every problem. There's no right or wrong way to eat a Reese's peanut butter cup, and there's certainly no best way to develop a web page. There are unique situations where you may be pushed towards or away from responsive layouts. The ultimate answer lies in your ability to analyze your requirements and anticipate your project's needs throughout its life cycle.
Use responsive layouts when:
- You're a cutting edge designer looking to show the world your attention to detail.
- You trust yourself to keep your CSS code clean and partitioned properly.
- You anticipate your end users to have all types of hard set resolutions you need to develop for.
- You're working in a framework who's newest release might not have an appropriate mechanism for switching to a mobile theme.
Shy away from responsive layouts when:
- You're developing for a client that will not understand what the benefits are or how it all works.
- You're realistic enough to know that your CSS files will become a death trap of despair.
- You anticipate your end users will fall into neat categories of devices and a mobile version would be more effective.
- You just don't see the value.
Ultimately, media queries behave almost exactly like maintaining alternate styles for mobile devices, but can offer some flexibility for niche situations where absolute control of your design is necessary at multiple resolutions. The best way to find out if a responsive layout is right for you is to learn more about them. Here are some resources.
- Responsive Web Development - an in depth description and tutorial from A List Apart
- Smashing Magazine's How to use CSS3 Media Queries
- The actual Media Queries Spec from the W3C.
- Wikipedia provides a compatibility chart of media queries across the different rendering engines.
Did I say something incorrectly? Did I completely miss a great feature of responsive web design? Comment below and tell me what your thoughts are on responsive web layouts!