The Evolution of Responsive Design

Slide 1

The Evolution of Responsive Design RACHEL ANDREW AT FRONT END NORTH 2020

Slide 2

How do we support all these different screen sizes?

Slide 3

Slide 4

Fluid Grids https://alistapart.com/article/fluidgrids/

Slide 5

Slide 6

Slide 7

target ÷ context = result

Slide 8

Flexible Images https://alistapart.com/article/fluid-images/

Slide 9

max-width: 100%

Slide 10

Media Queries How big is this viewport?

Slide 11

Responsive Web Design • Calculating percentages for floated layouts • Squishing images • Leaning on Media Queries

Slide 12

column-count: 3

Slide 13

Flexbox responds to the content

Slide 14

display: flex

Slide 15

display: flex

Slide 16

Flexbox is one-dimensional

Slide 17

flex-wrap: wrap

Slide 18

flex: 0 0 32%

Slide 19

What does it mean to respond to content?

Slide 20

flex-basis: auto max-content

Slide 21

flex-basis: auto Space reduced from max-content until all boxes fit

Slide 22

We don’t have to line everything up. Sometimes what we need is just to make things fit nicely.

Slide 23

CSS Grid For when you do want to line everything up.

Slide 24

.grid { display: grid; grid-template-columns: repeat(12, 1fr); }

Slide 25

repeat(12, 1fr)

Slide 26

.grid { display: grid; grid-template-columns: repeat(12, minmax(auto, 1fr)); }

Slide 27

repeat(12, 1fr)

Slide 28

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }

Slide 29

repeat(12, minmax(0,1fr))

Slide 30

Responding to content in a grid layout world

Slide 31

auto

Slide 32

grid-template-columns: repeat(3, auto)

Slide 33

justify-content: start

Slide 34

repeat(12, 1fr)

Slide 35

flex-basis: auto repeat(3, 1fr)

Slide 36

min-content, max-content, fit-content Directing content-based sizing

Slide 37

repeat(3, min-content)

Slide 38

repeat(3, max-content)

Slide 39

repeat(3, fit-content(400px)) max-content 400px

Slide 40

.media { display: grid; grid-template-columns: fit-content(300px) 1fr; gap: 20px; }

Slide 41

Slide 42

Flexible images More than just max-width: 100%

Slide 43

Responsive Images

Slide 44

Solving the janky images problem Mapping HTML attributes width and height to an aspect ratio.

Slide 45

It’s time to start using the width and height attributes on the <img> element again

Slide 46

Slide 47

Media Queries

Slide 48

column-width: 200px

Slide 49

flex-wrap: wrap

Slide 50

repeat(auto-fill, minmax(200px, 1fr)

Slide 51

The first rule of Media Queries is … Do I need a media query?

Slide 52

.wrapper { display: grid; grid-template-areas: “hd” “bd” “sd” “ft”; }

Slide 53

Slide 54

@media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: “hd hd” “bd sd” “ft ft”; } }

Slide 55

Slide 56

More than just screen size What else could we respond to?

Slide 57

What type of pointer do I have?

Slide 58

@media (pointer:coarse) { .pointer::before { content: “You have a coarse pointer”; } } @media (pointer:fine) { .pointer::before { content: “You have a fine pointer”; } }

Slide 59

Can I hover?

Slide 60

@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 61

@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 62

Slide 63

“ 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 ”