While Responsive Design is the buzzword amongst companies trying to move to a mobile world, it's not quite as easy to actually implement. In a presentation I did with Michelle Dash and Bill Welense, we talk about the steps that got us to responsive design, deconstructing it, approaching it from a design perspective, the benefits and pitfalls, and looking into the future.

1. Responsive
Design
and
You
Michelle
Dash,
Joe
Hass,
Bill
Welense

2. Tonight’s
Agenda
How
We
Got
Here
Is
Responsive
Design
A
Fad?
DeconstrucCng
Responsive
Design
Approaching
The
Design
Process
Benefits
and
PiFalls
The
One
Slide
Answer
To
“Should
You
Use
Responsive
Design?”
• Looking
Into
The
Future
• ReconstrucCng
Responsive
Design
•
•
•
•
•
•

3. 1996:
The
Desktop
hRp://www2.warnerbros.com/spacejam/movie/jam.htm

4. 1999/2002:
WAP
Mobile

5. 2007:
The
iPhone

6. “This
is
the
real
Web!”

7. “Mobile
Web”

8. Is
Responsive
Design
a
Fad?

9. How
Responsive
Do
You
Want
To
Get?

10. Fluid
Design
Images
adjust
their
size
based
on
the
viewport
size.
In
an
600-­‐pixel
view,
you
see
this.
In
a
768-­‐pixel
view,
you
see
this.

11. Contextual
Design
Design
the
experience
based
on
how
people
generally
use
the
device.
I
want
to
check
I
want
to
immerse
I
want
to
manage
hRp://whitneyhess.com/blog/2012/02/07/locaCon-­‐agnosCc-­‐context-­‐specific/

12. Contextual
Design
Display
Common
elements
inherit
look
and
feel
of
the
device
they
are
used
on.
Example:
Drop
downs
take
on
interface
of
different
device
types
hRp://www.lukew.com/ff/entry.asp?1000

13. Responsive
Design
With
Server
Side
Components
The
page
redesigns
itself
based
on
the
viewable
width
of
the
browser.
It
only
sends
the
appropriate
pieces
needed.
hRp://www.lukew.com/ff/entry.asp?1509

14. Jakob
Nielsen
&
Responsive
Design
www.useit.com/alertbox/mobile-­‐vs-­‐full-­‐sites.html
www.useit.com/alertbox/repurposing

15. Jakob
Nielsen
&
Responsive
Design
“I
was
wriCng
about
user
experience,
not
implementaCon.
...
Responsive
design
is
one
of
the
ways
to
achieve
different
user
interfaces
for
different
devices.
It
should
be
up
to
the
engineers
to
determine
the
most
efficient
way
of
achieving
the
user
experience
goals.
All
we
usability
people
should
decide
is
how
the
site
should
work
for
users,
not
how
this
is
implemented.”
hRp://www.netmagazine.com/interviews/nielsen-­‐responds-­‐mobile-­‐criCcism

16. Approaching
The
Design
Process:
Mobile
vs
Tablet
vs
Desktop
• Content-­‐Driven
Design
• Approximate
Designs
• Mobile
First

17. Content-­‐Driven
Design
Instead
of
looking
at
pieces
of
funcConality
individually,
a
site
becomes
a
series
of
components
that
shii
as
needed
depending
on
the
content
on
the
site.

18. Approximate
Designs
As
you
design
a
page,
define
a
small,
medium
and
large
point
of
view.

19. Mobile
First
A
designer
should
focus
on
the
core
set
of
tasks
for
a
mobile
device,
then
add
addiConal
funcConality
when
using
tablets
and
desktop.

20. Benefits
•
•
•
•
Creates
a
cohesive
experience
for
users
Content
and
funcConality
is
targeted
PotenCal
management
efficiencies
Longer
shelf
life

21. PiFalls
•
•
•
•
•
Longer
to
design
Longer
to
develop
(and
harder
to
do
right)
Costs
more
Paradigm
shii
for
clients,
especially
in
the
approval
process
Faith
in
the
device-­‐sensing
capabiliCes
on
the
server

22. Should
We
Use
Responsive
Design?

23. It
Depends.
•
•
•
•
•
•
Site
needs
Site
architecture
User
needs
User
environment
User
flows
Time
available

24. Examples
•
•
•
•
•
•
•
•
•
roundarchisobar.com
goang.com
sCtch.hermones.com
thereturn.adidas.com
bostonglobe.com
barackobama.com
sony.com
starbucks.com
londonandpartners.com

25. Looking
Into
The
Future

26. ReconstrucCng
Responsive
Design
• It’s
a
method.
It
can
be
the
right
method,
but
not
always.
• Bring
and
keep
the
key
factors
top
of
mind
when
determining
how
to
go
about
this.
• Whether
to
go
with
responsive
design
is
an
everyone
decision
(client,
user
experience,
creaCve,
producCon).

27. Websites
To
Help
You
• www.netmagazine.com/features/50-­‐fantasCc-­‐
tools-­‐responsive-­‐web-­‐design
• bradfrost.github.com/this-­‐is-­‐responsive/
• www.awwwards.com/7-­‐essenCal-­‐books-­‐on-­‐
responsive-­‐web-­‐design-­‐you-­‐do-­‐not-­‐want-­‐to-­‐
miss.html

28. Every
Single
Link
From
Tonight
On
One
Page
goo.gl/2Hiu

29. Responsive
Design
and
You
Michelle
Dash,
Joe
Hass,
Bill
Welense