What is Responsive Design and do I need it?
Posted onLet’s rewind to the 1990’s, when the Internet is just reaching its teenage years.
In those days, access to the internet required you to go through a portal (such as AOL), a browser, or a command line interface. The Web browser became the tipping point for the internet boom of the late 90s by opening up the internet to a larger audience. No longer was it just for the elites at MIT or NASA. An average person with just a bit of technical savvy could easily access the world’s largest knowledge-sharing platform.
In the beginning, there was no consistency between browsers. Browser makers had varied interpretations of how the information should be presented and rendered, and then, more browsers came along. Soon, developers usually considering 1 or 2 browsers, were now responsible for as many as 7 or 8 that a given site would need to work with. As you can imagine, the time it took to develop and update a website became quickly unmanageable.
How did we solve this? The strategy that most developers used was Graceful Degradation.
"A web design that is built to gracefully degrade is intended to be viewed first by the most modern browsers, and then as older, less feature-rich browsers view it it should degrade in a way that is still functional, but with fewer features."
- About Technology, article here
In other words: we picked the latest and greatest tools and worked down from there. Sacrifices were made for those with older versions of browsers or where a feature was not supported. Happy Days!
Unfortunately, the concept of Graceful Degradation also extended to hardware, predominately monitor size. As our desktop monitors got larger and larger, so did our website designs.
With the introduction of the smartphone there was a sudden paradigm shift: We are now forced to think about how their designs will work on screens that differ from 300px to almost 2000px widths.
On the flip side let’s think about the “evil” twin to Graceful degradation. Progressive enhancements.
"Progressive enhancement is a way of designing web pages so that the more features a user agent supports, the more features the web page will have. It is the opposite of the design strategy graceful degradation that builds pages for the most modern browsers first and then converts them to work with less functional browsers."
-About Technology, article here
The idea is that you start at the lowest common denominator - your smartphone for example – then as you work your way back up the chain, you can start adding in more and more features.
This is the fundamental concept behind the idea of “Mobile First”.
"… mobile first means designing an online experience for mobile before designing it for the desktop Web—or any other device."
UX matters, article here
Responsive Web Design is really a technique when we talk about mobile web design.
"Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)."
The concepts have actually been around for a while. It previously feel under the guise of Web Accessibility and usually left up to front end developer to figure out how this would work. Responsive web design and Mobile First concepts are really just a method for the current state of technology. Much like the Fluid vs Fixed width techniques.
Is Responsive Design right for me?
Which technique you use will depend upon understanding how well your websites/applications can function for your intended customer/user base. Try and narrow down your supported platforms by asking yourself the following:
- Who will be using this website/application and what types of delivery mediums will reach them best? If your customers are heavy smartphone users, for example, you might spend the time executing a Mobile First process to deliver the most control and features.
- How long do I intend the current iteration to be used? Will my delivery medium outlast this period?
- Is the cost of supporting a particular medium the right choice for my website/application?
Technology and user habits change, sometimes rapidly. Make sure you work in a review plan for your project and products at an appropriate interval. Use appropriate tools to gauge user behaviors, such as Google Analytics and User surveys, to help you make the right calls.