Monday, April 24, 2017

What's this 'Responsive Design' Thing Anyway?

RDIf you have read anything about web design in the past year and a half most likely you have seen the term 'Responsive Design' mentioned. And if you haven't read any of those articles you're probably wondering, “What's all the fuss about?”

Well, there aren't many design movements that come along and change an entire industry in such a short amount of time, but 'RD' has. To put it in a nutshell: responsive design is a way of structuring a website so that it can flow and change to fit any number of display devices (your laptop, your tablet, your phone...) without having to create either multiple versions of the content or multiple versions of the display frameworks (the HTML & style sheets).

With the explosion of phones and tablets in the past few years more and more people are spending the majority of their time interacting NOT with their desktop, but with their mobile devices, and that's a huge change in the way 'all things computing' are done. People may still use a desktop for work, and at home, but with a smart phone or tablet in their pocket, backpack or purse they go to those devices more and more.

 What does this have to do with how a website is put together? From the outside it may not seem like a huge deal – just make different versions of a template or page for different devices, right? That's exactly what the industry did for many years, and for a while it seemed to be a partial solution. But nowadays there are new phones, tablets, tvs, in-car nav systems, hell, even thermostats and refrigerators have touch screen displays built into them now... how do you anticipate and code for ALL those devices? You can't. That's where responsive design takes over.

You might be thinking the same thing that I'm thinking: “Why wasn't this done before now?” The need was obviously coming down the road, why weren't designers and programmers doing this before a year or so ago? For the same reason most 'new' things don't hit the market until they do – changes in hardware and software technologies. HTML & CSS adopted new rounds of standards back in 2012 that finally enabled programmers to reliably build sites and pages that would behave the same way across all browsers and devices – basically allowing for a page to 'find out' how it is being displayed and custom tailor the view to fit. The primary tool for doing this is a little thing in CSS called a 'media query.' The media query allows a website to display particular content, elements, styles – all depending on what size your screen is. No more need for special templates JUST for iPhones & iPads, or Blackberries, or Android tablets, or.....

What about all those sites that just displayed the same no matter WHAT device you were using?  Have you ever been using the web browser on your phone and go to a site that displays everything from a 5-mile out view? Your desktop has a lot more screen 'real estate' for displaying things... no so much on your iPhone.  Sure you can zoom in to whatever part of the page you need to, but it's still a pain in the ass. (And yes, I know... this site hasn't been converted to RD yet. I'm working on it) With more and more sites adopting responsive design techniques it should be MUCH easier to finally browse the web on your phone or small tablet and not have to spend time zooming in to every part of the page you want to read. The designs will automatically adjust to your device, and let you do what you came there for: read, buy, contribute, etc.

Now more than ever the viewing public is doing the majority of their computing on their mobile devices. Shouldn't you be prepared to deliver it to them?


Get In Touch

OpenStretch Consulting
Web Design & Programming

New Orleans, LA
T (504) 345 8990


Scroll to top