I am a responsive design skeptic

Responsive design came up in a few meetings at work this week. The most passionate advocate of responsive design presented some compelling arguments, but I remain a responsive design skeptic.

Responsive design is an approach to design websites in a way that the content "responds" to the resolution of the visitor's screen. Mobile browsers, tablets, and desktop browsers all use the same HTML source, but the layout is adjusted through CSS and maybe some JavaScript magic.



"You only have to design once," is what the advocate said, repeatedly. But actually, you have to design multiple versions of the same elements. A menu with a horizontal orientation on a desktop needs a vertical version for a smartphone. Each content area of the site needs a similar treatment. Using a grid-based design helps facilitate building a responsive design, but it isn't a magic bullet.

I have not yet seen a great responsive design. Ethan Marcotte is one of the gurus of responsive design, but if you visit his site on the desktop and look at it critically weird things start to stand out. Why does the menu bar need to appear at the top of every section? If you scroll, the menu bar will appear at the top 1/3rd and bottom 1/3rd of the page. It's just odd. Some elements appear aligned on the left margin, some at the center margin (selected writing, articles). Why? This is one of the leaders of responsive design. I'm skeptical.

The Grey Goose website was lauded for its responsive design. At first glance, it looks great on the desktop. It starts to look weird when I scroll. It's like a 1990s magazine ad layout shoved into a Flash animation. I viewed the site with my iPod. Elements of the page visibly adjusted themselves, and then by browser crashed. Not impressive.

There are other problems with responsive design. Since responsive design is complicated by the need to design for two or more presentations simultaneously, subsequent modifications are more time consuming. Want to add a Twitter widget to your site? Well not so fast. How will it appear on mobile? Does the widget support responsive layout? Will you need to roll your own?

In my experience, most responsive designs render slowly in both the desktop and on mobile. True, there are exceptions, but those tend to have limited content.

It's really easy to break responsive design. Take a look at this example from Acquia, one of the leading Drupal consultants and self-proclaimed experts in responsive design. They have a screenshot floated left in a scrollable div, and it's basically ruined if the desktop browser window is too narrow.

On my iPod Touch it's almost worse. In the portrait view there is a screenshot, followed by a tall expanse of blank window with the 'MORE' link at the bottom. In portrait view it shows the screenshot, then:
HIGHE
EDUCA
SOLUTI
Drupal
is a
flexible,
scalable
and
affordable...

And so on.  This is not what a designer would intentionally strike out to produce. It's an artifact of responsive design.

Responsive design targets different resolutions, not screen sizes. "How are we to account for smartphones with high-resolution displays?" I asked the responsive design guru. By sniffing devices, he replied. In other words, our 21st century design methodology depends on what previously were considered bad practices. And how are we supposed to keep up with all the new devices hitting the market? "There are websites for that." Bah.

It isn't screen resolution that sets apart mobile devices. It isn't even bandwidth, although that will arguably be an important factor until 4G/LTE is more widely adopted. But speaking of bandwidth, many of the responsive sites I've viewed with my iPod take more than five seconds to download and render. Conversion rates are strongly correlated with site speed, so your site (mobile or otherwise) should load as quickly as possible. Who cares if you only have to design the site once if you're sacrificing conversions to get there?

So what sets apart mobile devices? It isn't resolution. It isn't speed. It isn't even screen size. It is the single-tasking nature of mobile devices and their touch-oriented input method. Mobile users aren't idly pulling up your page and reading it in the background while waiting for some other process to finish. They are entirely focussed on the screen while your website is up. Mobile users aren't scanning your site for tidbits to add to an email or Evernote item—they can barely select blocks of text. With iOS and Android constituting the major mobile platforms, the single-tasking nature of mobile browsing isn't going to change in the near future.

The most important design principle for mobile is to identify goals and reduce barriers to conversion for mobile visitors. Trying to fit your beautiful desktop designs into a responsive framework is only a secondary consideration (if it's a consideration at all). I've yet to be convinced by a countervailing argument.