Tweet
Tweet

Slide 1

Slide 1 text

The WEIGHT of the WEB DAVID DEMAREE WEB DIRECTIONS S OU TH 20 1 3 Friday, October 25, 13

Slide 2

Slide 2 text

The web as A PHYSICAL MEDIUM Friday, October 25, 13

Slide 3

Slide 3 text

The web as A PHYSICAL MEDIUM and what we can do about it Friday, October 25, 13

Slide 4

Slide 4 text

INFORMATION The spread of Friday, October 25, 13

Slide 5

Slide 5 text

INFORMATION must overcome PHYSICAL CONSTRAINTS The spread of Friday, October 25, 13

Slide 6

Slide 6 text

Friday, October 25, 13

Slide 7

Slide 7 text

Friday, October 25, 13

Slide 8

Slide 8 text

INFORMATIONALLY RICH but not at all portable LECTERN BIBLE Friday, October 25, 13

Slide 9

Slide 9 text

GIDEON BIBLE Not a beautiful object, but PORTABLE AND UBIQUITOUS INFORMATIONALLY RICH but not at all portable LECTERN BIBLE Friday, October 25, 13

Slide 10

Slide 10 text

FIDELITY High information density, at the expense of portability REACH Less informationally rich media optimized for wide distribution Friday, October 25, 13

Slide 11

Slide 11 text

Progression of printing technology Movable type Only text Printing press Text + illustration Lithography B&W photo Offset Color Digital Cheap, easy color Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite GREGOR SAMSA then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him Friday, October 25, 13

Slide 12

Slide 12 text

Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite GREGOR SAMSA then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him The photographic turn Once a printing process can reproduce a photograph, everything is effectively a photograph Friday, October 25, 13

Slide 13

Slide 13 text

Friday, October 25, 13

Slide 14

Slide 14 text

The September issue of U.S. Vogue Friday, October 25, 13

Slide 15

Slide 15 text

The September issue of U.S. Vogue SEPTEMBER 2012 Print edition weighs 4.5 lbs (2 kg) 650 pages (71%) are advertisements Friday, October 25, 13

Slide 16

Slide 16 text

The September issue of U.S. Vogue SEPTEMBER 2013 Print edition weighs 3.75 lbs (1.7 kg) 662 pages (73%) are advertisements Friday, October 25, 13

Slide 17

Slide 17 text

Friday, October 25, 13

Slide 18

Slide 18 text

Friday, October 25, 13

Slide 19

Slide 19 text

Friday, October 25, 13

Slide 20

Slide 20 text

Friday, October 25, 13

Slide 21

Slide 21 text

1090px 32px 240px × 240px 240px × 240px 240px × 240px 240px × 240px 30 30 30 30 30 30 30 Web pages have DIMENSIONS Friday, October 25, 13

Slide 22

Slide 22 text

Friday, October 25, 13

Slide 23

Slide 23 text

Web pages have WEIGHT 62.96 KB 88.66 KB 66.01 KB 105.48 KB 90.53 KB 48.05 KB 71.05 KB 71.92 KB Typekit 146.44 KB Site CSS 3.09 KB Site JS 117.13 KB HTML document 3.92 KB Friday, October 25, 13

Slide 24

Slide 24 text

Web pages have WEIGHT 62.96 KB 88.66 KB 66.01 KB 105.48 KB 90.53 KB 48.05 KB 71.05 KB 71.92 KB Typekit 146.44 KB Site CSS 3.09 KB Site JS 117.13 KB HTML document 3.92 KB Friday, October 25, 13

Slide 25

Slide 25 text

Friday, October 25, 13

Slide 26

Slide 26 text

They’re CARRIED over networks that have BANDWIDTH Friday, October 25, 13

Slide 27

Slide 27 text

Friday, October 25, 13

Slide 28

Slide 28 text

The web is A PHYSICAL MEDIUM so why don’t we treat it like one? Friday, October 25, 13

Slide 29

Slide 29 text

The web’s physical context Friday, October 25, 13

Slide 30

Slide 30 text

The web’s physical context Friday, October 25, 13

Slide 31

Slide 31 text

1024×768px or larger Around 110 ppi Millions of colors The web’s physical context Friday, October 25, 13

Slide 32

Slide 32 text

1024×768px or larger Around 110 ppi Millions of colors The web’s physical context Keyboard/mouse interaction Friday, October 25, 13

Slide 33

Slide 33 text

1024×768px or larger Around 110 ppi Millions of colors The web’s physical context Desktop-class hardware Keyboard/mouse interaction Friday, October 25, 13

Slide 34

Slide 34 text

1024×768px or larger Around 110 ppi Millions of colors Broadband internet 2 mbps/sec or greater The web’s physical context Desktop-class hardware Keyboard/mouse interaction Friday, October 25, 13

Slide 35

Slide 35 text

Progression of web technology HTML 1.0 Only text + hyperlinks Netscape Era Images, tables, The photographic turn Image maps / Flash Web standards Same stuff, better code Friday, October 25, 13

Slide 36

Slide 36 text

vogue.com Web design conventions informed by print Use of images for type + wayfinding Fixed page width/grid @ 960px Friday, October 25, 13

Slide 37

Slide 37 text

vogue.com Web design conventions informed by print Use of images for type + wayfinding Fixed page width/grid @ 960px Friday, October 25, 13

Slide 38

Slide 38 text

vogue.com Web design conventions informed by print Friday, October 25, 13

Slide 39

Slide 39 text

Friday, October 25, 13

Slide 40

Slide 40 text

Friday, October 25, 13

Slide 41

Slide 41 text

Enter the POST-PC WEB Friday, October 25, 13

Slide 42

Slide 42 text

Friday, October 25, 13

Slide 43

Slide 43 text

Users are consuming web content on NEW SCREENS Friday, October 25, 13

Slide 44

Slide 44 text

Users are consuming web content on NEW SCREENS Desktop PCs Notebooks Smartphones 10-inch tablets Friday, October 25, 13

Slide 45

Slide 45 text

Users are consuming web content on NEW SCREENS Desktop PCs Notebooks Smartphones 10-inch tablets E-book readers 7-inch tablets “Phablets” “Convertibles” Friday, October 25, 13

Slide 46

Slide 46 text

Users are consuming web content on NEW SCREENS Desktop PCs Notebooks Smartphones 10-inch tablets E-book readers 7-inch tablets “Phablets” “Convertibles” Smart TVs Gaming consoles Google Glass Smartwatches Friday, October 25, 13

Slide 47

Slide 47 text

Hi-DPI displays Friday, October 25, 13

Slide 48

Slide 48 text

Friday, October 25, 13

Slide 49

Slide 49 text

Standard rendering @ 1:1 scale Hi-DPI screens show existing artwork Friday, October 25, 13

Slide 50

Slide 50 text

Retina rendering @ 2:1 scale Standard rendering @ 1:1 scale Hi-DPI screens show existing artwork and ALL ITS FLAWS Friday, October 25, 13

Slide 51

Slide 51 text

Sample photo @ 1x 1280×486 = 193 KB Sample photo @ 2x 2560×972 = 602 KB Friday, October 25, 13

Slide 52

Slide 52 text

Mumbai, India Somewhere in rural Kenya Wireless networks Friday, October 25, 13

Slide 53

Slide 53 text

Friday, October 25, 13

Slide 54

Slide 54 text

MORE pixels MORE devices MORE places Friday, October 25, 13

Slide 55

Slide 55 text

MORE pixels MORE devices MORE places SLOWER networks HARDER to develop HIGHER cost Friday, October 25, 13

Slide 56

Slide 56 text

Friday, October 25, 13

Slide 57

Slide 57 text

The web is A PHYSICAL MEDIUM so what do we do about it? Friday, October 25, 13

Slide 58

Slide 58 text

The wrong thing Friday, October 25, 13

Slide 59

Slide 59 text

Web pages are SOFTWARE, not printed work Friday, October 25, 13

Slide 60

Slide 60 text

What we deliver is not the rendered work, but INSTRUCTIONS for rendering the work Friday, October 25, 13

Slide 61

Slide 61 text

We can build the web of the future by giving devices BETTER INSTRUCTIONS Friday, October 25, 13

Slide 62

Slide 62 text

Friday, October 25, 13

Slide 63

Slide 63 text

SCALABLE graphics RESPONSIVE web design ADAPTIVE content ITERATIVE workflows Friday, October 25, 13

Slide 64

Slide 64 text

Use resolution-independent assets for type, decoration, and wayfinding SCALABLE graphics Friday, October 25, 13

Slide 65

Slide 65 text

Friday, October 25, 13

Slide 66

Slide 66 text

Friday, October 25, 13

Slide 67

Slide 67 text

Friday, October 25, 13

Slide 68

Slide 68 text

Friday, October 25, 13

Slide 69

Slide 69 text

Friday, October 25, 13

Slide 70

Slide 70 text

Friday, October 25, 13

Slide 71

Slide 71 text

Adapt to different screen sizes R E S P O N S I V E W E B D E S I G N Friday, October 25, 13

Slide 72

Slide 72 text

Adapt to different screen sizes R E S P O N S I V E W E B D E S I G N http://choiseul.info/ Friday, October 25, 13

Slide 73

Slide 73 text

Responsive images R E S P O N S I V E W E B D E S I G N Friday, October 25, 13

Slide 74

Slide 74 text

Responsive images R E S P O N S I V E W E B D E S I G N Friday, October 25, 13

Slide 75

Slide 75 text

Responsive typography R E S P O N S I V E W E B D E S I G N Adobe Source Sans Pro Light @1x @2x Friday, October 25, 13

Slide 76

Slide 76 text

http://j.mp/hidpitype Adaptation for screen density R E S P O N S I V E W E B D E S I G N Friday, October 25, 13

Slide 77

Slide 77 text

ADAPTIVE content Friday, October 25, 13

Slide 78

Slide 78 text

Desktop Mobile Plan content appropriate for different kinds of reading Friday, October 25, 13

Slide 79

Slide 79 text

http://j.mp/mcgranebook Friday, October 25, 13

Slide 80

Slide 80 text

Designing for use requires ITERATION Prototype/Build Test Repeat Friday, October 25, 13

Slide 81

Slide 81 text

Use frontend frameworks for prototypes P R O T O T Y P I N G j.mp/respproto Friday, October 25, 13

Slide 82

Slide 82 text

BrowserStack T E S T I N G browserstack.com/responsive Friday, October 25, 13

Slide 83

Slide 83 text

Test your designs on real devices T E S T I N G Friday, October 25, 13

Slide 84

Slide 84 text

Friday, October 25, 13

Slide 85

Slide 85 text

The web is A PHYSICAL MEDIUM and the future is really exciting Friday, October 25, 13

Slide 86

Slide 86 text

Friday, October 25, 13

Slide 87

Slide 87 text

By embracing the web’s DIGITAL nature we can overcome its PHYSICAL constraints and spread INFORMATION EVERYWHERE Friday, October 25, 13

Slide 88

Slide 88 text

Thank you. @ddemaree [email protected] typekit.com Friday, October 25, 13