Skip to main content

Defining Responsiveness

By Jason Grigsby

Published on January 7th, 2014

Topics

When people say that something is responsive, what do they mean?

I’m not being facetious. I think many of us think we know what is meant, but when you dig deeper, there is disagreement about what it means for something to be responsive.1

To his credit, Ethan defined responsive web design clearly with three technical pieces:

  • Fluid grids
  • Flexible images
  • Media queries

That seems simple enough. But when it comes to defining what is responsive, things get a bit fuzzier.

The best way to understand where the differences of opinion exist is by looking at an real life example: is Google Plus responsive?

It looks like it might be responsive. The layout varies from one, two or three columns depending on the width of the page. The size of elements on the page change as well.

Let’s look at some reasons why Google Plus might not be responsive.

The first time I cited Google Plus as responsive example, I was told that it didn’t qualify as responsive because it doesn’t go all the way down to support small screens.

This is silly to me. Nothing in Ethan’s article says that responsive web design has to support any possible screen resolution.

We’re perfectly happy calling things responsive designs that have a fixed width past a certain point on wide screens. And we praise the efforts by the BBC, Guardian, People and others that build a responsive mdot site that will eventually replace their main site.

So why would the fact that Google Plus doesn’t support small screens preclude it from being considered responsive?

Google Plus isn’t using media queries the way you might expect.

As far as I can tell2, none of the major layout changes you see in Google Plus are handled by media queries. They are controlled in JavaScript.

This is similar to Nathan Smith’s Adaptive.js library which puts breakpoints in JavaScript instead of CSS.

So by definition, Google Plus is not a responsive web design. It may look like one, but it doesn’t contain the three technical pieces necessary to be a responsive web design.

So I exaggerated a bit. Google Plus is using media queries. But as I said, they aren’t being used the way we normally think of them.

All but one of the media queries is looking at viewport height instead of viewport width. The one that looks at viewport width only applies at less than 340px; only adjusts a single icon; and I can’t get the rest of the page to adapt to less than 340px so the entire media query seems moot.

But perhaps we can give Google Plus a pass as a responsive web design because it technically has media queries even if they aren’t being used to make the design responsive?

Nah, that’s cheating. And even if we did let Google Plus off on this technicality, it would still leave us with designs that use JavaScript like Adaptive.js and wondering what we call them.

What happens when you use responsive web design, but add to it things that seem to be at odds with the philosophy of responsive design?

For example, do any of these change whether or not something is a responsive web design:

  • Device detection used to select the best-sized source image?
  • Redirects based on user agent string to a mobile site that is responsive?
  • Less content on small screens with more content on larger screens? What if the developer uses AJAX to pull in the additional content? What if they use device detection to make decisions before the page loads and then AJAX after?
  • A couch-mode design that only worries about resolutions from 720p to 1080i but uses responsive web design techniques for those resolutions?

These questions may seem crazy, but I’ve seen people use the presence of device detection as a reason to discount a responsive web design.

When people are looking for reasons why a given implementation doesn’t fit their perspective on what responsive web design is good for, it is pretty easy to find reasons why any given site isn’t a “pure” responsive web design.

When a client comes to us to help them make their existing site or app responsive, we know that we’re going to be using fluid grids, flexible images and media queries.

But we also know we’re going to be using much more than just those three techniques. The best responsive web designs are doing much more. And when we teach workshops or train client teams, much of what we’re discussing are the things that you do after you’ve got the three techniques down.

Which led me to the idea that there is a difference between “being responsive” and responsive web design. That responsiveness was something bigger.

So I asked Ethan for his thoughts.

As you might expect, Ethan had great thoughts on this topic. I’m republishing part of our email exchange here with his permission, but this is just a fraction of his insights. I hope he gets the time to share his thoughts in more detail.

I suggested that “being responsive” or “responsiveness” might be characterized by larger principles such as:

  • Designs that utilize the size of the viewport to determine the layout.
  • Designs that adjust the layout and the size of the elements in the layout as the size of the viewport changes.
  • Designs that ensure content parity across devices.
  • Designs that treat URLs as sacrosanct and ensure they work across devices.

Now, Ethan disagreed there was a need to revise the original definition. But he replied:

All of them—but the last two especially—seem to me to be pretty foundational tenets of good web design, full stop. If an interface doesn’t adapt to the display—be it responsive or device-specific—its utility is pretty limited; if it doesn’t honor and respect URLs—be it responsive or device-specific—its utility is pretty limited; and so on, and so on.

The web’s still digging itself out of the constraints of the printed page, in many ways, and we’re still—some twenty years on—trying to articulate the best way to design for this medium. What you’re describing feels bigger and more foundational to me than responsive design. It really feels like you’re describing the way the web wants to be: fluid, addressable, and accessible to all.

So Google Plus, to use your closing example, might not be responsive, but maybe it’s adopting a more web-appropriate design model. And maybe that’s enough.

I think Ethan is right. In the long run, “being responsive” is simply designing for the web the way it was intended.

But in the short run, I find myself struggling to describe the new toolbox and mindset that is required to do responsive web design well. And I see people talk past each other because of their mistaken belief that they have a common understanding of what responsive means.

I’m left with Justice Potter Stewart’s definition for whether or not something is responsive, “I know it when I see it”, which is wholly unsatisfying.

I take comfort ignoring the definitions and instead asking these questions about a design and its implementation:

  • Does it adapt to screen size?
  • Does it take advantage of device capabilities?
  • Is it accessible anywhere?
  • Does it work well?

For our users, those are the things that matter.


  1. Not addressed in here is the fact that responsive is also used in the web performance community to refer to something entirely different.
  2. Google Plus CSS and JS is quite complex. I’ve done my best to confirm they are using media queries only in the ways I’ve described here, but I can’t guarantee I’ve got it right.

  3. Don’t get me started on the definition of adaptive design. Unless I’m talking to Aaron Gustafson, I know I don’t know what someone means when they say that.

Comments

Mustafa said:

Very nice article, i like your questions at the end, if responsive is defined by techniques maybe we are using the wrong terms. Adaptive perhaps?

In any case lovely write up.

Ronan Cremin said:

I think it’s high time we moved past the more narrowly-defined Responsive Web Design label and onto responsive web design in general, meaning being responsive in any and all forms that are appropriate. It’s too easy to deem your site to be multi-device friendly if we define responsive so narrowly.

Clinton Fein said:

Great analysis. Ultimately, I think that a combination of fluidity of screen size and resolution (and content therein), combined with device capability, function to provide an optimal user experience. I really think it’s that simple.
Then one can include yet another layer that identifies the demographic nuances of *who* the user is to optimize and tailor the experience even further

Tim Kadlec said:

I’ve been down this path too. In fact, I still go down it sometimes. I like the idea of “responsiveness” having a larger meaning, because I think the term fits: good web design requires being responsive to more than what fluid layouts, fluid images and media queries alone can provide.

However, “responsive web design” is a term with such a specific definition firmly entrenched to so many, that trying to extend its definition just seems to cause trouble.

Maybe the term has already been coined for the bigger idea? “Future- friendly” seems a large enough idea encompass the larger principles you’re suggesting and does so without conflating more specific terms. It also has the benefit of not dictating the techniques being used (leaving room for responsive web design to be paired with whatever else helps you get the job done) and it certainly better represents the idea that “The best responsive web designs are doing much more.”

Dan Govan said:

I wrote last week about a very similar thing, the spirit and letter of RWD. It’s frustrating getting bogged down in buzzwords when trying to get to definitions that people can agree with; RWD as it was laid out by Marcotte is just a small slice that’s come to share a name with the whole device-agnostic future-friendly pie.

I’ve seen it lead to dangerous miscommunications, such as conflating Responsive with optimised-for-mobile, which was super awkward to explain.

Aidan Foster said:

I think of responsive design as the core design principal on which effective websites are built, but I tell people that it alone is only part of a good website. A Responsive (Only) website that has any number of images, will almost guaranteed have performance issues.

As you pointed out Ethan’s very clear definition will be strongly entrenched in lexicon of web designers for years to come. So I think we’ll to evolve a new term beyond “Responsive design” to talk all extra components needed to cover “Does it work well?”

Tim’s suggestion of “Future Friendly” being a good catch all phrase as it easy to understand, and gives a nod all the folks contributing code and ideas that appear in the Future Friendly Manifesto.

Mobile-first-Progressively-enhanced-Responsive-web-design is the long form that I feel are what the core tenants of Responsive Design have evolved into. Too bad it’s a bit too long? How about RPM 😉

Joaquin Lippincott said:

Great article!

Rather than getting caught up in particular techniques (CSS, JavaScript, etc.) it’s important that the web industry rallys behind principals for addressing the constantly changing device ecosystem.

Much like the Agile Manifesto, I think the principals you outlined can be used to guide a family of different responsive techniques. Can we call it the Responsive Manifesto?

* Designs that utilize the size of the viewport to determine the layout.
* Designs that adjust the layout and the size of the elements in the layout as the size of the viewport changes.
* Designs that ensure content parity across devices.
* Designs that treat URLs as sacrosanct and ensure they work across devices.

Joaquin

Martin Wilson said:

A good post. One of the core elements that is missing (and from the majority of ‘Responsive’ sites is the audience need). A question should be added to the summary of the post – Does it reflect audience needs?

The optimal approach is Audience and Device Aware (ADA). An approach aimed at ensuring that a site is optimised to deliver what a user wants and that works effectively on the device being used to access the site. This will factor in mobile, tablet, wearables …
http://mobileweb.co.uk/archives/2916

Karl Dubost said:

Jason, very nice articulation of the problem space. Maybe one point to add that starts to show off in your rationales is that “One Web design” is not that much at which techniques you are using but more how do you use the techniques.

In my favorite categories of nightmares, there is for example User Agent detection. Good intents, often very badly used. Also, mediaqueries used for removing stuff from a site for small screens, instead of adding stuff for big screens.

In the Google Plus example, I wonder how the site fails on devices with lower capabilities in terms of JavaScript. At Mozilla, we had a certain number of issues with Google properties, Google plus including. Because they also do user agent detection upfront before delivering a version of a site. We are working hard with their teams to get things fixed, but we are not always successful.

URI and Content are keys as Ethan said. I would add non blocking User Experience depending on your browser or device is another one.

I think there is a bit of W3C Mobile WG trying to define One Web: http://www.w3.org/TR/2005/NOTE-mobile-bp-scope-20051220/#s3.2“>For content to be widely accessible it must not depend upon a particular implementation of standards or the end-user’s choice of terminal device and browser..

This was in 2005. To note that at that time and because of the technological context, the group was doing a lot of server side content adaptation. And you can see the struggles emerging in the Scope document.

Anders said:

How about “Accessible web design”
I mean, isn’t responsive design all about making a design work across devices?

Mike Donahue said:

The name is the problem. Names are always the problem. Just ask the Hatfields and McCoys, Montagues and Capulets, Mac and PC. Every time a name is involved lines get drawn in the sand, people take sides, and all hell breaks loose.

How about we really just get back to basics and call it “web design”? Allsop laid it all out for us in 2000. It’s just web design. Do we really need a new name? We didn’t go around calling it Table Web Design (TWD), Float Web Design (FWD), Absolute and Relative Positioned Web Design (ARPWD), why do we need to call it Responsive Web Design (RWD)? Responsive is just a technique like tables, floats and positioning.

This does raise some questions in my mind. If Ethan never coined the term “responsive web design” and simply shared the technique would we (a) be debating whether or not something is responsive or (b) even be doing responsive as we know it now? Would the technique have caught on so well if it didn’t have name?

@Grigs – You say – “But in the short run, I find myself struggling to describe the new toolbox and mindset that is required to do responsive web design well.” I hear you. Maybe it’s not about describing the toolbox as a whole. It’s about knowing the tools in the box, how they work and which one is best suited for a given task, and describing them as in that light.

If we all get back to talking about what web design is and does, and only refer to things like responsive for their role rather in the design and not as the design itself we might all be better off.

Allen Moore said:

Very nice article Jason. There seems to be some confusion in our business as to what the definition of “responsive” really is. If you were to have some of the “leading” minds in web design & development answer this question, your answers would vary and at times conflict. Are we at any point going to have an agreed upon definition that will lead to a unified approach to responsive? Or will we continue to have to question what responsive is?

Vassilis said:

On a more technical note, does the concept of web design imply anything about the actual programmatic implementation that is used for each site? More specifically, if in addition to fluid layout and media queries, one uses device detection techniques in the server side to specify certain parts of the markup to return (or not) to the browser, does that qualify as responsive?