Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
What is a Responsive Breakpoint Diagram?
The responsive breakpoint diagram communicates within a sprint team the 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.
When to use it
In responsive web design, the design of a screen transforms based on the screen and the device. Use this diagram to codify and 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 | ||
---|---|---|
| ||
TEMPLATES |
Tip | ||
---|---|---|
| ||
FOR MORE INFORMATION |