Breakpoints in Responsive Design
Breakpoints are CSS-defined widths that determine how the content and design is displayed and experienced. This is a critical tool when developing a website that has responsive design. These breakpoints are created with “media queries” that determine what CSS styles to use depending on the size of the screen the user is using. These breakpoints are often determined by the pixel (px) width of a display. While it can be helpful to use “em” units for the content of the website to be scalable, it can cause issues with media queries, so writing media queries with pixels is one best practice when it comes to defining breakpoints.
Given the variety of sizes that mobile and desktop devices come in, it can be tricky to know what breakpoints to use. Currently, common breakpoints are:
| Extra Small Mobile: | 320px-480px |
| Small Mobile (landscape): | 481px-600px |
| Tablets (portrait): | 601px-768px |
| Large Tablets (landscape): | 769px-1024px |
| Laptops and Small Desktops: | 1025px-1280px |
| Large Desktops: | 1281px-1440px |
| Extra-large Screens: | 1441px and up |
Common adjustments that are made based on breakpoint are:
- Navigational menu adjustments
- Desktop: horizontal bars
- Mobile: collapsible “hamburger” bars or a slide-out drawer
- Column reorganization
- Desktop: multiple column layouts
- Mobile: stack vertically with single-column layout
- Font and text size adjustments
- Desktop: larger font sizes and more spacing
- Mobile: text sizes are reduced and spacing adjusted to fit smaller screen
- Image and media resizing
- Desktop: displayed larger so it can be in a grid or gallery
- Mobile: images and media elements displayed in stack format with a focus on optimization
- Content prioritization
- Desktop: content often visible
- Mobile: key content prioritized
- Grid and flexbox adjustments
- Desktop: complex grid layouts to maximize screen space
- Mobile: simple layouts so content remains accessible and easy to interact with
- Button and link size
- Desktop: buttons and links are often smaller and more closely spaced
- Mobile: buttons and links enlarged and spaced out to accommodate touch interactions
- Forms and input fields
- Desktop: can display multiple input fields at once
- Mobile: single column layout with larger input fields and buttons to enhance usability on touch screens
Some additional best practices include making sure the media queries are last in the CSS code, be aware of any overlapping media query ranges, and keeping in mind browser capabilities.
Using media queries can ensure responsiveness and optimal user experience, and what widths should be used requires continual research on the part of the designer and/or developer. Knowing what devices and their sizes are the most used by the target audience for their website is critical. Creating with Mobile-First Design helps to determine what is most important. Technology will continue to evolve and so will the way code is created to keep websites responsive.
Sources: