Glossary
web-design
Breakpoint
Definition
A screen width at which a website's layout changes to better suit different device sizes.
What is a Breakpoint?
A breakpoint is a specific screen width where your website's design changes. When a visitor's screen hits a breakpoint, the layout shifts—maybe from a three-column desktop view to a single-column mobile layout.
Breakpoints are the mechanism that makes responsive design work.
Common Breakpoints
While there's no single standard, these widths are widely used:
| Device Type | Breakpoint |
|---|---|
| Mobile | Up to 480px |
| Large mobile | 481px - 767px |
| Tablet | 768px - 1023px |
| Desktop | 1024px - 1279px |
| Large desktop | 1280px+ |
What Changes at Breakpoints
- Navigation - Hamburger menu on mobile, full menu on desktop
- Columns - Three columns become one on mobile
- Font sizes - Larger headings on bigger screens
- Images - Different sizes or cropping for different devices
- Spacing - Tighter margins on mobile, more breathing room on desktop
Mobile-First vs Desktop-First
Mobile-First Approach
Start with the mobile design as the default, then add breakpoints for larger screens. This is the recommended approach because it prioritises the most constrained environment.
Desktop-First Approach
Start with the desktop design and add breakpoints for smaller screens. More traditional but can lead to mobile being an afterthought.
Best Practices
- Choose breakpoints based on where your design breaks, not specific devices
- Test between breakpoints, not just at them
- Minimise the number of breakpoints—fewer means simpler code
- Consider content needs, not just screen sizes