I’ve recently run across a couple articles that aim to make the point that responsive web design (RWD) is not a cure all when it comes to designing for the web. While that is true, in the process of getting to their point the authors make several statements that are misleading, inaccurate, confusing and conveluted.
My goal here is not to bash these articles but to clarify some of the mis-information they contain. My concern is for those not well informed about responsive web design taking that bad information and basing their decisions on it and spreading their message. The article on Forbe’s site by Carin van Vuuren is of particular concern because of the sites reputation as a provider of trustworthy information. The article by Erik Martin on the EContent site is equally bad in its attempt to cover the topic and worth discussing here. Clearly not front-end developers, both van Vuuren’s and Martin’s lack of practical knowledge on the subject leads to many erroneous and inaccurate statements that I hope I can clear up here.
What Responsive Web Design Is
Let’s start by going back to beginning for a moment and get clear on what responsive web design is as defined by the guy that coined the term, Ethan Marcotte. RWD is a combination fluid grids, flexible images and media queries and that’s it.
Next we need to be clear about what problem RWD was meant to solve. Presentation of content across devices and varying screen sizes. In other words how the elements on a page fit within the space available on a given screen regardless of its size. Media queries, the magic ingredient of RWD, makes it possible to rearrange elements based on many factors, most frequently size and orientation.
What Responsive Web Design is Not
Just as important as what RWD it is we also need to be clear what it is not. A lot of the confusion comes from the incorrect use of terminology by people that have never actually coded a responsive site, or anything else for that matter. Here are some quotes from each of the articles that illustrate that lack of understanding.
“Like any philosophy, responsive design is a choice, and a tempting one at that.”
RWD should be thought of as a tool or technique, not a philosophy. If we were building a house RWD would be the hammer or saw, not the building code or blueprint.
“…it doesn’t always work across the board and may not be the best option, especially compared to traditional user experience (UX) design, some experts say.”
UX design is about strategy and understanding the users context, their wants and needs, UX is not a physical form of design. Responsive is a technique you might use once you’ve assessed the UX requirements and determined that the user has essentially the same needs and expectations regardless of their device. These are not directly comparable, they are apples and oranges.
There are 3 things to consider when designing anything – Goals, why your doing it, Principles, how you plan to do it and Patterns, the techniques you use to do it. UX covers Goals and Principles while RWD is a Pattern.
“Many pro-responsive developers affectionately term RD “one-Web,””
No we do not. One Web is a term coined by Jeremy Keith that aims to make it clear that there isn’t a separate desktop and mobile web. Wether you use the browser on your desktop, tablet, smartphone, feature phone, gaming station, web-enable TV or any other device, you are accessing the same internet. Not to mention it’s RWD, not RD.
One Web is about the universality of the web that Tim Berners-Lee envisioned and gives way to the idea of C.O.P.E., Create Once, Publish Everywhere. RWD is a nice tool in the pursuit of that goal. The deeper message here is that we should be working from our content outward. Once our content is in order then we can move on to how you will present it to your audience.
“J. Schwan, founder/CEO of Solstice Mobile. “RWD addresses content optimization and functionality for every screen size…”
This one is tricky. Depending on how one thinks about the terms optimization and functionality this can be thought of in two ways. So let me define them as I use them.
Optimization is about sending content that is optimal for a given screen size or range of sizes. For example, if an image will be displayed at 50px square on a mobile device you don’t send a 200px square image and scale it down. What you want is to send a 50px square image. RWD can do this with background images, if your building mobile first, but not with images in an img tag. There are many options, some good, some not so good, available today to address optimization and I’m sure we’ll see even better solutions down the road – come on CSS4.
On the other hand one could read the statement as RWD optimizes the presentation and that would be correct. One could also consider the size of a button a measure of functionality, so resizing them across screens could be seen as RWD addressing functionality. Like I said this one is tricky and all the more reason to define a perspective first.
“biggest disadvantage is load time, specifically for images,” Drew Thomas, CCO for Brolik Productions, says. “As developers, we’re accounting for a potentially huge screen size. So we need images as large as possible, and even if they’re displayed on a small screen, we still have to load the large image.”
Actually, no you don’t. As I already mentioned there are several solutions out there today that can be used to mitigate this issue. Here are a couple to consider: Picturefill.js, Adaptive Images and here are a couple articles, Responsive Images by Jason Grigsby and Media Query & Asset Downloading Tests. Each discuss several options and their effectiveness at not send unnecessary data down stream to user devices.
Stretched Beyond Recognition
I started this article by defining RWD as it was originally presented back in May of 2010. I did this because the term responsive web design is suffering from semantic stretch and I wanted to reestablish the baseline of what responsive is. The way it was defined by Ethan originally is not really what many understand it to be today, due in large part to articles like the ones I’m addressing here.
It’s this dillution of meaning that has led to many of the misconceptions of what RWD is and the role it plays in the design of a site. For instance, RWD was never meant to be used in a vacuum as many article would lead you to believe by speaking of it devoid of other supporting technologies. In fact, it works best when it’s used in conjunction with other techniques and technologies like, server-side adaption and optimization, device detection, feature detection and conditional (lazy) loading of assets to name a few.
Did They Really Say That?
“Wade Devers, executive VP and group creative director for Arnold Worldwide, sees RWD as a passing fad. “Personally, I can’t wait until the next thing,””
RWD is no more a fad then table or float based layouts were. They were our best options in their day just as responsive is today. The only real difference is this technique got a catchy name given to it making it “the new buzzword.” It’s not a buzzword or a fad, it’s just a front-end development method that gives us the best chance to reach people where ever they are on what ever device they choose to use.
This leaves me to wonder if we’d even be having these conversations if the technique had come without a name. If we just started using the elements that define RWD but never called it RWD would all this debate still be happening?
“A good example of this dilemma can be found in LinkedIn’s recent approach to developing its iPad app.”
The “W” in RWD stands for web, otherwise it’d be RADn.
“In other words, don’t get too heavily invested in RWD just yet.”
I’m not even going to justify this one.
Did They Get Anything Right?
I know it looks like I’m not making good on my no bashing goal so far, so let me point out the things they did get right.
“When the only changing factor in the Web experience is the user’s device, responsive design is a useful solution.”
This is the real gist of both article. RWD is not always going to be the perfect choice. Like I said earlier, if your UX requirements tell you the user is expecting similar, if not identical, content and features regardless of device then RWD is probably your best option.
Both point to one of the most challenging aspect of RWD, content optimization as a potential barrier to successful implementation. This is best addressed by developing mobile first and applying progressive enhancements along the way to design and engaging user experience without sending unnecessary data to the user.
Both raise the concern about performance and it’s impact on the overall user experience. Again, this is about implementation. As time passes we will continue see better solutions to ensure performance issues are minimized.
It’s All in the Approach
As you may have picked up already I have very specific idea of the most effective way to design and develop a responsive site. Content Out, Mobile First and Progressively Enhanced. This is by no means the only way to build responsive, but for me it’s the only choice right now. Approaching a responsive project in this way will help prioritize content and functionality and guide us toward a successful implementation. Here’s a quick but far from exhaustive look at why I believe it’s the best approach.
Content Out – make sure you’re content is worth spending the time to develop a responsive site for it in the first place. After all, your content is why they come. Users don’t care what technique you use so long as they can easily get what they came for, make it worth their while. I’m not going to get into what constitutes “content” here since that can be lengthy discussion all on it’s own.
Mobile First – when you start by assuming small screen sizes, possibly limited capabilities and potentially slow network speeds it forces you to make some hard decisions early which will go a long way to over coming many of the challenges responsive poses. Those full screen image backgrounds that look so beautiful on desktop may not be such a great choice for mobile for instance. Thinking mobile first really forces us take time to consider the impact of every element we choose to add to a page. Like content, this is much deeper subject worthy of more discusion then I want to go into here and now.
Progressive Enhancement – this is all about layering on features, functionality and in some cases additional content based on capabilities. Progressive enhancement is a positive spin on graceful degradation. Whereas graceful degradation was about stripping out elements for backwards compatibility, progressive is about building things up from a useable base. Start with well formed, semantic markup, add on base text styling and colors, follow that up with some layout statements and then go crazy.
RWD is in fact a progressive enhancement and should be thought of as such, but progressive enhancement is about much more. Responsive is just about presentation and doesn’t actually account for things like bandwidth, browser capabilities or physical impairments. Progressive enhancement allows us to be radically inclusive in the sharing of our content by ensuring we are not inadvertently placing road blocks in our users paths by adding things that make the content inaccessible.
I have no doubt that the authors of those articles only wanted to help people understand some of the pitfalls of responsive, but their lack of understanding on the topic led to several misleading and inaccurate statements. The last thing responsive needs are others with little understanding of the topic taking those statements and running with them, further perpetuating myths and misnomers about RWD.
In the case of the Forbe’s article consider the types of people that read Forbe’s on regular basis. Most likely they are business people and upper management types. The very people we have to convince that responsive may or not be the right choice for the website they’re paying us to design. These articles spoke of the negative aspects of RWD but the same problem comes when articles extoll its positive attributes to the exclusion of the challenges. It’s often just has hard to talk a client out of responsive as can be to talk them into it.
In the end responsive web design is only good or bad based on it’s implementation and that is based on the depth of understanding of the person implementing it. If you want or need more information on responsive web design I’ll leave you with a list of books and blogs to read. These are the people that are literally writing the books on web design. These are the ones you want to listen to.
FYI – The van Vuuren article seems to have caused somewhat of stir leading Usablenet, the company Carin van Vuuren works for, to post a response trying to clarify their position on responsive. Usablenet, by the way, are the purveyors of server-side solutions so it makes sense that Carin’s article was slanted against RWD. OK, maybe I have a little doubt.
- Responsive Web Design – Ethan Marcott
- Adaptive Web Design – Aaron Gustafson
- Mobile First – Luke Wroblowski
- Implementing Responsive Design – Tim Kadlec
- Designing with Progressive Enhancement – Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland
- Ethan Marcotte’s website
- Luke Wroblewski’s website
- Jeremy Keith’s website
- Brad Frost’s Responsive Resources website
That should get you off to a good start.