I am available for freelance work - HIRE ME

I Love Responsive Design, But…

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.

Advertising Considerations

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.

The current Spyre Studios design is not responsive, but if it was, how would they accommodate all those ads?

The current Spyre Studios design is not responsive, but if it was, how would they accommodate all those ads?

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.

User Experience(s)

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:

Here we have a very attractive site with lots of lovely white space and a cool vertical navigation bar

Here we have a very attractive site with lots of lovely white space and a cool vertical navigation bar

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:

The logo and navigation on the iPhone are very different from the full width version

The logo and navigation on the iPhone are very different from the full width version

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.

Conclusion

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 Weaver

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Aug 6, 2011

david hardy says:

I think that responsive design will find a place in smaller scale sites. I develop large scale sites for a casino operator in las Vegas; we would never use this approach in huge sites like these. I think that responsive designed sited will find a niche in portfolio sites, boutique sites and landing pages, etc. I have already used media queries to an extent in building my own wedding site.

Aug 6, 2011

Karl says:

You bring up some very valid points. In part, those issues has been discussed by @grigs, @bryanrieger, @lukew and peers on twitter over the last year.
The production costs of a site is definitely going up, but it’s a learning curve for designers and developers, just like learning to create a site for dynamic content.
What is beautiful about this is that it is a time where we as designers can make a difference by taking part in forming good patterns for solving those issues you bring up and more. So, thanks for taking part in that work by writing this post! Hope to read more from you on this!

Aug 6, 2011

Andrew Houle says:

Love this perspective, Matt! With all the responsive web design love that’s being propagated at the moment it’s refreshing to read a little something coming from another angle. I’m with you, that I actually like the idea, but it’s definitely important to count the cost when considering if a project can afford or even needs to be responsive. Every project is not made equal, so a broad sweeping statement like their is ‘no excuse’ for not using a responsive design is (I agree) naive.

Aug 6, 2011

Ujamshi Khandla says:

Use @media queries in stylesheet with args when you mind Responsive Design or just commented if you don’t.

Aug 7, 2011

Craig Hopkins says:

I think RWD should be considered as AWC “accessible web content” with RWD second with design elements to correspond with your corporate image/design if required.

Personally I think RWD and AWC effectively/respectively massaged together is the future.

Yes, make it look pretty, but accessibility is king especially for people with visual impairments who cannot see the pampered web 2.0 and css3 geeky :) touches.

Everything has its pro and cons and opinions will always be different no matter who you try to please.

I read somewhere that using fonts as icons are being used, whats the web coming too… Look out for webdings coming to a browser near you…

Aug 7, 2011

Paul C says:

Thought provoking article, which chimed with a few of my own ideas on the subject of responsive design.

CSS3 media queries do open up a great way of optimising content to a device size, that is all it can reliably do.

Depending on the user agent, all the style sheets and linked images will get loaded to the least capable device anyway. If we design to the 320 and up philosophy, we begin to limit page copy, to fall back to screen size. That then means larger screens suffer.

IMHO responsive design is great for site with a hand full of pages that s designer can can take time to optimise. If we look at much more than a few pages it becomes apparent that dedicated designs for hand-held, tablet/small desktop and full desktop designs are more cost effective and easier on page weight when served without media queries.

At the end of the day resizing your browser in front of a client may help sell the extra to make a responsive design, but then afterwards they may just figure out they need a mobile app anyway. ;)

Aug 7, 2011

Matthew Kammerer says:

Thanks so much for mentioning UX Booth! We’re actually working on a responsive design right now. With my emphasis in background you can imagine that advertising still being effective is a big factor. I hope that you’ll like the direction we took with this when we launch.

I’ll give you an idea to help aid curiosity. Just because an ad is sold at x by x pixels doesn’t mean it needs to remain that size on smaller resolutions. A changing size can still maintain the attention it needs at smaller resolutions.

Aug 8, 2011

Brad Colbow says:

I’ve had the opportunity to see Ethan Marcott talk about the upcoming Boston.com redesign a couple times now and I have to disagree with some of the comments that it won’t work on large scale sites. I hadn’t thought about advertising sizes, but I would love to see how boston.com will handle it when their new site launches.

I’m currently working on my second responsive site and it’s really changed the way I work. I think you nailed it Matt when you talked about the Photoshop mockup process. It’s going to be extremely time consuming to make multiple comps for multiple sizes. At the same time I see my process flow changing to accomodate RWD. I design the largest size in PS and then I finish designing the other sizes in the browser once I get the basic markup in place. I haven’t done this for a client yet, I have a feeling my process will evolve as I become more comfortable.

In quotes I’ve been estimating an additional 50% in the markup phase to accomodate for the extra time, that may or may not be accurate as I do more, I’m just kinda flying by the seat of my pants with that estimate :)

Aug 8, 2011

Steinar H says:

Great article, points out some of the most important topics to think about when it comes to responsive design. Personally I think the cost of development and mock-ups will be the biggest showstopper.

When it comes to ads the dilemma will only occur for larger sites selling by placement, not for smaller sites that take part in a ad-network where placement is not the issue.

But then again, many responsive design-layouts push the sidebar (containing ads) to the bottom of the page, making it less likely for the user to actualy see the ads.

Another problem with responsive layouts, is that items is being removed on smaller screen-sizes. Making it harder to get to the functions you wanted to use, because the designer labeled it “not needed when mobile.”. That way i prefer being able to go to the “desktop version”. And not be crippled by my screen size.

Aug 8, 2011

Rick Monro says:

Good points well made Matt, and I like that you have also highlighted the number of “broad-brush” statements pouring out across the web. Some of these statements I believe are deliberately provocative and do not reflect well on the those who make them, and that includes some of the more notable personalities in our industry.

The philosophy behind responsive design is laudable and to be supported. In practice, there are many many instances where it simply will not apply, as you have rightly highlighted.

My 2 cents on these issues: http://blog.rickmonro.com/design/responsive-design-dogma/

Aug 8, 2011

Horia Dragomir says:

I feel that responsive design actually helps keep consistency between devices. Since you’re using pretty much the same assets and probably colours, you site will keep its personality even when resized.

It sure is a step up from having the “mobile version” people used to ask for two or three years ago.

And I also find it a lot faster to use simple media queries and keep the underlying HTML than to rewrite the whole site from scratch.

Aug 8, 2011

Angie Bowen says:

There are definitely some considerable obstacles to be considered before deciding on responsive designs. It’s a topic that has really intrigued me but I’ve held off on really diving into responsive development because of these obstacles.

Like Andrew said, it’s nice to read the other side of the issue here.

Aug 9, 2011

Federica Sibella says:

I think that responsive design has to be viewed as a further opportunity: if you have the time and will to optimize your website using CSS3 media queries then why not?
Then I agree with David Hardy (first comment): responsive design makes sense only for some websites, not for all and it is responsability of a good web designer to choose which websites would benefit from this opportunity and which would lead to a huge loss of time and efforts.

Aug 9, 2011

Tyus says:

Great article. I love the idea of responsive design but as you pointed out it can be very time consuming. I just started trying to get around this by using inDesign and Jquery Masonry. InDesign gives me that look I want for the page and allows me to make quick changes for different sizes. Then I use Jquery Masonry to set divide out my columns, then some class switches to animate between the page sizes. It still a work in progress and for what I do I don’t have to worry about ads. Luke W would say design for mobile first for cleaner design anyway. I’m just glad to see progress either way.

Aug 9, 2011

Gilbert Midonnet says:

Ultimately everything comes down to Return on Investment as well as usability: your site has to look good on all browsers from mobile phones to the largest monitors at the highest resolutions. UX professionals must keep that in mind from the beginning of the project. You can’t design for the largest monitors and then struggle at the end to make the design work on a mobile phone. Some web apps may not work on a mobile phone. Fine. But you should know that from the beginning and present it to the business team.

Aug 9, 2011

Patrick Harrington says:

I agree that while I love the idea of Responsive Web Design, I have concerns.

Chiefly, I am concerned about best practices for serving fluid images—the current solution is to utilize an ingenious combination of javaScript and server-side URL rewrites to redirect to the desktop image if appropriate, and allow mobile users to only download a mobile-sized image (see The Filament Group’s technique here: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/).

While what is being done is brilliant, it also feels like quite a bit of a hack. As well, while I feel like it will be somewhat easier to control in a CMS where I can force a content author to choose certain images, this would become quite difficult in a free-form WYSIWYG editor.

I am coming up these limitations in a current large-scale implementation, and would be interested to know if others are coming up against the same issues.

Aug 11, 2011

IgniteWebsites says:

I agree. Not every website can afford responsive design. There are other things the money would be better spent on. It is a good idea and practice but it is not for every site.

Aug 12, 2011

Jack says:

If you start a website build with a responsive mindset, it’s surprising how quickly and natural a responsive development can be created. I will agree though, the bigger and more content heavy the website is, the more difficult it can become to avoid bugs and glitches. However, responsive web design is definitely a profitable niche, with many clients willing to pay more for the perfect dynamic layout.

Aug 15, 2011

Jay Kaushal says:

For small or medium sites this approach may work but for bigger sites it will cause problems as it will need additional man hours and man power. Every client cannot afford that. And with more and more people going for CMS this can be another problem area and many proprietary CMS are so hard wired. They hardly give any liberty in changing the basic code. Responsive web design is a bandawagon I will jump very carefully and after following it for some more time :)

Aug 22, 2011

heart and attitude says:

But what? what is the main meaning or definition of responsive design? I know web design is one of the most expensive thing that a marketer can offer to his client. Because what it is very difficult.

Aug 23, 2011

Nicolas Bouliane says:

That was spot on. Even though everyone is raving about responsive design, I believe we need to be responsible with it.

Not all mobile users want the mobile site, neither.

Aug 24, 2011

Rafael Trabasso says:

Nice article.
I don’t feel that Responsive Webdesign is such a BOOOOM and the workings are quite simple.
I’m offering responsive websites to my clients out of the box. And I don’t mockup all the resolutions on Fireworks.
I mockup the biggest resolution and show the client. If he likes it, I start from the smaller sizes aiming to arrive finally on the biggest, that I already know how I want to come out.
I found this process more productive for me.

Aug 30, 2011

Web Design Kansas says:

nice article but i think the author needs to discuss responsive design in a more detailed way also include its advantages and disadvantages and if possible have an example.

Sep 1, 2011

Web Design Worcester says:

Not all website can afford this responsive design so it’s ideal to discuss some other options aside from this and make a comparison why we need to love responsive design.

Nov 15, 2011

John catt says:

good post. design takes too time

Nov 15, 2011

Jimmy Vonner says:

80/20 rule is a must when designing. Outsourcing is the real deal. The only way to see fast prosperity

Nov 16, 2011

Smartech Consultants says:

The article is good.but the problem is that we are not able to make all design like this.Until He is right.

Jan 23, 2012

threadsfaisal says:

The article is good.but the problem is that we are not able to make all design like this.Until He is right.

Mar 16, 2012

santa says:

great blog

Apr 7, 2012

real estate website says:

Nice work that is why I love the idea of Responsive Web Design.
Thanks for sharing.

Jul 4, 2012

tap chi design says:

Amazing blog ! Thank for this post

Jul 11, 2012

Web Design says:

I am new to responsive website design. But it get’s my interest i will look more forward on this great idea.

Jul 17, 2012

Web Design Kipo says:

Hi there. First I want to thank you for the article. Nowadays it is very important to get as easy as possible to the end user. With Responsive design your sites can be opened and formatted equally well in phones, tablets, desktops and laptops. What we want more :)

Jul 23, 2012

maxwebdevelopers says:

Really it is a great idea. Thanks for sharing.

Jul 26, 2012

Brian says:

Great post, protection data is where money should be spent!
I agree. Not every website can afford responsive design. There are other things the money would be better spent on.

Sep 18, 2012

Steve says:

Superb post.

Responsive design may be expensive but it’s worth it.

Mar 7, 2014

Paul says:

Great article, interesting to see this predicted back in 2011 and how crucial Responsive Web Design is becoming today with the increase in mobile access!

Leave a Comment

Links

  1. My Thoughts on Responsive Web-Design | Jon Phillips's Blog
  2. Cross-Browser PSD to HTML Conversion in the Mobile Web - PSD to HTML Blog

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014