f w h

Stop Setting Breakpoints

Ever since Ethan Marcotte’s amazing article on ALA way back in 2010, web developers have been leveraging media queries to ensure frontend designs are usable across devices. In general, that means setting breakpoints with new styles for each device size. This new idea lurched web interface design forward, and the idea of responsive web design has become not only ubitquitous, but standard. Most web design/development courses include the concept as part of their curriculum.

What web developer hasn’t played with the width of their browser window, resizing until it breaks, and then setting a breakpoint at that width. Lather, rinse, repeat until the design works cross-browser. I am a firm believer in the concept that if it works, it’s not wrong. However, I think there’s a better way.

Viewport Units

Support for viewport units in CSS is rather high. The vh and vw units are almost universally usable. I would say for almost all projects, they’re safe to use. Support for vmax and vmin isn’t quite as good, and that’s the only reason I even discuss continued use of media queries at all in this article. Put another way, once vmin and vmax support widens, media queries can become almost unnecessary.

The Only Media Query You’ll Ever Need

I present to you the only media query you’ll ever need: orientation. The team up of viewport units and the orientation query can’t solve every design problem, but it can come pretty close.

Consider this scenario: You are working on a design in-browser. It has three blocks arranged horizontally. In landscape, which is the orientation most desktop users are going to be using, The blocks fit well, and their content is easily readable. However, below 600px width, the content overflows the box, causing the last box to drop to the next line. Normally in a situation like this, because the font-size is set using em, rem or some other either relative or static sizing, you would likely set a breakpoint at 600px width, then adjust the font size.

See the Pen wpjdGN by Ronald Roe (@ronaldroe) on CodePen.

This is where viewport units come in. Instead of using the relative or static units like normal, set the font-size based on the width of the viewport. For most paragraph text, I find 2 – 3vw works well, but use whatever works for your design.

With the vw units set, the content will no longer overflow the box as the size shrinks. In most cases, the breakpoint becomes unnecessary. Next, in our imaginary scenario, we try the design in portrait orientation on a phone and find that the boxes are small and the text is too small to read. What happened? Since the text size is based on the viewport’s width, and the width is much smaller than the height, the text looks tiny.

That’s where our orientation media query comes in. Setting @media (orientation: portrait) will trigger when the height of the viewport is greater than the width. Now, inside the query, reset the font size to use vh units. In general, using the same number as the vw value will maintain a similar if not consistent look. Additionally, most scenarios with floated boxes will look better if the float is removed (set to none) in portrait.

See the Pen baMWRP by Ronald Roe (@ronaldroe) on CodePen.

There will be cases where breakpoints are still necessary. However, this method should reduce the need considerably. I’ve used this method in all of my current and some of my recent past projects, and am having a lot of success with it. For my current project, a frontend for Shape Fitness, You will not find a single breakpoint in the CSS.

Let me know on Twitter what you think.