Slide 1

Slide 1 text

Practical Responsive Web Design Northeast PHP 2013 Jonathan Klein, Performance Engineer @jonathanklein Sunday, August 18, 13

Slide 2

Slide 2 text

Slides, Links jkle.in/rwd Sunday, August 18, 13

Slide 3

Slide 3 text

Some Etsy Stats Sunday, August 18, 13

Slide 4

Slide 4 text

Some Etsy Stats • Handmade marketplace Sunday, August 18, 13

Slide 5

Slide 5 text

Some Etsy Stats • Handmade marketplace • 1.5 billion page views/month Sunday, August 18, 13

Slide 6

Slide 6 text

Some Etsy Stats • Handmade marketplace • 1.5 billion page views/month • Almost $1B in sales last year Sunday, August 18, 13

Slide 7

Slide 7 text

Some Etsy Stats • Handmade marketplace • 1.5 billion page views/month • Almost $1B in sales last year • ~1M lines of PHP Sunday, August 18, 13

Slide 8

Slide 8 text

Why Responsive Web Design? Sunday, August 18, 13

Slide 9

Slide 9 text

Main Advantages Sunday, August 18, 13

Slide 10

Slide 10 text

Main Advantages • Maintainability Sunday, August 18, 13

Slide 11

Slide 11 text

Main Advantages • Maintainability • SEO Sunday, August 18, 13

Slide 12

Slide 12 text

Main Advantages • Maintainability • SEO • User Experience Sunday, August 18, 13

Slide 13

Slide 13 text

Main Advantages • Maintainability • SEO • User Experience • Performance Sunday, August 18, 13

Slide 14

Slide 14 text

1.6 seconds Sunday, August 18, 13

Slide 15

Slide 15 text

Two Assertions Sunday, August 18, 13

Slide 16

Slide 16 text

1. RWD isn’t that hard Sunday, August 18, 13

Slide 17

Slide 17 text

2. RWD can be fast Sunday, August 18, 13

Slide 18

Slide 18 text

The Basics Sunday, August 18, 13

Slide 19

Slide 19 text

Building blocks of RWD /* Greater than 900px wide */ @media screen and (min-width: 56.25em) {...} /* Retina Display */ @media screen and (min-device-pixel-ratio: 2) {...} /* You can chain these */ @media screen and (min-width: 56.25em) and (min- device-pixel-ratio: 2) {...} Sunday, August 18, 13

Slide 20

Slide 20 text

Building blocks of RWD /* Greater than 900px wide */ @media screen and (min-width: 56.25em) {...} /* Retina Display */ @media screen and (min-device-pixel-ratio: 2) {...} /* You can chain these */ @media screen and (min-width: 56.25em) and (min- device-pixel-ratio: 2) {...} Sunday, August 18, 13

Slide 21

Slide 21 text

Sunday, August 18, 13

Slide 22

Slide 22 text

Breakpoints Sunday, August 18, 13

Slide 23

Slide 23 text

Sunday, August 18, 13

Slide 24

Slide 24 text

What Breakpoints to Use? Sunday, August 18, 13

Slide 25

Slide 25 text

What Breakpoints to Use? • Don’t think about devices Sunday, August 18, 13

Slide 26

Slide 26 text

What Breakpoints to Use? • Don’t think about devices • “Make it look good” Sunday, August 18, 13

Slide 27

Slide 27 text

What Breakpoints to Use? • Don’t think about devices • “Make it look good” • Something like 600px, 900px, max Sunday, August 18, 13

Slide 28

Slide 28 text

What Breakpoints to Use? • Don’t think about devices • “Make it look good” • Something like 600px, 900px, max • Divide by 16 to get em’s Sunday, August 18, 13

Slide 29

Slide 29 text

Retina Images Sunday, August 18, 13

Slide 30

Slide 30 text

Start With the Normal Version /* Small version of the logo */ .logo { background-image: url(logo_sm.png); background-repeat: no-repeat; background-position: center; background-size: 230px 50px; } Sunday, August 18, 13

Slide 31

Slide 31 text

Start With the Normal Version /* Small version of the logo */ .logo { background-image: url(logo_sm.png); background-repeat: no-repeat; background-position: center; background-size: 230px 50px; } Sunday, August 18, 13

Slide 32

Slide 32 text

High Res Screens /* Provide a hi-res logo for retina screens */ @media screen and (-webkit-min-device-pixel-ratio: 2) { .logo { background-image: url(logo_lg.png); } } Sunday, August 18, 13

Slide 33

Slide 33 text

High Res Screens /* Provide a hi-res logo for retina screens */ @media screen and (-webkit-min-device-pixel-ratio: 2) { .logo { background-image: url(logo_lg.png); } } Sunday, August 18, 13

Slide 34

Slide 34 text

RWD In Action Sunday, August 18, 13

Slide 35

Slide 35 text

Sunday, August 18, 13

Slide 36

Slide 36 text

Sunday, August 18, 13

Slide 37

Slide 37 text

Clean up some CSS .article { width: 31%; min-width:250px; } #content .wrapper { width:auto; } #page { background:none; } Sunday, August 18, 13

Slide 38

Slide 38 text

Make it Responsive /* Two articles across */ @media screen and (max-width: 850px) { .article { width: 46%; } } /* One article across */ @media screen and (max-width: 530px) { .article { width: 90%; } } Sunday, August 18, 13

Slide 39

Slide 39 text

Sunday, August 18, 13

Slide 40

Slide 40 text

Demo Sunday, August 18, 13

Slide 41

Slide 41 text

Performance Sunday, August 18, 13

Slide 42

Slide 42 text

A Few Considerations Sunday, August 18, 13

Slide 43

Slide 43 text

A Few Considerations • Extra CSS (minimal) Sunday, August 18, 13

Slide 44

Slide 44 text

A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) Sunday, August 18, 13

Slide 45

Slide 45 text

A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) • Larger images than needed Sunday, August 18, 13

Slide 46

Slide 46 text

A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13

Slide 47

Slide 47 text

A Few Considerations • Extra CSS (minimal) • Retina Images (ouch) • Larger images than needed • Extra Image Requests Sunday, August 18, 13

Slide 48

Slide 48 text

Responsive Images Sunday, August 18, 13

Slide 49

Slide 49 text

Three Performance Goals: Sunday, August 18, 13

Slide 50

Slide 50 text

Three Performance Goals: 1. Start with a small image Sunday, August 18, 13

Slide 51

Slide 51 text

Three Performance Goals: 1. Start with a small image 2. Upgrade to larger size without downloading both Sunday, August 18, 13

Slide 52

Slide 52 text

Three Performance Goals: 1. Start with a small image 2. Upgrade to larger size without downloading both 3. Unique image URLs (caching) Sunday, August 18, 13

Slide 53

Slide 53 text

Automate Sunday, August 18, 13

Slide 54

Slide 54 text

Resize on the fly Sunday, August 18, 13

Slide 55

Slide 55 text

Resize on the fly • Based on browser resolution, make the right image Sunday, August 18, 13

Slide 56

Slide 56 text

Resize on the fly • Based on browser resolution, make the right image • Round a bit Sunday, August 18, 13

Slide 57

Slide 57 text

Resize on the fly • Based on browser resolution, make the right image • Round a bit • http://adaptive-images.com Sunday, August 18, 13

Slide 58

Slide 58 text

Lossless Compression Sunday, August 18, 13

Slide 59

Slide 59 text

Lossless Compression Sunday, August 18, 13

Slide 60

Slide 60 text

140 KB Lossless Compression Sunday, August 18, 13

Slide 61

Slide 61 text

140 KB 85 KB Lossless Compression Sunday, August 18, 13

Slide 62

Slide 62 text

140 KB 85 KB Lossless Compression • http://www.smushit.com/ysmush.it/ • https://developers.google.com/speed/pagespeed/ Sunday, August 18, 13

Slide 63

Slide 63 text

• Automate HTML output • Plan for the future More Automation Sunday, August 18, 13

Slide 64

Slide 64 text

HTML Output (picturefill) Sunday, August 18, 13

Slide 65

Slide 65 text

HTML Output (picturefill) • https://github.com/scottjehl/picturefill Sunday, August 18, 13

Slide 66

Slide 66 text

HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed element Sunday, August 18, 13

Slide 67

Slide 67 text

HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed element • < 0.5K JS file Sunday, August 18, 13

Slide 68

Slide 68 text

HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed element • < 0.5K JS file • Supports all media queries Sunday, August 18, 13

Slide 69

Slide 69 text

HTML Output (picturefill) • https://github.com/scottjehl/picturefill • Mimics proposed element • < 0.5K JS file • Supports all media queries • Works across all browsers Sunday, August 18, 13

Slide 70

Slide 70 text

Interesting Image Alt Text
Sunday, August 18, 13

Slide 71

Slide 71 text

Interesting Image Alt Text
IE 6, 7, 8 get this Sunday, August 18, 13

Slide 72

Slide 72 text

How does it do? Sunday, August 18, 13

Slide 73

Slide 73 text

How does it do? ✓ Unique image URLs Sunday, August 18, 13

Slide 74

Slide 74 text

How does it do? ✓ Unique image URLs ✓ Start with smallest image Sunday, August 18, 13

Slide 75

Slide 75 text

How does it do? ✓ Unique image URLs ✓ Start with smallest image ✓ Only one image download Sunday, August 18, 13

Slide 76

Slide 76 text

How does it do? ✓ Unique image URLs ✓ Start with smallest image ✓ Only one image download ✓ Fallback for old IE Sunday, August 18, 13

Slide 77

Slide 77 text

But that markup... Sunday, August 18, 13

Slide 78

Slide 78 text

Plan to Replace Whatever You Build Sunday, August 18, 13

Slide 79

Slide 79 text

Resources for Responsive Imgs Jason Grigsby: http://blog.cloudfour.com/responsive-imgs/ http://blog.cloudfour.com/responsive-imgs-part-2/ http://blog.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/ http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/ http://blog.cloudfour.com/sensible-jumps-in-responsive-image-file-sizes/ Sunday, August 18, 13

Slide 80

Slide 80 text

Don’t type, click: jkle.in/rwd Sunday, August 18, 13

Slide 81

Slide 81 text

Clown Car Technique Sunday, August 18, 13

Slide 82

Slide 82 text

Basics Sunday, August 18, 13

Slide 83

Slide 83 text

Basics • tag Sunday, August 18, 13

Slide 84

Slide 84 text

Basics • tag • References SVG file Sunday, August 18, 13

Slide 85

Slide 85 text

Basics • tag • References SVG file • ...as a DataURI Sunday, August 18, 13

Slide 86

Slide 86 text

Basics • tag • References SVG file • ...as a DataURI • ...URL encoded Sunday, August 18, 13

Slide 87

Slide 87 text

Basics • tag • References SVG file • ...as a DataURI • ...URL encoded • Wrapping conditional comment Sunday, August 18, 13

Slide 88

Slide 88 text

Clowns and Cars Sunday, August 18, 13

Slide 89

Slide 89 text

Benefits Sunday, August 18, 13

Slide 90

Slide 90 text

Benefits • All logic in an SVG file Sunday, August 18, 13

Slide 91

Slide 91 text

Benefits • All logic in an SVG file • One HTTP request Sunday, August 18, 13

Slide 92

Slide 92 text

Benefits • All logic in an SVG file • One HTTP request • Management is easy Sunday, August 18, 13

Slide 93

Slide 93 text

Benefits • All logic in an SVG file • One HTTP request • Management is easy • Adapts to browser size automatically Sunday, August 18, 13

Slide 94

Slide 94 text

Drawbacks Sunday, August 18, 13

Slide 95

Slide 95 text

Drawbacks • Accessibility Sunday, August 18, 13

Slide 96

Slide 96 text

Drawbacks • Accessibility • No right-click Sunday, August 18, 13

Slide 97

Slide 97 text

Drawbacks • Accessibility • No right-click • Doesn’t work on Android <= 2.3 Sunday, August 18, 13

Slide 98

Slide 98 text

We Need Something Better Sunday, August 18, 13

Slide 99

Slide 99 text

display:none Sunday, August 18, 13

Slide 100

Slide 100 text

Sunday, August 18, 13

Slide 101

Slide 101 text

Image is Downloaded Sunday, August 18, 13

Slide 102

Slide 102 text

Sunday, August 18, 13

Slide 103

Slide 103 text

Image is Downloaded Sunday, August 18, 13

Slide 104

Slide 104 text

.bg { background-image: url(foo.png); width:100px; height: 100px; display: none; }
Sunday, August 18, 13

Slide 105

Slide 105 text

.bg { background-image: url(foo.png); width:100px; height: 100px; display: none; }
Image is Downloaded Sunday, August 18, 13

Slide 106

Slide 106 text

.bg { background-image: url(foo.png); width:100px; height: 100px; display: none; }
Sunday, August 18, 13

Slide 107

Slide 107 text

.bg { background-image: url(foo.png); width:100px; height: 100px; display: none; }
Image is NOT Downloaded Sunday, August 18, 13

Slide 108

Slide 108 text

with display:none Downloaded with parent display:none Downloaded background image with display:none Downloaded background image with parent display:none Not Downloaded Sunday, August 18, 13

Slide 109

Slide 109 text

Workarounds Sunday, August 18, 13

Slide 110

Slide 110 text

Handling display:none Sunday, August 18, 13

Slide 111

Slide 111 text

Handling display:none • Start with an empty src, use JS Sunday, August 18, 13

Slide 112

Slide 112 text

Handling display:none • Start with an empty src, use JS • Server side detection Sunday, August 18, 13

Slide 113

Slide 113 text

Handling display:none • Start with an empty src, use JS • Server side detection • Lots more: http://timkadlec.com/ 2012/04/media-query-asset- downloading-results/ Sunday, August 18, 13

Slide 114

Slide 114 text

Media Query Browser Support Sunday, August 18, 13

Slide 115

Slide 115 text

Sunday, August 18, 13

Slide 116

Slide 116 text

Fail Sunday, August 18, 13

Slide 117

Slide 117 text

Handle IE Conditional Comments http://adactio.com/journal/4494/ More: http://buildmobile.com/understanding-responsive-web- design-cross-browser-compatibility/ Sunday, August 18, 13

Slide 118

Slide 118 text

The Future: Client Hints Sunday, August 18, 13

Slide 119

Slide 119 text

Proposal by Ilya Grigorik Sunday, August 18, 13

Slide 120

Slide 120 text

Proposal by Ilya Grigorik • Client (browser) sends an additional HTTP Header Sunday, August 18, 13

Slide 121

Slide 121 text

Proposal by Ilya Grigorik • Client (browser) sends an additional HTTP Header • CH: dh=598, dw=384, dpr=2.0, t Sunday, August 18, 13

Slide 122

Slide 122 text

Proposal by Ilya Grigorik • Client (browser) sends an additional HTTP Header • CH: dh=598, dw=384, dpr=2.0, t • https://github.com/igrigorik/http-client-hints/ Sunday, August 18, 13

Slide 123

Slide 123 text

Homework Sunday, August 18, 13

Slide 124

Slide 124 text

Sunday, August 18, 13

Slide 125

Slide 125 text

Find your favorite non-responsive site Sunday, August 18, 13

Slide 126

Slide 126 text

Find your favorite non-responsive site Sunday, August 18, 13

Slide 127

Slide 127 text

Find your favorite non-responsive site Save the HTML locally Sunday, August 18, 13

Slide 128

Slide 128 text

Find your favorite non-responsive site Save the HTML locally Sunday, August 18, 13

Slide 129

Slide 129 text

Find your favorite non-responsive site Save the HTML locally Add some media queries and a breakpoint Sunday, August 18, 13

Slide 130

Slide 130 text

Find your favorite non-responsive site Save the HTML locally Add some media queries and a breakpoint Sunday, August 18, 13

Slide 131

Slide 131 text

Find your favorite non-responsive site Save the HTML locally Add some media queries and a breakpoint Make one retina image and use it Sunday, August 18, 13

Slide 132

Slide 132 text

Find your favorite non-responsive site Save the HTML locally Add some media queries and a breakpoint Make one retina image and use it Sunday, August 18, 13

Slide 133

Slide 133 text

Congratulations! Sunday, August 18, 13

Slide 134

Slide 134 text

• Resize browser window, use console when you want a breakpoint • document.body.offsetWidth • If you must start w/ desktop, use: • @media screen and (max-width: 900px) { Some Hints Sunday, August 18, 13

Slide 135

Slide 135 text

Sunday, August 18, 13

Slide 136

Slide 136 text

Synthetic Testing Sunday, August 18, 13

Slide 137

Slide 137 text

WebPagetest • Use Chrome • Script: • setviewportsize 400 600 • navigate bostonglobe.com Sunday, August 18, 13

Slide 138

Slide 138 text

Sunday, August 18, 13

Slide 139

Slide 139 text

Recap Sunday, August 18, 13

Slide 140

Slide 140 text

Takeaways Sunday, August 18, 13

Slide 141

Slide 141 text

Takeaways • Start with small sizes on new sites Sunday, August 18, 13

Slide 142

Slide 142 text

Takeaways • Start with small sizes on new sites • Use em’s and %’s Sunday, August 18, 13

Slide 143

Slide 143 text

Takeaways • Start with small sizes on new sites • Use em’s and %’s • ~3-4 device independent breakpoints Sunday, August 18, 13

Slide 144

Slide 144 text

Takeaways • Start with small sizes on new sites • Use em’s and %’s • ~3-4 device independent breakpoints • Use Responsive Images Sunday, August 18, 13

Slide 145

Slide 145 text

Takeaways • Start with small sizes on new sites • Use em’s and %’s • ~3-4 device independent breakpoints • Use Responsive Images • Have a fallback plan for IE Sunday, August 18, 13

Slide 146

Slide 146 text

Get in Touch www.etsy.com/careers [email protected] @jonathanklein Sunday, August 18, 13