September 1, 2016

Lesson 02: Responsive Design

Ooooh! Aaaah! Responsive design! Everyone has gone MAD over ‘responsive’ for the past couple of years… but what does it mean, really? Today, clients almost instinctively demand responsive websites from their agency counterparts, often without really understanding what it is they’re asking for!

At its most basic level, responsive design is where your website ‘adjusts’ (not ‘adapts’, and you’ll find out why below… keep reading) to any screen size, irrespective of the browsing device, whether desktop, laptop, tablet or smartphone. This means that a webpage changes its layout automatically to display columns in different arrangements depending on the width of your screen.

Okay… umm… hang on… huh?!

Remember how the iPhone was supposed to revolutionize browsing the internet thanks to a clever little mechanism referred to as ‘pinch’ and ‘zoom’? Okay… that’s all well and nice, but it doesn’t solve one simple problem. ‘Pinching’ and ‘zooming’ is… annoying!

If your website is responsive, it’ll automatically reposition all elements (read: logo, menu, title, image, video, text, etc.) to save you the trouble of holding your device with two hands. The ‘responsive’ website will be perfectly legible on any smartphone, tablet or machine you have and in any orientation you’re holding said device.

A good example (or three!) might help clarify…

  1. Try viewing this website (www.ali-alsayed.com) on your tablet. Then, try viewing it on your smartphone.
  2. Try viewing MADigital’s website (www.ma-digital.net) on your personal computer. Then, try viewing it on your smartphone.
  3. Do you use Netflix? If so, try loading up Netflix (you may need a VPN to do this) on your personal computer, then your tablet, then your smartphone.

…is it all starting to make sense?

So, what are the alternatives?

If you feel that ‘responsive’ design doesn’t quite do it for you, that’s ok… you’ve got several options. After all, it all starts with a need or problem that you’re trying to solve.

Traditional design is where your website displays as it is on each device. This means that users will have to ‘pinch’ and ‘zoom’ to be able to read most text on your site. And y’know what? There’s nothing wrong with that… depending on the need you’re addressing. You might consider this if you’re looking to save time and money on design and development.

Adaptive design is where the pages of your site will be ‘sliced’ and only certain elements (set in the back-end i.e. code) will be displayed to users depending on their device. Let me clarify. Let’s say that on your homepage, you’ve got a carousel or slider with promotional messages… or across all pages, you’ve got CTAs (that’s ‘calls to action’ for the uninitiated)… and you figure that such information isn’t that important to users accessing your site on mobile. Rather, you’re more interested in getting to the point and only showing (mobile) users the real essence or core your website… consider ‘adaptive’ design.

Mobile sites are those where entirely different and independent versions of pages are displayed to viewers using smaller-screen devices like smartphones. There are pros and cons to this approach, taking us back to the initial point… what problem are you trying to solve?

What’s better? What’s right for me?

There is no single correct answer. Let’s look at the pros and cons of ‘responsive’ sites, shall we?

Pro: Your site looks crystal clear on any device (irrespective of the device type, browser, version, etc.) and users generally appreciate (read: expect) that!

Pro: You manage content through one CMS. This saves you loads of time in managing your website… just one upload, entry, tap, click and users can see what they want to see, how they want to see it!

Pro: It’s just plain cool! It’s a stamp of assurance to your customers and clients that you are ‘with the times’ and sensitive to their needs.

Con: It does mean more design and development work (read: money)… whether or not it’s worth it is your call!

Con: You cannot serve unique content to different devices. This may not be a consideration for most websites around the world, but I just thought you should know.

So tell me, is ‘responsive’ design right for you?