Responsive Behaviors, a Working Vocabulary

Responsive web design needs a vocabulary: a set of terms to describe how interfaces flex, transform, and adapt across displays. While prototypes demonstrate complex behaviors, designers working on the responsive web don’t have a way of talking to discuss and critique those behaviors outside the code.

Perhaps you’ve heard comments like these:

“This thing needs to pop over here.”
“This will pop out from the side.”
“We’ll make these things pop together.”

So. Much. Popping.

As someone who discusses responsive strategy with lots of different people — clients, designers, developers — I need a more rigorous vocabulary in which unique terms refer to specific behaviors behaviors.

Introducing, the Responsive Lexicon

Through our work on responsive sites, EightShapes has developed a working vocabulary for responsive behaviors. To validate the approach and terminology, we looked at frameworks, like Foundation and SUSY, and prominent responsive sites, like Disney, NPR, Microsoft and Vogue UK.

We identified 12 different behaviors and illustrated them on a demonstration page.

Responsive Grids Demonstration