The I/T Lexicon: Responsive Design

Blogger's Note:  "The I/T Lexicon" is a recurring series on this blog.  Its intent is to break down an I/T buzz-word for folks who aren't in the industry, but who might need to understand it when buying the services of web-mongers like myself.


For various reasons, I'm in the market for a place where the bits and bites of my business website can hang their hats, kick off their boots, and drink beer in their underwear.  So to speak.

Bits and bytes are intangible things, but it's advantageous to me to keep them as close to hand (geographically speaking) as possible.  Not purely out of some "digital locavore" kind of ethos, mind.  In my experience, smaller, more regional outfits tend to be more responsive--particularly when the lights suddenly go off.  In other words, one has a better chance of dealing with actual system admins, rather than the harried script-readers of a GoDaddy Borg cube call centre. 

I left a message with a Moncton design firm whose website listed "Web hosting" as a service.  Plus, I'm always game for meeting folks who are better at the graphics/design part of web development.  What they do and what I do are kind of yin and yang.

Naturally, each design firm has its strengths, so I poked around the website a bit more, and noticed an emphasis on something called "Responsive Design."

Now, it's part of my job to know what that means.  But someone else--let's say a business owner or the administrator of a community organisation--may well not.  If anything, the phrase "responsive web design" all but begs the question, "Who would want an unresponsive website?"  (Amirite?)  And it surprises me that media-centric design shops aren't at more pains to make sure potential clients know that's not just another buzzword.  By which I mean being able not only to define it, but also to quantify its value.

Personally, I don't have a horse in this race.  I do data-crunching, not design.  But it's in absolutely no one's interest to have clients nodding and smiling because they're afraid of looking ignorant.  That just leaves people feeling cheated.  Particularly when selling services, it's not good for business.

So in the interest of a more knowledgeable clientele, here's what the term means to you.

First, some background history.

If you're above the age of 20, you might remember a time when computer monitors weren't flat, when they seemed to weigh as much a refrigerator, and they likely consumed as much electricity.  The bigger the screen size, the more they stuck out in the back, and the more desk real estate they chewed up, right?  That put definite limits on screen sizes.

Those hard limits and relatively primitive web browsers (and standards) vastly simplified things for the people who made software--particularly for the web.  The conventional wisdom was to design for a screen size of 640 pixels by 480 pixels--effectively, a 4:3 ratio of width to height.

Along came LCD technology.  And then its cost plummeted.  TV screens became huge.  Cellphone screens offered more than a postage stamp of dark grey on light gray.  Laptops could be monstrous "road warrior" slabs...or small enough to tuck into a man-bag.  And then the iPad landed...followed by half a bajillion knockoffs.  And then smartwatches.

Which brings us to 2015 and a Cambrian explosion of internet-connected devices with LCD screens.  Two factors in particular delivered the one-two TKO punch to the 1990s rules of designing for the web:

1. The sheer number of possible screen sizes
2. The fact that screen orientation can change between landscape and portrait on-the-fly

The upshot is that no single layout will work for all devices.   As Aesop pointed out sometime before 560 BCE, you can't (and won't) please everyone.  No news there.

For instance, we're pretty familiar by now with the home page formula of a logo & company name sitting on top of a menu sitting on top of the content, all sitting on top of a page footer, right?  That should work on a laptop or PC, with plenty of eye-pleasing padding to spare.

But open the site on your mobile phone's browser, and....ooof!  The text could be cramped, unreadably small, run off the screen, wrap around to the next line, etc.  Even browsing the site on something larger like an iPad could be a nasty surprise, particularly if you hold the iPad in "portrait" orientation.

Going the other route and optimising for small screens and portrait orientation will more than likely look ridiculously chunky back on the PC screen.

Maintaining multiple versions of the same material (a.k.a. "content" in the parlance of web designers & developers) is not the optimal solution.  For one thing, it's an unnecessary expense.  For another, web developers don't enjoy it any more than their clients.  Probably less, in fact.

That's where responsive design comes to the rescue.  Don't get me wrong--it's not magic pixie dust that developers sprinkle into their coffee every morning...or even on the web pages themselves.  It's planning and it's work and it generally requires compromise on top of basic empathy for the people who will ultimately use the website.

For the client, this has several ramifications.  Because whether or not they currently realise it, are part of the design team, too. For their sake, I include the following "do"s and "don't"s:

• Expect to do a lot of thinking and goal-setting and decision-making up front.  Good designers/developers should ask "Why?"  A lot.
• Respect the limits of each device.  Users don't want to thumb-type the equivalent of War and Peace to fill out a web form.  
• Prioritise your content from your user's perspective-of-the-moment.  What's relevant in the office (on a full-size screen) may not be relevant on a mobile screen during the bus-ride home.
• Be prepared to review multiple designs.  Yes, they'll probably all blur together after awhile.  That's okay.  Just focus on meeting the goals.
• Don't fall in love with any single layout if it means ugly compromises for others.
• Don't rely on Flash or .PDF to get your point across.  They won't work on all devices.

Understand that I'm coming at this from the perspective of a programmer who's worked alongside graphics folks long enough to pick up on some of their challenges.  They'd probably add to--and doubtless improve--the above list.  But I trust it breaks the concept of "responsive design" down to its component parts of understanding the user's needs and meeting them, regardless of which device they currently have at their (literal) fingertips.

So there, design-firm-in-Moncton-who-shall-remain-nameless:  I've done you a solid...even though you never asked for it.  Now would you please return my call?  I have bits and bytes to schlep.