Everything You Know About Web Design Just Changed

A presentation at View Source 2018 in October 2018 in London, UK by Jen Simmons

Slide 1

Slide 1

Everything You Know About Web Design Just Changed Jen Simmons View Source London October 2018

Slide 2

Slide 2

noti.st/jensimmons @jensimmons

Slide 3

Slide 3

Everything You Know About Web Design Just Changed & t u o y a L n g i s e D c i h p Gra Jen Simmons View Source London October 2018

Slide 4

Slide 4

2020 NOW 2015 2010 2005 2000 1995 THE WAY LAYOUT WORKS ON THE WEB

Slide 5

Slide 5

BEFORE RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

Slide 6

Slide 6

2020 NOW 2015 2010 2005 2000 1995

Slide 7

Slide 7

Slide 8

Slide 8

We need more art. Real graphic design.

Slide 9

Slide 9

That’s not how the web works.

Slide 10

Slide 10

2020 NOW 2015 2010 2005 2000 1995 Attempts to Solve Web Page Layout

Slide 11

Slide 11

Simple HTML It ’s !e web!

Slide 12

Slide 12

2020 NOW 2015 2010 2005 2000 1995 HTML

Slide 13

Slide 13

Slide 14

Slide 14

LESSON LEARNE Flow

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

We n"d a#! Tables for Layout

Slide 20

Slide 20

2020 NOW 2015 2010 2005 2000 1995 FLOW-ONLY HTML TABLES

Slide 21

Slide 21

Creating Killer Websites David Siegel, 1996

Slide 22

Slide 22

Creating Killer Websites David Siegel, 1996

Slide 23

Slide 23

Creating Killer Websites David Siegel, 1996

Slide 24

Slide 24

Slide 25

Slide 25

We n"d a#! Flash

Slide 26

Slide 26

2020 NOW 2015 2010 2005 2000 1995 FLOW-ONLY HTML TABLES FLASH

Slide 27

Slide 27

Flash Web Design Hillman Curtis, 2000

Slide 28

Slide 28

1984

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

The Web It ’s !e web!

Slide 34

Slide 34

CSS It ’s !e web!

Slide 35

Slide 35

HTML web standards for CSS HTML Table Layout code Designing with Web Standards Jeffrey Zeldman, 2003

Slide 36

Slide 36

Designing with Web Standards Jeffrey Zeldman, 2003

Slide 37

Slide 37

LESSON LEARNE Semantic Markup

Slide 38

Slide 38

LESSON LEARNE Separation of Concerns HTML = content + interface CSS = visual look & layout

Slide 39

Slide 39

Layout in CSS? It ’s !e web!

Slide 40

Slide 40

Absolute Positioning It ’s !e web!

Slide 41

Slide 41

1984

Slide 42

Slide 42

Slide 43

Slide 43

2020 NOW 2015 2010 2005 2000 1995 ABSPOS FLOW-ONLY HTML TABLES FLASH

Slide 44

Slide 44

Fluid Layouts using Floats It ’s !e web!

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

LESSON LEARNE Fluid Columns

Slide 48

Slide 48

Slide 49

Slide 49

2020 NOW 2015 2010 2005 2000 1995 ABSPOS FLOW-ONLY HTML TABLES FLASH FLUID

Slide 50

Slide 50

It ’s !e web! We n"d a#!

Slide 51

Slide 51

We n"d a#! Fixed-Width Layouts using Floats

Slide 52

Slide 52

Slide 53

Slide 53

2006-10

Slide 54

Slide 54

Slide 55

Slide 55

LESSON LEARNE Fixed-sized Content

Slide 56

Slide 56

FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID 2020 NOW 2015 2010 2005 2000 1995 FIXED

Slide 57

Slide 57

Responsive Web Design It ’s !e web!

Slide 58

Slide 58

2010 Ethan Marcotte AEA 2010

Slide 59

Slide 59

FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID FIXED ADAPTIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

Slide 60

Slide 60

Slide 61

Slide 61

LESSON LEARNE Fluid Images & Media Media Queries

Slide 62

Slide 62

Slide 63

Slide 63

drawing by Dave Ellis novolume.co.uk

Slide 64

Slide 64

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path Masking Shape-outside Initial-letter Flow Overflow Floats Block Inline Inline-block Display: table Margin Negative margins Padding Positioning & everything else in CSS

Slide 65

Slide 65

Flow (with writing modes) CSS Grid Flexbox Multicolumn

Slide 66

Slide 66

Flexbox CSS Grid Flow Multicolumn

Slide 67

Slide 67

CSS Grid

Slide 68

Slide 68

Responsive Web Design *now more better.

Slide 69

Slide 69

FLOW-ONLY ABSPOS HTML TABLES FLASH FLUID FIXED 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

Slide 70

Slide 70

It ’s !e web! We n"d a#!

Slide 71

Slide 71

Intrinsic Web Design

Slide 72

Slide 72

“ intrinsic : belonging to the essential nature or constitution of a thing .” — Merriam-Webster

Slide 73

Slide 73

The new reality of Intrinsic Web Design

Slide 74

Slide 74

Contracting & Expanding Flexibility Viewport

Slide 75

Slide 75

Slide 76

Slide 76

Ways to Contract and Expand Space

Slide 77

Slide 77

Wrap & Reflow

Slide 78

Slide 78

Slide 79

Slide 79

Slide 80

Slide 80

Slide 81

Slide 81

Enlarge / Shrink

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

Slide 86

Slide 86

Add / Remove Whitespace

Slide 87

Slide 87

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

Slide 91

Slide 91

Slide / Overlap

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

Slide 95

Slide 95

Ways to Contract and Expand Space

Slide 96

Slide 96

Wrap & Reflow Enlarge / Shrink Add / Remove Whitespace Slide / Overlap

Slide 97

Slide 97

YOUTUBE.COM/ LAYOUTLAND

Slide 98

Slide 98

Slide 99

Slide 99

  1. New Possibilities for Flexibility

Slide 100

Slide 100

Columns

Slide 101

Slide 101

Responsive Web Design everything shrinks and grows at the same rate

Slide 102

Slide 102

Slide 103

Slide 103

%

Slide 104

Slide 104

fixed min-content, max-content % FR units minmax() auto

Slide 105

Slide 105

FR units

Slide 106

Slide 106

min-content sizing

Slide 107

Slide 107

This is a sentence with words. wrapped content, shaped by container This is a sentence with words. max-content This is a sentence with words. min-content

Slide 108

Slide 108

This is a sentence with words. Set width in percent — 25% creates overflow

Slide 109

Slide 109

CSS is awesome

Slide 110

Slide 110

Slide 111

Slide 111

CSS is awesome 1fr track

Slide 112

Slide 112

Slide 113

Slide 113

Slide 114

Slide 114

Slide 115

Slide 115

Slide 116

Slide 116

Slide 117

Slide 117

fixed min-content, max-content % FR units minmax() auto

Slide 118

Slide 118

Rows

Slide 119

Slide 119

1fr 20% 2fr auto auto 1fr minmax(0, 40ch) 1fr

Slide 120

Slide 120

Slide 121

Slide 121

YOUTUBE.COM/ LAYOUTLAND

Slide 122

Slide 122

  1. New Possibilities for Flexibility

Slide 123

Slide 123

Slide 124

Slide 124

  1. Change in how we use the Viewport

Slide 125

Slide 125

Slide 126

Slide 126

Fluid Fixed Responsive ! d l o f o n !er e is

Slide 127

Slide 127

Intrinsic

Slide 128

Slide 128

vertical centering vertical viewport units grid rows

Slide 129

Slide 129

labs.jensimmons.com/2017/01-008.html

Slide 130

Slide 130

minmax(100px, 350px) auto auto 1fr 100vh 3fr

Slide 131

Slide 131

YOUTUBE.COM/ LAYOUTLAND

Slide 132

Slide 132

  1. Change in how we use the Viewport

Slide 133

Slide 133

Intrinsic Web Design

Slide 134

Slide 134

It ’s !e web! We n"d a#!

Slide 135

Slide 135

Slide 136

Slide 136

THE BIG WEB SHOW #176 ZELDMAN.COM

Slide 137

Slide 137

SHOP TALK SHOW #328

Slide 138

Slide 138

YOUTUBE.COM/ LAYOUTLAND SUBSCRIBE BY EMAIL AT LAYOUT.LAND

Slide 139

Slide 139

LABS.JENSIMMONS.COM

Slide 140

Slide 140

LABS.JENSIMMONS.COM

Slide 141

Slide 141

Slide 142

Slide 142

Thanks! JENSIMMONS.COM @JENSIMMONS LAYOUT.LAND LABS.JENSIMMONS.COM