Retrofitting Sites for Responsive Web Design

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

http://github.com/bencallahan/rwd-summit


@BENCALLAHAN

Hello.

RETROFITTING SITES FOR RESPONSIVE WEB DESIGN

My name is Ben.

2

@BENCALLAHAN

Hello.


My name is Ben. Idealist & Realist.

3

@BENCALLAHAN

What is a Retrofit?


4

@BENCALLAHAN

What is a Retrofit?


Finding the fastest and lowest-risk approach to creating a better experience for users of any size screen.

5

@BENCALLAHAN

What is a Retrofit?


1. How to do it.

6

@BENCALLAHAN

What is a Retrofit?


1. How to do it.

2. Managing your client.

7

@BENCALLAHAN

@klayon


8

@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)9

http://tiny.cc/vr24gw

http://tiny.cc/vr24gw

@BENCALLAHAN

Retrofitting Techniques



You should clone this repo:

10



@BENCALLAHANRETROFITTING SITES FOR RESPONSIVE WEB DESIGN

Retrofitting Techniques: From Fixed to Fluid

(demo of Twitter.com)

11



➡ Demo of Twitter.com

http://www.alistapart.com/articles/fluidgrids/

target / context = result

12







target / context = result

302 / 837 = 36.08%

522 / 837 = 62.37%

13






http://paulirish.com/2012/box-sizing-border-box-ftw/

* {

-‐moz-‐box-‐sizing: border-‐box;

-‐webkit-‐box-‐sizing: border-‐box;

box-‐sizing: border-‐box;

}

14





➡ Semantic Grid Systems‣ http://semantic.gs‣ http://susy.oddbird.net

15

http://semantic.gs

http://semantic.gs

http://semantic.gs

http://semantic.gs



@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


Retrofitting Techniques: Inline Image Styles

(demo of /Images)


17





➡ 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



Chris Coyier on css-tricks.com

“Override Inline Styles with CSS”

http://css-tricks.com/override-inline-styles-with-css/19

http://css-tricks.com/override-inline-styles-with-css/

http://css-tricks.com/override-inline-styles-with-css/


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

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

http://timkadlec.com/2012/04/media-query-asset-downloading-results/


Retrofitting Techniques: Tables

21



(demo of /Tables)


22





23


Retrofitting Techniques: Media Queries

➡ Large Resolution First➡ Device Queries➡ Small Resolution First, Capped

24



➡ 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



➡ 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



➡ Small Resolution First, Capped‣ Serve the original CSS to large viewports‣ Serve mobile-first CSS to small viewports‣ No changes to original CSS

27



➡ 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



➡ 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



➡ 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



➡ 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


Retrofitting Techniques: Other Considerations

➡ Touch Target Area➡ Hover States➡ Prioritization

32



➡ 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









➡ Hover States‣ Consider using modernizr

a { /* standard styles */}

.no-touch a:hover { /* :hover styles */}

34



➡ Prioritization (http://mobilism.nl)

35

http://mobilism.nl

http://mobilism.nl



➡ Prioritization (http://mobilism.nl)

36

http://mobilism.nl

http://mobilism.nl



➡ 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


38


Client Interaction: Great Need

Big Companies

+ No Mobile Presence

+ Triple Digit Growth

= Anxious Clients

39


Client Interaction: Great Need

Less than Half the Cost

+ Less than Half the Time

+ Increased Conversions

= Desperate Clients

40


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


Client Interaction: Proceed Carefully

Retrofitting is a step in the right direction.

42



Make sure you’re capturing analytics.

43


Constantly remind them of the user.


44


When you’re done and they ask for more...


...push for even better experiences!

45

@BENCALLAHAN

Fun with Retrofitting


46


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

Retrofitting Sites for Responsive Web Design

Documents

Transcript of Retrofitting Sites for Responsive Web Design