Implementing a Scalable Mobile Strategy

Tim Wright, @csskarmaWednesday, August 31, 2011

About me. • BU App Dev • CSSkarma • Smashing Magazine & SitePointWednesday, August 31, 2011

What we’ll talk about • IE 6/7 • Guiding principles • Proper detection • PerformanceWednesday, August 31, 2011

The Goal. scale your mobile strategy.Wednesday, August 31, 2011

The Goal. Web scale your mobile strategy.Wednesday, August 31, 2011

Let’s step back.Wednesday, August 31, 2011

Let’s step back. Why do we hate IE 6/7?Wednesday, August 31, 2011

Let’s step back. body { color: red; /* normal */ color: green9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ }Wednesday, August 31, 2011

Let’s step back. <!-‐-‐[if IE]> <link href="ie.css" rel="stylesheet" media="all"> <![endif]-‐-‐> <!-‐-‐[if lte IE 7]> <link href="ie7.css" rel="stylesheet" media="all"> <![endif]-‐-‐> <!-‐-‐[if lt IE 7]> <link href="ie6.css" rel="stylesheet" media="all"> <![endif]-‐-‐>Wednesday, August 31, 2011

Let’s step back. <!-‐-‐[if lt IE 7 ]> <body class="ie6"> <![endif]-‐-‐> <!-‐-‐[if IE 7 ]> <body class="ie7"> <![endif]-‐-‐> <!-‐-‐[if IE 8 ]> <body class="ie8"> <![endif]-‐-‐> <!-‐-‐[if (gte IE 9)|!(IE)]><!-‐-‐> <body> <!-‐-‐<![endif]-‐-‐>Wednesday, August 31, 2011

Let’s step back. For IE. HTML body element CSS hacks/conditionals JS detectionWednesday, August 31, 2011

Let’s step back. We’re doing it for mobile too...Wednesday, August 31, 2011

Let’s step back. example.com m.example.comWednesday, August 31, 2011

Let’s step back. device list HTML mobile HTML switching CSS mobile CSS mechanism JS mobile JSWednesday, August 31, 2011

Let’s step back. c’mon, really?Wednesday, August 31, 2011

Guiding principles.Wednesday, August 31, 2011

Guiding principles. 1 4 2 3Wednesday, August 31, 2011

Guiding principles. 1 More stuﬀ is harder to manage. 4 2 3Wednesday, August 31, 2011

Guiding principles. 1 More stuﬀ is harder to manage. 4 2 Build it once, build it right 3Wednesday, August 31, 2011

Guiding principles. 1 More stuﬀ is harder to manage. 4 2 Build it once, build it right 3 Think & CommunicateWednesday, August 31, 2011

Guiding principles. 1 More stuﬀ is harder to manage 4 Talk about success 2 Build it once, build it right 3 Think & CommunicateWednesday, August 31, 2011

1 More stuﬀ is harder to manageWednesday, August 31, 2011

1 More stuﬀ is harder to manage.Wednesday, August 31, 2011

1 More stuﬀ is harder to manage. think it. Don’t overWednesday, August 31, 2011

1 More stuﬀ is harder to manageWednesday, August 31, 2011

1 XX More stuﬀ is harder to manage.Wednesday, August 31, 2011

1 XX More stuﬀ is harder to manage. X X XX X XXWednesday, August 31, 2011

1 More stuﬀ is harder to manage. Policy for targe.ng mobile users Good performance -‐ cut down h2p requests -‐ op5mize JS & CSS Quick access to informa5onWednesday, August 31, 2011

1 More stuﬀ is harder to manage. all Policy for targe.ng mobile users Good performance -‐ cut down h2p requests -‐ op5mize JS & CSS Quick access to informa5onWednesday, August 31, 2011

1 More stuﬀ is harder to manage. this is fun!Wednesday, August 31, 2011

1 More stuﬀ is harder to manage. this is kinda sucks :-‐( fake happinessWednesday, August 31, 2011

1 More stuﬀ is harder to manage. Solution?Wednesday, August 31, 2011

1 More stuﬀ is harder to manage. Solution? have less stuﬀ.Wednesday, August 31, 2011

2 Build it once, build it right.Wednesday, August 31, 2011

2 Build it once, build it right. structural layerWednesday, August 31, 2011

2 Build it once, build it right. presentation layerWednesday, August 31, 2011

2 Build it once, build it right. behavior layerWednesday, August 31, 2011

2 Build it once, build it right. progressive enhancement, again?Wednesday, August 31, 2011

2 Build it once, build it right. What are we really doing here?Wednesday, August 31, 2011

2 Build it once, build it right. vs.Wednesday, August 31, 2011

2 Build it once, build it right. Changing the design?Wednesday, August 31, 2011

2 Build it once, build it right. Changing the design? CSS media queries.Wednesday, August 31, 2011

2 Build it once, build it right. Changing the interaction?Wednesday, August 31, 2011

2 Build it once, build it right. Changing the interaction? JS feature detec5onWednesday, August 31, 2011

2 Build it once, build it right. A combina5on of media queries & JS feature detectionWednesday, August 31, 2011

2 Build it once, build it right. modernizr. script loaders. native detectionWednesday, August 31, 2011

2 Build it once, build it right. What about performance?Wednesday, August 31, 2011

2 Build it once, build it right. Performance always matters.Wednesday, August 31, 2011

2 Build it once, build it right. be2er communica5on = be2er performanceWednesday, August 31, 2011

3 Think & CommunicateWednesday, August 31, 2011

3 Think & CommunicateDon’t solve back-end problems with JavaScriptWednesday, August 31, 2011

3 Think & Communicate 10 jQuery plugins in a cms does not necessitate a Web strategyWednesday, August 31, 2011

3 Think & Communicate slideshows.Wednesday, August 31, 2011

3 Think & Communicate alumni.usc.eduWednesday, August 31, 2011

3 Think & CommunicateWednesday, August 31, 2011

3 Think & Communicate well, there’s your problemWednesday, August 31, 2011

3 Think & Communicate data (images) server-‐side fallback ajax call only display what you needWednesday, August 31, 2011

3 Think & CommunicateDon’t solve front-end problems with PHPWednesday, August 31, 2011

3 Think & Communicate detection.Wednesday, August 31, 2011

3 Think & Communicate user agent detectionWednesday, August 31, 2011

3 Think & Communicate feature detectionWednesday, August 31, 2011

3 Think & Communicate Ask yourself some questions...Wednesday, August 31, 2011

3 Think & Communicate What is mobile about this site?Wednesday, August 31, 2011

3 Think & Communicate vs.Wednesday, August 31, 2011

3 Think & Communicate Why would I remove content?Wednesday, August 31, 2011

3 Think & Communicate Nobody wants to look at useless content.Wednesday, August 31, 2011

3 Think & CommunicateWhy is this performing poorly?Wednesday, August 31, 2011

3 Think & Communicate plugins. jQuery loops. http requests.Wednesday, August 31, 2011

3 Think & Communicate solution?Wednesday, August 31, 2011

3 Think & Communicate solution? talk to people.Wednesday, August 31, 2011

4 Talk about your successWednesday, August 31, 2011

4 Talk about your success ... educate about your failures.Wednesday, August 31, 2011

4 Talk about your successWednesday, August 31, 2011

4Bestbout your Talk a Web site of success mobile 2011 by edustyle.netWednesday, August 31, 2011

4 Talk about your success Best mobile Web site of 2011 by edustyle.netWednesday, August 31, 2011

4 Talk about your success m. vs. /m detection (presto engine) switching mechanism cookies? double design double developmentWednesday, August 31, 2011

What we talked about • IE 6/7 • Guiding principles • Feature detection • PerformanceWednesday, August 31, 2011

Hang some ?’s on the strategyWednesday, August 31, 2011

Questions?Wednesday, August 31, 2011

Contact twitter: @csskarma e-mail: timwright12@gmail.com web: csskarma.com h2p://bit.ly/sxsw-‐csskarmaWednesday, August 31, 2011

Implementing a Scalable Mobile Strategy

by Tim Wright

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 7

Statistics

Implementing a Scalable Mobile Strategy Presentation Transcript

https://twitter.com	5
http://www.coderwall.com	2