Beyond Media Queries Overview

An overview of Michael Riethmuller's "Responsive Web Design: Beyond Media Queries" talk at SmashingConf 2018.

The Talk

Introduction

We use media queries all the time for responsive design. But at certain breakpoints, our layout starts having trouble maintaining visual balance or proper hierarchy such as long leading lines of text, too much negative space for an element, or an imbalance of proportions in our layout.

By using media queries, we force ourselves to think about our design in segments. Though unfortunately this means our layout looks good at the breakpoints we target, but weaker in viewport sizes in between them.

There are a number of additional ways we can approach responsive design such as: vw units, calc(), Flexbox, CSS grid, and CSS Custom Properties. All of which can be in combination with media queries can help us create a better responsive design.

This will enhance the visual "robustness" of our layout and maintain a balanced design throughout multiple viewport sizes. The talk goes over various techniques to accomplish this in number of ways.

Overview

Basic Fluid Typography

  • vw units + Flexbox can serve as a basis for more complex responsive designs.
  • Minor calc() fact: You can't do addition or subtraction operations with real numbers, but only with units. But you can use them for multiplication and division operations. You can also use parens for calc().
  • Minimum font-size for responsive type: calc(18px + 2vw);
  • You can use media queries to determine the breakpoint for the minimum font-size. Such as setting 2vw in a min-width query and setting the default size outside the query with 18px. Do the inverse of this for to set a max font-size.

The above methods of controlling the rate of scale is just the surface of fluid typography techniques. More can be done to create a less constrained designed at all viewport sizes.

Advanced Fluid Typography

Secret sauce responsive type technique with min-max size with no media queries for breakpoints:

  font-size: 
    calc( 12px + (24 - 12) * ( (100vw - 400px) / ( 800 - 400) ));

Note: In the example above, 12px is the minimum font-size and 24px is the maximum. 400px is the start of the viewport range and 800px is where it should stop scaling. The inclusion or absence of the units after each value is important. (Credit to Mike for this info.)

You can use the above technique on your heading tags h1, h2, h3... to have a strict control of the variance of font-size ratios depending on the viewport size. This means you can scale the proportions of each heading dynamically rather than linearly scaling them down as they are.

In laymen's terms: this means you reduce the scale for a font-size for h1 to be more close to a h5 on a smaller viewport.

Example of dynamic type propotions below:

In a mobile design context, this technique is great to use because of the lack of screen real estate that could be taken up by a h1 tag that is scaled directly down from it's desktop viewport size equivalent.

Additional Responsive Type Tricks
  • You can also use the previous-said technique on your <html>'sfont-size.
  • By doing so you can get instant responsive text whenever you use rem values in other places.
  • The ch CSS value type represents character width. It can be used on containers or bodies of text to make them only as wide as the number of characters defined. So 60ch would mean a container be as width a 60-character spaced widths.

Layout

  • Use the flex-grow: 9999 hack to force an item to take up maximum width in a flexbox list: http://joren.co/flex-grow-9999-hack/
  • Use <svg> for responsive image sets when you need to support earlier versions of IE in place of <picture> or the srcset attribute.
  • CSS Grids can end the dependency on media queries. Use 'em.

Custom Properties

CSS Custom Properties are like SASS variables but are dynamic, and can be changed on the fly with media queries: More can be read about them at: MDN - Custom Properties (--*) .

How to organize your CSS file with Custom Properties

Keep property definitions and media queries at the top of your file (above the fold). How you use any properties you've defined in the rest of the file is up to you.

Media queries can allow you to dynamically reassign Custom Properties to other values after a breakpoint. This effect is not like static variables, where such an action is only possible during the compilation phase of your styles.

Keep in mind that Custom Properties are not a replacement for static variables. Static variables are great for globally used property values like colors. Both can be used in tandem to better manage your styling and to utilize Custom Properties to their fullest potential with media queries.

More Resources & Credit

All credit to Mike and his great talk on this info. Check out Micheal's site where many of these findings can be delved into more, along with additional resources: https://www.madebymike.com.au/smashing-conf-2017/