The Evolution of Responsive Design

Slide 1

The Evolution of Responsive Design RACHEL ANDREW AT SMASHING MEETS JUNE 2020

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