What, Why, and How: Responsive Web Design
“Web design is responsive design. Responsive web design is web design, done right.”
–Andy Clarke
Today, we’ll be taking a look at responsive web design; what it is, why it matters, and how we can help you implement it on your site. Ready? Let’s dive right in!
“Toto, I’ve a feeling we’re not in the 90’s anymore…”
Back in the bad old days, websites were almost entirely viewed on large, uniformly-sized desktop monitors. They did not rotate, there was no pinch-to-zoom; there was just a chunk of glass and plastic with your website projected on it.
But, as a wise man once observed: “the times they are a-changin’ ”.
Today, the ecosystem of web-enabled devices is more diverse than ever. Smartphones, tablets, smartwatches, and many more devices now compete for web traffic alongside traditional desktop displays. The remarkable growth in popularity of these “mobile” devices has been dubbed the mobile shift, and was perhaps illustrated most clearly in early 2014 when web traffic from mobile devices exceeded web traffic from PCs for the first time1. Others have reinterpreted this phenomenon as a more complex shift towards “ubiquitous computing”2, but the takeaway message is the same: designing for many devices is no longer a luxury, but a necessity.
Enter: Responsive Web Design
Broadly speaking, the answer to the mobile shift is responsive web design, a collection of methodologies oriented around ensuring that a website or application functions properly on many different kinds of devices. Since responsive web design is such a young concept (the phrase was coined as recently as 2010), there’s still a lot of misconceptions about what is is and how it works. Here, we’ll try to clear some of those up:
It’s an approach, not a plugin
Responsive design is a concept; how it’s achieved varies from site to site. There simply isn’t one plugin or platform that guarantees a responsive experience in all cases. That’s why the most important tool in the responsive design toolbox is, you guessed it: the designer.
There’s no rulebook, only guidelines
Partially because it’s such a new field, and partially because the Internet is a complex place, there isn’t one correct way to design a website responsively. The particular design goals of a website or application have to be considered first, and only then can a responsive strategy be implemented to achieve those goals. While we’re starting to witness the rise of a few technical standards and best practices for responsive design, the approach is still largely improvisational and highly site- or page-specific.
It’s not all about screen size
To be fair, most considerations in responsive design concern the size of the screen relative to the content being displayed on it. But there are other properties of the device that must be considered. For example, think about the difference between a conventional desktop, with a mouse/trackpad interface, and a tablet or phone with a touch screen. One interaction that’s supported by the former, but not (yet) by the latter is hovering. For a page where key elements of the information hierarchy or navigation operate via hovering of the mouse cursor, responsive design would impel us to consider a different approach, in order to optimize accessibility.
Our Responsive Design Process
Responsive web design is one of Mutualism’s core service offerings, one that we pride ourselves on greatly. We’ve been designing and redesigning websites responsively for years, so we certainly know a thing or two about how it’s done. Here’s a high-level look at how we work with our clients to deliver beautiful, highly-functional responsive websites and applications:
User Experience (UX) and Design Goals
First and foremost, we work to understand what the client’s goals are for a particular website. How should it work, what should it achieve for the user? Function dictates design, so we take this part of the process very seriously.
Relevant Devices
After working through the functionality and desired features for a page, we then consider the family of devices that the site must support, given its target users and their device preferences. If at all possible, we’ll ensure that the site functions flawlessly on any run-of-the-mill device, from a puny smartphone to a sprawling desktop display. However, there are some cases where designing for every device size is simply unnecessary (e.g. some highly complex web applications are meant to be used on desktop, and explicitly not on mobile). In such cases, we tune our responsive design process and deliverables accordingly, making sure the client gets everything they need and nothing they don’t.
Implementation
From a technical point of view, responsive design is generally implemented using a host of methodologies. These include CSS media queries, fluid grids sized with relative units (e.g. percentages), and column-centric page layouts that allow for friendly mobile-to-desktop scaling. Depending on the level of customization needed for the project, we can supplement these technologies with responsive WordPress themes and plugins. Whatever the needs of the page, we’ll find the tech to make it work!
Take the First Step
Ready to bring your site into the 21st century with responsive design? Let’s talk!
