posted by Matt Ward on Aug 6, 2011.
Responsive Design—it’s one of the hottest new things in the web design community these days. In this article, I want to consider it is a tool, and examine some potential drawbacks as the technique relates to development time, questions of advertising and the importance of a consistent user experience.
Let me start by saying that, as a concept, I am a big fan of what people are calling responsive design. The ability to build a site with multiple layouts that are displayed based on the size of the browser window (and, by extension, the device) is really attractive and has a great deal of practical use in the everyday world of web design. Over the past few months, I’ve even been implementing it in a number of the projects I’ve been working on.
I’ll be the first to admit that I do still get a kick out of being able to resize my browser and watch the design shift as I cross certain thresholds. I also love being able to access the site on my iPhone and have it render simply and elegantly, without having to pinch-zoom to actually be able to read anything.
That being said, however, there does seem to be a current, prevailing sentiment that responsive design is somehow going to be the ultimate solution for design on the increasingly mobile web. Just this week, I read a tweet in passing, which basically stated that there is no “excuse” for not using responsive design on websites today. It struck me as an overly broad, and perhaps even somewhat naïve statemnent.
Yes, responsive design is a wonderful, useful tool, but it is not a all-encompassing panacea. Amidst all of the hype and excitement that surrounds responsive design in the community right now, there are a number of issues that we need to be considereing and discussing.
Longer Development Times (and Greater Costs)
Any experienced web designer would probably agree that creating an excellent, well-designed, cross-browser compliant (which is not to say identical) site involves a great deal of work, part of which is generally the creation of CSS. Even if you’re using tools like SaSS or Compass, which are designed to make CSS authoring quicker and easier, there’s still a lot of time involved.
Now, imagine doubling or even tripling that work.
The beauty of using media queries is that it allows you to set a global rule, and then create subsequent rules within your queries, which override the global rule if the specific media conditions are met. This is an incredibly powerful technique, to be sure, but it’s not something that just magically happens. Although you may actually author rules for different resolutions in tandem, from the perspective of the final product, you need to create both a complete “default” stylesheet, and then additional sets of styles to account for different screen sizes.
It’s a lot of extra work, both in terms of writing the CSS and testing at the different resolutions. Depending on the size of a project, it could potentially end up taking on a lot of extra development time. And, of course, with extra time also comes extra costs, which a client may not necessarily want to incur.
This is equally true of the Photoshop mockup phase (assuming that you work that way). If you generally create a series of mockups in order to build the visual “skin” of your site, what are you going to do if you’re undertaking responsive design? Produce a different mockup for each key width? Let’s assume that you have four different types of pages that you need to design, and that you’re accounting for four different types of browser widths (as recommended by a responsive framework like the Less Framework). That’s four pages at four different sizes each, brining the grand total to a whopping 16 mockups.
Of course, I do recognize that there will be some reusable elements. Headers, footers and other key visual items will likely be the same, so it’s not like you will be creating each mockup from scratch. Rather, you will likely create an initial design and then use that as a baseline for all subsequent variations. That being said, however, each page will likely have its own unique features that will require your attention to some degree.
So, instead of simply assuming that all your future projects will automatically require media query-based responsive design, be sure to weigh both the cost and the value of building a responsive layout. Will the value it brings to the site balance the cost of implementation, relative to the project’s budget? If not, then maybe a fully responsive layout is not appropriate, at least in the short term. Of course, if you design the static, non-responsive layout properly, it should be relatively simple to come back and make it more responsive in the future.
One of the other things that I’ve given a great deal of thought to in terms of responsive design is the question of advertising. Selling ad space is a huge cog in the money making machine of many websites. There are a great number of different ways of handling advertising. One popular choice is the use of Google Adwords, or a similar, text-based link advertising. This is probably the easiest way to deal with ads in a responsive layout.
But what about the type of advertising that is based more around banners? In my experience, these types of ads are generally sold based on their position on the page, with prominent spaces near the top of a page selling for more than spaces further down or in the site’s footer. What happens when we try to introduce a responsive layout to a site like this?
If we create a layout that renders differently in varying window sizes, and if part of that response involves shifting the way elements are arranged, then the question of advertising suddenly becomes a whole lot more complicated. That stack of six 125 by 125 banners that displays so prominently on a desktop or laptop may not be nearly so prominent on an iPhone, or even on an iPad, depending on how you layout the page and/or how you establish its responsiveness.
How does this effect ad sales? Do you (or your client) sell based simply on the number of non-mobile visitors and write off mobile visits as a bonus for your advertisers? What happens when your desktop or laptop visits start to diminish and mobile visits start to increase? If we maintain that model, it’s entirely probable that ad revenue could begin to decline, even if site’s traffic continues to rise. And, from a business perspective, that’s never a good thing.
Another potential solution might be to sell different ad spaces for mobile and non-mobile devices. Setting aside the challenges associated with making this distinction in the first place, we then have to start questioning the place of responsive layouts as we have been considering them. The beautifully simple idea behind this type of responsiveness is to not require both a regular site and a separate mobile site. Instead, we are able to present the same HTML document, allowing the CSS to optimize the layout based on the available real estate within the browser window. The moment you start to introduce conditional content, however, you are are no longer serving up the same HTML, and as such are moving away from the beautiful simplicity of CSS-based responsive design.
It’s more akin to having a regular site and a mobile site, rather than just a single site that simply adapts to its context.
Of course, this is not to say that this is a bad or faulty technique. In fact, if you are using a reasonably reliable technique for detecting mobile devices, this may be the most viable and practical solution for your advertising-driven site (see WebDesigner Depot for a good example of this). It also doesn’t mean that the CSS techniques that are at the core of responsive design cannot be used. It’s just not purely responsive, which suggests that there may be contexts in which responsive design is only part of the solution for making the site accessible across multiple devices and platforms.
Regardless, the point is that the presence of advertising on a site raises some important questions that need to be thoroughly considered before diving head-first into building a fully responsive layout.
The last point that I want to touch on is the issue of user experience. A great deal had been said and written on this broad, broad topic. One of the conceptual cornerstones of much of this discussion is the importance of consistency. In an article titled “Consistency: Key to a Better User Experience” (published over at UX Booth), the author writes:
[Users] shouldn’t have to spend a long time finding what they’re looking for. A consistent website is predictable and therefore learnable. After a while, users will find the information that they’re searching for effortlessly.
There is definite truth to this statement, which begs the question: how does responsive design effect the consistency of a site? When a user who has historically browsed your site on their home computer visits it for the first time on their brand-spanking-new smart phone, how comfortable will they be with the layout? How much of it is familiar and predictable for them? How much of it will require re-learning the interface?
As a basic example, consider the following site. Here it is at full resolution on my MacBook:
It has a lovely design, with the logo and menu appearing in a simple, vertical black box. Now, here is a screen shot of the exact same site, at the exact same URL, but visited from my iPhone:
Now, I don’t read Swedish (which the language Chrom wanted to translate this page from), so I have no idea what this is actually saying, but there is a somewhat stark contrast between the design of the menus in the two screenshots. And, it doesn’t seem to be a matter of spacial limitations. For some reason the white on black theme for the logo and menu is suddenly inverted at a smaller resolution. The designer may have a reason for doing this, but it still strikes me as inconsistent.
Is this really a big deal? On its own, probably not. I’m sure that visitors will be able to figure out the navigation. But what would happen if this was just one of many instances of responsive inconsistencies? How would that effect user experience? Probably in a somewhat negative fashion.
Responsive design can be great, but it’s important to keep the user experience in mind and design the layout so that it responds in ways which, while different, are still consistent and predictable to users. The site Mediaqueri.es is a spectacular resource for inspiration in this area. Examine some of the sites posted there to see how other designers have solved (or not perhaps not solved) this dilemma. There are all kinds of creative approaches.
Obviously, there is a lot that can be said about responsive design and I do plan on continuing to write on the topic as my own experience continues to grow. For the purposes of this article, the important thing to understand is that responsive design, like any other tool, has both benefits and potential shortcomings. As designers, it’s our job to weigh both sides of that proverbial coin in order to make appropriate decisions, based on the unique needs and context of the project.
It’s also worth noting that not everyone on the web is in love with responsive design. Recently, Luke Jones authored a short post about why he is looking for the “trend” of responsive design to eventually die out. His article, and the discussion in the comments, raises some very interesting points, and clearly demonstrates that not everyone has eagerly jumped on the responsive design bandwagon.
Food for thought.
photo by Jason WeaverPost A Comment
Also from Echo Enduring Media: