We first began experimenting with responsive design techniques way back in 2011, but have yet to sit down and define what it is, and more importantly, what it means to us. So let’s do that.

The Technical Explanation of Responsive Web Design

Let’s start with what Wikipedia thinks Responsive Web Design is:

Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).^[1][2][3]

A site designed with RWD^[1][4] adapts the layout to the viewing environment by using fluid, proportion-based grids,^[5] flexible images,^[6][7][8][9] and CSS3 media queries,^[3][10][11]…

That’s a very technical, pragmatic explanation of what RWD is. And it’s an important explanation because the technique is what makes it all possible. But as web developers get better at understanding and implementing the technique it becomes clear that responsive design has the ability to change the way we think about designing a website, and the user experience.

A different way of thinking

While technical understanding and coding skills are important, let’s hear what Ethan Marcotte, who first coined the term Responsive Web Design had to say about it (emphasis mine):

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.

Ethan’s different way of thinking in the article has more to do with not building separate, device-specific platforms, but it’s equally apt in describing the way we think about developing responsively.

The responsive design experience

So here it is, the Spigot Responsive Design Manifesto™:

Responsive Web Design is the philosophy of maximizing the experience of both the website visitor, and the website owner.

The Website Visitor

Responsive design is uniquely powerful in maximizing the experience of the end user. The ability to show elements that are situational to mobile users, for example, means a website can emphasis the phone number which can offer a quick and easy way for users to connect. A quick link to directions via Google Maps is another great example of maximizing the experience of the end user.

We think a lot about the hierarchy of a site during each phase of web project, from research and strategy, through design and development. That thought process is vitally important when developing for the mobile screen. Simply rearranging content from the wide screen layout might make the site look good and perhaps ‘optimized‘, but it misses a huge opportunity to deliver targeted information depending on a users viewing situation.

This doesn’t mean stripping down the experience on smaller screens. It simply reinforces importance of a thorough and detailed thought process behind the creation of the entire website.

The Website Owner

When it comes to maximizing the experience for the website owner, much of what we talk about is stretching budgets and maximizing ROI.

Most of the businesses we work with don’t have large marketing budgets or in-house marketing departments. Responsive design gives these businesses the opportunity to Create Once, Publish Everywhere. Rather than building a desktop site, a mobile site, and maybe even a standalone app, developing a responsive site allows a website owner to create and manage one site, one platform, that can be optimized for every screen size. Given the relative costs between managing content and development overhead, responsive web design is very often far and away the best tool for small businesses to get mobile optimized.

So yes, saving money is great, but there’s another no-less tangible benefit for website owners: Cool factor. Or maybe just staying current factor. Running a business is a competitive endeavor. Keeping ahead of the competition is a common goal and an modern, up-to-date, responsively designed site is something to be proud of and show off. So many clients come to us and are embarrassed to even mention they have a site, because it was built long ago by a neighbor’s kid, and hasn’t been updated in years. Talk about an ineffective marketing tool.

Responsive Design Included

We think responsive design is so fantastically important we now include it every custom project we do. It used to be an optional line item that added 20% or more onto the development costs, and many clients opted out over budgetary concerns. We don’t want clients opting out so consider it a part of the package. And we’ve gotten better and quicker at the techniques, so that extra 20% is more like 10%.

Ready to get responsive? Get started right now!