James Melzer

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]

More from the Archive...

Morville's Facets of User Experience Refined?

Back in 2005, I had the hubris to try to improve on Peter Morville's iconic Facets of UX diagram, also known as "the honeycomb diagram". Read on...

Adaptive Path MX East 2007

In 2007, I attended my favorite conference ever. Before live-tweeting, we live-blogged. This post was my notes from two days of talks and activities. Read on...

Pattern Library Resources

In 2008, I started working extensively with UX pattern libraries, first for SRA and then for EightShapes. In this blog post I gathered together the best resources on the subject. Read on...

Applying Mental Models Outside UX

In 2010, I presented a poster on a mental modeling project. Read on...