Are You Making This Responsive Design Mistake?

Responsive DesignResponsive design is one of the best things that ever happened to web design. With responsive designs we can use one codebase to support everything from small inexpensive Android phones to 5K Retina iMacs. Not only is that great for mobile web users, who get usable sites across all their devices (assuming responsive design is implemented properly). It’s also great for developers and the people who pay them — no more mobile-specific sites.

Responsive design makes the web more usable, more flexible, and more accessible for users, and it makes building websites that support all devices more efficient, more cost-effective, and more enjoyable for developers.

So why is it that some developers and designers insist on using device-specific breakpoints?

Breakpoints are the points at which we make changes to the layout of a site in response to the constraints of the device or viewport on which it’s being viewed (among other things). Using media queries, we can selectively include chunks of CSS. Media queries can use a wide-range of different conditions, but the most common is device width via the min-device-width and max-device-width selectors.

How do we choose the widths at which we place breakpoints? One intuitive way to do it is to gather together a list of the widths of devices you want to support: iPhones, iPads, Android phones and tablets, desktops, in all their various versions and possible orientations, going back as far in time as you’d like to support. Then, carefully add media queries to your CSS using all these device widths as breakpoints, testing to make sure that the site’s layout looks good and remains functional. Then you wait a while, until a new generation of devices is released, and you add a new set of breakpoints and CSS to support those sizes.

Or perhaps you aren’t so diligent; perhaps you just think to yourself: this looks awesome on my iPhone 6S and my iPad Air 2! That’s what all the cool people use. Who cares if the nav menu is unusable garbage on a three-year-old Droid? Who cares if it won’t look perfect on next year’s phablets — not my problem.

Here’s the thing — whatever it is you’re doing with device-specific media queries, it isn’t responsive design. Responsive design implies that the layout is responsive to devices of all sizes — not just your favorites. There’s an easy way to achieve that: create breakpoints based on your design and not on the arbitrary and unpredictable dimensions of devices.

To take one example, typographical measure (the length of each line of text) and type size are important aspects of responsive design. We can’t have perfect fluid typography, because if we simply reduce line lengths while holding text sizes steady across devices, we’ll end up with absurdly small measures and enormous text on smartphones or absurdly long measures with tiny text on desktop devices. Both are terrible for readability. We use breakpoints to resize the text and possibly the margins so that the result is readable line lengths across all screen sizes.

The correct way to do this is to decide on an appropriate type size and measure for mobile (if you’re designing mobile-first) and on larger devices change the text size and margins when the measure becomes too long (somewhere over about 70 characters). We add breakpoints when the design dictates we need them. We don’t care about the specifics of particular devices. We care about achieving the best combination of measure and type size across all devices. When new devices come along, we can relax because our responsive design is independent of particular devices.

A design-focused approach to breakpoints makes for more easily maintainable CSS and a better experience for users.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.