30% to 50% of your website’s traffic now comes from mobile devices. Taking a One Web approach ensures that not only does your site work on the smartphones and tablets of today, but it can be future-proofed for the unimagined screens of tomorrow. Three popular approaches to developing a One Web site: using a responsive design; client-side adaptive designs; and server-side adaptive designs. One is not better or worse than the other; each has its own strengths and weaknesses and the wise web developer will consider the benefits and drawbacks of each before picking the one that works for their next project.

1. Adap%ve
Web
Design
vs.
Responsive
Web
Design
Designing
for
the
Mobile
Consumer
Jam
Hashmi
CEO
&
President
ClickTecs
@jamshaidhashmi
jam@clicktecs.com

2. Agenda
§ Understanding
the
Nomenclature
§ Adap%ve
Website
Design
(AWD)
§ Responsive
Website
Design
(RWD)
§ Advantages
and
Disadvantages
of
AWD
and
RWD
§ Deciding
between
Responsive
and
Adap%ve
§ Examples
from
Search
Results
PorLolio
§ How
to
uncover
lost
Opportuni%es
in
Analy%cs
§ Q/A

3. Nomenclature
Responsive
Web
Design
Adap5ve
Web
Design

4. Nomenclature
©2013
WSI.
All
rights
reserved.
Responsive
Web
Design
Adap5ve
Web
Design

5. Simplify
The
two
main
categories:
– Adap%ve
Web
Design
(AWD)
– Responsive
Web
Design
(RWD)

6. Similari%es
AWD
&
RWD
Both
allow
websites
to
be
viewed
in
mobile
devices
and
various
screen
sizes,
ul%mately
providing
visitors
with
a
be[er
mobile
user
experience

7. Adap%ve
Web
Design
(AWD)
• Uses
the
server
to
detect
the
device
the
website
is
being
viewed
on
(desktop,
tablet,
smartphone)
• Sends
specific
files
for
that
device
• Dis%nct
templates
for
each
device
• Pages
load
faster
–
usually
housed
on
its
own
domain
m.domain.com
or
domain.com/m
The
condensed
defini5on
of
an
adap5ve
design
is
that
it
will
change
to
fit
a
predetermined
set
of
screen
and
device
sizes.

8. Responsive
Web
Design
(RWD)
• Uses
specific
CSS
code
to
modify
the
presenta%on
of
a
website
based
on
the
size
of
the
device
it
is
being
displayed
on
• Informa%on
for
every
device
is
downloaded
regardless
of
whether
it
is
used
• Pages
load
slower
–
Same
Domain
name
The
condensed
defini5on
of
a
responsive
web
design
therefore
is
that
it
will
fluidly
change
and
respond
to
fit
any
screen
or
device
size.

9.
Examples
of
Adap5ve
Website
Design

10. Different
URL
-­‐
AWD

11. Different
URL
-­‐
AWD
IPhone
Portrait

12.
Examples
of
Responsive
Website
Design

13. Same
URL
-­‐
RWD
IPad
Portrait
IPad
Landscape

14. Same
URL-­‐
RWD
©2013
WSI.
All
rights
reserved.
Iphone
Portrait
IPad
Portrait

15. The
Power
of
RWD

16. Average
39%
decrease
in
Bounce
Rate

17. Finding
Opportunity
• Get
the
Analy%cs
Access

18. Find
Lost
Opportuni%es
• Mobile
Traffic
Bounce
Rate

19. Deciding
b/w
AWD
&
RWD
• Adap%ve
requires
you
to
develop
and
maintain
separate
websites
either
by
URL
or
by
separate
HTML/CSS
code
• With
a
separate
website/HTML,
you
can
fine
tune
and
op%mize
how
your
site
displays
on
a
par%cular
device
• With
adap%ve
web
design
you
can
op%mize
image
sizes
i.e.
low
resolu%on
for
low-­‐
bandwidths
• SEO,
Links,
Content
all
need
to
be
redone

20. Deciding
b/w
AWD
&
RWD
• Responsive
web
design
relies
on
HTML5,
CSS3
and
Javascript,
and
therefore
works
best
in
rela%vely
modern
web
browsers
• Responsive
web
design
is
suitable
for
delivery
across
an
increasingly
fragmented
mobile
device
market
(we
noted
over
500
devices
used
in
the
last
client
example
shared)
• SEO,
Links,
Content
all
get
carried
over
…
Google
Loves
Responsive

21. About
ClickTecs
• Founded
in
2001
• Head
Office
in
Mississauga,
Canada
• Our
Services:
– Website
Design
&
Development
(e-­‐commerce)
– SEO
&
Social
Media
Marke%ng
– PPC
and
Landing
Page
A/B
Split
Tes%ng
– Custom
Applica%on
Development

22. ©2013
WSI.
All
rights
Contact
Us
Email
:
info@clicktecs.com
Website
:
www.clicktecs.com