Design Responsively — Grids and Breakpoints
Terms like “responsive” and “mobile-first” have been hot on the tongues of web application designers and developers for the past 5–6 years. Unfortunately, they’re often used with little explanation or implementation strategy, or worse, used to stifle creative or more functional designs because of a lack of consistency or ability between platforms.
This three part series will cover: The major responsive strategies and when you should consider using each of them. How responsive grids and layouts work, including the responsive standards and rules most commonly used, and, finally, how to use all of that knowledge to actually create mockups and designs — including the important point of where to start!
Part 2: Grids and Breakpoints
In part one of our responsive design series, we talked about the three C’s for responsive design strategy. And while there’s no “one size fits all” solution for deciding which features and patterns are right for your application, there is an established method of building layouts for any design pattern to move easily between devices: grids and breakpoints.
Grids have been used for centuries to help manuscript artists, typesetters, and graphic designers create beautiful, functional layouts. Today they’re used in web and application design to provide a flexible framework for creating layouts that can change size and shape.
Most modern responsive grid systems are built on the popularity and completeness of Google Material specifications with three grids: 4, 8, and 12 columns. These are the spaces that define the layout structure.
In addition to columns, there are also gutters, the spaces between the columns that act like inner margins.
How many columns you use, and how wide the gutters are, is determined by what class the screen is as defined by breakpoints. Breakpoints use the screen width and density to put the screen in one of three categories: small (4 columns, 16px gutters), medium (8 columns, 16px gutters), and large (12 columns, 24px gutters). Because the calculation uses screen density, the widths are measured in dp or density pixels. However, for designing purposes in mockup tools, density pixels and standard pixels are equivalent. Because of that, we’ll continue to use px for measurements.
Most breakpoint definitions are as follows, again, based on Google Material and the various frameworks that implement it:
Small screens are defined as anything less wide than 479px, which is almost all phone handsets in portrait. 8 column, medium layouts start at 480px to 839px and cover all tablets in portrait and most phones in landscape. Large layouts are anything 840px or larger, and 12 column layouts are on all tablets and some large phones in landscape.
Desktop windows can span all three categories based on what size they are, and should behave appropriately. It also means that even if you expect your application to only be available on desktop, you still need to plan for all three possible layouts to accommodate different screen sizes, window sizes, or use of projectors or assistive technologies.
Understanding how the breakpoints are defined, how grids are selected, and how layouts move between them is the center of creating responsive designs. Armed with this knowledge, you can start putting pen to paper and iterating on mockups. In Part 3, we’ll cover exactly how to get started in that process.
Read more in part three, or go back and read part one!
