What is a responsive website? A responsive website “responds” by adapting itself to the appropriate size and shape of any device (laptop, Smartphone, iPad, etc.). The website’s underlying technology checks to see which device is trying to load it, rendering the site in the best viewable format possible.
If you’re looking at it from a desktop with a nice big monitor and great resolution, it’s going to display as the standard website we’ve all been viewing since the Web was born. View that same website on a Smartphone, and the website will automatically adapt — images will resize and stack themselves, navigation will compact itself, and a few features may actually disappear, but the experience will be similar. Yes, it will look different, but you’ll be able to consume the same content without sacrificing usability.
This is all well and good, but where did Responsive Web Design come from? Well, surprisingly, responsive design — in its most basic form — has been around since 2004. It was a very simple demonstration by Cameron Adams that showed us how a website could adapt to different viewports. Of course, a lot has changed since then, and the birth of the modern day Smartphone was part of that seismic change.
The first iPhone came out in June of 2007, and by 2008, there were all sorts of ideas on how a website should adapt to multiple devices. In May of 2010, a very important article came out from Web Developer Ethan Marcotte who coined the phrase “Responsive Web Design.”
It was at this time when a healthy percentage of web traffic was being served to the end-user on a mobile device. It was really in 2010 when web designers started to take a “mobile first” approach. Today, more than half of all web traffic is delivered on a mobile device rather than a desktop or laptop. That’s right — more than 50% of all traffic on the web is coming from people utilizing Smartphones. That’s a staggering figure, and it drives home the importance of maintaining a modern, aesthetically engaging, fully functioning website on any and all handheld devices.
It’s important to note that responsive design wasn’t the only option being pursued. For a long time, many of the larger sites had what is called an “m. site.” An “m.” was really a second version of your website with a completely unique code base — it was a site built specifically for mobile phones. When a visitor would visit a site, the code would determine if it needed to show the primary website or the m. website. If it showed the m., it would be something like http://m.example.com (hence the term m.). The problem with that approach? Well, you now had 2 websites to maintain rather than one, and you had to decide which version to display for tablets. It’s no wonder responsive web design became the standard solution.
I think it’s clear that a responsive design is hugely important from a usability perspective. Anyone that has a website should want people to be able to view and use that website regardless of the devices used, but is visitor usability the only reason to make sure your site is responsive?
The answer is most certainly…no. While usability is a very good reason to update one’s website, it’s not the only reason. You see, the mighty Google made a decree: “From this day forward — and forever and ever more – Google shall view mobile websites as the more important format.” Over a year ago, Google moved to a “mobile first” index which means it’s no longer ranking you based on how your website loads onto a desktop computer. You see, Google is now determining the quality of your website by looking at its mobile format. If your website isn’t mobile-friendly, your rankings and your traffic from Google are going to plummet if they haven’t already.
The world is changing, and the way people are going to view your website will never be the same. If you expect to have any success with your website, it’s imperative that you think about it from a mobile-first perspective and adapt a responsive design.