Breakpoint
Conditionally display content based on screen width
Introduction
Breakpoints define specific screen widths where the layout adapts to provide an optimal user experience across devices. They ensure content is readable and usable on all screen sizes.
We use breakpoints to:
- Create responsive layouts that look and work well on mobile, tablet, and desktop devices.
- Prioritize content and interactions based on device constraints.
- Prevent issues like horizontal scrolling, overlapping elements, and unreadable text.
Breakpoint
We have a Figma breakpoints template available for designers to use when designing responsive layouts.
Breakpoint definitions
You can see the Bifrost breakpoints definitions in the table below. Remember that these breakpoints are based on viewport width, not what the monitor resolution can handle. This means that you can have a high resolution display, but the browser window can be smaller (e.g "half-width screen"). You can check viewport width in our simple viewport width check page.
| Breakpoint | Min width (px) | Max width (px) | Description |
|---|---|---|---|
| Small | 0 | 599 | Mobile phone |
| Medium | 600 | 959 | Tablet |
| Large | 960 | 1279 | Tablet or small desktop |
| XL | 1280 | 1919 | Desktop |
| XXL | 1920 | 1920+ | Large desktop and widescreens |
Navigation breakpoints
In addition to these standard breakpoints, Bifrost also defines how the Nav component changes across one or more breakpoints.
| Nav | Min width (px) | Max width (px) | Description |
|---|---|---|---|
| Fullscreen | 0 | 599 | Slides in from the left and covers the entire screen (fullscreen) |
| Overlay | 600 | 1599 | Slides in from the left. It adds an overlay on top of content. |
| Collapsible | 1600 | 1600+ | Always visible, and can be collapsed/expanded |
Best practices
It is tempting to not design for all breakpoints, especially when under time constraints. However, it is important to consider how the design will adapt across different screen sizes to ensure a consistent and user-friendly experience.
Mobile first vs Desktop first
In our field of work, it is recommended to design "mobile first", meaning starting with the smallest breakpoint and progressively enhancing the design for larger screens. This approach helps prioritize content and functionality for users on smaller devices, ensuring that the most important elements are accessible and usable.
However, there may be cases where starting with a larger breakpoint is more appropriate, such as when designing complex applications that are primarily used on desktop devices, which a lot of us do.
Mobile is hard
Are you designing by the "desktop first" approach, and having trouble adapting your design to smaller screens? Take a step back, and try to design for mobile first. This will help you prioritize content and functionality, making it easier to scale up for larger screens later.
Remember that mobile users have different needs and constraints compared to desktop users, so it's important to consider their context when designing for smaller screens.