The Evolution of Responsive Design RACHEL ANDREW AT SMASHING MEETS JUNE 2020
Slide 1
Slide 2
The Evolution of Responsive Design RACHEL ANDREW AT SMASHING MEETS JUNE 2020
Slide 3
How do we support all these different screen sizes?
Slide 4
Slide 5
Fluid Grids https://alistapart.com/article/fluidgrids/
Slide 6
Slide 7
Slide 8
target ÷ context = result
Slide 9
Flexible Images https://alistapart.com/article/fluid-images/
Slide 10
max-width: 100%
Slide 11
Media Queries How big is this viewport?
Slide 12
Responsive Web Design • Calculating percentages for floated layouts • Squishing images • Leaning on Media Queries
Slide 13
column-count: 3
Slide 14
Flexbox responds to the content
Slide 15
display: flex
Slide 16
display: flex
Slide 17
Flexbox is one-dimensional
Slide 18
flex-wrap: wrap
Slide 19
flex: 0 0 32%
Slide 20
What does it mean to respond to content?
Slide 21
flex-basis: auto max-content
Slide 22
flex-basis: auto Space reduced from max-content until all boxes fit
Slide 23
We don’t have to line everything up. Sometimes what we need is just to make things fit nicely.
Slide 24
CSS Grid For when you do want to line everything up.
Slide 25
.grid { display: grid; grid-template-columns: repeat(12, 1fr); }
Slide 26
repeat(12, 1fr)
Slide 27
.grid { display: grid; grid-template-columns: repeat(12, minmax(auto, 1fr)); }
Slide 28
repeat(12, 1fr)
Slide 29
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
Slide 30
repeat(12, minmax(0,1fr))
Slide 31
Responding to content in a grid layout world
Slide 32
auto
Slide 33
grid-template-columns: repeat(3, auto)
Slide 34
justify-content: start
Slide 35
repeat(12, 1fr)
Slide 36
flex-basis: auto repeat(3, 1fr)
Slide 37
min-content, max-content, fitcontent Directing content-based sizing
Slide 38
repeat(3, min-content)
Slide 39
repeat(3, max-content)
Slide 40
repeat(3, fit-content(400px)) max-content 400px
Slide 41
.media { display: grid; grid-template-columns: fit-content(300px) 1fr; gap: 20px; }
Slide 42
Slide 43
Flexible images More than just max-width: 100%
Slide 44
Responsive Images
Slide 45
Solving the janky images problem Mapping HTML attributes width and height to an aspect ratio.
Slide 46
It’s time to start using the width and height attributes on the <img> element again
Slide 47
Slide 48
Media Queries
Slide 49
column-width: 200px
Slide 50
flex-wrap: wrap
Slide 51
repeat(auto-fill, minmax(200px, 1fr)
Slide 52
The first rule of Media Queries is … Do I need a media query?
Slide 53
.wrapper { display: grid; grid-template-areas: “hd” “bd” “sd” “ft”; }
Slide 54
Slide 55
@media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: “hd hd” “bd sd” “ft ft”; } }
Slide 56
Slide 57
More than just screen size What else could we respond to?
Slide 58
What type of pointer do I have?
Slide 59
@media (pointer:coarse) { .pointer::before { content: “You have a coarse pointer”; } } @media (pointer:fine) { .pointer::before { content: “You have a fine pointer”; } }
Slide 60
Can I hover?
Slide 61
@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.”; } }
Slide 62
@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.”; } }
Slide 63
Slide 64
“ Designing a page that relies on hovering or accurate pointing only because any-hover or any-pointer 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
Slide 65
Testing capabilities Check for screen size, but also pointer type and hover ability to understand the environment your site is being used in.
Slide 66
Overflow detection Display Quality Media Queries
Slide 67
@media (overflow-block: paged) { /* CSS for paged media */ }
Slide 68
Responding to the wishes of the visitor Media Queries Level 5 and User Preference Media Features
Slide 69
prefers-reduced-motion
Slide 70
@media (prefers-reduced-motion: reduce) { .animation { animation: none; } }
Slide 71
prefers-color-scheme
Slide 72
@media (prefers-color-scheme: dark) { body { background: #333; color: white; } }
Slide 73
prefers-reduced-data
Slide 74
@media (prefers-reduced-data: reduce) { /* CSS loading in smaller images */ }
Slide 75
Feature Queries What does this browser support?
Slide 76
@supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(3, 1fr); } }
Slide 77
What does it mean to do responsive design today?
Slide 78
Respond to content
Slide 79
Use new layout and image features
Slide 80
Use media features to enhance your site.
Slide 81
It’s not about screen size
Slide 82
Responding to needs and environment
Slide 83
Stop expecting people to fix something to use your website. Respond to meet them where they are.
Slide 84
Thank you! https://noti.st/rachelandrew
