On Jan. 24, Renata Sinn presented on considerations for mobile sites and responsive design at a lunch and learn event at Creed Interactive in St. Paul, MN.

1. Mobile
Sites
&
Responsive
Design
Building
and
designing
for
the
future
…tablet
sales
are
?
expected
to
exceed
100
million
this
year…
…about
half
of
the
US’s
311
million
people
own
a
smartphone…
…mobile
web
usage
took
50%
of
sales
related
to
Mother’s
Day
…tablet
sales
are
expected
to
in
2012…
exceed
100
million
this
year…

2. Mobile
Sites
&
Responsive
Design
Building
and
designing
for
the
future
Desktop
Tablet
Phone
The
Mobile
Experience
Mobile
Site
Full
Spectrum
User
Experience

3. The
Mobile
Experience
at
a
Glance
Experience
PlaIorms
• Must
be
downloaded
by
the
user
APPLICATION
• Runs
naIvely
on
the
device
(APP)
• Most
costly
to
develop
• m.sitename.com
-­‐or-­‐
sitename.com/mobile
MOBILE
SITE
• Can
be
a
whole
separate
code
base
specifically
for
mobile
RESPONSIVE
• URL
stays
the
same
DESIGN/CODE
• Fluid
design
and
code
base
allows
for
adaptaIon
across
mulIple
screen
sizes
STOP!

4. Fundamentals
of
Mobile
InteracIons
THE
WHO:
Understanding
human
needs
and
moPvaPon
Let’s
take
one
step
back
before
we
blindly
take
ten
steps
forward.
Image
source
wikipedia.org
Maslow’s
hierarchy
of
needs

5. Fundamentals
of
Mobile
InteracIons
THE
WHO:
Understanding
the
needs
of
the
mobile
user
Mobile
strategy
should
leverage
and
address
the
user’s
needs.
Extra
features/UI
enhancements
ENHANCE
PERFORM
Performance/Speed
INTERACT
Read/Share/Buy
ACCESS
See/Navigate
Kristofer
Layon’s
hierarchy
of
mobile
moPvaPon

6. Thinking
Full
Circle
about
Mobile
NUTS
AND
BOLTS:
Bringing
all
the
players
to
the
table
Business
MOBILE
SOLUTION
Design
Development

7. Thinking
Full
Circle
about
Mobile
BUSINESS:
Point
of
Entry
WHERE
• We
don’t
have
a
website
and
are
creaIng
one
from
scratch.
ARE
WE
• We
have
a
legacy
site
and
are
adding
Business
NOW
mobile
enhancements.
WHERE
• We
don’t
have
a
website,
but
only
care
about
our
mobile
users.
ARE
WE
• We
have
a
legacy
site,
but
want
to
re-­‐
GOING?
build
and
redesign
the
enIre
site.

8. Thinking
Full
Circle
about
Mobile
BUSINESS:
Why,
What
&
How?
• Why
is
a
mobile
experience
good
for
business?
WHY
• What
are
the
business
objecIves
for
the
mobile
experience?
Business
WHAT
• What
content
is
important?
HOW
• How
do
we
want
the
user
to
interact
with
the
content?
• What
kind
of
resources
do
we
have
for
mobile
development?

9. Thinking
Full
Circle
about
Mobile
CHOOSING
A
SOLUTION:
Design
and
Development
MOBILE
SITE
Business
Design
WHY
WHAT
HOW
Development
RESPONSIVE
DESIGN/CODE
hZp://googlemobileads.blogspot.com

10. Thinking
Full
Circle
about
Mobile
DESIGN
ELEMENTS
of
the
mobile
experience
WHY
Design
+
WHAT
ENHANCE
HOW
PERFORM
First
and
foremost
a
user
needs
to
be
able
to
access
the
experience.
INTERACT
• Limited
and
Big
NavigaIon
• Shorter
Elements
ACCESS
• UIlizaIon
of
whitespace
• Be
aware
of
content
length
and
presentaIon
• Build
in
gradual
UI
enhancements
• Limit
images
within
content
(mobile
first
thinking)

11. Thinking
Full
Circle
about
Mobile
DEVELOPMENT
ELEMENTS
of
the
mobile
experience
WHY
Development
+
WHAT
ENHANCE
HOW
PERFORM
Building
with
Responsive
Design
INTERACT
• Media
queries
• Image
re-­‐sizing,
mobile
specific
images
ACCESS
• Flexible
grids/fluid
CSS
• Limit/restrict
Flash
• Implement
gradual
enhancement

12. Responsive
Design
Fundamentals
The
flexible
layout
and
responsive
behaviors
Responsive
Behaviors:
The
basic
concept
behind
having
a
responsive
design
is
to
have
a
layout
and
organizaIonal
structure
that
can
adapt
to
different
screen
sizes.
Content
importance
is
prioriIzed
and
user
interacIons
are
defined
based
on
various
screen
sizes.
The
“break
points”,
or
dimensions
at
which
the
design
adjusts,
are
usually
set
for
average
desktop,
tablet
and
mobile
phone
sizes.
Checkout
the
example
at
h]p://mobile.creedinteracPve.com/

13. Responsive
Design
Fundamentals
The
flexible
layout
and
responsive
behaviors
NAVIGATION
Responsive
Design
CONTENT Viewed
at
Desktop
Dimensions.
NoIce
the
various
areas
called
out
in
blue.
ASIDE

14. Responsive
Design
Fundamentals
The
flexible
layout
and
responsive
behaviors
NAVIGATION
Responsive
Design
Viewed
at
Tablet
Dimensions.
NoIce
CONTENT how
the
navigaIon
has
adjusted
to
accommodate
the
smaller
size
and
how
the
aside
slides
below
the
content
since
it’s
of
less
importance.
ASIDE

15. Responsive
Design
Fundamentals
The
flexible
layout
and
responsive
behaviors
Responsive
Design
Viewed
at
Phone
Dimensions.
NoIce
how
the
navigaIon
has
again
NAVIGATION
adjusted
to
accommodate
the
ASIDE
smaller
size.
The
navigaIon
links
remain
large
for
ease
of
use
with
touch
devices.
The
aside
CONTENT

16. Example
of
Mobile
Only
Site
User
interface
and
design
specifically
targeted
to
mobile
device
use
A
mobile
only
template
viewed
on
a
desktop.
NoIce
how
the
design
is
very
streamline
and
replicates
the
“mobile
UI”
one
would
expect
on
a
naIve
phone
applicaIon.

17. Example
of
Mobile
Only
Site
User
interface
and
design
specifically
targeted
to
mobile
device
use
The
same
template
on
a
mobile
phone
screen
size.
As
you
can
see
the
simplificaIon
of
buZons
and
content
are
well
suited
for
the
mobile
phone
dimensions.