Post on 12-Sep-2021
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
@BENCALLAHAN
Hello.
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
My name is Ben.
2
@BENCALLAHAN
Hello.
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
My name is Ben. Idealist & Realist.
3
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
4
@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
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
1. How to do it.
6
@BENCALLAHAN
What is a Retrofit?
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
1. How to do it.
2. Managing your client.
7
@BENCALLAHAN
@klayon
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
8
@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
@BENCALLAHAN
Retrofitting Techniques
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
http://github.com/bencallahan/rwd-summit-retrofitting
You should clone this repo:
10
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
(demo of Twitter.com)
11
@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
@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
@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
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: From Fixed to Fluid
➡ Semantic Grid Systems‣ http://semantic.gs‣ http://susy.oddbird.net
15
@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
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Inline Image Styles
(demo of /Images)
http://github.com/bencallahan/rwd-summit-retrofitting
17
@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
@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
@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
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Tables
21
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Tables
(demo of /Tables)
http://github.com/bencallahan/rwd-summit-retrofitting
22
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Tables
23
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Media Queries
➡ Large Resolution First➡ Device Queries➡ Small Resolution First, Capped
24
@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
@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
@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
@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
@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
@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
@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
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Touch Target Area➡ Hover States➡ Prioritization
32
@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
@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
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Prioritization (http://mobilism.nl)
35
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Retrofitting Techniques: Other Considerations
➡ Prioritization (http://mobilism.nl)
36
@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
@BENCALLAHAN
Client Interaction
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
38
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Great Need
Big Companies
+ No Mobile Presence
+ Triple Digit Growth
= Anxious Clients
39
@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
@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
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Proceed Carefully
Retrofitting is a step in the right direction.
42
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Client Interaction: Proceed Carefully
Make sure you’re capturing analytics.
43
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Constantly remind them of the user.
Client Interaction: Proceed Carefully
44
@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
@BENCALLAHAN
Fun with Retrofitting
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN
46
@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN
Fun with Retrofitting
(demo of Responsive Retrofitting Bookmarklet)
47
Ben Callahan President, SparkboxRWD Summit August 28, 2012
Retrofitting Sites for Responsive Web Design
RETROFITTING SITES FOR RESPONSIVE WEB DESIGN @BENCALLAHAN
@bencallahan
48