Implementing a Scalable Mobile Strategy
-
Upload
tim-wright -
Category
Technology
-
view
103 -
download
1
description
Transcript of Implementing a Scalable Mobile Strategy
Tim Wright, @csskarma
Wednesday, August 31, 2011
About me.
• BU App Dev
• CSSkarma
• Smashing Magazine & SitePoint
Wednesday, August 31, 2011
What we’ll talk about
• IE 6/7
• Guiding principles
• Proper detection
• Performance
Wednesday, August 31, 2011
The Goal.
scale your mobile strategy.
Wednesday, August 31, 2011
The Goal.
scale your mobile strategy.Web
Wednesday, August 31, 2011
Let’s step back.
Wednesday, August 31, 2011
Why do we hate IE 6/7?
Let’s step back.
Wednesday, August 31, 2011
body { color: red; /* normal */ color: green\9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */}
Let’s step back.
Wednesday, August 31, 2011
<!-‐-‐[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]-‐-‐>
Let’s step back.
Wednesday, August 31, 2011
<!-‐-‐[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]-‐-‐>
Let’s step back.
Wednesday, August 31, 2011
For IE.Let’s step back.
HTML
CSS
JS
body element
hacks/conditionals
detection
Wednesday, August 31, 2011
We’re doing it for mobile too...
Let’s step back.
Wednesday, August 31, 2011
example.comm.example.com
Let’s step back.
Wednesday, August 31, 2011
Let’s step back.
HTML
CSS
JS
mobile HTML
mobile CSS
mobile JS
switching
device list
mechanism
Wednesday, August 31, 2011
c’mon, really?
Let’s step back.
Wednesday, August 31, 2011
Guiding principles.
Wednesday, August 31, 2011
Guiding principles.
1
34 2
Wednesday, August 31, 2011
Guiding principles.
1
34
More stuff is harder to manage.
2
Wednesday, August 31, 2011
Guiding principles.
1
34
More stuff is harder to manage.
Build it once, buildit right2
Wednesday, August 31, 2011
Guiding principles.
1
34
More stuff is harder to manage.
Build it once, buildit right
Think & Communicate
2
Wednesday, August 31, 2011
Guiding principles.
1
34
More stuff is harder to manage
Build it once, buildit right
Think & Communicate
Talk aboutsuccess 2
Wednesday, August 31, 2011
1 More stuff is harder to manage
Wednesday, August 31, 2011
1 More stuff is harder to manage
Wednesday, August 31, 2011
1 More stuff is harder to manage
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Don’t over think it.
Wednesday, August 31, 2011
1 More stuff is harder to manage
Wednesday, August 31, 2011
1 More stuff is harder to manage. XX
Wednesday, August 31, 2011
1 More stuff is harder to manage. XX
XX X XX X X
Wednesday, August 31, 2011
1 More stuff is harder to manage. XX
XX X XX X X
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Good performance-‐ cut down h2p requests-‐ op5mize JS & CSS
Quick access to informa5on
Policy for targe.ng mobile users
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.Policy for targe.ng mobile usersGood performance-‐ cut down h2p requests-‐ op5mize JS & CSS
Quick access to informa5on
Wednesday, August 31, 2011
1 More stuff is harder to manage.Policy for targe.ng mobile users
all
Good performance-‐ cut down h2p requests-‐ op5mize JS & CSS
Quick access to informa5on
Wednesday, August 31, 2011
1 More stuff is harder to manage. XX
XX X XX X X
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
Wednesday, August 31, 2011
1 More stuff is harder to manage.
this is fun!
Wednesday, August 31, 2011
1 More stuff is harder to manage. this is kinda sucks
:-‐(
fake happiness
Wednesday, August 31, 2011
Solution?
1 More stuff is harder to manage.
Wednesday, August 31, 2011
Solution? have less stuff.
1 More stuff is harder to manage.
Wednesday, August 31, 2011
2 Build it once, build itright.
Wednesday, August 31, 2011
2 Build it once, build itright.
structural layer
Wednesday, August 31, 2011
2 Build it once, build itright.
presentation layer
Wednesday, August 31, 2011
2 Build it once, build itright.
behavior layer
Wednesday, August 31, 2011
2 Build it once, build itright.
progressive enhancement, again?
Wednesday, August 31, 2011
2 Build it once, build itright.
What are we really doing here?
Wednesday, August 31, 2011
2 Build it once, build itright.
vs.
Wednesday, August 31, 2011
2 Build it once, build itright.
Changing the design?
Wednesday, August 31, 2011
2 Build it once, build itright.
CSS
Changing the design?
media queries.
Wednesday, August 31, 2011
2 Build it once, build itright.
Changing the interaction?
Wednesday, August 31, 2011
2 Build it once, build itright.
JS
Changing the interaction?
feature detec5on
Wednesday, August 31, 2011
2 Build it once, build itright.
A combina5on of media queries & JS feature detection
Wednesday, August 31, 2011
modernizr.script loaders.
native detection
2 Build it once, build itright.
Wednesday, August 31, 2011
What about performance?
2 Build it once, build itright.
Wednesday, August 31, 2011
Performance always matters.
2 Build it once, build itright.
Wednesday, August 31, 2011
be2er communica5on = be2er performance
2 Build it once, build itright.
Wednesday, August 31, 2011
3 Think & Communicate
Wednesday, August 31, 2011
Don’t solve back-end problems with JavaScript
3 Think & Communicate
Wednesday, August 31, 2011
10 jQuery plugins in a cms does not necessitate a Web strategy
3 Think & Communicate
Wednesday, August 31, 2011
slideshows.
3 Think & Communicate
Wednesday, August 31, 2011
3 Think & Communicate
alumni.usc.edu
Wednesday, August 31, 2011
3 Think & Communicate
Wednesday, August 31, 2011
3 Think & Communicate
well, there’s your problem
Wednesday, August 31, 2011
3 Think & Communicate
data (images)
only display what you need
server-‐sidefallback
ajax call
Wednesday, August 31, 2011
Don’t solve front-end problems with PHP
3 Think & Communicate
Wednesday, August 31, 2011
3 Think & Communicate
detection.
Wednesday, August 31, 2011
user agent detection
3 Think & Communicate
Wednesday, August 31, 2011
feature detection
3 Think & Communicate
Wednesday, August 31, 2011
Ask yourself somequestions...
3 Think & Communicate
Wednesday, August 31, 2011
What is mobile about this site?
3 Think & Communicate
Wednesday, August 31, 2011
3 Think & Communicate
vs.
Wednesday, August 31, 2011
Why would I remove content?
3 Think & Communicate
Wednesday, August 31, 2011
3 More stuff is harder to manage. XX
XX X XX X X
Wednesday, August 31, 2011
Nobody wants to look at useless content.
3 Think & Communicate
Wednesday, August 31, 2011
Why is this performing poorly?
3 Think & Communicate
Wednesday, August 31, 2011
plugins.jQuery loops.http requests.
3 Think & Communicate
Wednesday, August 31, 2011
solution?
3 Think & Communicate
Wednesday, August 31, 2011
solution? talk to people.
3 Think & Communicate
Wednesday, August 31, 2011
4 Talk about yoursuccess
Wednesday, August 31, 2011
4 Talk about yoursuccess
... educate aboutyour failures.
Wednesday, August 31, 2011
4 Talk about your success
Wednesday, August 31, 2011
4 Talk about your success
Best mobile Web site of
2011 by edustyle.net
Wednesday, August 31, 2011
4 Talk about your success
Best mobile Web site of
2011 by edustyle.net
Wednesday, August 31, 2011
4 Talk about your success
Best mobile Web site of 2011 by edustyle.net
Wednesday, August 31, 2011
4 Talk about yoursuccess
m. vs. /mdetection (presto engine)switching mechanismcookies?double designdouble development
Wednesday, August 31, 2011
What we talked about
• IE 6/7
• Guiding principles
• Feature detection
• Performance
Wednesday, August 31, 2011
Hang some
?’son the strategy
Wednesday, August 31, 2011
Questions?
Wednesday, August 31, 2011
twitter: @csskarmae-mail: [email protected]: csskarma.com
Contact
h2p://bit.ly/sxsw-‐csskarma
Wednesday, August 31, 2011