Responsive web design is one of the biggest web design innovations in recent years, and is vital to running a website that works well on all of the latest smartphones, tablets and mobile devices. Exactly what is responsive web design and why is it so important? Let’s take a clear and understandable approach to explaining responsive web design and how it affects you, your company and your website.

So, Exactly What Is Responsive Web Design?

Responsive web design is a technique for building modern websites that adapt to a wide range of devices and screen sizes. Responsive websites use a variety of technologies, but most of these are now well-supported in all the latest browsers & devices. Responsive websites let us do away with the old idea of maintaining two separate websites – a desktop version and a mobile version – we have one version of a site that changes depending on what device you’re using to view it. This is achieved by using well-supported properties of HTML & CSS in a new way, and sprinkling in some of the latest HTML5 & CSS3 techniques to bring things to life.

In short, responsive design gives us one website that works on all devices. Cool!

Not only do responsive sites work, they improve the user experience across the board. People browse the Internet using a huge range of smartphones and tablets with displays of all sizes. The old idea of running a mobile website and a desktop website separately just doesn’t work anymore. Today’s smartphones have screen resolutions matching some desktop computers, and with the advent of tablets there is no clear distinction between mobile and desktop.

With over half of Americans accessing the Web on smartphones, it’s an important shift in web design. If you’re still skeptical about just how important the mobile device crowd is, here’s a more expansive look at mobile stats and the argument for responsive design.

Getting Technical

Okay, so all the web designers and coders reading this are probably thinking the same thing. “Hey, that’s oversimplifying things, what about adaptive design?“. And while you’re correct that responsive design methodologies are generally agreed to have a more specific definition, mainly that they heavily utilize breakpoints and media queries, the term responsive web design has become the go-to reference for explaining a whole host of technologies, methodologies and practices that go into building device-responsive websites. And that’s okay.

But let’s take a quick look at adaptive design as well, because this is also a term that gets thrown around when we’re talking about cutting-edge website methods. Adaptive design is more less identical to responsive web design; it’s just implemented differently and has a slightly different character. As opposed to detecting a user’s resolution and serving up different versions of a design with a responsive site, adaptive websites use a continuously scaling design that doesn’t require multiple resolution-based breakpoints. Adaptive web design shares many of the characteristics of responsive design, but has some significant challenges that make truly adaptive designs more of a struggle. In the end, it’s a matter of preference and the complexity of the website, but adaptive design more or less falls under the umbrella of responsive design as far as most day-to-day conversations might go.

How Did This All Get Started?

Since responsive web design isn’t a specific technology or app, but rather a set of methods, there wasn’t technically a “release date”. But there was something pretty close to that when A List Apart published the article Responsive Web Design by Ethan Marcotte on May 25, 2010.

This article pretty much transformed how everyone was thinking about designing websites for modern devices. Smartphones were getting some serious attention and evolving at a tremendous rate (this was just a few weeks before Apple released the iPhone 4 in June, 2010).

Casting away the old concept of running two separate “mobile” and “desktop” versions of a website, coders started forging ahead with media queries and developing breakpoints, aggressively pushing support and compatibility for the HTML5 spec with standardized shivs and looking at all of the pros and cons that made up responsive design.

Responsive design hinges on the use of media queries. Back in 2010, media query support was already fairly robust; fast-forward nearly five years and the situation is even better. We can very reliably serve up customized presentations to different devices based on the most accurate and well-supported variables available on nearly all modern browsers: the width and height of the user’s display.

The Future of Responsive Web Design

The methods that make up responsive design have gone from being something that programmers toyed with on test sites to being standard practice for nearly all the biggest websites. In four short years, responsive web design has become part-and-parcel with web design itself.

It’s clear that this trend will continue for a long time, as browser and device support continues to mature. Considering that mobile and tablet users were online in 2014 more than desktop users (for the first time in history), responsive design will be permanently sewn into the fabric of web design so that all future websites will be built with a range of devices in mind; not just the desktop PC.

What we will see unfolding is increased support for some really cutting-edge CSS and HTML tricks and advanced browser features that natively support responsive layouts. Responsive grid systems will continue to evolve and we’ll hopefully see some native HTML responsive features as well as some really great improvements in existing responsive frameworks.

Responsive techniques are still a work-in-progress (like all Web technologies). There are sure to be some surprises along the way. Responsive web design is a set of methods, and we’re still seeing those methods adapt and build support for other technologies to act responsively such as Canvas and WebGL.

Without question, responsive web design is here to stay as we move into a future rich with new devices; moving beyond smartphones, tablets and desktops to all manners of digital consumption like smartwatches and maybe, eventually, devices that physically change size on demand.

Digging In

For some more reading on the importance of responsive web design and how it affects your business check out our article on understanding responsive web design.

Hopefully this article helped your understanding of responsive web design. The most important thing to take away is that responsive websites are how websites should behave in a world full of different devices. Your website must adapt to each device, and there’s no room for hauling a separate “mobile friendly” website around anymore.

Please share any of your questions about responsive design, or reach out to Intavant for a friendly consultation or a free quote.