Responsive Design Is Easier Than You Think

Posted: 06 May 2013 05:30 AM PDT

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

1 2	max-width: 100%; height: auto;

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.

The post Responsive Design Is Easier Than You Think appeared first on Vanseo Design.