Why I’m not going Responsive

Responsive Web Design

This article will make a lot of people sad and a lot of people angry.

Likely, customers will be in the first group, web designers in the second one. But this is how I think at this time (this is not some kind of ideological statement) and I have to come clean about it because “Do you have any responsive themes?” is one of the most common questions I receive as a Sandvox developer.

If you are a developer, text in these boxes is for you. If you are not a developer, you can just skip them.

First of all, I’m not against RWD per se. We’ll come to this later. I’m against RWD in two specific situations:

  1. Sandvox, the platform I work on
  2. Anywhere else, unless there’s a reason to do otherwise

Point number two clashes directly against one statement that has become recently a sort of ultimate guideline for web design: “Mobile first”. So let me be clear also about this: I’m not against this statement per se, but there are two conditions:

  1. When RWD is mandatory, I agree that a mobile-first approach is the best strategy.
  2. Sandvox doesn’t make this easy: for a mobile-first approach you have to work on many levels, not just CSS with a pinch of javascript. Hopefully it will be clear soon that this is not an issue.

Why are you looking for a responsive theme?

And be honest.

When I ask, I usually get this answer: “Because I want my website to be browsed through mobile devices”. Think again. I actually think that the reasons for such a request (not just by my customers but at any level) are:

  1. because my site will look “cool” on mobile devices;
  2. because everybody does that;
  3. because a huge guy at the gym closed me into the locker for not having a responsive website.

About reason number one, please remember that “cool” doesn’t mean at all “usable”. Your website has to be usable on mobile devices, not cool. This makes it cool.

There’s an awful lot of stuff you can do to make your website “look cool”, but if it’s not usable it will be remembered as “the coolest website I visited just once”.

Does the Gizmodo redesign ring any bell?

Another example: Onswipe. I find it the most disturbing and useless plug-in ever. As soon as it came out each website I browsed from my iPad was redirecting me to its Onswipe version. Thanks God, among my “morning reads” only CultOfMac still uses it – and this is one of the reasons it jumped from the fourth to the last place in my list.

The paradox here is that something built for mobile is the very reason I don’t browse those sites from mobile.

There’s another thing that makes your website cool: it’s content. And no design can provide any of it for you.

What about mobile devices, then?

What about them? The iPhone was created with one specific purpose: to provide a full web experience. The iPad shares this principle. Android is supposed to follow in the line (well, I guess).

Apple just asks you to add a viewport meta tag so to tell the device how wide you want the view to be. Not a big deal and very useful to leave some margins on the sides.

Moreover, an iPad retina screen has a width of 1536px on its narrow side. I wouldn’t call it a narrow screen device. A retina iPhone in landscape mode is 960px wide: if you’re using a 960 grid it fits perfectly.

If your website follows some elementary rules of typography, rarely a line of text will be longer than 80–100 chars. Your visitor already knows how to double-tap, read only that block of text and get the rid of any distraction.

If a line of text is longer, you don’t need a different layout for smaller screens: you need to make narrower lines because they are not readable on any device.

This is at the same time both the same and the opposite problem when speaking of large screens. “I want a website that fills my browser window. Oh, and I go fullscreen on my 27 iMac”. Sure. You’re looking for an egyptian papyrus. Not proprely cutting edge technology. And a headache, you’ll need some paracetamol too.

I want my website to look differently on mobile

And why on earth would you want this (again, if it’s not because of usability)? I know where menus, sidebars, search boxes, buttons are on a “normal” website. For what reason should I expect all of this to be messed up when browsing it on a smartphone?

When I say “I”, I mean it. I’m writing now as an user much more than as a developer. As a developer I’m fascinated by media queries and cool javascript plug-ins. But as an user I get really angry when my Mac and my iPad show two completely different websites.

Sidebar usually goes to the bottom. Site menu? Missing in action, unless I already know that the now-almost-default “sandwich icon” hides a pop-up or drop-down navigation menu (if you don’t know what a sandwich icon is, this is one more reason not to go responsive).

I’m convinced that, despite a good convergence in UI elements – like the sandwich icon – still using a mobile version of a complex site is less intuitive for the average user.

I would be happy to change my mind when someone provides me with a good, complete A/B test, possibly with eye tracking or a heat map (I know, maybe I’m asking for too much). But this would be the only way to evaluate how the time spent on a page is actually spent on reading instead of looking for action triggers.

I’ve found none so far (I actually found this, but it’s too preliminary), if you have links, please share them! Thank you.

Mobile-savy websites have better performance

Aaaaaaand you’re dead wrong. It’s the opposite: responsive websites need more code, not less. They don’t change their content according to the device: they only change the way they look – but the code is the same and it has to handle any option the developer chooses to consider. Large screen, medium screen, small screen, very small screen, it’s all there in the code.

It’s just a few bytes, but it’s good to know that it’s few bytes more, not few bytes less.

And there’s the problem with images. On a responsive website, a 2560px wide image still is a 2560px wide image even if you see it as tiny as a thumbnail. With all its kilobytes.

Yes, there are tricks and workarounds. The only viable solution – IMHO – is the picture element and/or the srcset attribute, and until this is supported by at least 95% of browsers I’m not interested.

So RWD is wrong?

Not at all. There are many situations where RWD is a good thing. Some examples:

  1. web apps or highly interactive websites
  2. websites browsed mainly from mobile
  3. websites manually created from scratch (not with a WYSIWYG editor) with very simple layout, essential navigation, a limited number of pages and/or when design itself is a content (for example a designer’s website)
  4. A plenty of other situations that don’t come to my mind but that I think they still have specific reasons to choose RWD

I need a mobile version of a website when I’m buying a plane ticket from a cab. When I’m browsing news on a very complex website. When I’m reading documentation.

Guess what: most of these situations are managed either by mobile versions of normal websites (not responsive websites: a completely different layout on a deeper level) or by apps.

I surely don’t need a responsive website when its goal is:

  1. to show a narrow column of text while keeping a sidebar full of ads;
  2. to flicker a large-narrow-large-narrow-again layout until it understands how exactly wide is my device (real case);
  3. to move, hide or change the behavior of things from the default view just to tell “hey, I’m responsive”.

So what?

I don’t forget mobile users. Simply, when I create a theme or a website I take care it will look as good as possible on small screens too. And I’ll care more and more for my next designs.

When it’s up to you, this could help:

  1. Take a look at your analytics. How large is the quota of mobile visitors of your website? Did you have any feedback about your website not being usable from mobile? (I repeat: usable, not “nice”, not “different from the other ones”). Can you differentiate analytics from mobile and from desktop and have a real insight on different behaviors – considering also that usually the time spent on a website browsed from mobile is fairly less than the time spent from a desktop computer?
  2. Do you really want to help mobile users? Get the rid of hierarchical menus! And this will be the last nail in my coffin. Touch devices don’t like hover events. iOS manages them very, very well. Still, feedback is incomplete because you cannot just “hover” your finger on a touch screen. I’m not a fan of hierarchical menus on desktop computers too, anyway (topic for another post, I guess).
  3. Keep your website clean and well organized. Use pencil and paper to plan the structure of pages and their content; choose images carefully; think about what goes into callouts, when and why. Make it look good.

Sandvox makes the creation process easy, this doesn’t mean that you don’t need to think about what you’re doing. It’s the opposite: this gives you all the time you need to think exactly about this.

And don’t follow a trend just because “everybody does”.

Just on a side note, we got the rid of Internet Exploer 6 after years of pain and suffering. As soon as the time came when we could develop only once for all browsers, this frenzy about adding as more breakpoints as we can to support hundreds of mobile devices started. I call it disruption. We blamed Microsoft for this, now we are doing exactly the same thing. Voluntarily.

A native, usable browsing experience should be responsibility of browsers and devices creators, not web developers’. The internet is planned from the beginning to be platform agnostic.

Again, I’m not saying RWD is bad, but using it brainlessly, yes, I think it is.