How (not) to think about Responsive Design.

The most important question we should ask is, "to what are we responding?" It's not too far to jump from that question to the point I want to drill in: we're thinking about the wrong kinds of interactions. In some cases it's egocentric, but the main idea is that we must change the thinking and dialogue to focus more on real-world user interactions.

A simple example illustrating the egocentric disposition: focusing too much on how the site responds to changes in window size. Frankly, I remain unconvinced that this actually happens in the wild. Let me clarify that we must continue to ensure that the site works well at (almost) any size. The crossover into derailed efforts is when we spend even a moment thinking about what happens when we drag the lower-right corner of our browser window. I'll cut to the gist: only web professionals do that.

Let's think about real world user interactions. Too seldom do we think about responding to touch, pinch, scroll, hover. Much less *waiting*, playing, pausing, highlighting, context changes, focusing, blurring, loading another window/tab of our site, navigating "back". These are opportunities to *respond* to actual behaviors, and we are not talking about them enough. Are developers providing designers with enough insight into what is possible? Are designers thinking enough about real-world context?

Next time you think about your site's responsiveness, take a moment to remove the technology from your thinking and simply imagine the finger on the glass, the eyes on the screen, the full real-world context of the user's situation. Think about how your app can and should respond to the kinds of input and interactions you will actually elicit.

Example from Gmail

As a brief example of the kind of thinking & design which makes an application truly responsive, I'll demonstrate the following two minor UI reactions from a recent Gmail encounter.

Comments

Thank you thank you thank you for nailing the one key point that I consistently see developers and designers miss "full real-world context of the user's situation"

Screen size and technology are only part of the equation. Context cannot be ignored and arguably should be the forefront of defining the target goals.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Ready for transformation?