Responsive Retrofitting from CSS Dev Conf 2012 in Honolulu, HI

Ben Callahan President, Sparkbox
CSS Dev Conf December 5, 2012
Responsive Retrofitting
@BENCALLAHAN
http://github.com/bencallahan/rwd-retrofitting
RESPONSIVE RETROFITTING
Thursday, December 6, 12

View Slide

@BENCALLAHAN
The Necessary Intro
My name is Ben
@bencallahan
http://seesparkbox.com
http://buildresponsively.com

View Slide

@BENCALLAHAN
Retrofitting

View Slide

@BENCALLAHAN
What is a Retrofit?

View Slide

@BENCALLAHAN
What is a Retrofit?
Finding the fastest and lowest-risk approach
to creating a better experience on an existing
site for users of any size screen.

View Slide

@BENCALLAHAN
What is a Retrofit?
1. How to do it.
2. Managing your client.

View Slide

@BENCALLAHAN
@klayon
...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)

View Slide

@BENCALLAHAN
Retrofitting Techniques
If you like, you can clone this repository:

View Slide

@BENCALLAHAN
Retrofitting Techniques: From Fixed to Fluid
(demo of Twitter.com)

View Slide

@BENCALLAHAN
➡ Demo of Twitter.com
http://www.alistapart.com/articles/fluidgrids/
target / context = result

View Slide

@BENCALLAHAN
http://www.alistapart.com/articles/fluidgrids/
target / context = result
302 / 837 = 36.08%
522 / 837 = 62.37%

View Slide

@BENCALLAHAN
http://paulirish.com/2012/box-sizing-border-box-ftw/
* {
-‐moz-‐box-‐sizing: border-‐box;
-‐webkit-‐box-‐sizing: border-‐box;
box-‐sizing: border-‐box;
}

View Slide

@BENCALLAHAN
/* some css */
@media (max-‐width: 500px) {
/* css for 500px and lower */
}

View Slide

@BENCALLAHAN
Retrofitting Techniques: Inline Image Styles
(demo of /Images)

View Slide

@BENCALLAHAN
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+

View Slide

@BENCALLAHAN
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/

View Slide

@BENCALLAHAN
Retrofitting Techniques: Tables

View Slide

@BENCALLAHAN
(demo of /Tables)

View Slide

@BENCALLAHAN

View Slide

@BENCALLAHAN
Retrofitting Techniques: Media Queries
➡ Large Resolution First
➡ Small Resolution First, Capped

View Slide

@BENCALLAHAN
➡ 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 */
}

View Slide

@BENCALLAHAN
‣ Serve the original CSS to large viewports
‣ Serve mobile-first CSS to small viewports
‣ No changes to original CSS

View Slide

@BENCALLAHAN

 yepnope({ test : Modernizr.mq(‘(min-‐width: 0px)’), yep : ‘base.css’, nope : ‘original.css’ }); 


View Slide

@BENCALLAHAN
@media (max-width: 979px) {
@import "small";
}
@media (min-width: 661px) and (max-width: 979px) {
@import "medium";
}
@media (min-width: 980px) {
@import "original";
}

View Slide

@BENCALLAHAN
Other Considerations

View Slide

@BENCALLAHAN
Retrofitting Techniques: Other Considerations
➡ Touch Target Area
➡ Hover States
➡ Contrast
➡ Prioritization

View Slide

@BENCALLAHAN
➡ 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

View Slide

@BENCALLAHAN
➡ Hover States
‣ Consider using modernizr
a {
/* standard styles */
}
.no-touch a:hover {
/* :hover styles */
}

View Slide

@BENCALLAHAN
➡ Contrast
‣ Try your site outside in the sun
‣ Try your site in bed when it’s dark
‣ Take it with you

View Slide

@BENCALLAHAN
➡ Prioritization

View Slide

@BENCALLAHAN
➡ Prioritization (http://mobilism.nl)

View Slide

@BENCALLAHAN
➡ 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

View Slide

@BENCALLAHAN
Client Interaction

View Slide

@BENCALLAHAN
Client Interaction: Great Need
Big Companies
+ No Mobile Presence
+ Triple Digit Growth
= Anxious Clients

View Slide

@BENCALLAHAN
Client Interaction: Great Need
Less than Half the Cost
+ Less than Half the Time
+ Increased Conversions
= Desperate Clients

View Slide

@BENCALLAHAN
Client Interaction: When It’s Right
➡ Evaluate the Project
‣ Solid UX at higher widths?
‣ Semantic markup?
‣ Immediate need?
‣ Real benefit for the user?

View Slide

@BENCALLAHAN
Client Interaction: Proceed Carefully
Retrofitting is a step in
the right direction.

View Slide

@BENCALLAHAN
Make sure you’re
capturing analytics.

View Slide

@BENCALLAHAN
Constantly remind them
of the user.

View Slide

@BENCALLAHAN
When you’re done and
they ask for more...
...push for even better
experiences!

View Slide

@BENCALLAHAN
Fun with Retrofitting

View Slide

@BENCALLAHAN
Fun with Retrofitting
(demo of Responsive Retrofitting Bookmarklet)

View Slide

Thank You!
@BENCALLAHAN
Ben Callahan President, Sparkbox
CSS Dev Conf December 5, 2012

View Slide

Responsive Retrofitting from CSS Dev Conf 2012 in Honolulu, HI

Responsive Retrofitting from CSS Dev Conf 2012 in Honolulu, HI

Ben Callahan

More Decks by Ben Callahan

Other Decks in Design

Featured

Transcript