Responsive Design is Irresponsible

Published on: 20 June 2010

I’ve been thinking of how to write this for little while, knowing that should anyone read it, I’ll be condemned as a heretic and outcast from the web community (and lets be honest, I’m already living on the edge).

Here goes nothing:

Responsive Design is counter productive, not-fit-for-purpose, and based on hypocritical-and-contradicting bullshit.

Yeah, I know, I’m going to hell.

Where to start backing up that rather bold statement? Lets start with a moment of honesty shall we?

When we say “responsive design”, what we really mean is, “Mobile”. Or specifically, “same content, but with a different design for mobiles/tablets”. Thats not to say that is specifically what Ethan Marcotte meant, but thats what people have warped it to mean.

So what’s wrong with that, i hear you shriek at your screen as if I just blew up Alerdaan with a mechanical monstrosity the size of a small moon? Well actually quite a lot. It works on the premise that the fundamental (if not singular) difference between someone using a desktop browser and a mobile browser is that of screen size.

This is spectacularly wrong. Spec-fucking-tacularly wrong.

It doesn’t take into account that people on non-desktop devices:

rarely utilise a Human-Computer-Interaction device
are almost always looking for different information
are rarely on broadband

The last two there, are the key differentials, not screen size.

It’s the first and most important hurdle that responsive design fails on. The content, the data, y’know, the important shit, that stays the same regardless of device – it’s just displayed differently based on screen size. You’re still downloading the same content; regardless of whether thats appropriate or not.

Smoke and Mirrors

At a base level, the issue is this:

We’re attempting to solve a technical and architectural problem with a design solution, that simply partially masks the issue rather than offering a fix.

We’re putting faith in the browsers our users install to decipher how we want a layout to look using non-standardised code. Has history taught us nothing?

Didn’t we clear up this bullshit already?

VBscript in IE
Layers in Netscape
Box model in IE6
QuirksMode
xHTML2 spec
Flash / Silverlight / LiveMotion

We’ve more browsers on the market now than at any other time in our brief history. We’re supporting more legacy browsers than we ever had to (though many of us have simply given up on that). We have the greatest disparage of internet connections than any other time in our brief history, and we have the fabled rise of ~~Skynet? Terminators? the ottoman empire~~ mobile devices – and yet instead of attempting to solve the issues this throws up, we’re once again turning to the quick-fix.

But it doesn’t really work. Sorry, it just doesn’t.

It’s a house built on sand.

All good things… and the Paradox of Proof

Are you a fan of Star Trek: The Next Generation? I am a huge fan, though I rarely use the name in full thanks to Saved by the Bell: The New Class. Have you ever watched the last episode of TNG? It’s called “All Good Things…“.

The premise is that of a paradox, where (effectively) something is true in the past because it’s true in the future (kinda), with the fact that it’s true in the future retrospectively making it true in the past (um, again, kinda). It’s a bit more geeky than that, but it’s basic the premise.

And thats kind of where Responsive Design falls down. You see, apparently it’s not about Screen Size, it’s about Context. If it was about Screen Size then it wouldn’t be anything that we didn’t get rid of 10 years ago (hello, DreamWeaver’s Document.reload clusterfuck). So it’s definitely about Context and not Screen Size. Right? Got that? Except, the only way to test for Context is to test for Screen Size. So in order for it to not be about screen size, it needs to be measures and identified by screen size. Wait, what?

Context (via such queries as the CSS2 media:handheld) were never implemented / liked by some small firms you may have heard of who probably know nothing about how people use computers/mobiles/tablets: Apple, Google and Microsoft.

These small companies, clearly with no interest or experience in the mobile/tablet market, instead claim that their users don’t like to be treated differently unless it’s in their best interests (i.e. Not with a visual change, but with a DATA and architectural change).

So in order to change the visual elements under the premise of it being about Context and not Screen Sizes, we have to map Screen Sizes to our predefined Context, and then use Screen Sizes to decide what to display – which was exactly what we said it wasn’t doing. It’s also exactly what our users don’t want.

All good things…

Irony in Images

I’m a failed designer. Yes, and a failed developer. But I was a failed designer first, or at least I failed at it quicker than at developing. But what I mean by this is, that I have a huge respect for designers, I get why they want their products to look the best they can on any given device.

It’s a tad ironic then, that one of the major downfalls of responsive design is Images.

Inline images work best for responsive design, using the code:

img.className { max-width: 100%; }

It’s really clever and works well, but suffers from an issue. It means that the same image is used for all optimised sites. Remember, responsive design is based around the same content being downloaded. That means the same inline images.

Do you load an image thats high quality, and destroys your bandwidth on a mobile? Or do you load a low quality one that looks poor on a desktop? Or do you attempt to load multiple images and display/hide the correct one as needed?

The reality is, neither of these work well. So you have to turn to a technical solution to only request the right size/quality of image. And that in a nutshell is the problem.

Responsive Design is based around “same data, different display”. But it doesn’t, indeed it can’t, take into consideration bandwidth, platform, device, purpose or context. It wants to, but all it knows is Screen Size. Those require decision making processes, something that CSS simply isn’t built for.

Just a little bit of History repeating…

Thank you Shirley Bassey and the Propellorheads.

Y’know, joking aside, we’ve dealt with this already.

We dealt with it during the rise of the all-dHTML website.
We dealt with it during the rise of the JavaScript libraries.
We dealt with it during the rise of the all-Flash websites.
We dealt with it during the rise of the PDA/Tablet pre-apple.

Responsive Design is not what our users want. It’s not a mobile website. It might be a website that looks better on mobiles, I’ll grant you that every time, but it’s not a mobile-optomised website, or a tablet-optomised website, or a desktop-optomised website. It’s a single website with multiple different visual viewports. And god-dammit brother, we just finally got rid of that shit.

I understand the desire to make websites look better on mobiles and tablets. I really do. This website will probably be getting a Responsive Design sweep in a few months, just so I can say that it’s been done and its on my CV. But if it’s about Context and not Screen Size then it can’t be about Design only. It has to be about Information Architecture. Sadly my friends, that can’t be done by CSS alone. CSS wasn’t intended nor built for that purpose, and we need to stop trying to shoe-horning shit into the CSS specs, or we’ll end up at a place where each browser supports only the shit they want to and in the way they want to (y’know, like in the way they do now for every newly added CSS3 technique).

It’s NOT Ethan’s fault, its yours/ours.

People are lazy.
People like cool things.
People like be jumping on bandwagons.
People like to make money.
People like anything that makes their life easier.

Or as I call it, the “Five-Fuckit-Knuckle-Shuffle“

Responsive Design has taken off like wildfire, almost with a butlerian-jihad-esque call to arms. Designers and coders are now able to appear to deliver what developers and architects have been saying requires a different technical model to achieve properly. Chests are being puffed out, chins in the air, banners are being waved, a-list-apart books are being sold, and technical restraint and common sense are once again being thrown out the window in the name of cool-looking-shit on the inter-web.

And that’s why Responsive Design is Irresponsible. Not because it’s a bad idea (it’s not) and not because it doesn’t work (in terms of design it does). It’s because if you give designers and/or front-end coders the ability to fake something beyond the comprehension of their clients – and be praised for it – they will do so, regardless of the Business Case or Return on Investment.

“Is this a cool idea?”, is sadly the new, “Is this a good idea?”.

/facepalm

Ethan Marcotte, even with the best interests at heart, you’ve just handed a shiny new phaser to some cavemen.

Rest assured, 2-5Mb “mobile optimised” homepages await us.

I can’t think of anything more irresponsible.