Beyond Media Queries Overview
An overview of Michael Riethmuller's "Responsive Web Design: Beyond Media Queries" talk at SmashingConf 2018.
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:
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.
Basic Fluid Typography
vwunits + Flexbox can serve as a basis for more complex responsive designs.
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
font-sizefor responsive type:
calc(18px + 2vw);
- You can use media queries to determine the breakpoint for the minimum
font-size. Such as setting
min-widthquery and setting the default size outside the query with
18px. Do the inverse of this for to set a max
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,
12pxis the minimum
24pxis the maximum.
400pxis the start of the viewport range and
800pxis 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
- By doing so you can get instant responsive text whenever you use
remvalues in other places.
chCSS 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
60chwould mean a container be as width a 60-character spaced widths.
- Use the
flex-grow: 9999hack to force an item to take up maximum width in a flexbox list: http://joren.co/flex-grow-9999-hack/
<svg>for responsive image sets when you need to support earlier versions of IE in place of
- CSS Grids can end the dependency on media queries. Use 'em.
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/