Responsive Behaviors, a Working Vocabulary

James Melzer
Dec 16, 2015 · 1 min read

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.

EightShapes

A collection of stories, studies, and deep thinking from…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store