How Much Does a Responsive Web Design Cost?

Answer: $13.47.

Asking “How much does a responsive web design cost” and expecting a cut-and-dry, prescriptive answer just ain’t happening. Brian Hoff (@behoff) handily explains why in his article What Does a Website Cost?

Imagine asking a Real Estate company, “How much does a house cost?” Well it depends. First off, what are the essentials you need? Three bedrooms because you have two kids? Central air conditioning because you live down south? Now that we have the essentials, what are some of the less essential, yet nice features? Basement? Extra storage? Large backyard? Three car garage? What if you could have it your way? How about a pool? Sounds nice right?

The fact is that responsive web design costs more…than doing nothing. Sure, you could continue building sites the old fashioned way and ignore the multitude of web-enabled devices accessing the web now and in the future. But this is 2012. At the very least a web experience should have at least some mobile consideration, and at the very most a site should be full-on mobile optimized.

I’ve seen a project that didn’t take mobile into consideration at its inception, and about 80% through the design process the client asked “How will this work on an iPad?” And everybody freaked out. Schedules got rearranged. Budgets increased. And ultimately a desktop-only design was shoehorned onto mobile devices.

The moral of the story is that right out of the gate it’s much better to account for today’s plethora of devices, and also acknowledge the unpredictability of the future.

Responsive Site Or Dedicated Experience?

While this topic has almost been beaten to death by now, there are some budget-related considerations when determining how to approach a mobile web project. Is responsive web design cheaper than building a dedicated mobile site? In my experience there hasn’t been a significant difference between the two. But then again, I can’t say my experience with both approaches is really apples-to-apples.

But while a dedicated mobile site budget might be comprable to a responsive budget initially, a separate site incurs several ongoing costs that responsive solutions don’t. First, the fact that multiple versions of the same site exist means that some maintenance redundancy will exist. I’ve worked on sites where we handled the mobile site and another agency handled the desktop site. The amount of coordination, planning and communication required just to update both sites can get expensive.

Secondly, device databases which route users to the appropriate experience need updated (which in my experience never happens). Ongoing device maintenance becomes a challenge, especially sorting out the gray area of small tablets/large phones like the Galaxy Note. What site do they get: the mobile or desktop site? This is just one more thing to worry about.

I’m not saying that going down the responsive road is all peaches and cream, but the idea is that once the foundation is set, the ongoing maintenance costs decrease over time, while dedicated sites have several additional reoccurring costs.

Budget Considerations for Responsive Web Design Projects

So how can you effectively budget for a responsive design project? Here’s a few considerations:

  • Discovery & Client/Team Education—build in time to get everyone up to speed. Make sure everyone understands what responsive design is, and more importantly why it’s important. Take time to get a lay of the land, see what trends are emerging, and then discuss how you’d like to proceed.
  • Build in time for process change—This is possibly the most significant budgetary consideration. Many people are used to a waterfall-esque process (and project planners absolutely love gantt charts), but responsive design quickly demonstrates how cut-and-dry linear processes don’t hack it in this multi-screen world. Close collaboration is absolutely essential for a successful responsive project, so make sure to build in time for collaboration, innovation and iteration. Iteration is especially important, considering the fact that the more technical folks have to guide the less technical folks through the process. “How will this navigation work?” “How will this reflow on larger screens?” etc. Give the entire team time to sort through undeniably tricky design problems.
  • More Testing/QA Time—Remember when you had to account for just a handful of desktop browsers? That isn’t the world we’re living in anymore, so make sure to build in much more testing and QA time into your responsive budget. “What devices do we support?” That’s tricky as there are lots of factors to consider deciding what to optimize for, but this is important: there is a difference between “support” and “optimization”. Many contracts require specifying specific browser/platform versions, and it’s unfeasible to optimize for every device on the planet. But while budgets are limited, it’s important for the team to come up with inclusive, forward-thinking solutions instead of putting blinders on and only paying attention to today’s landscape.
  • Purchasing Devices—It’s essential to test your project on real devices, and that means investing in some test devices. Device investments in may vary from project to project, but hopefully you can get a representative smattering of devices on a budget.
  • Understand channel strategy— Project planners are typically used to chunking things out into “streams”, and I’ve seen several project plans that launch a desktop version, then subsequently mobile and eventually tablet versions. That’s not really how responsive design works. The team need to address all channels up front as one “stream” influences the rest of the design. This is important even if you are making a dedicated mobile site that utilizes responsive techniques.

These are just some considerations for planning a responsive project. There are plenty more. Feel free to share yours.

48 Comments

  1. Ed Charbeneau

    Excellent points, well done.

  2. Trent Walton

    In terms of redundancy—I think that’s where the real savings kick in because it might not be just 2 versions of a site. Production time (and maintenance costs) could get exponential if different versions of a site are being served to different regions or languages. Now that’s a lot of dinero.

  3. Justin Avery

    The most difficult thing I’ve found is getting clients to pay extra for a responsive design AND let go of the waterfall based design/project workflow.

    This not only makes the client nervous but I’ve found it makes web development agencies nervous as well. The agency simply does not know how much extra work is involved when building for multiple widths.

    At the end of the day this is going to be a new process for a lot of people for a while yet. You might pay a little more than you should as a client, or you might do more work then you quoted as an agency, but you WILL benefit from it in the long run.

  4. Josh

    Good thing you continued your answer. I became very worried I was overcharging 🙂

  5. Joel Glovier

    +1 for purchasing real devices. Can’t underestimate the value of actually doing this. Bill the client even, just make sure you do it.

  6. Luis

    I think you must do your work the best you can.
    And if the project can be done with responsive/adaptative design, go for it!
    Maybe you have to spend a few more hours, but it’s worth it.

    And don’t forget to charge with hourly rates 😉

  7. Stan

    I also agree with purchasing real test devices. Changing user agents in browsers, device simulators and the like will not give accurate feedback. Something also to keep in mind is not just the device, but OS versions as well.

  8. JasonG

    $13.47? Wow, I have been seriously overcharging my clients!!!

    Great post, lots of good tips. I would also recommend checking out Adobe’s Shadow app for testing on your devices.

  9. Kudakwashe Zimunya

    Since the beginning of June we’ve been pushing responsive websites to our clients and we’ve lowered our rates because the bulk of the work is done desktop and tablet versions the wide-screen and portrait mobile can pretty much take care of themselves.By lowering our rates our clients are more receptive and we’ve been so busy we haven’t even had time to finish making our site re-design.

  10. AD

    There may be times that a responsive time is not right for a client/situation. There might be a situation when a mobile ready website is the better choice because of context, functionality or because of expectations

  11. Rick Lowes

    Brad – could a good CMS that just uses different templates, but same backend content/repository etc not overcome a lot of the maintenance redundancy? Also could using a 3rd party database like WURFL not also get you past the issue of staying up to date with devices?

  12. Justin Butlion

    Very good article. I love how you compared charging a client to build a site like someone trying to buy a house. The growth of Internet access via mobile and tablet type devices is increasing which brings extra variables into the equation. Thanks for a great article.

  13. Ben Callahan

    Great considerations, Brad. One other area we’ve been focusing on is making sure that our client’s internal teams are educated with the techniques used in #rwd so that they can maintain the site. This is not difficult to do if you are able to engage them in the process as you work. It does, however, require more time and effort.

    We all agree that the process change is significant, but not just in design/dev/testing. Usability testing is also much more complicated—and completely necessary—when you’re supporting multiple resolutions.

    And one more, I think a lot of folks (myself included) have gotten along without considering performance as critically as we should. We’re taking steps now to include performance considerations throughout our process so that we’re not asking difficult questions at the end of a project. This takes more time, which costs more money…

  14. Michael "Spell" Spellacy

    Thanks for posting this, Brad. I work for a ad agency in NYC where we are attempting to put together a more collaborative and future-friendly thinking process. Not always easy when you are dealing with people (inside and out) who have become very accustomed to building sites pretty much the same way for over a decade. This post will make handy ammo. With baby steps (and patience), we’ll get there. 😉

  15. Chris

    Thanks for the article Brad. We’ve done a number of fairly large (and complex) responsive sites over the last year, and have come to a pretty good formula we think works. We basically add 30-50% to our dev AND creative estimates. That covers your budget considerations in the above and other issues that inevitably crop up and can be “enhanced” when you’re doing RWD.

    However, you have to make sure your initial estimates for both are sound. 30-50% of an unrealistic number is still unrealistic.

    The key to all of it is educating the client. We do the hard work up front explaining the pros and cons of responsive vs separate mobile site vs doing nothing. We’re found it really helps them see the value in the responsive approach – when that’s the solution.

    Couple recent examples:
    http://www.wentworthmansion.com
    http://www.workspacesllc.com
    http://www.charlestonweddingguide.com

  16. Tom

    We are building a responsive site and found fhis valid and informative. Thanks.

  17. stacyben

    hi everyone
    Nice place……………..
    i’d like to share this website with you.http://www.jandutech.com/
    please let me know what you think !

    stacyben

  18. Sreejith

    Very good journel . But this depends upon the company also

  19. Oscar Antolinez

    Excelente articulo, estoy totalmente de acuerdo.

  20. Avangelist

    The most crucial statement there was about changing you processes. This is the biggest sticking point in agencies I have encountered. There may be people reluctant to learning new methods of working in order to provide the service that everyone wants.

    Question: Are you increasing your costs due to your own lack of knowledge, or because the work significantly increases when considering multiple devices? It would sound to me that people are increasing their development times and costs because they themselves have not been working on their own lab projects over the last few years. At the very basic level if you have been building liquid layouts instead of fixed width in recent years you are a great way there on a front-end perspective.

    I worry that people are going to be put of a method of working which is striving for a utopian dream because ill equipped and managed agencies are suddenly going to ramp up their costs.

  21. Serggio

    Interesting post

  22. Robert

    If you don’t need too much functions, you can code yourself. It will cost nothing, and you’ll have a website that is friendly for not only mobile, but any other devices in the future (who knows where people are going to make?) since responsive design bases on screensizes, not devices.

  23. Chris Bowes

    Personally when working in an agency environment, the biggest battle was getting the creative team to adjust to the demands. Much time and cost was added by inflexibility of designers who struggle with the concept of fluid or percentage widths. Responsive design doesn’t have to cost the earth provided you don’t think in rigid lines and don’t obsess about how transitions and media queries look when resizing a dekstop browser. This is irrelevant. The key focus should be “does it work on each and every device when viewed standalone”, i.e in context.

  24. Fred G

    We’ve had some success in tightening up costs through templating and team education. Alot of the overhead of our first responsive projects was incurred from the fact that not everyone understood how to design or plan for responsive. We’ve since created a loose process, as well as templates (in this case, based on LESS Framework) and scaffolds to help things along.

  25. Maintenance Man

    I really wished it was as simple as $13.47. It would still be awesome if we could quantify it as $134.70 or even $1347.00. The long drawn out answer is never very fun. Might be reality. But I want a dollar cost. So does my boss.

  26. Sean

    I’m a little concerned about the comment that mentions “spending a few more hours” on a responsive design. I really hope designers and developers and especially the clients they communicate with don’t think that’s all it will take to properly plan and implement a responsive design.

    Are there small sites or special cases where this may be the case? Maybe. But even on the small sites I’ve developed responsively, just the time to plan can take a really long time. You’re not only developing 2, 3, or more layouts but the intermediate stages between them, especially when you have multiple columns, image considerations, complex navigation, etc. No, they aren’t always drastic changes but each difference should have thoughtful consideration going into it.

    Ideally, every time you look at your responsive site on a different size device, you should be asking “Is this the best experience for this screen?”

  27. Mark

    I would love to see the companion piece to this one.

    “Home much value does a responsive site bring to your client.”

    Its one thing to charge the correct amount, it is a whole different story to justify that cost.

    • brad

      Hi Mark,
      It’s important to help your clients understand *why* creating a more optimal experience for all screens matters. I wrote about this in Responsive Web Design: Missing the Point. The fact of the matter is that more and more people are getting online on mobile devices and expecting optimized experiences. And while the ROI might not be apparent on launch, its value can certainly reveal itself as mobile quickly becomes the dominent platform.

  28. Mike

    I’m really happy to see the financial aspect being discussed here. I started a question on Quora with the same issue just a bit back: http://goo.gl/ZMI7N

    With my freelance clients, I’ve been trying to decide whether it’s worth it to just include it in the costs and not even offer the option of a desktop only site—but it does take a lot more time to produce and everyone might not want to pay the price. It’s tricky. I’ve settled on just discussing the benefits up front and seeing if I can get clients to agree.

    At the very least I try to push for sites that respond to smaller screens by becoming a single column layout.

  29. Fred

    Clients will naturally be reluctant from a budget sense. More time. More costs. More things they’re not sure they need. Educate your client, get them excited, keep it cool and keep at it. They will eventually come around.

    Also, don’t charge clients for the time spent figuring out how to implement the RWD beast. You should be locked and loaded. Ready to pounce.

  30. Jorge A. Gonzalez

    Just a friendly reminder: You get what you pay for.

  31. Avangelist

    @Mark – that is something that the community at large seems to have forgotten. Yes there are a lot of thoughts around the end user experience of the site BUT! these concepts were brought about as a means to reduce development costs and ongoing maintenance of a web service. That! Is why I am so worried of this concept that people are just adding cream on top to compensate for getting themselves up to speed, this was meant to reduce ongoing maintenance not increase the overheard.

  32. Ed Charbeneau

    I see a lot of talk here about device testing. Shouldn’t device testing be taken in to consideration even if you are not doing #RWD? Just because you didn’t target the device doesn’t mean that people aren’t using it anyway.

    I’m not sure if device testing is as much of a #RWD thing as it is a 2012+ thing.

  33. Mike

    Great article! I especially appreciate your discussion of waterfall versus iterative/agile. Like everything else in web site/app, responsive design is not a single monolithic feature. Instead it is a series of small features, each of which can be prioritized and estimated, so that the client has more insights in the tradeoffs involved (scope v budget v. time) and can determine what’s right for them at that moment.

  34. Luke Pilkinton-Ching

    I charge about 1/4 to a 1/3 more than a regular site as I reckon is it takes about 1/4 to 1/3 more time.

    Anyone else with percentages out there?

  35. Marce

    I now understand perfectly the importance of responsive design and why to take into account the mobile/tablet users… but the question is how (or where) can I find some information about HOW to make responsive designs…?

    Some books/articles/websites you would recomend?

    Thanks for the article 😉

  36. Kelvin N.

    Good read for sure. Nice tips were shared here. I think educating the client of the pros and cons should be the first step. The 1/3 or 1/4 pricing model is pretty smart I think.

  37. Mike Fowler

    “At the very least a web experience should have at least some mobile consideration” — This has been my philosophy for the past six months or so. Transitioning to a workflow where I am frequently designing in the browser has made implementing basic cross-device support painless, and has thus become standard for my clients. More complex optimization is evaluated on a per-project basis. I wrote a bit more on this particular subject a couple months back (http://bit.ly/znOWyN).

    At work we’ve found that implementing a solid responsive design, as you mention, requires closer and more frequent collaboration, and really lends itself well to business unit teams. Companies who share designers across multiple teams can no longer simply hand off static designs to development teams.

    Nice article, Brad.

  38. Aidan Foster

    I just use +50% cost for RWD than the “Desktop only” site as a starting point for early conversations with clients. Then you aren’t talking dollars right off the bat, but more about relative amounts of effort.

    As you’ve outlined RWD is a lot more work in both training clients/team members on process, and in implementation of design, and QA testing.

    It’s been an easy sell to show why responsive design is valuable to most clients as it’s smart business to have a very mobile-friendly site before your competitor does. Business owners just need the facts clearly presented to them, and they can weight out whether the extra cost makes sense for themselves.

  39. Dave Kaye

    Great piece! Not to quibble, but isn’t it the developer’s job to consider the iPad on the customer’s behalf? That it got brought up 80% of the way through the job says more about the developer than it does about the client. We are paid to be experts, and all that.

  40. Katerini

    First of all greaaaaaaat article. The second thing is that. I give responsive design almost to anyone of my extra and my goal of doing it is. To have something extra of my competitors

  41. building and home

    I think this is among the most important information for me.
    And i am glad reading your article. But want to remark on some general things, The site style is great, the articles is really great :
    D. Good job, cheers

  42. Tara

    When we quote website prices, adding the responsive element is a $500 surcharge that we add. Other than that, a “responsive” website isn’t inherently “more” than a regular site, it just takes a different style of coding. Technically, you could prob buy a wordpress template for under $100 that is responsive.

    The price of your site will still depend mostly on how much programming is involved and how much design is involved. The “responsive” part of it isn’t a really big deal.

  43. Jenn

    Stumbled across this tool awhile ago: http://dfcb.github.com/Responsivator/

    Could knock out that piece of having to buy a bunch of mobile devices or even having to ask the company which type they have.

    Really great post. We can’t wait to do our first responsive design project for a client (coming soon).

  44. Des

    Personally, i prefer the do nothing approach. what happens when whole paradigm shifts again and responsive ends up being a dogs breakfast. Good luck with it all you responsive freaks.

  45. Jody

    @Des – LOL!

  46. Ian P

    Dear Des,

    .container { width: 960px; }

    Job done. Cheers.

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.