Retrofitting Sites for Responsive Web Design
Transcript of Retrofitting Sites for Responsive Web Design
![Page 1: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/1.jpg)
Ben Callahan President, SparkboxRWD Summit August 28, 2012
Retrofitting Sites for Responsive Web Design
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN @BENCALLAHAN
http://github.com/bencallahan/rwd-summit-retrofitting
1
![Page 2: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/2.jpg)
@BENCALLAHAN
Hello.
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
My name is Ben.
2
![Page 3: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/3.jpg)
@BENCALLAHAN
Hello.
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
My name is Ben. Idealist & Realist.
3
![Page 4: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/4.jpg)
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
4
![Page 5: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/5.jpg)
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Finding the fastest and lowest-risk approach to creating a better experience for users of any size screen.
5
![Page 6: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/6.jpg)
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
1. How to do it.
6
![Page 7: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/7.jpg)
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
1. How to do it.
2. Managing your client.
7
![Page 8: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/8.jpg)
@BENCALLAHAN
@klayon
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
8
![Page 9: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/9.jpg)
@BENCALLAHAN
@klayon
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
...performance is important, but access is more important. Mobile later is better than mobile never.
From “Responsive images for mobile: don’t sweat it” (http://tiny.cc/vr24gw)9
![Page 10: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/10.jpg)
@BENCALLAHAN
Retrofitting Techniques
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
http://github.com/bencallahan/rwd-summit-retrofitting
You should clone this repo:
10
![Page 11: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/11.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
(demo of Twitter.com)
11
![Page 12: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/12.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
http://www.alistapart.com/articles/fluidgrids/
target / context = result
12
![Page 13: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/13.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
http://www.alistapart.com/articles/fluidgrids/
target / context = result
302 / 837 = 36.08%
522 / 837 = 62.37%
13
![Page 14: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/14.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
➡ Demo of Twitter.com
http://paulirish.com/2012/box-sizing-border-box-ftw/
* {
-‐moz-‐box-‐sizing: border-‐box;
-‐webkit-‐box-‐sizing: border-‐box;
box-‐sizing: border-‐box;
}
14
![Page 15: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/15.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
➡ Semantic Grid Systems‣ http://semantic.gs‣ http://susy.oddbird.net
15
![Page 16: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/16.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
@column-‐width: 60;@gutter-‐width: 20;@columns: 12;@total-‐width: 100%;
header { .column(12); }article { .column(12); }aside { .column(12); }
@media (min-‐width: 38em) { article { .column(8); } aside { .column(4); }}
16
![Page 17: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/17.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Inline Image Styles
(demo of /Images)
http://github.com/bencallahan/rwd-summit-retrofitting
17
![Page 18: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/18.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Inline Image Styles
➡ Support‣ FireFox 5+ Win/Mac‣ IE7+ (exception: IE8 & min-width)‣ Chrome 14+ Win/Mac‣ Safari 4+ Win, 5+ Mac‣ Opera 10+ Win, 11+ Mac‣ Mobile Safari (iOS 5)‣ Android Browser 2.3+
18
![Page 19: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/19.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Inline Image Styles
Chris Coyier on css-tricks.com
“Override Inline Styles with CSS”
http://css-tricks.com/override-inline-styles-with-css/19
![Page 20: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/20.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Background Images
Tim Kadlec on timkadlec.com
“Media Query & Asset Downloading Results”
‣ display: none on parent element‣ specify all background images inside media queries
http://timkadlec.com/2012/04/media-query-asset-downloading-results/20
![Page 21: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/21.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Tables
21
![Page 22: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/22.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Tables
(demo of /Tables)
http://github.com/bencallahan/rwd-summit-retrofitting
22
![Page 23: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/23.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Tables
23
![Page 24: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/24.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Large Resolution First➡ Device Queries➡ Small Resolution First, Capped
24
![Page 25: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/25.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Large Resolution First
/* FILE: main.css *//* all your original styles */
@media (max-‐width: 53em) { /* styles for 53em and lower */}
@media (max-‐width: 37em) { /* styles for 37em and lower */}
25
![Page 26: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/26.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Device Queries
/* FILE: main.css *//* all your original styles */
@media (max-‐device-‐width: 850px) { /* styles for 850px and lower */}
@media (max-‐device-‐width: 600px) { /* styles for 600px and lower */}
26
![Page 27: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/27.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped‣ Serve the original CSS to large viewports‣ Serve mobile-first CSS to small viewports‣ No changes to original CSS
27
![Page 28: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/28.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped 1
<html class=”no-‐js no-‐mediaquery”><head> <script src=”/js/modernizr.js”></script>
<script> if ( Modernizr.mq('(min-‐width: 0px)') ) { $( "html" ).removeClass( "no-‐mediaquery" ); $( "html" ).addClass( "mediaquery" ); } </script>
<link rel="stylesheet" href="/css/base.css"></head>
28
![Page 29: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/29.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped 1/* if JS disabled OR media queries aren't supported */.no-‐mediaquery { @import "original";}
.mediaquery { @media (max-‐width: 979px) { @import "small"; } @media (min-‐width: 661px) and (max-‐width: 979px) { @import "medium"; } @media (min-‐width: 980px) { @import "original"; }}
29
![Page 30: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/30.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped 2<html class=”no-‐js”><head> <script src=”/js/modernizr.js”></script>
<script> yepnope({ test : Modernizr.mq(‘(min-‐width: 0px)’), yep : ‘base.css’, nope : ‘original.css’ }); </script>
<noscript> <link rel="stylesheet" href="original.css"> </noscript></head>
30
![Page 31: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/31.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Small Resolution First, Capped 2
@media (max-width: 979px) { @import "small";}@media (min-width: 661px) and (max-width: 979px) { @import "medium";}@media (min-width: 980px) { @import "original";}
31
![Page 32: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/32.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Touch Target Area➡ Hover States➡ Prioritization
32
![Page 33: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/33.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Touch Target Area‣ Apple recommends minimum 44px X 44px‣ This is based on non-retina displays
‣ Using padding instead of margin‣ Consider increasing font-size at smaller resolutions
http://www.lukew.com/ff/entry.asp?1085
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1
33
![Page 34: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/34.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Hover States‣ Consider using modernizr
a { /* standard styles */}
.no-touch a:hover { /* :hover styles */}
34
![Page 35: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/35.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Prioritization (http://mobilism.nl)
35
![Page 36: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/36.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Prioritization (http://mobilism.nl)
36
![Page 37: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/37.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Prioritization‣ Instead of adding/removing content, prioritize‣ Generally requires ability to change HTML‣ Use CSS to show/hide small prioritized blocks‣ Sometimes this is all we can do, every bit helps
37
![Page 38: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/38.jpg)
@BENCALLAHAN
Client Interaction
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
38
![Page 39: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/39.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Great Need
Big Companies
+ No Mobile Presence
+ Triple Digit Growth
= Anxious Clients
39
![Page 40: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/40.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Great Need
Less than Half the Cost
+ Less than Half the Time
+ Increased Conversions
= Desperate Clients
40
![Page 41: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/41.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: When It’s Right
➡ Evaluate the Project‣ Solid UX at higher widths?‣ Semantic markup?‣ Can’t start over?‣ Immediate need?‣ Real benefit for the user?
41
![Page 42: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/42.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Proceed Carefully
Retrofitting is a step in the right direction.
42
![Page 43: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/43.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Proceed Carefully
Make sure you’re capturing analytics.
43
![Page 44: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/44.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Constantly remind them of the user.
Client Interaction: Proceed Carefully
44
![Page 45: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/45.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
When you’re done and they ask for more...
Client Interaction: Proceed Carefully
...push for even better experiences!
45
![Page 46: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/46.jpg)
@BENCALLAHAN
Fun with Retrofitting
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
46
![Page 47: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/47.jpg)
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Fun with Retrofitting
(demo of Responsive Retrofitting Bookmarklet)
47
![Page 48: Retrofitting Sites for Responsive Web Design](https://reader036.fdocuments.in/reader036/viewer/2022071600/613d1ce0736caf36b7597698/html5/thumbnails/48.jpg)
Ben Callahan President, SparkboxRWD Summit August 28, 2012
Retrofitting Sites for Responsive Web Design
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN @BENCALLAHAN
@bencallahan
48