We’ve all heard the term bandied about and we nod sagely as if we are in the know. But what does it actually mean and why do the web gurus hammer on about it as being an essential part of today’s web site design?
The term Responsive Web Design (RWD) was coined several years ago by Ethan Marcotte and is mentioned in his 2010 article, “Responsive Web Design” (link). To most of us, responsive design means building sites that provide an optimal viewing experience across a wide range of devices, from desktop computer monitors to mobile phones. In other words, when you build a web site for a desktop computer, that same web site should adapt and reformat fluidly on any mobile device. There should be no need to scroll back and forth and stab blindly away at microscopic drop down links.
The need for responsive design came about when it became obvious that handheld devices were being used more and more to surf the net. Many companies were quick to build a separate mobile web site to meet this challenge. However, the downfall to this approach is that it necessitates the building of two distinct sites with two different URLs, unlike a responsive site, which has only one URL. Two URLs cost more to run and, among other things, you have to run two separate Search Engine Optimization (SEO) campaigns. One campaign would obviously be a lot easier. Usability is also a huge factor. How many times have you visited a mobile site of a well-known company or organization only to find a site that bears no resemblance to the desktop version? Frustration ensues when you can’t find what you are looking for right away. How many of us then leave in disgust and go visit a competitor’s site instead? A potential sale lost. Another reason that a mobile site is not such a good bet is that dear old Google prefers to crawl RWD sites with just the one URL as opposed to spending more time crawling through two URLs with the same exact info. Who wouldn’t?
If your company/organization has not yet climbed aboard the Responsive Web Design train, then the internet usage data out there will tell them it’s time to do so. As little as a year ago, 25% of internet users were only accessing the internet via a mobile device in the United States and mobile internet usage was actually expected to overtake desktop usage in 2014, which it did. This fact is born out by, among others, this article by Danyl Bosomworth at Smart Insights:
Statistics on mobile usage and adoption to inform your mobile marketing strategy (link)
Just when you were feeling more confident about how to explain the advantages of RWD, what about this other pesky word thrown into the mix to confuse us all: Adaptive Web Design or AWD? What on earth is that when it’s at home? This term was coined by Aaron Gustafson (link), who wrote the book of the same title. Ryan Boudreaux explains it well in his article What is the difference between responsive vs. adaptive web design? (link)
“The biggest similarity between the two methods is that they both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing visitors with a better mobile user experience. Where the two methods differ is in their delivery of the responsive/adaptive structures: RWD relying on flexible and fluid grids, and AWD relying on predefined screen sizes. One of the main distinctions between the two is that RWD might take more code and implementation strategies with the fluid grids, CSS, and flexible foundations, while AWD has a streamlined, layered approach, which utilizes scripting to assist with adapting to various devices and screen sizes.”
In other words, responsive design uses percentages for widths which will allow the design to fluidly expand and contract, whereas adaptive design uses pixel width, which make the design hitch as you expand a browser or viewport (see in the article below with the 9 GIFs).
Here is a recent article with infographics that neatly describes the differences between Responsive and Adaptive Web Design:
http://blog.mytasker.com/responsive-vs-adaptive-website-design/
In case you are still scratching your head a bit over this, take a look at these 9 GIFs that explain responsive design brilliantly:
http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly (link)
This is obviously not a comprehensive look at the subject but writing about it helped me get a better understanding of the advantages of Responsive Web Design.
By Pam Muirheid, My Pawprint Productions