Everything You Know About Web Design Just Changed

Slide 1

Everything You Know About Web Design Just Changed Jen Simmons An Event Apart Chicago August 2018

Slide 2

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

Slide 3

BEFORE RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 RESPONSIVE

Slide 4

2020 NOW 2015 2010 2005 2000 1995

Slide 5

Slide 6

We need more art. Real graphic design.

Slide 7

That’s not how the web works.

Slide 8

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

Slide 9

Simple HTML It ’s !e web!

Slide 10

2020 NOW 2015 2010 2005 2000 1995 HTML

Slide 11

Slide 12

LESSON LEARNE Flow

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

We n"d a#! Tables for Layout

Slide 18

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

Slide 19

1996

Slide 20

Creating Killer Websites David Siegel, 1996

Slide 21

“ Like the painters of Russia’s avant grade in the ‘20s, we felt like pirates. I received flaming threats from people who said I didn’t understand the Web, I was ruining the information… because I didn’t understand the power of the medium. I fired back with more pages. I made it clear we were not going to go away. If the Puritans wanted a fight, we would give it to them.” – David Siegal, 1996

Slide 22

Creating Killer Websites David Siegel, 1996

Slide 23

Creating Killer Websites David Siegel, 1996

Slide 24

Creating Killer Websites David Siegel, 1996

Slide 25

Slide 26

We n"d a#! Flash

Slide 27

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

Slide 28

2000

Slide 29

Flash Web Design Hillman Curtis, 2000

Slide 30

1984

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

CSS It ’s !e web!

Slide 36

2003

Slide 37

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

Slide 38

Designing with Web Standards Jeffrey Zeldman, 2003

Slide 39

LESSON LEARNE Semantic Markup

Slide 40

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

Slide 41

Absolute Positioning It ’s !e web!

Slide 42

1984

Slide 43

Slide 44

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

Slide 45

Fluid Layouts using Floats It ’s !e web!

Slide 46

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

Slide 47

Slide 48

Slide 49

LESSON LEARNE Fluid Columns

Slide 50

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

Slide 51

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

Slide 52

Slide 53

LESSON LEARNE Fixed-sized Content

Slide 54

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

Slide 55

Responsive Web Design It ’s !e web!

Slide 56

2010 Ethan Marcotte AEA 2010

Slide 57

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

Slide 58

Slide 59

LESSON LEARNE Fluid Images & Media Media Queries

Slide 60

2010 Ethan Marcotte AEA 2010

Slide 61

Responsive Web Design has been about so much more than layout.

Slide 62

One Web. No desktop v mobile web. There is no mobile context. Unknown / infinite sizes of screens. Design / develop Mobile first. Truncation is not a content strateg One content system to serve all. One design system to serve all. Responsive images. Performance.

Slide 63

Slide 64

Let’s do talk about layout.

Slide 65

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 66

Flow (with writing modes) CSS Grid Flexbox Multicolumn

Slide 67

Flexbox CSS Grid Flow Multicolumn

Slide 68

CSS Grid

Slide 69

Responsive Web Design *now more better.

Slide 70

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

Slide 71

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

Slide 72

Intrinsic Web Design

Slide 73

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

Slide 74

Slide 75

The new reality of Intrinsic Web Design

Slide 76

Contracting & Expanding Flexibility Viewport

Slide 77

Slide 78

Ways to Contract and Expand Space

Slide 79

Wrap & Reflow

Slide 80

Slide 81

Slide 82

Slide 83

Enlarge / Shrink

Slide 84

Slide 85

Slide 86

Slide 87

Add / Remove Whitespace

Slide 88

Slide 89

Slide 90

Slide 91

Slide / Overlap

Slide 92

Slide 93

Slide 94

Slide 95

Ways to Contract and Expand Space

Slide 96

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

Slide 97

YOUTUBE.COM/ LAYOUTLAND

Slide 98

Slide 99

New Possibilities for Flexibility

Slide 100

Images

Slide 101

Fixed Images

Slide 102

Slide 103

Fluid Images

Slide 104

Slide 105

Fluid, vertically

Slide 106

Slide 107

Set the width & height

Slide 108

Slide 109

Object Fit

Slide 110

object-fit: cover;

Slide 111

Slide 112

YOUTUBE.COM/ LAYOUTLAND

Slide 113

Fixed-size Fluid horizontally Fluid vertically Set width & height + Object Fit

Slide 114

Columns

Slide 115

Responsive Web Design everything shrinks and grows at the same rate

Slide 116

Slide 117

Slide 118

fixed % FR units minmax() auto

Slide 119

min-content sizing

Slide 120

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 121

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

Slide 122

CSS is awesome

Slide 123

CSS is awesome 1fr track

Slide 124

1fr = minmax(min-content, 1fr) can instead use minmax(0,1fr)

Slide 125

Slide 126

Slide 127

Slide 128

Slide 129

Slide 130

fixed % FR units minmax() auto

Slide 131

Rows

Slide 132

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

Slide 133

Slide 134

YOUTUBE.COM/ LAYOUTLAND

Slide 135

New Possibilities for Flexibility

Slide 136

Programming Flexibility Model

Slide 137

PAINTING

Slide 138

DIGITAL REPRESENTATIO N PRINTED ITEM

Slide 139

YO UR SUGGESTIO NS IN CSS BRO WSER, USER, CO NDITIO NS WEB PAGE

Slide 140

LAYO UT ALGO RITHM YO UR SUGGESTIO NS IN CSS BRO WSER, USER, CO NDITIO NS WEB PAGE

Slide 141

Programming Flexibility Model

Slide 142

Slide 143

Change in how we use the Viewport

Slide 144

Slide 145

Fluid abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefg hijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcd efghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyza bcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefg hijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcd efghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyza bcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghi jklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs

Slide 146

Fixed-width abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvw xyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu vwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqr stuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmno pqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijkl mnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcde fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzab cdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxy zabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuv wxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs tuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop qrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm nopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghij klmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef ghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabc defghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrs