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).
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
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!