A presentation at Front End North in in Sheffield, UK by Rachel Andrew
The Evolution of Responsive Design RACHEL ANDREW AT FRONT END NORTH 2020
How do we support all these different screen sizes?
Fluid Grids https://alistapart.com/article/fluidgrids/
target ÷ context = result
Flexible Images https://alistapart.com/article/fluid-images/
max-width: 100%
Media Queries How big is this viewport?
Responsive Web Design • Calculating percentages for floated layouts • Squishing images • Leaning on Media Queries
column-count: 3
Flexbox responds to the content
display: flex
display: flex
Flexbox is one-dimensional
flex-wrap: wrap
flex: 0 0 32%
What does it mean to respond to content?
flex-basis: auto max-content
flex-basis: auto Space reduced from max-content until all boxes fit
We don’t have to line everything up. Sometimes what we need is just to make things fit nicely.
CSS Grid For when you do want to line everything up.
.grid { display: grid; grid-template-columns: repeat(12, 1fr); }
repeat(12, 1fr)
.grid { display: grid; grid-template-columns: repeat(12, minmax(auto, 1fr)); }
repeat(12, 1fr)
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
repeat(12, minmax(0,1fr))
Responding to content in a grid layout world
auto
grid-template-columns: repeat(3, auto)
justify-content: start
repeat(12, 1fr)
flex-basis: auto repeat(3, 1fr)
min-content, max-content, fit-content Directing content-based sizing
repeat(3, min-content)
repeat(3, max-content)
repeat(3, fit-content(400px)) max-content 400px
.media { display: grid; grid-template-columns: fit-content(300px) 1fr; gap: 20px; }
Flexible images More than just max-width: 100%
Responsive Images
Solving the janky images problem Mapping HTML attributes width and height to an aspect ratio.
It’s time to start using the width and height attributes on the <img> element again
Media Queries
column-width: 200px
flex-wrap: wrap
repeat(auto-fill, minmax(200px, 1fr)
The first rule of Media Queries is … Do I need a media query?
.wrapper { display: grid; grid-template-areas: “hd” “bd” “sd” “ft”; }
@media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: “hd hd” “bd sd” “ft ft”; } }
More than just screen size What else could we respond to?
What type of pointer do I have?
@media (pointer:coarse) { .pointer::before { content: “You have a coarse pointer”; } } @media (pointer:fine) { .pointer::before { content: “You have a fine pointer”; } }
Can I hover?
@media (hover) { .can-i-hover::after { content: “You look like you can hover.”; } } @media (hover:none) { .can-i-hover::after { content: “I don’t think you can hover.”; } }
@media (any-pointer:coarse) { .any-pointer::before { content: “One of your pointers is coarse. Yo ur device has a touchscreen, though you might not be using it.”; } }
“ Designing a page that relies on hovering or accurate pointing only because any-hover or anypointer indicate that at least one of the available input mechanisms has these capabilities is likely to result in a poor experience. Media Queries Level 4 https://drafts.csswg.org/mediaqueries-4/#any-input ”
Testing capabilities Check for screen size, but also pointer type and hover ability to understand the environment your site is being used in.
Overflow detection Display Quality Media Queries
@media (overflow-block: paged) { /* CSS for paged media */ }
Responding to the wishes of the visitor Media Queries Level 5 and User Preference Media Features
prefers-reduced-motion
@media (prefers-reduced-motion: reduce) { .animation { animation: none; } }
prefers-color-scheme
@media (prefers-color-scheme: dark) { body { background: #333; color: white; } }
prefers-reduced-data
@media (prefers-reduced-data: reduce) { /* CSS loading in smaller images */ }
Feature Queries What does this browser support?
@supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(3, 1fr); } }
What does it mean to do responsive design today?
Respond to content
Use new layout and image features
Use media features to enhance your site.
It’s not about screen size
Responding to needs and environment
Stop expecting people to fix something to use your website. Respond to meet them where they are.
Thank you! https://noti.st/rachelandrew
We typically understand responsive design as being fluid grids, flexible images and media queries - these being the elements detailed in Ethan Marcotte’s original A List Apart article on responsive web design.
Over the last few years however we have been handed a whole set of new tools in CSS which allow our sites to respond to the environment of our user, and the shape of the content we are displaying. In this talk I will take a look at how new layout supports flexible grids and content-based sizing. I’ll share how the new generation of Media Queries are about so much more than just viewport size, and how we can use the tools we have to really place the person using our site at the heart of the decisions we make.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
Here’s what was said about this presentation on social media.
