11. PIXEL PERFECT
Web
sites
HAVE
to
look
EXACTLY
the
same
on
every
browser
and
every
version.
12. PROGRESSIVE ENHANCEMENT
Web
sites
do
NOT
have
to
look
exactly
the
same
on
every
browser
and
every
version…
…but
should
take
full
advantage
of
each
browser’s
capabili8es
to
deliver
the
best
possible
experience.
13. Responsive Design
CSS3 ADVANTAGES
Reduces
reliance
on
images
for
visual
design
Adds
new
visual
design
capabiliIes
Improves
interacIon
design
Increases
content
versaIlity
14. Responsive Design
PROGRESSIVE ENHANCEMENT MEANS
Basic
content
should
be
accessible
to
all
browsers
Basic
funcIonality
should
be
accessible
to
all
browsers
Enhanced
layout
is
provided
by
externally
linked
CS
15. Responsive Design
WHY PROGRESSIVE ENHANCEMENT
Sites
are
faster
to
develop
Code
is
cheaper
to
maintain
and
modify
Designs
are
more
versaIle
Pages
generally
load
faster
and
work
faster
16. 800 LB. GORILLA
CSS3
is
NOT
supported
by
any
current
version
of
Internet
Explorer
Before
Version
9
17. WHO WILL THIS EFFECT?
Less
than
15%
of
Web
surfers
world
wide
use
IE
8
and
below.
More
than
90%
of
mobile
web
surfers
use
a
modern
web
browser.
18. Responsive Design
THE DOWNSIDE FOR OLDER BROWSERS
No
rounded
corners
No
drop
shadows
Fewer
embellishments
Less
advanced
interacIon
…BUT
the
site
sIll
works!
22. “
Between
2010
and
2015,
the
number
of
U.S.
mobile
Internet
users
will
increase
by
a
compound
annual
growth
rate
of
16.6
percent
while
PCs
and
other
wireline
services
first
stagnate,
then
gradually
decline.
—The
Daily
Tech
13
september
2011
23. By 2015, a multi-screen
solution will not be a luxury.
It will be a necessity.
24. Responsive Design
SOLUTIONS: SEPARATE MOBILE SITE OR MOBILE APP
m.mysite.org
or
www.mysite.mobi
App
in
Android
or
iPhone
Store
Design
opImized
for
mobile
devices
Subset
of
full
site
targeted
at
mobile
users
App
can
take
advantage
of
specific
device
features
like
geolocaIon
and
accelerometer
25. Responsive Design
PROBLEMS: SEPARATE MOBILE SITE OR MOBILE APP
Significant
Extra
Development
Must
target
each
device
separately
May
require
mulIple
code
bases
for
different
pla^orms
May
require
separate
content
management
Expensive
to
maintain
and
update
49. Responsive Design
PROBLEMS: SEPARATE MOBILE SITE
Significant
Extra
Development
Must
target
each
device
separately
May
require
mulIple
code
bases
for
different
pla^orms
May
require
separate
content
management
Expensive
to
maintain
and
update
50. Responsive Design
SOLUTION: PROGRESSIVE ENHANCEMENT
Minimal
Extra
Development
AutomaIcally
targets
the
media,
not
the
device
Will
work
across
pla^orms
Same
content
management
across
all
media
Easy
to
maintain
and
upgrade
with
overall
site
Future
Friendly
51. Responsive Design
FUTURE FRIENDLY
Built
on
Web
Standards
Delivers
styles
based
on
the
capabiliIes
of
the
device
Supported
by
Safari,
Firefox,
Opera,
Chrome
and
IE8+
57. Responsive Design
MOJO - ALTERNATIVE
Drupal
7
Ready
Responsive
Layouts
HTML5
or
XHTML
Apply
custom
CSS
hdp://drupal.org/project/mojo
58. Responsive Design
F1 UX “SPECIAL SAUCE”
Custom
“out
of
the
box”
theme
that
can
be
quickly
tailored
for
a
customer’s
needs
Device
specific
menus
based
on
mobile
user
interface
best
pracIces
NavigaIon
links
turned
into
budons
making
them
easier
to
use
with
touch-‐screens
Universal
TransiIons
for
a
smoother
user
experience
