responsive-design_thumb.jpg

Why Responsive Design Is a Waste Of Time

(Update: My view is starting to change from when I first wrote this article.  Thanks to numerous people who have pointed out many things I overlooked and have helped me to understand what responsive design really is and what goals it is trying to achieve, I am getting a better understanding of why it may indeed not be a waste of time.  There are still some valid points that I brought up in this article, but I don’t stand by my original blanket statement that it is a waste of time.  It especially seems like responsive design may be worth the “trouble” for ecommerce sites where you are more much likely to make the sale if someone can easily purchase and browser your products from a mobile device.  Thanks everyone who has been giving me great advice and resources for better understanding responsive design and for mostly doing it in a “nice” way.)

Response design seems like a good idea.

At first look, it makes sense.  Why wouldn’t you want your same website to scale down to a mobile device and display differently?

And, sure, if there were no cost involved, if you could just flip on a switch and make your web application responsive, I’d definitely say do it… Why not?responsive design

For example, there are many WordPress themes now that offer responsive design baked right in.  If you are using one of those themes, you might as well take advantage of the hard work someone else has put into making the design responsive.

But, if you are creating a new website or you are considering converting your existing website to a responsive design, I’d suggest you think twice before making the plunge.

The extra work of responsive design

The biggest problem with responsive design is the extra work involved.  Sure, there are frameworks and tools to make responsive design easier, but no matter how good those frameworks and tools get, to make a site adapt from the desktop to a mobile device, it is still going to require significant work.

If you have a really simple site with just a few pages or pages that pretty much all use the same layout, but just differ in content (like a blog for example,) then the work might not be that much, so go ahead, make it responsive.

But, if you have a website of any considerable size, you’ll probably find that responsive design is going to add a non-trivial amount of extra work to your project.

It actually turns out the adding responsive design to a web site can add more work than creating a separate desktop and mobile site, because you are creating a user interface that morphs or adapts to the mobile form factor–which, by the way, is ever-changing.

The problem with one-size-fits-all

Consider this. Which is more difficult to create: a car that turns into a motorcycle, or a car and a motorcycle?

Here is another one.  Which is more difficult to create: a multi-function printer or a printer and a scanner?

When you try to make a product that can do multiple things, the complexity of creating that product increases exponentially.  It is almost always easier to create two separate products that do two different functions or have different form factors, than it is to create an all-in-one product that is able to do many things.

Besides the increased difficulty, trying to create products that do more than one thing usually results in them not doing either function that great.

Isn’t it better in most cases to have two products that both do what they are supposed to do and do it well, than a single product that does two things at a mediocre level?Blue Swiss Penknife

I’m not saying you can’t design a great responsive website that serves desktop clients and mobile clients wonderfully and makes their eyes light up with joy every time they see your beautiful site.  I’m just saying you won’t.

Let’s face it, unless you have a huge budget and time and have access to really good designers and JavaScript and CSS skills needed to pull it off, you’ll probably end up with something that works on both mobile and desktop and is reactive, but morphs from a pretty crappy desktop site to a pretty crappy mobile site.

I don’t know about you, but I’d rather just create a separate set of HTML, CSS and JavaScript for mobile version of the site and make both the desktop and mobile version look great than to have a mediocre compromise on both platforms that took twice as long to create.

I’d also rather not be handcuffed to my original design because changing anything will incur the cost of making changes to the reactive layout as well, that scales down to mobile.

The reuse fallacy

What are you really trying to do by creating a reactive design, instead of just creating a desktop version and mobile version of the site?  Reuse some HTML and CSS?

When you think about it, it doesn’t make much sense.  I’m all for code reuse, but responsive design is like putting ifdefs all over your code base.  Are you really saving much time and effort by reusing your front end code for both platforms?

It seems to me, that if you have to have your site display differently on a mobile device you are better off just forgetting about trying to reuse the HTML markup and CSS, and instead focus on reusing the backend code for both the mobile and desktop versions of your site; that is where you’ll actually get the biggest bang for your buck.

Again, I don’t know about you, but I’d much rather maintain two front end codebases that are simple than one monstrous complicated front end codebase.

It is good enough already?

Most desktop websites actually look fine on a mobile device without any reactive design.  To me it makes much more sense, in most cases, to focus on just creating a desktop design that looks good on mobile or even a mobile design the looks good on the desktop as well.

Sure, responsive design is pretty cool, but do you really need it?

It is the browser’s responsibility anyway

Aside from the practical reasons I’ve talked about so far, there is another major reason why responsive design might just be a waste of time anyway: this should all be the browser’s responsibility, not the web developer’s.

What I mean by this, is that just like HTML5 brought us changes to HTML that required the browser vendor to start supporting many of the things that web designers were doing manually, like playing video and drawing with JavaScript, it is very likely that eventually the responsiveness of responsive design will be relegated to where it actually belongs anyway, the browser and the markup itself.

This is even already starting to take place.  Consider the special input types in HTML5, like the number input type.  On a mobile device it brings up the numerical keyboard in mobile browsers.

I predict as more and more websites are viewed from mobile devices, the types of things that web designers are doing to make desktop sites responsive right now will be incorporated directly into the HTML markup and the browser itself.  So, creating a responsive design manually might end up being a big waste of time.

I’ll leave you with one final point, then I’ll get off my responsive design soapbox.

We are in a time of constant flux right now

Things are changing rapidly.  Mobile devices are getting bigger screens and higher resolutions and becoming much more powerful.  While two years ago it was a pain to visit a desktop site from a mobile browser, it is much less painful now.  With my new Galaxy S4, I hardly feel the difference at all and I even find myself specifically requesting the desktop version of a mobile site from time to time.

The trend says that mobile browsing will eventually take over desktop browsing as the main source of visitors to websites.  If this becomes reality—which I see no reason to doubt—responsive design won’t make much sense at all.  In that case, it will make much more sense to build websites optimized for mobile and not really worry so much about desktop.

If you are going to do responsive design, at least get a good book on the subject.  There are many subpar books floating around, because responsive design is so hot right now.

What do you think?  Am I off my rocker?  If you have a convincing argument as to why responsive design is worth the effort or why it isn’t as much extra effort as I have painted it to be, I’d love to hear it.  Let me know in the comments below.

  • http://gasteroprod.com/ Nicolas Hoizey

    Which is more difficult to deal with: a fluid than can fill any container, or as many solids as differently shaped containers?

    • jsonmez

      The problem is a responsive web design is not a fluid. It is more like a solid that you have to melt down to fit different containers. Like shaping metal.

      • Dan Artz

        Responsive is actually partially fluid… By using percentages and EMS you create a flow between different breakpoints. The better question is: Why are you writing an article about something you know nothing about?

  • Nicolas Hoffmann

    “Maybe”… not everyone has a super new Galaxy S4 with a so big screen that you need a van to carry it ?

    (tip : there are trolls in this answer, so as in this post)

    • jsonmez

      Yes, but in 2 years most people will. So if you are designing an new web app today…

  • Pingback: Why Responsive Design Is a Waste Of Time | RWD ...()

  • markprzepiora

    > When you try to make a product that can do multiple things, the complexity of creating that product increases exponentially. It is almost always easier to create two separate products that do two different functions or have different form factors, than it is to create an all-in-one product that is able to do many things.

    Oh boy oh boy. I can make bold claims without any evidence too. Here I go:

    The advantages of having a single codebase greatly outweigh the drawbacks 99% of the time. Yes, responsive design requires additional effort, and perhaps that effort is superlinear in the number of target browser sizes. But, it also means that every one of your front-end developers is familiar with exactly the same design, which is a huge efficiency win, as shown in the following graph:

    http://i.imgur.com/f1M9sjA.png

    Another advantage is that you don’t have to change *two* code-bases in response to a single change in your API. Also, you don’t have to worry about the features you support diverging between platforms.

    The awesomeness of this is represented by the following picture:

    http://i.imgur.com/lrukmeG.png

    • jsonmez

      Pretty hard to argue with those pictures. So, I won’t even try. ;)

    • erik ragni

      I love the way you figure awesomeness. Multilevel semiotic interpretations.

  • mike_poole

    It’s great to see opinions about these things. It makes sense to me what you’re saying in some of the technical aspects but with respect have you been involved with the development of a large scale responsive web site that had to cater for many clients? My suspicion is you haven’t because you use also multi function printers as an argument as to why it doesn’t work. I think you put a lot of good stuff out there John but it feels more authentic when you use examples from real world dev stories. It didn’t work out because… would have been more believable. Keep up the good stuff

    • jsonmez

      Thanks. And you are right, I have not actually created a responsive design for a large scale web site that had to cater to many clients. I think the more clients you have, the more likely that responsive design would be worth the extra effort, but not everyone needs it.
      But, you are right examples from real world dev stories would be much more authentic. I’m not an expert on responsive design by any means. :)

  • http://sondreb.com SondreB

    I don’t agree with your analogies:

    “Consider this. Which is more difficult to create: a car that turns into a motorcycle, or a car and a motorcycle?
    Here is another one. Which is more difficult to create: a multi-function printer or a printer and a scanner?”

    Making websites responsive, is more like allowing the users to move their seats in different directions so they sit more comfortable. You don’t change much of the functionality or content, it stays the same.

    Having different sites for mobile and desktop does not make much sense. We have a wide array of devices today, and it will only increase in complexity and availability of new models and experiences. Think big screen touch screens, screen walls, projector screens, gaming consoles, tablets, phones, in-car-entertainment, head-up-displays and lots more.

    I believe we will see responsive design meaning more than simply scaling the website up or down according to the screen. It will impact how a user interacts with the website, in manners such as touch and voice recognition.

    • jsonmez

      That is actually a good point. I suppose I was only thinking desktop and mobile, but if you consider that you would need a design to adapt to many different devices, I can certainly see how responsive design could be more useful.

      I still think the responsibility should be on the browser and not the developer and that most web sites don’t need that level of adaptability. Or rather the cost of that adaptability is more expensive than the value it brings.

  • David C

    Hi John,

    I enjoy your articles.
    I like the way you set out your stall and invite comments.
    I also like the way you take on board comments that may contradict your initial opinion and reason about them, this is how we all learn.
    I certainly always learn from your articles and also from the comments.
    Changing your mind based on reasoned arguments is a sign of strength, is good for the world and is good for everyone in it.

    For what it’s worth, I think the extra effort involved in making the design responsive is worth it – unless it’s a very specific application with a very short life-span.

    Thank you and keep up the good work.

    • jsonmez

      Thanks, appreciate the comment. This blog has changed my opinions on many things and really helped me to widen my perspective.

  • Florin

    I would definitely buy a car which properly transforms to a motorcycle or viceversa. And I would certainly buy a multifunction printer instead of a separate printer and scanner. Combining features is all around us: smartphones, smart watches, smart vehicles, and so on. Combining them is what led to where we’re at today and I think that by creating good responsive designs is what pushes toward you idea of browsers handling these kind of stuff or any other kind of automation. But we must do it by hand to innovate first. I also think you and I request desktop versions of websites because of BAD responsive design. Good ones are worth the trouble imo.
    Sorry for the lack of awesome graphs and drummer tyrannosaurus :)

    • jsonmez

      Good point. I guess I would buy a motorcycar as well. Although I disagree about the MFPs, they are horrible. But if they weren’t, I would buy one. The problem is it is hard to make a good combo device. Even smartphones were crappy phones and crappy computers for a very long time.
      You make a really good point about having to do it by hand first though. This point really gets me thinking. Perhaps we have to make the sacrifice now in order for it to become automatic later… hmm, I’m still a bit undecided.

  • Seve

    This is a great article…

    I’ve said this before, and I’ll say it again…

    Steve Jobs and Co. gave us a mobile browser (mobile Safari) that could show real web pages, not mobile, because the mobile experience was horrible. People wanted to be able to access the “desktop” (fully-functioning version) version.

    Problem solved, right? Sadly, no. It has actually gotten worse.

    What I hate, is most responsive websites break functionality that is normally enabled on desktop. Despite! Having a real, javascript enabled, browser I’m forcefully downgraded to a sub-par feature set and experience.

    Did I mention that mobile is about fast access? Having to re-learn a tool I already know how to use, just to use it from my phone, violates the very principal. By making things “responsive” they’ve made them worse for me; they’ve in essence taken away the utility of my mobile device.

    Am I saying that developers shouldn’t target mobile? Hell no. I’m just saying, as I believe the author is, actually target it. Design your product for the platform; intentionally. Slapping “responsive” on something means nothing else to me other than someone is too lazy to do it correctly (e.g. native app, or writing a mobile specific front-end)… But making an entire separate UI is hard? Them is the breaks, kids. They require a lot of time, work, and testing– anything the bypasses that is surely missing the point.

    • jsonmez

      Thanks for the comment, you get exactly what I am trying to convey. :)

  • http://cam.vc/ Cam

    I think you must have completely misunderstood how simple and effective the responsive method is. This seems like head-in-the-sand stuff to me.

  • Steve

    So, when the vast majority of non-responsive device-driven mobile sites out there are app-pushing, awful, broken and functionally-void, I’d say you’re definitely right: hard-working and talented designers and developers can make all the difference in the world.

  • mattevansnz

    “The biggest problem with responsive design is the extra work involved”

    Nothing in this world is easy. Everything requires time and effort.
    Personally, I enjoy the challenges responsive design brings with it.

    “Again, I don’t know about you, but I’d much rather maintain two front end codebases that are simple than one monstrous complicated front end codebase.”

    I think you may have missed the mark here. Responsive design isn’t to cater for clear cut ‘mobile’ and ‘desktop’ platforms.
    What about everything that falls in-between? Surely those users should be provided with a great experience as well? Even if it requires all the “extra work”.

    You mention “this should all be the browser’s responsibility, not the web developer’s”. I would love to see this eventuate in full. However, I do think it’s awhile away. Until then, people still expect some sort of usable mobile experience, more so than ever.

    Thanks for the article and good discussion.

    • jsonmez

      Sure, no problem. Good point. I have come to realize after writing the post that it greatly depends on the situation.
      Starting out with a new site today, responsive design makes more sense than a legacy product that already has a mobile site.
      It also depends on your users and the abilities of your team members as well as the budget you have.

      If I were to create a new site today, would I make it responsive? Most likely.

      But, if I were to consult for a medium sized business that had a decent customer base and much lower hanging fruit, would I suggest for them to implement responsive design? Probably not till everything else was shored up first.

  • Pingback: Why Responsive Design Is a Waste Of Time « Agency Geek()

  • James Nettik

    This article seems to lack (or just ignore) a full understanding of what responsive design is.

    Responsive != Mobile

    Responsive encompasses other things apart from just screen size. Things like pixel density, orientation, color capabilities… the list is continuing to grow for what our sites can respond to. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries Responsive means that your site responds to fit the needs of whatever device the user is on. Are they on a Retina display? Well then serve up this optimized set of images. Did they just switch from portrait to landscape? Let’s move the menu so it’s not taking up as much screen space. Are they on a device with a small screen? Let’s compress the menu altogether into a single toggled dropdown.

    Also what are the criteria for a “mobile” device? In order to have a separate codebase you serve to mobile devices, you first need a list of the devices that will get that codebase. Which means continually maintaining a script, outside of your desktop and mobile themes, to account for the ever changing landscape of what “mobile” is. So now you don’t have 2 codebases, as you mention, but three. But which mobile device do you pick as the focus of your optimized theme? And which aspects of that device? Do you support high definition displays or standard display? Or do you support both, and further fragment your codebase?

    “We are in a time of constant flux right now.”

    We are. Isn’t that the point of responsive. To maintain one codebase that supports not only the existing devices, but also a reasonable assumption of the devices that continue to come out?

    “It’s the browser’s responsibility anyway.”

    The browser’s responsibility is to provide you, the developer, with the tools to make great products. Not make those products for you. How is the browser going to know to serve up a different set of optimized images? It has the capability to, but you have to tell it when to do it and which images. And because browser vendors don’t have a good track record for agreeing on how things should work/look, do you really want to trust Internet Explorer and Mozilla and Google and Opera and all of the other assorted browsers to assume how your site should look?

    • jsonmez

      Great points. Thanks for your comment. After seeing your posts and some other comments and having some discussions with others, I am starting to see that my original view was not quite correct.
      I still seem to have thins mindset of thinking desktop or mobile, but it isn’t quite that simple.
      Good point about the retina display and different images, I didn’t even really consider that.

  • Michael McGinnis

    Interesting discussion – you were wrong for some right reasons.

    Some classic books on responsive design are Responsive Web Design by Ethan Marcotte and Implementing Responsive Design by Tim Kadlec and Aaron Gustafson.

  • Pingback: 11 Influential Web Developers You Should Be Following()

  • Pingback: Does Responsive Design Required??? | UIthought - Web Development Blog()

  • stone

    What about ipads/tablets or and phablets? Are you creating separate sites for them too?

    • jsonmez

      I’m not sure why a desktop site doesn’t work for those devices. It seems like today, the makes sense to design for a tablet.

  • Bonyfus Martin

    Hi John, Bit surprised to see an article like this from you. I know its your view/thought :).

  • Pingback: The Web on the Web’s Terms | Cognition()

  • jsonmez

    That looks pretty awesome, thanks for sharing that link. Will check it out.

    • Obinwanne Hill

      You’re most welcome. Cheers.

  • Pingback: I Was Wrong About JavaScript and Responsive Design | Simple Programmer()

  • guptaabhijit318

    Very helpful article. Thanks for, sharing with us. It will make work easier and interested. I get a lot of new ideas for my next project. Very well written article!.

  • Tom Psillas

    Here is my scoop on it. If you do not use responsive design and keep your head in the sand, here is what what happens, like it did to me.

    Users click on a Google ad and land on your site. Your site is not responsive. After 3 seconds, realizing that your site sucks, the user abandons your site and clicks on your competitor’s ad. Meantime, you just paid for that use who clicked on your ad. Over 50% of users are now mobile, so you spend double on ads, if you do not have responsive design.
    I think Google lets you filter out mobile devices if your site is not responsive, but I think you have to spend more $$$ per month to have that feature.
    But the same issue exists if you advertise offline or not on Google. Why lose 50% of your potential?