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