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
Slide 71
Slide 71 text
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
Slide 103
Slide 103 text
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
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