My love/hate relationship with Responsive Web Design

I am, by no stretch of the imagination, not a web-designer. I can write and understand CSS but completely lack the ability to look at something and think it would look nice if I did this, ultimately I'm a sysadmin and a developer at heart - the visual stuff just doesn't interest me.

However, just because I can't design something doesn't mean I don't come in contact with it, and 'Responsive' design is becoming increasingly popular (for example, Joomla 3 is responsive by default), and I regularly do - both as a user and in my professional life.

Responsive design is how things should have been designed from the beginning. Of course, we didn't have to worry about such a range of different devices accessing sites, so no-one really thought too much about it - every one was far too busy working out how best to deviate from the standards so that IE would display things correctly.

The growth of responsive design does cause me some concern though, and in this article I'll be explaining what my concerns are, and how we can best avoid them.

 

What is Responsive Web Design

For the uninitiated, Responsive Web Design (RWD) simply means that the website you are browsing will adapt to the size of the display you are using. No more long horizontal scrollers, the page simply reformats to best use whatever the width your browser is set to. This might this be as a result of you shrinking your browser window or reading on a tablet or phone all without requiring a seperate mobile/tablet specific version of the template.

A good example is the Bootstrap project page, load it with your browser maximised, then drag the side of your browser in. See how the content resizes? Now do the same on a non-responsive page like The New York Times: no resizing, you just get horizontal scrollbars on the window instead.

You can also set breakpoints so that the page completely reformats below (or above, or between) certain resolutions, allowing you to hide elements that constitute un-necessary clutter on a small mobile screen but provide useful extras on a large display.

 

What I love about RWD

RWD massively simplifies maintenance and troubleshooting, rather than having seperate templates or themes for Desktop and mobile versions, you have a single template with CSS doing all the leg work.

If a customer reports an issue with a mobile version, I can usually just shrink my browser down to the relevant size to check.  The true benefit being that I can still use tools like FireBug and Developer Tools - something that just isn't available/convenient when testing directly from a mobile. Admittedly an issue might be device specific, so if you can't replicate you may still need to use a phone, but it doesn't happen too often.

The lack of horizontal scroll bars also means when I'm being clumsy I don't accidentally scroll diagonally and wonder where I've ended up in the page, but that's probably a pretty personal thing.

Once you've got your head around it, it's not only quite simple to implement, but is the logical way to do things. It's not often you actually need to specify the size of elements in pixels, so why do so routinely when there's a better way?

 

What I hate about Responsive Web Design

I should preface by saying, that in reality, more or less everything I list here really comes down to the designer and not RWD itself. It's perfectly possible to avoid these pitfalls, but requires a little more thought.

I Get No Choice

Like it or not, on my mobile I'm stuck with the mobile version. With a seperate template, I often have the option to switch back to the full-fat version (assuming the option is given). On some sites, I do this every time. Take the BBC news site as an example, I'm sure some people love it - frankly I can't stand it. Every time that abomination loads, I scroll down to the bottom and hit 'Desktop Site'

There are a number of reasons I don't like it, and I won't list them all here - this isn't intended as an assasination of the BBC's efforts - suffice to say that their designer has made a number of choices that ruin the 'experience' for me. There's a link to access the Desktop site, and they allow you to always request the mobile site, so I'm happy.

It's a similar situation with The Register, they have a mobile version (and very kindly don't automatically redirect you to it) at m.theregister.co.uk (looks even worse on a PC Browser). I've historically spent many an hour reading El Reg, but never through the mobile site - it's horrible. Again, though, I have a choice. In fact, because they don't automatically redirect me I can even continue pretending the butchered version doesn't exist at all.

But with RWD, there's only one template so I don't get a switch in the same way, at least not without finding a way to tell my browser to use a higher resolution and allow horizontal scrolling (I assume someone has an add-on in the works....). Suddenly the choices that the designer has made matter a whole lot more to me. I may be one of the 1% who don't like the mobile version, but as a user all that matters is what I think.

 

Some of the CSS is Huge

It's a criticism that's been made of many of the popular libraries and frameworks in the past - JQuery being a prime example - using it adds a fairly substantial bulk to the bandwidth used to view a site (obviously once you've viewed one page it's cached, so less of an issue). The common response is that we're all on high speed connections nowadays, so whats a few MB here and there? The problem is, not all our connections are high speed and/or stable. I've been on a few sites, thinking this looks horrible... only to find that the connections dropped out just in time to fail to load a fairly core CSS file.

I was looking at Bootstrap earlier, and the minified responsive CSS file is 1.27MB. It is the single biggest resource hosted on the site I was looking at (some of the article images do come close) and 76% of the file wasn't being applied to any element on the page.

Although some are, I've not seen many Bootstrap using sites using a central location (a la JQuery on Googlecode), so I have to download the CSS for every Bootstrap site I visit. Obviously, there are potentially some privacy issues with everyone requesting Bootstrap from one location, but if you're building multiple sites there's no reason you can't put the CSS somewhere - once.

My connection at home falls into the 'pretty bloody fast' category, so this isn't something that bothers me too much, most of the time. On a 3G connection, though, or if you're one of those unfortunates on dial-up (in 2010 35% of US Internet users were still on dial-up), it's a very different story.

 

Sites can all look the Same

This one really comes down to the designer, but at a base level: If we're all using Twitter bootstrap then our sites will all look the same. The content will differ, but if the designer has put no effort into adjusting the look and feel, there's going to be very little differentiation between sites. Content is king, and should definitely be the driving force, but if I don't like the way a site looks or works, I don't want to find similar content encumbered with the same issue.

It's more than possible (and I'd say, recommended) to use Bootstrap as a base and then enhance and improve, giving a different - but still responsive - site. For some, though, this is too much effort.

 

Conclusion

You absolutely should be making sites responsive. As I said at the very beginning, responsiveness is how things should have been done from the outset. What you also need to do, though, is think carefully about the design decisions you make. Things that are a minor annoyance on a mobile template can quickly become a deal-breaker if there's no option to switch back to the desktop site.

You don't want to have to maintain three different templates (phone, tablet, desktop) unless you absolutely have to, and RWD gives you that option, but think carefully about how you implement it. Where possible, make the vanilla Bootstrap CSS available from a central location (I use a public Amazon S3 bucket) and then put site-specific overrides into another CSS file (meaning you can easily update bootstrap when needed).

Take the time to customise the look and feel of the site, we don't all need to look like Twitter, as important as the content is, visitors will have judged your site on its looks before they have even started reading.

Used properly RWD can make things easier for you as a webmaster, and easier for your readers, whatever device they're using. Used badly, it can be worse than a poorly thought out mobile specific template.

 

Finally, having ranted about poor website design for mobiles, I'd like to touch quickly on a related topic: Mobile Apps.

There are certain sites/services that really benefit from having an App (Twitter being a prime example), but most sites really shouldn't need it (as fashionable as it currently is). Ultimately it's your decision whether or not to release an App, but experience shows us that few are actually any good.

The one thing worse than releasing a poor App, though, is being one of those sites that feels the need to pop-up an alert every time a mobile visits your site. Put a banner at the top of your page if you want, but leave alert() alone, it does nothing but annoy.

Regular users will most likely already know you have an App (if not, why not, haven't you told them?) and readers who are only visiting to read a specific page are hardly going to install it are they?

 

Note: The eagle-eyed amongst you will have noted that this site is not responsive, but then I also don't force a mobile template onto people!