Is responsive web design really worth the effort?

I’ve been working on a couple of different websites recently and some of them were designed in a way that they would adapt to various screen resolutions dynamically. Web people usually call this responsive design. I call this headache design and my advise as a programmer and businessman is to make sure you really benefit from it before you commit yourself to that paradigm. Here’s why.

What is responsive webdesign?

In the beginning was The Fixed Width, and The Fixed Width was Great, and the Great was The Fixed Width. It was not until people started to buy iPhones and Androids when troubles started to begin. Users were no longer satisfied with how our carefully crafted web pages looked on their new gadgets. So we built mobile versions of our websites, especially targeting those crippled 320 to 480 pixel devices. But then Steve gave us the iPad and – what is even worse – people loved it and navigated straight to our desktop optimized web applications. So what shall we do? Build tablet-optimized versions of our sites? Who’s going to pay for all this?

The idea of responsive webdesign was born. Instead of building three websites for different devices, let’s just build one that fits all!

Have a look at these great examples of responsiveness:

• colly.com
• seesparkbox.com
• mangomint.com (yep, that’s my own company)

Make sure you resize your browser window and note how various elements change fluently (i.e. the navigation menu).

How it works

Technically, there are few things to consider in order to make a website responsive:

• No fixed widths but ratios (i.e. how many parts in a 16 parts wide grid system)
• Content organized in floating elements that can rearrange in rows with different number of columns
• CSS media queries to selectively show/hide elements and address special issues with lower resolutions

This is just the gist of it. There’s much more to say about those techniques, but that’s not the point of this post.

I should mention that there are tons of frameworks, libraries and instructions available that help you get these things right. With all that help and a little bit of practicing, it’s actually not that hard to implement responsive layouts.

So what’s wrong with responsive webdesign?

Nothing. I just say that they cause a damn lot of work and you better be sure it’s worth the effort. Here’s a few things to consider:

• The width issue
  Think about how many times you wrote something like ‘width:240px;’ in your last website project. Forget that! Now you have to think in terms of ‘eight-columns’ or ‘six-columns’. Most of the time that works just fine, but sometimes you really want that 365px width. Oh, that’s already more than what you have on the smallest iPhone resolution…
• The spacing issue
  So let’s show a bunch thumbnails and put a slick 20px margin around. Four in a row, just so that we have the same spacing to the outer box left and right. Looks good, doesn’t it? Except when you resize the browser and everything gets turned around, then that 20 pixel look quite different and now you don’t have that nice spacing anymore. 
• The content issue
  Noticed that most responsive webdesign tutorials show simple item grids? That is because they are perfectly suited to demonstrate the idea. In the real world, however, there are landing pages, overview pages, product comparison charts, complex registration forms, etc. You really have to make sure that every piece of content adheres to the responsive principles – that means everything should be either resizable or floatable. That’s whole lot of worries for content creators.
• The programmer/designer issue
  For many year, designers only needed to hand over PSDs to us programmers. That was good because we suck at design things. With responsive layout, that gets a whole lot more complicated. Obviously designers can’t create separate PSDs for every possible screen resolution and every page. Programmers are given much more responsibility to make the final work look good. Since their perception of what looks sufficiently good can be quite different from the designers point of view, there’s usually a lot more back and forth between those two guys.

Do you really need it?

I am in no way an expert in webdesign generally and responsive design specifically. Real web developers would probably call me a script kiddie or – if they are really evil – a “windows guy”. However, I’ve worked on a couple of dozen non-trivial web applications, most of which did not implement a responsive webdesign and some more recent projects with a responsive layout – after all, I can definitely say that there’s at least a 50% increase in the total amount of time it takes to get the web related stuff done.

Also note, that responsive websites require quite different organizational structures. Content creators must be aware of the restrictions and paradigms. Designer must have a better understanding of how HTML and CSS works. The size of working batches between designers and programmers is much smaller. Communications between those two roles is chattier. All that must be taken into account.

So before you jump onto that responsive train, go ask yourself: is it really worth the effort?

What do you think? Have you had different experiences during your projects?