Robin left a comment on my post about responsive design always being appropriate suggesting I didn’t know what I was talking about when I said a responsive site takes a similar amount of time to design and develop as a static site. I understand where the comment comes from, but as you might expect, I disagree.
I’ve suggested a few times that responsive design doesn’t add significant time or cost to design and development as many make it out to seem and figured I should expand my thoughts to make clearer what I mean.
Minimum Viable Responsive Design
When someone asks the generic “how much does a website cost?” I assume your response is something along the lines of “it depends” and rightly so. Even disregarding the difference between a few page brochure site and an ecommerce site with thousands of products, it depends a lot on the specific details of each.
- Does the budget include user testing?
- How much research is needed or expected?
- Are we using a CMS or building from scratch?
- How much work has the client done prior to contacting you?
- Which features are necessary and which can wait till a later time?
It also depends when we’re talking about responsive design. What is and isn’t acceptable for layout changes? Is the site heavy on images and if so how are we going to handle all the images?
- A simple max-width: 100% and height: auto
- Cropping the images over several sizes and displaying the most appropriate
- Will there be additional images for retina?
- Will we use the server to detect the device?
The only fair comparison is how much extra work is involved in a minimum viable responsive site
How about the content? Are different versions of the content being written for different devices? Do we need to rework the information architecture for phones? Tablets? TVs?
Ideally we should all do more than the bare minimum, but when comparing any extra time to build responsively over developing a static site it’s hardly fair to compare the max responsive site with an ordinary static one.
The argument that suggests a responsive site is too expensive is usually followed up by a suggestion to stick with a static site. To compare fairly we shouldn’t compare the highest of high end responsive site with a typical static one. We should compare the responsive site closest to the static version, where the difference is only in being responsive.
If you want you can also compare to building a static site and then a site dedicated to mobile (or other device), but in that case you need to consider the additional costs of multiple designs.
Again we should be doing more than minimum viable responsive, but while all the extras are nice, none is necessary to make a site responsive. The only fair comparison is how much extra work is involved in a minimum viable responsive site. At that point the responsive design is an improvement over the static one.
3 Keys to a Responsive Site
Let’s keep in mind there are 3 ingredients to a responsively designed site
To accomplish the first stop using absolute measurements like ‘px’ and start using relative measurements like % and ’em’ and you have a flexible layout. That hardly adds significant time to a project. Once you’ve done it a few times it adds no additional time
To accomplish the second set you images and media to
{code type=css}
max-width: 100%;
height: auto;
{/code}
It’s not a perfect solution, but it’s already better than doing nothing which is what the static site calls for and what we’re comparing costs to. While there is certainly more you should do to improve how images and media work across devices, you should be doing those things on static sites as well as responsive ones.
Note: The lack of a great image and media solution is one of the valid arguments for creating a separate design dedicated to a specific device, though it’s not a valid argument for maintaining a single static site.
When it comes to media queries I think this is where many expect a lot of time and thus cost is added. It doesn’t have to be that way. Take whatever 2, 3, or 4 column static site you have now and let the columns drop one below another at a couple or three major breakpoints.
To be honest I was doing this long before there was such a thing as responsive design and it’s not hard. Float your major containers to the left and guess what happens when there’s not enough room to display them all in a single row? Yep, they start dropping below each other.
Seriously, the majority of static sites built over the last decade have done this automatically so why did it suddenly cost more once we gave a name on it.
Again there are better approaches to rearranging the layout, but a simple column drop does work if you think anything else takes too much time.
Once you’ve designed and developed a few responsive sites the other methods for rearranging your layout are easier to achieve and even more, easier to plan for. The situation is similar to when the industry moved from table based layouts to css based layouts. At first the css layouts took longer to build. Then we learned and they became quicker and easier to build.
It really doesn’t take much extra work to design and develop any responsive site than it does to build a static site when you’re fairly comparing the two. I’m not saying they take the exact same amount of time to build. I’m saying the time is similar once you know what you’re doing.
An Ideal Responsive Site
A minimum viable responsive site shouldn’t be the goal. We should be doing more than the minimum and if we are reaching for an ideal, a responsive design will take longer and cost more to build. But again, that’s not a fair comparison.
The reason the ideal responsive design takes longer, isn’t because of the difference between responsive and static. It’s because a responsive design allows us to consider so many things we never could do with static sites.
A responsive design allows us to do more so we do more. That’s where any extra time and cost comes in. You don’t have to do all the extras to have a responsive design, though. You should, but you don’t have to.
Summary
I can’t claim to have built every possible type of site in a responsive way. I’m sure there will be exceptions to what I’ve said above. There are always exceptions. However, if we’re going to compare the time between building a responsive site and a static one, let’s compare fairly.
Fair is the difference between a static site and it’s minimum viable responsive alternative, and that comparison doesn’t lead to any significant extra time.
Responsive design is a change in mindset more than anything else. Once you embrace that change, responsive design gets easier and quicker to the point where you don’t even think about any difference in development time.
Download a free sample from my book, Design Fundamentals.
FINALLY someone who thinks that responsive design is not hard! I never understood why people think it’s not easy or that it takes a lot of extra time.
I mean sure it does take a little bit extra time to add the media queries, and maybe a little more thinking at the beginning, but overall it’s not hard!
Maybe I’m missing something or not seeing something other people are seeing, but that’s my opinion.
Thanks for this article. 🙂
Thanks Sara. I’m with you. I don’t know why people think it’s so hard. I realize there are things we talk about in responsive design that are difficult, like serving the right version of an image to a device based on its characteristics. I’ll also admit there are some layouts that are going to take significantly more time to code.
However it’s not like we’re doing those things in a static design or have to do them in a responsive one. We should do those things because we can, but to use them in the comparison isn’t fair.
Nice article. I also encourage client about responsive web design. You know and I know that RWD is easy but here in my country they still think RWD is difficult.
Anyway how I deal with responsive image I use js plugin called focal point that will crop image on smaller devices.
Thanks Bobby. I think once responsive design is more common and most everyone is developing responsively we won’t have to deal with people saying it’s too difficult. It’s like how it was with css in the beginning. Lots of people complained and said tables were better. In time most everyone stopped saying that.
I hadn’t heard about focal point. I just checked it out and it looks good.
I agree with you on saying that a responsive design doesn’t take extremely long compared to a fixed with design. Sure, it takes much more planning as opposed to the traditional design, but I’ll argue that process on making websites responsive forces people to rethink what was actually necessary in their website, and what their audience want.
The process of killing our thoughts and ideas that are unnecessary might have contributed to the length of the project.
I still feel that going responsive is mostly the right thing to do. (but it obviously depends on the purpose of the website)
Great point about having to rethink what’s necessary. I think the biggest reason people say responsive takes longer is because it’s a different mindset and we’re not used to it yet.
The first responsive site I built took much longer than a similar static site would have. I had to wrap my mind around the change in thinking. It took some time to get used to relative measurements and break points. The second one was much faster and now I don’t even think about it. I just develop responsively.
While there is some truth in this for a quick responsive fix, it does not account for creating a true responsive experience for your users.
A mobile experience is very different from a desktop experience, and simply stacking grid columns on a smaller screen is not always the answer. Optimising for performance, conditionally loading, different browsing patterns, more testing at different sizes, on all browsers, etc. These things take a lot more time than a fixed site.
It gets a lot worse as you start working with more complex systems such as e-commerce.
I agree that what I’m describing as the minimum viable responsive design shouldn’t be the end goal. There’s clearly more we should do. However, I don’t think it’s fair to compare all those extras to a static site in terms of the time, effort, cost they accrue.
Most of the things people say make responsive design harder or take longer, aren’t things they do for a static site. In that case it isn’t fair to use them in the comparison about which takes longer to build.
I agree with you that optimizing for performance and conditional loading, etc are more work, but they’re more work not because responsive design is hard, but because it allows us to do things we didn’t previously do with static sites.
I’m saying that a minimum viable responsive design is a better option than a static site and it doesn’t take more time or effort to create. You should definitely do more than the minimum, but if all you do is the minimum you’re still ahead of the game.
Hi Steven,
In all fairness what you are now describing is just setting a few CSS values and calling it “responsive”. In reality, to make a site truly responsive it should never require quick fixes updates and “minimum” requirements.
You should also never make a site responsive just because you can.
I think your article is misleading. It also skews in the favor of building a simple website from scratch or modifying an existing simple static website with basic modifications. This really isn’t really making a website “responsive”. It’s setting a CSS property that gives your site’s container 100% width via a media query.
This mentality only works in the exact way you are referencing it. What happens when you engage more developers, more designers, analysts? What about business requirements? Device requirements? Device testing? This is more like an intro to CSS3 media queries article.
I understand what you are saying in that adding relative measurements can easily convert a static site to a dynamic site. But ask yourself are you really making the site responsive? Are you addressing things like scrolling, re-sizing and panning across multiple devices? If not, then your site is not really responsive.
Thanks for the comment David. Naturally I disagree, but I appreciate your thoughts.
I’m not trying to suggest you shouldn’t do more than what I’m saying in this post, however I do think if you just do the minimum I’m offering, you’ll have a responsive site. It would hardly be the best responsive site, but it would certain be responsive. You couldn’t say it was fixed.
I completely agree you should do more, but I don’t think you have to build a perfect responsive site to say you built a responsive site. This post is mainly a reaction to those who suggest a responsive site is too difficult so you shouldn’t build a responsive site. I think if you at least do a few minimum things you’re better off than sticking with a static site.
Hi Steven,
I do like the information in your article and how it was articulated. I like that you are promoting the simplicity of -creating- responsive websites it because it is indeed not that complicated. It is great especially for developers looking to dive in to a more responsive web and take a look at some core simple tactics.
I think the article border lined too much on “just because you can doesn’t mean you should” for me. I struggled with the lack of the “WHY” in the article. Any John Doe can go in and float containers and set measurements to fluid. This is not new like you said in your article. I think developers will have a hard time understanding their own work or even justifying it without understanding at a fundamental level WHY they are making the site responsive.
“Take whatever 2, 3, or 4 column static site you have now and let the columns drop one below another at a couple or three major breakpoints.” While this is entirely factual and evident in frameworks like Twitter Bootstrap it also doesn’t communicate why this could be very BAD. What happens if now your 4th column had a subscribe to newsletter conversion form? That’s now the last in the list and the last thing your end user will see. You just potentially derailed the entire purpose of that 4 column site.
The general attitude behind this article is very relaxed and I absolutely get where you are going with it. I’m taking things a little beyond what your simple message was and I definitely get that. I just don’t think responsive design should be promoted without providing a more positive user experience, adding value, or providing improved accessibility by doing so then you may actually be doing more bad then good.
@David – I do see your point. The main reason I wrote this post was that I’d seen too many others suggest responsive was too hard and so you shouldn’t design responsively. I wanted to point out how easy the basics are and I do think if what I describe here is all you do, you’re ahead of developing a fixed-width site, which is what I was trying to compare to.
I completely agree though that to design and develop a good responsive site more is needed. There’s a lot more to consider than just a few flexible measurements. I’ve written about it here a number of times. While I do believe in trying to make things as simple as possible, I also believe in taking the time to think deeper about things.
I’m not sure if you’ve seen this, but a few months ago I wrote an article for Smashing Magazine about content choreography. You might like it given what you’ve been saying here. It looks beyond the simple flexible measurement thing.
You’ve also given me an idea for a follow up post to this one. It’s an interesting discussion.
Hi Steven,
I’ve read several of your articles and I also read the Smashing Magazine article you just mentioned to me. You definitely have a strong understanding of responsive design, and your articles back that up.
I can shed some light on to why I had the reaction that I did to your article. I work for a global company that is your average big-box enterprise company. They have massive content management systems and overall a gigantic web presence.
I am a lead web architect & team manager at this company.
Lately, there has been a large push to make everything “responsive”. Everything. Take this PDF and make it into a responsive website, make this website from 1995 responsive, make this coffee responsive…(just kidding). The requests are coming in like this however : “Take this PDF and create a website, and oh, while you’re at it, please make it responsive”. I want to say this happens almost daily now when there is very little understanding of the subject matter. You Steven have a great understanding of the subject matter but outsiders that are less technical do not. If one of our business analysts/BA’s were to read this article I would likely shriek. Not because it is a bad article but because it states building a basic responsive site is better than nothing and that its simple.
Anyway, thank you for your positive feedback thus far. Opinions and subjective views can lead to some great conversations.
Thanks David.
I completely understand why this post might stir a reaction then. I can only imaging how frustrating it must be handed something and hear, “oh make it responsive.” That definitely wasn’t the message I was trying to convey.
It’s interesting, because I hadn’t really considered how someone dealing with what you deal with might view this article. Like I said it was written mostly as a counter to people who suggest responsive is too hard or not appropriate and we should stick with fixed-width sites.
While I think there’s a lot more to responsive design than what I describe here, I still prefer even this little bit to a fixed-width site. However, I can see now how someone coming to this from a different context might take some of what I said here the wrong way.
Interesting article, point’s I will have to keep in mind when I start to create sites responsively, I tried to get around making sites responsive by using a fixed site but being 100% aware the others might be viewing the site on other devices. I modified my site so I would not have to use such complicated css coding such as boot strap, but saying that there great responsive templates out there like the Zen Theme for drupal. from the looks of it only mininal amount of tweaking is needed to get it funational, but biggest grip with responsive is that you sacrifrice allot more with responsive than what you would with fixed layout.
Thanks Bertie. One way you can get into responsive design is to develop some very simple layouts. Just layout a few empty boxes and don’t worry too much about what’s inside them. Give them all a different background color and fill them with some text.
Where you currently set widths in px, use % instead. That will give you a flexible layout. Then start resizing your browser and see where the layout starts to break. Where is the text too squished? Where does the line of text grow too long to read comfortably. These places will be where you want to set breakpoints and make bigger changes.
To keep things from getting too wide you can set max-widths. When things get too cramped you probably need to get rid of a column. Start by dropping one column below another.
There’s more to responsive design that what I just suggested, but once you get comfortable doing these basic things though you’ll find it easier to dig into some of the details more.
You are freaking awesome! Thank you for making it so easy to adapt my current site to a responsive site. I am so happy right now.
I’m not sure how truly awesome I really am, but I’ll gladly accept the compliment. 🙂 I’m glad I could help.