Communicating Responsive Web Design: The Breakpoint Matrix

Responsive web design demands that designers consider multiple sizes, creating an interface that transforms from breakpoint to breakpoint. Despite an overflowing toolbox of diagrams, wireframes, and prototypes, no existing tool is an ideal fit for documenting a responsive design. This is the next phase of our field's never-ending quest for better design communication.

I've experimented with a combination of diagrams and prototypes to communicate both the gestalt of the experience and the nuts-and-bolts details needed to build the design.

The poster will explain the Breakpoint Matrix, a diagram which denotes interface transformations across a range of responsive breakpoints. The poster will also discuss how to integrate the diagram into a comprehensive design document, such as a specification, and how to use it in conjunction with HTML prototypes.

Download the Poster [PDF 5.8MB]

Download the Content, refactored to 8.5 x 11 for screen and print [PDF 1MB]