What is responsive design, and is it important?

One of the most important modern web design principles has to be responsive design. Anyone that knows anything about creating a high-quality web project has this down to a science. Responsive design helps create user experiences that can expand and shrink across all devices and screen sizes. In this article, I’m going to jump into the history and importance of responsive design across the internet.

 

Introduction

Responsive design is a modern web design concept that tackles the challenge of many users’ screen sizes and device types. It is an industry-standard principle that has taken the design community by storm over the past decade, and for good reason. When the internet first came out everyone was mainly browsing using a desktop/laptop computer and the experience was pretty straightforward. Nowadays mobile traffic accounts for more than 85% of internet usage and most of these users are using many different devices and screens. Website designers need to account for these changes and make sure the sites they’re developing work across all platforms. In comes responsive design.

Introduction to Responsive Design

 

The History of Responsive Design

The First Website Goes Live

On August 6, 1991, Tim Berners-Lee published the first web page on the internet. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. It was created to provide a resource to find information about the “World Wide Web project.” Sound familiar? This was a huge achievement and set the framework for what we now know as the internet. You can still view the live version of the website here: http://info.cern.ch/hypertext/WWW/TheProject.html 

 

Noble Beginnings

The first responsive website on the internet was the dutch version of Audi.com, circa 2001 – 2002. Although it’s not necessarily a truly responsive website it’s the closest thing for its time. The team at Razorfish achieved this “responsive layout” using javascript to determine the user’s viewport size and then dynamically served different sized versions of the website based on this information. Again, not a responsive website compared to today’s definition, but in 2002 this was a pretty big deal.

 

Enter Steve Jobs

June 29, 2007. The day everything changed for web design. Apple announced the first iPhone. Up until now, websites were primarily designed for desktop and laptop screens so this posed a huge issue. Now you could browse any website you wanted with a device only a few inches big. Obviously there were other devices on the market that let you do this, but the iPhone was a true pioneer in getting the internet on mobile devices.

 

The Dark Ages

After smartphones starting gaining traction in the marketplace, more and more users were flocking to their mobile browsers to visit web pages and view online content. This posed a huge issue for websites that were mainly developed for desktop browsing experiences and created a period where tons of websites were in a weird broken desktop-only state when viewed on mobile devices. If you were using a smartphone around this time I guarantee you remember weird-looking webpages you had to zoom into. Once in a while, you’ll still come across one of these websites.

 

Responsive Design Starts Taking Over

By 2008, terms such as fluid, liquid, flexible, and elastic started to become popularized in the design community. Responsive design became an industry-standard and projects that were created with a desktop-only approach were left in the dust and were considered clunky and outdated. There was a massive push for “mobile-friendly websites.” This was a strange period with many different approaches to a responsive site. I found that there were two mains ways designers went about this.

1.) Truly Responsive Websites

The same HTML, CSS, & Javascript is rendered on all devices and pages. (one code base)

2.) Hybrid Desktop/Mobile Approach

The website has a mobile and a desktop version. Usually, the desktop version is served at the main URL “example.com” and the mobile version is served at a subdomain “m.example.com” (multiple code bases)

Eventually, designers realized that the first approach was the way to go. They were able to use this method to design websites that worked across all devices and only have to worry about one code base as opposed to two.

Responsive Web Design Takes Over

Did you know?

Although mobile devices account for 85% of internet usage, surprisingly only about 50% of websites are responsive.

 

Mobilegeddon

On April 21, 2015, Google released a massive search engine algorithm update that rocked the internet and solidified the importance of responsive mobile-friendly design. They announced they would begin boosting the ranking of mobile-friendly pages on mobile search results. This basically meant that if you didn’t have a responsive website, you weren’t going to show up in mobile results; a huge majority of the internet users. This algorithm update was so significant major news outlets were reporting on it months in advance. Google showed that the algorithm clearly favors websites that are responsive; a crucial aspect to anyone interested in improving their SEO efforts.

Then again on March 5, 2020, Google announced that they would be switching to mobile-first indexing for all websites starting September 2020. This means that Google will use the mobile version of your website when determining your page rank. Your chances of ranking anywhere near the first page of the search results with a nonresponsive site are pretty much 0. These are great changes Google made and only improves the quality of the internet.

Conclusion

Hopefully, I’ve covered the importance and a bit of the history behind responsive design and what it does. If you have any suggestions please leave them below.


Chase Keating

Chase Keating specializes in website design and digital marketing. He is the founder and creative director at Vox Digital. Click here to book a time to talk with us!

All author posts