ISG Playbook
APIsWhat is a Responsive Breakpoint Diagram?
The responsive breakpoint diagram communicates within a sprint team the aids the development team and communicates various screen widths, or breakpoints, to be used in the responsive design process. The diagram also indicates what should happen to navigation and other screen elements as screen sizes change. 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
In When you start to work with responsive web design, the design of a screen transforms based on the screen and the device. Use this diagram to codify and 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
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. |
Microlearning Videos
| Section | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
HCD PROCESS |
| Info | ||
|---|---|---|
| ||
|
| Tip | ||
|---|---|---|
| ||
FOR MORE INFORMATION |