What is responsive design?

From time to time, we get clients who specifically ask if their website is mobile friendly, or if it uses responsive design. The majority of the time, we simply respond with “yes,” as we’ve been doing responsive design for a while now.

But occasionally, someone wants a little more detail on what responsive design means.

Are you nerdy enough to care? If so, you’re in the right place!

Here’s a brief history of mobile friendly design and responsive design, along with what it actually is and how you can check your website.

Mobile friendly history

In the late 90’s and early 2000’s, how a website looked on mobile phones was the last thing on anyone’s mind. There were feature phones that could surf the web, but it was a horrible experience.

Then, in June 2007, the iPhone changed all that.

It quickly became clear that while pinching and zooming worked, it wasn’t optimal. A regular website was not easy to navigate or read on an iPhone, or on the other smart phones that followed.

There were a lot of different solutions available. Many sites would redirect to a mobile version. So if you visited example.com, you would be sent to m.example.com, and it would be optimized for mobile devices.

While the web development community wasn’t completely happy with that solution, it seemed to be the best option out there.

Until 2010.

Responsive design history

In 2010, the term “responsive web design” was coined, although the various technologies it included had been around since 2001. But a prolific article was published in 2010 that coined the phrase, followed by a book in 2011 that described what all went into it.

The author of both was Ethan Marcotte, and in his book he described the theory and practice of responsive web design. In 2012, responsive design was listed as the #2 Top Web Design Trend in .net magazine. And then Mashable called 2013 the Year of Responsive Web Design.

Now, Google recommends responsive design over any other approaches, which makes it a good option for SEO. In other words, responsive web design is a must if you’re at all concerned with showing up high in search engine results, particularly Google.

Responsive design defined

Previous methods of mobile friendly design relied on detecting whether you were on a mobile device, then delivering different code and a different look if you were.

Responsive design delivers the same information to your browser, but then changes the look and feel on the fly based simply on the width of your browser.

The old methods had to continually be updated as new smart phones came out. Responsive design, on the other hand, is fairly future-proof, meaning it doesn’t require constant tweaking to continue to work with new devices.

Responsive design test

Wondering if your website is responsive? Just open it up in a new window, and resize the window. If the appearance changes as you resize, your website is responsive. If not, then it isn’t.

Example of responsive website and non-responsive website

If your website isn’t responsive, it may be time for a website redesign! Contact your web design company and see if they can help.