Responsive Breakpoint Diagram

What is a Responsive Breakpoint Diagram?

The responsive breakpoint diagram aids the development team and communicates various screen widths, and "breakpoints." A breakpoint is the point at which your sites content will respond to provide the user with the best possible layout to consume the information.

When to use it

When you start to work with responsive web design you'll begin defining the breakpoints at the device screen widths you are targeting. You can use the responsive breakpoint diagram to explain design and development decisions to team members and other stakeholders.

How to use it

Download Diagram (PowerPoint)

This diagram is editable.You may modify and use it according to your needs. Below are the diagram elements provided and how to use them.

Field	How to Use the Field
Global Navigation	Use the green arrows to show what happens to the global navigation (often found at the top of a screen) at each breakpoint listed. Use whatever names you call your navigation elements. Move the green arrow points right or left to adjust sizes based on your needs.
Local/Regional Navigation	Use the blue arrows to show what happens to the local navigation (aka regional navigation, often found on the left side of a screen) at each breakpoint listed. Use whatever names you call your navigation elements. Move the blue arrow points right or left to adjust sizes based on your needs.
Breakpoints and Size Names	List the maximum screen width for each size, and the name your team has agreed to call that size. These breakpoint sizes and names are the same as you use in your code.
Device Examples	List names of devices closest to the screen width named in your breakpoints, so your team members and stakeholders can visualize the screen size.