implementing a scalable mobile strategy

Tim Wright, @csskarma

Wednesday, August 31, 2011

About me.

• BU App Dev

• CSSkarma

• Smashing Magazine & SitePoint


What we’ll talk about

• IE 6/7

• Guiding principles

• Proper detection

• Performance


The Goal.

scale your mobile strategy.


The Goal.

scale your mobile strategy.Web


Let’s step back.


Why do we hate IE 6/7?

Let’s step back.


body { color: red; /* normal */ color: green\9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */}

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]-‐-‐>

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]-‐-‐>

Let’s step back.


For IE.Let’s step back.

HTML

CSS

JS

body element

hacks/conditionals

detection


We’re doing it for mobile too...

Let’s step back.


example.comm.example.com

Let’s step back.


Let’s step back.

HTML

CSS

JS

mobile HTML

mobile CSS

mobile JS

switching

device list

mechanism


c’mon, really?

Let’s step back.


Guiding principles.


Guiding principles.

1

34 2


Guiding principles.

1

34

More stuff is harder to manage.

2


Guiding principles.

1

34


Build it once, buildit right2


Guiding principles.

1

34


Build it once, buildit right

Think & Communicate

2


Guiding principles.

1

34

More stuff is harder to manage

Build it once, buildit right

Think & Communicate

Talk aboutsuccess 2


1 More stuff is harder to manage


1 More stuff is harder to manage.



Don’t over think it.


1 More stuff is harder to manage


1 More stuff is harder to manage. XX



XX X XX X X



Good performance-‐ cut down h2p requests-‐ op5mize JS & CSS

Quick access to informa5on

Policy for targe.ng mobile users


1 More stuff is harder to manage.Policy for targe.ng mobile usersGood performance-‐ cut down h2p requests-‐ op5mize JS & CSS



1 More stuff is harder to manage.Policy for targe.ng mobile users

all

Good performance-‐ cut down h2p requests-‐ op5mize JS & CSS




XX X XX X X



this is fun!


1 More stuff is harder to manage. this is kinda sucks

:-‐(

fake happiness


Solution?



Solution? have less stuff.



2 Build it once, build itright.



structural layer



presentation layer



behavior layer



progressive enhancement, again?



What are we really doing here?



vs.



Changing the design?



CSS

Changing the design?

media queries.



Changing the interaction?



JS

Changing the interaction?

feature detec5on



A combina5on of media queries & JS feature detection


modernizr.script loaders.

native detection



What about performance?



Performance always matters.



be2er communica5on = be2er performance



3 Think & Communicate


Don’t solve back-end problems with JavaScript



10 jQuery plugins in a cms does not necessitate a Web strategy



slideshows.




alumni.usc.edu



well, there’s your problem



data (images)

only display what you need

server-‐sidefallback

ajax call


Don’t solve front-end problems with PHP




detection.


user agent detection



feature detection



Ask yourself somequestions...



What is mobile about this site?




vs.


Why would I remove content?




XX X XX X X


Nobody wants to look at useless content.



Why is this performing poorly?



plugins.jQuery loops.http requests.



solution?



solution? talk to people.



4 Talk about yoursuccess



... educate aboutyour failures.


4 Talk about your success



Best mobile Web site of

2011 by edustyle.net



Best mobile Web site of 2011 by edustyle.net



m. vs. /mdetection (presto engine)switching mechanismcookies?double designdouble development


What we talked about

• IE 6/7

• Guiding principles

• Feature detection

• Performance


Hang some

?’son the strategy


Questions?


twitter: @csskarmae-mail: [email protected]: csskarma.com

Contact

h2p://bit.ly/sxsw-‐csskarma


mailto:[email protected]




http://bit.ly/sxsw-csskarma

http://bit.ly/sxsw-csskarma

implementing a scalable mobile strategy

Technology

x xxwednesday

mobile strategy

mobile users good performance

js css quick access

h2p requests

js feature detec5onwednesday

css media queries

structural layerwednesday