Page tree
Skip to end of metadata
Go to start of metadata


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. 

FieldHow to Use the Field
Global NavigationUse 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 NavigationUse 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 NamesList 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 ExamplesList names of devices closest to the screen width named in your breakpoints, so your team members and stakeholders can visualize the screen size.


Microlearning Videos

Responsive Web Design Tutorial and Explanation

Learn what Responsive Web Design is, and how to write the necessary code to create our own custom responsive web layouts.

LearnWebCode | 10/13/2013

Responsive Layout: Advanced Techniques - Google Web Designer

In this video, Google Web Designer engineer Lucas introduces advanced techniques to best utilize the Responsive layout feature.

Google Web Designer | 5/3/2016