The Coffee Shop Test — The importance of Responsive Web Design


Update: April 21, 2015 — Google will now demote websites in search results that are not mobile friendly. Therefore it is crucial to implement responsive web design if you don’t want to lose visitors.

The proliferation of smartphones and tablets means that Mobile and the Web are increasingly consolidating, hence Responsive Web Design is now the benchmark.

Just for a second, pretend that you’re not reading this online.

You’re in a magical and vibrant place – a place where you hear bubbling liquid, babbling people and smell the addictive fragrance of fresh coffee wafting through the air.

You and I are strangers, standing in line, waiting to order from some guy named Bevan who is the slowest barista in the world. We happen to strike up a conversation and in the ensuing small-talk I ask what you do.

You reply.

I then say something like “Gee, that’s interesting, you have a website I can check out?”

“Sure.” You say back.

So I whip out my Laptop or Tablet or Smartphone or Phablet (that’s part phone, part tablet) and go into my browser.

At this moment, do you cringe because you know how bad your website looks on a small screen. Are you waiting for my inevitable neck craning, squinting to read the copy and preparing to steady me after my inevitable motion sickness from having to pinch and move the zoomed-in screen around.

Or do you smile because your site has Responsive Web Design as part of the web architecture and you know what a treat I’m in for?

If you cringed (and not just at the overpriced coffee) then you probably don’t know what Responsive Web Design is. That’s okay, not many people do. Allow me to enlighten you:

It’s smart design that keeps pace with our smart world. It’s one of the most hard working, user-frendly, cost-effective, useful and genius piece of programming I’ve ever seen.

In a world where Web and Mobile are increasingly being considered as one-in-the-same, Responsive Web Design ensures that a website can be accessible on any kind of device—with the same level of usability, ease and responsiveness  throughout—by naturally adjusting the content to fit the specific screen size.

You see, back before 2010 the trend (read: requirement) when developing a website was to design similar looking ones for iPads, smartphones or any other mobile phone with a browser.  The reason was obvious – smaller screen sizes needed a slight redesign to aid with the prioritisation of information and to ensure a user-friendly site on three different sized screens.

That has all changed. One shouldn’t view websites for multiple devices as seperate entities, working separately to serve the same function, but rather as a single platform catering for all devices.

Today, people access the internet with an astounding array of devices. And more and more are getting on the bandwagon.

According to Gartner, global sales of traditional PCs (both desk-based and laptops) will decline by 12% between 2013 and 2015 – from 296 million in ’13 to a projected figure of 260 million in ’15.

responsive-web-design-coffee-shop-infographic

This is contrary to smartphones and tablets, which show global sales figures rising from 2.3 Billion in 2013 to a projected 2.6 Billion in 2015. Gartner also estimates that smartphone sales will represent 88% of global mobile phone sales by 2018, up from 66% in 2014.

That’s a lot of mobile devices… in many wonderful shapes and sizes. And while that’s great for the consumer, it’s potentially problematic for businesses and the website designers they employ as you need to cater for the dozens of permutations of how people access your website.

If you don’t, and they have to struggle to access the information on your site, you’ll lose them at the first point of contact. The modern consumer is impatient – if it doesn’t work quickly and how they expect it to, they’re outta there.

Fwooosh. Gone.

The facts and figures are compelling but lets put this into context with one simple question. How many people do you know between the ages of 7 and 70 who don’t have a smartphone?

None? One or two that aren’t hermits?

Yep. That’s what I thought.

This proliferation of smartphones and tablets means that Mobile and Web are increasingly becoming one-in-the-same – Responsive Web Design is now not just the benchmark, it’s expected. It’s not just a nice thing to have. It’s essential. Because you build one site and it adapts to any screen-size.

With this in place your company can show a single face across multiple platforms. No more small logos shunted off to the side. No more illegible copy. And that all leads to a consistent brand image and greater customer-contentment (not to mention a rather nice saving on designer fees).

So, in simple terms, here’s how Responsive Web Design works:

When a device tries to access your site, the site sends a ‘media query’ to that specifc device in order to identify what size the screen is and what image resolution to portray on it. Once the site has the information from the media query, it automatically adapts to  best suit the device.

For example, the website you’re currently viewing — see how the same design is adaptable over various sized screens.

responsive-screenshots-ipad-iphone-monm

Fluid grids made up of ‘content blocks’ comprising copy, flexible images or RSS feeds then size themselves correcty to fit the screen in the most functional way possible. These blocks are able to adapt from four of them fitting side-by-side comfortably on a large PC screen to two blocks next to each other for a tablet or one long block for smartphones with touchscreen scrolling and hyperlinked pages.

Try this out: if you shrink and expand the size of whatever browser you’re using to read this then you’ll see that the content on my site adapts to what you do, shrinking from four columns, to two, to a single column and back again.  The only problem with this is that monotony can creep in on mobile if it’s just one seemingly endless, uniform stream– but luckily all you need is some clever design to keep your viewers engaged.

Responsive Web Design ensures that your site is context aware and intuitive for people to use on any device of their choice and that the legibility, priority of information and overall design of your site is kept constant.

It’s genius – one website that works seamlessly across multiple devices and ensures the same excellent experience on any sized screen.

No one knows exactly what the future of web design holds but having a semi-automated, ‘intelligent’ website based off Responsive Architecture is definitely a smart step in the right direction. For as long as we still use screens to access the net—and not microprocessor implants or displays on our retinas—Responsive Web Design will reign supreme.

Or as Ethan Marcotte, the author of Responsive Web Design, puts it “Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things’.” 

In conclusion, what are you thoughts on Responsive Web Design? How does it affect your business? Do you really think it’s that important? Please share your thoughts in the comments section below.

Comments ( 5 )

    • Valentine says:

      You couldn’t have said it any better. Surely responsive web design is something we all need. Its the future of the web. However if you are running a site specifically designed for places with feature phones you might want to have a mobile site and a desktop site seperately.

      I see bootstrap written all over this article. Are there any other open source tools for having responsive websites?

      Thanks for the article. It is very informative

    • Jake St. Peter says:

      The 2015 Theme for WordPress is beautifully responsive.

    • Graham Ryan says:

      Good article.
      I’m just getting started in graphic design and there’s been a hell of a lot to learn in such a short space of time.
      Modern website creation is the next step. I find it all thoroughly captivating and quite daunting in equal measure, but your article hints that I need to change my priorities a bit.

    • Martin Orton says:

      Thanks Graham :)

      Well, I suppose that would depend on what your current priorities are.

    • salano vimlar says:

      Wow thank you so much am s web design student and this has been a good advice

    Leave A Comment

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