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.

Web
scale
your
mobile
strategy.


Let’s step back.


Let’s step back.

Why
do
we
hate
IE
6/7?


Let’s step back.

body
{

color:
red;
/*
normal
*/

color:
green9;
/*
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.
HTML body
element

CSS hacks/conditionals

JS detection


Let’s step back.

We’re
doing
it
for
mobile
too...


Let’s step back.

example.com
m.example.com


Let’s step back.
device
list

HTML mobile
HTML
switching

CSS mobile
CSS
mechanism

JS mobile
JS


Let’s step back.

c’mon,
really?


Guiding principles.


Guiding principles.

1
4 2
3

Guiding principles.

1
More
stuﬀ
is
harder

to
manage.

4 2
3

Guiding principles.

1
More
stuﬀ
is
harder

to
manage.

4 2 Build
it
once,
build
it
right

3

Guiding principles.

1
More
stuﬀ
is
harder

to
manage.

4 2 Build
it
once,
build
it
right

3 Think
&
Communicate


Guiding principles.

1 More
stuﬀ
is
harder

to
manage

4 Talk
about
success
2 Build
it
once,
build
it
right

3 Think
&
Communicate


1 More
stuﬀ
is
harder

to
manage


1 More
stuﬀ
is
harder

to
manage.


1 More
stuﬀ
is
harder

to
manage. think it.
Don’t over


1 XX
More
stuﬀ
is
harder

to
manage.


1 XX
More
stuﬀ
is
harder

to
manage.

X
X XX
X XX

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
informa5on


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
informa5on


1 More
stuﬀ
is
harder

to
manage. this
is
fun!


1 More
stuﬀ
is
harder

to
manage. this
is
kinda
sucks
:-‐(

fake
happiness


1 More
stuﬀ
is
harder

to
manage.
Solution?


1 More
stuﬀ
is
harder

to
manage.
Solution?
have
less
stuﬀ.


2 Build
it
once,
build
it
right.


2 Build
it
once,
build
it
right.

structural
layer


2 Build
it
once,
build
it
right.

presentation
layer


2 Build
it
once,
build
it
right.

behavior
layer


2 Build
it
once,
build
it
right.
progressive enhancement,
again?


2 Build
it
once,
build
it
right.
What
are
we
really
doing
here?


2 Build
it
once,
build
it
right.

vs.


2 Build
it
once,
build
it
right.
Changing
the
design?


2 Build
it
once,
build
it
right.
Changing
the
design?

CSS
media
queries.


2 Build
it
once,
build
it
right.
Changing
the
interaction?


2 Build
it
once,
build
it
right.
Changing
the
interaction?

JS
feature
detec5on


2 Build
it
once,
build
it
right.
A
combina5on
of
media queries
&

JS feature detection


2 Build
it
once,
build
it
right.
modernizr.
script
loaders.
native
detection


2 Build
it
once,
build
it
right.
What
about
performance?


2 Build
it
once,
build
it
right.
Performance always
matters.


2 Build
it
once,
build
it
right.
be2er
communica5on
=
be2er

performance


3 Think
&
Communicate


3 Think
&
Communicate
Don’t
solve
back-end
problems

with
JavaScript


3 Think
&
Communicate
10
jQuery
plugins
in
a
cms
does

not
necessitate
a
Web
strategy


3 Think
&
Communicate

slideshows.


3 Think
&
Communicate

alumni.usc.edu


3 Think
&
Communicate

well,
there’s

your
problem


3 Think
&
Communicate
data
(images)
server-‐side
fallback
ajax
call

only
display
what
you
need


3 Think
&
Communicate
Don’t
solve
front-end
problems

with
PHP


3 Think
&
Communicate

detection.


3 Think
&
Communicate

user agent
detection


3 Think
&
Communicate

feature
detection


3 Think
&
Communicate

Ask
yourself
some
questions...


3 Think
&
Communicate

What
is
mobile
about
this
site?


3 Think
&
Communicate

vs.


3 Think
&
Communicate

Why
would
I
remove
content?


3 XX
More
stuﬀ
is
harder

to
manage.

X
X XX
X XX

3 Think
&
Communicate
Nobody
wants
to
look
at
useless

content.


3 Think
&
Communicate

Why
is
this
performing
poorly?


3 Think
&
Communicate
plugins.
jQuery
loops.
http
requests.


3 Think
&
Communicate

solution?


3 Think
&
Communicate

solution?
talk
to
people.


4 Talk
about
your
success


4 Talk
about
your
success

...
educate
about
your
failures.


4 Talk
about
your

success


4Bestbout
your

Talk
a
Web site of
success
mobile

2011 by
edustyle.net

4 Talk
about
your

success

Best mobile Web site of 2011 by
edustyle.net

4 Talk
about
your
success
m. vs. /m
detection (presto engine)
switching mechanism
cookies?
double design
double development


What we talked about

• IE
6/7
• Guiding
principles
• Feature
detection
• Performance


Hang
some

?’s
on
the
strategy


Questions?


Contact

twitter:
@csskarma
e-mail:
timwright12@gmail.com
web:
csskarma.com

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


Implementing a Scalable Mobile Strategy

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (9)

Similar a Implementing a Scalable Mobile Strategy

Similar a Implementing a Scalable Mobile Strategy (19)

Último

Último (20)

Implementing a Scalable Mobile Strategy