ARWHD

Last week, a client asked me what responsive web design (RWD) is and I wasn’t sure where to begin describing what it is and how it would help her business. There are lots of things we ascribe to and associate with RWD as designers and hold to when defining it, while on the other hand when you talk someone outside the web/tech industry, most times clients and others I’ve talked to just think of it as “oh, like mobile”. And that doesn’t really being to cover what it is or what it really does for users.

So let’s try and define it better.

Barebones Elevator Pitch

RWD is a set of technologies that allow a webpage’s layout to respond to the browser’s screen-size (viewports), agnostic of the device they’re using¹. A practical example would be viewing a website on a smart phone and being served the same website as on your desktop browser. Regardless of the device you choose, you’re not being served an alternative website with a truncated content or a different template. The idea is simple: just like water will fit the glass holding, so can your website fill your device.

With the economy of internet capable devices growing², targeting specific devices and disseminating different code and mobile templates becomes less of an actual option. Along with the capacity for different input types like touch and a traditional mouse/keyboard scenario being less specific to different devices³, there needs to be a solution that can be applicable a wide expanse of devices.

RWD is the starter kit to get us to build websites that can respond to different viewports from everything large desktop 30” desktop screens, down to the latest mobile phone.

And That Works Itself Out to Be…

Ethan Marcotte’s A List Apart article ⁴ and later in his book Responsive Web Design (2011), gave us a seminal framework for responsive web design (as well as coining the term) that consists of 3 essential pieces: fluid grids, flexible images and media queries.

Instead of a website with a fixed width centered on a screen, we bring the aids of fluid grids based on relative measurements like percentages. In this fluid grid, we use flexible images so that they never break out of their container. Then we use media queries to target where the layout breaks and adjust it to fit a different range of widths.

What’s in This for Non-Nerds

The main thing to understand is responsive web design is a boilerplate idea to make your website and content is available to the most number of people possible, and this involves being less dependent on the the next screen size or device that comes out. When it’s done right, it means there’s smarter, more efficient code being written and served to the devices. Ultimately that yields faster page load times when you’re working with smart designers & developers. Longer page load times lead to higher bounce rates (the amount of time it takes a user to leave your site).

It may mean spending more to have your website to be built, which is similar to paying for a roof. If you’ve ever had to had a roofing job done you can pay for a cheap job and maybe in the next couple of years your roof will collapse on you, or you can pay for the job to be done properly.

Out With It Nerd, Why Should I Care?

As the mobile space grows, your potential to reach more people and customers grows. Starting in 2012, a trend started to where some users were exclusively mobile only⁵. More importantly, Google started reporting statistics of another user behavior: 90% of people use more than one device to do something⁶. Knowing that these behaviors exist and these trends are rising should be cause enough to change the way you approach having a web presence or any kind of doing business online.

Responsive web design isn’t going anywhere and we need to continue to find ways of explaining to people (like our clients) so they don’t think they’re buying snake oil from us. We need to have as many discussions about how RWD can help people outside developers and designers as we do on to how it can help us design and develop smarter sites in ways that aren’t obvious.