Now and Next in Responsive Design

A presentation at Web Unleashed in October 2022 in by Rachel Andrew

Slide 1

Slide 1

Now and Next in Responsive Design RACHEL ANDREW AT WEB UNLEASHED, OCTOBER 2022

Slide 2

Slide 2

How do we support all these different screen sizes?

Slide 3

Slide 3

Slide 4

Slide 4

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

Slide 5

Slide 5

column-count: 3

Slide 6

Slide 6

Flexbox responds to the content

Slide 7

Slide 7

display: flex

Slide 8

Slide 8

display: flex

Slide 9

Slide 9

What does it mean to respond to content?

Slide 10

Slide 10

flex-basis: auto max-content

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

repeat(12, 1fr)

Slide 16

Slide 16

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

Slide 17

Slide 17

repeat(12, 1fr)

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

Responding to content in a grid layout world

Slide 21

Slide 21

auto

Slide 22

Slide 22

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

Slide 23

Slide 23

justify-content: start

Slide 24

Slide 24

repeat(12, 1fr)

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

repeat(3, min-content)

Slide 28

Slide 28

repeat(3, max-content)

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

Slide 32

Slide 32

Media Queries

Slide 33

Slide 33

column-width: 200px

Slide 34

Slide 34

flex-wrap: wrap

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

Slide 39

Slide 39

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

Slide 40

Slide 40

Slide 41

Slide 41

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

Slide 42

Slide 42

What type of pointer do I have?

Slide 43

Slide 43

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

Slide 44

Slide 44

Can I hover?

Slide 45

Slide 45

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

Slide 46

Testing capabilities Check for screen size, but also pointer type and hover ability to understand the environment your site is being used in.

Slide 47

Slide 47

Responding to the wishes of the visitor Media Queries Level 5 and User Preference Media Features

Slide 48

Slide 48

prefers-reduced-motion

Slide 49

Slide 49

@media (prefers-reduced-motion: reduce) { .animation { animation: none; } }

Slide 50

Slide 50

New syntax for range media queries

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

Container queries

Slide 54

Slide 54

.element { container-type: inline-size; }

Slide 55

Slide 55

.element { container-type: inline-size; container-name: sidebar; }

Slide 56

Slide 56

@container (min-width: 500px) { }

Slide 57

Slide 57

@container sidebar (min-width: 500px) { }

Slide 58

Slide 58

Slide 59

Slide 59

Subgrid

Slide 60

Slide 60

.child-grid { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Slide 61

Slide 61

.main-grid { display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(4, minmax(150px, auto)); } .child-grid { grid-column: 4 / 8; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Slide 62

Slide 62

Slide 63

Slide 63

Slide 64

Slide 64

Subgrid + container queries

Slide 65

Slide 65

@container my-grid (min-width: 600px) { .item { display: grid; grid-template-columns: subgrid; } }

Slide 66

Slide 66

Slide 67

Slide 67

Slide 68

Slide 68

:has()

Slide 69

Slide 69

li:has(h2) { }

Slide 70

Slide 70

@container (min-width: 500px) { .card:has(figure+.content) { display: grid; grid-template-columns: .8fr 1fr; gap: 10px; } }

Slide 71

Slide 71

Slide 72

Slide 72

What does it mean to do responsive design today?

Slide 73

Slide 73

Respond to content

Slide 74

Slide 74

Use new layout and image features

Slide 75

Slide 75

Use media features and container queries to enhance your layout.

Slide 76

Slide 76

It’s not just about screen, or even component, size

Slide 77

Slide 77

Responding to needs and environment

Slide 78

Slide 78

Don’t expect people to fix something to use your website. Respond to meet them where they are.

Slide 79

Slide 79

Thank you! https://noti.st/rachelandrew