The practice of defining “breakpoints” (of screen sizes) is a commonly-used mechanism the Responsive Design world as a mechanism for determining what sort of styling rules, experience enhancements, and even types of assets ought to be delivered to users viewing site content with their particular device.
I’ve typically seen these breakpoints chosen with iOS devices in mind:
320px and up for handheld,
786px and up for tablets, and then
1280px and up for laptops and desktops.
But there are loads of devices being shipped by a variety of manufacturers, whose phones are larger, and whose tablets are smaller. And let’s not overlook the possibility that the number of devices will only continue to grow into the future, even if all you might claim to care about is Apple’s iOS mobile devices (which, IMO, isn’t any smarter than slapping a “Best Viewed in Netscape 4″ badge on your website).
So, how better to think of these breakpoints?
One might suggest that a “theoretically pure” approach would be do consider the physical size of the display and to offer up a design and assets that would be experienced well, given that space.
The trouble is that devices have different pixel densities. And before we get all excited about the fact that CSS also supports real-world sizing units, like inches and millimeters, I regret to have to report that these aren’t reliable, either. Even iOS devices, whose screen sizes are extraordinarily well-defined, render real-world measurement units at 3/4 size of the desired sizing (i.e., a 2-inch wide
<div> rendered on an iPad measures 1.5 inches with a ruler).
In case you want to check this claim out for yourself:
Purity, as you can see, is rarely practical.
Still, the general goal of matching up layout styling rules appropriately for a given display size is a sound one. And so I’m thinking a more pragmatic approach with similar goals is in order.
Devices and Their Imperfect Pixels
For better or worse, the digital design world uses pixels as the de facto measurement unit. Now, anyone with a lick of experience with digital design (whether it’s creation, implementation, or troubleshooting) will immediately realize that there’s loads of pixel size variety between devices. Very roughly, PC screens have an average pixel resolution of 100ppi, while mobile devices have a resolution of about 160ppi. 1
This is in no small part thanks to the fact that the original iPhone was a 160ppi device, and to Google’s “device independent pixel” work (also called “dp” or “dip”), which notes:
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a “medium” density screen.
So, given this loose “pixel-standard” sizing practice, I hunted around for some reference that outlined the screen sizes of some common mobile devices, and found this handy already-year-old matrix from UX Booth, reproduced here for convenience:
|480Ã—360||Blackberry Devices: Torch, Storm, Bold|
|360Ã—640||Symbian OS Devices: Nokia N8, Nokia C6-01, others|
Please note that this is a very limited list, and is by no means complete. What is important to take from this data is that a wide range of screen resolutions are out there, and new devices are introduced constantly.
Starting with this survey of device screen sizes, let’s loop back to the idea of using layout capabilities afforded by the display area as the central concern in identifying our breakpoints: which display width offers “enough room” for a image floats, and which for multiple columns of content?2
Next, let’s keep the number of breakpoints practical, for each one introduces some amount of development and maintenance overhead. We’ll need to balance “enough to be useful” vs. “too many to manage”.
Here are my recommendations:
And don’t forget the idea of 2x image assets for high-pixel density devices (like the new iPad, with its Retina Displayâ„¢), which starts to open the bandwidth measurement can of worms.
What do you folks think of these breakpoints?
Here are some related materials that inspired this exploration:
- Considerations for Mobile Design (Part 2): Dimensions
- Responsive Web Design Default Breakpoints Are Dead
- State of the Web: of Apps, Devices, and Breakpoints
- Mozilla Developer Network: Using the viewport meta tag to control layout on mobile browsers
And some tools I had in mind:
- There are _lots of caveats_ here, but in the world of web design, there’s enough truth in that to serve as a workable fundamental understanding. ↩
- Because we’re exploring web design, let’s identify the primary dimension for our breakpoints consideration to be width, since “height” is often best considered “infinite” on web pages. ↩