Responsive Design, Fluid Thinking

Before I started working almost exclusively on the web, I was trained and practiced as a fairly traditional graphic designer. Now, by traditional I don’t mean anything like “old fashioned.” I’m generally very non-traditional: always trying to think outside the box, bend the rules, or push the envelope. What I’m referring to here is the fact that in graphic design, one thing has been abundantly constant, from the beginning of time until about a decade ago: Stuff didn’t move. Letters made of ink, once imprinted on a page, will not budge, no matter how much you scrub, poke or threaten. This was the norm.

Thankfully I missed out on the early days of the web; I jumped right in with both feet a couple of years ago, and the thing that was all the rage then, and is only getting more important as time goes by, was responsive design. Now that pretty much everyone has a smartphone that can browse the web, it’s only reasonable to have a website that people can look at on their phones without zooming in and out and scrolling all over the place and becoming annoyed.

As a designer, this requires a bit of a paradigm shift. Suddenly my letters are moving and I’m not sure what to do about it. On top of phones, there’s a plethora of other devices from a wide variety of tablets, to gigantic UHD TVs, and every one of them can be used to browse the web. Never one to be satisfied with “adequate,” I don’t want a site I design to just work on the most common devices, I wand it to work on everything.

“A good website should work on any device that is reasonably standards-compliant, whether you’ve heard of it or not.”

Now, it may be that you’re a designer who figured out how media queries work and thought “this is easy; I just have to design a few different versions now,” or maybe you’ve been doing separate sites for mobile, or maybe you’re even thinking “I don’t need a responsive website if I have an app!”

Please don’t think like that. You’re setting yourself up to do two or three times as much work as you have to, and it won’t be fun, ‘cause you’re doing the same thing two or three times, and even then you’re serving patchy groups, not everyone.

Now let me back this up. Google is pretty cutting-edge, right? Have you ever typed “do the harlem shake” in to youTube, or “zerg rush” in to Google search? Maybe you’ve even been to Yep, Google is pretty cutting edge. So I go to on my BlackBerry PlayBook (in portrait mode, ‘cause I’m pretending it’s really a book) and this is what I see:

As a user, it’s functional. I can even read the text under the search box if I hold it up to my face, or zoom in (which, you may recall, I was trying to avoid). I type in my search and get out of there.

As a designer it’s painful. The site is taking up approximately 10% of the 7-inch screen. With only 7 inches to work with, that’s a bit of a waste. You may argue that I’m using a BlackBerry PlayBook; a bit of an obscure device, but that shouldn’t matter! What if a new device comes out next month and takes over a significant market share, and you haven’t had the future-vision to support it? A good website should work on any device that is reasonably standards-compliant, whether you’ve heard of it or not.

And that’s the bottom line: how do you make a website that looks good on ANY modern device, now, next year, and hopefully for a couple more years after that?

Well, I’m working on a list of guidelines to help you accomplish just that. Once it’s completed, I’ll put it up on this blog, and add a link to it here.

Stay tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *