A debate has raged for several years, sparked when Responsive Web Design (RWD) became a big deal. On one side, the hoary defenders of Adaptive Web Design (AWD), the old school ballers. On the other, the proponents of One Web, the new school, the Responsive Web Design upstarts. The UX blog-o-sphere is rife with points of view, contradictions and comparisons, pro-this/anti-that rants, and a slew of info-graphics purporting to answer the questions once and for all. So which approach is best: AWD or RWD? The answer is BOTH. These two design philosophies are not mutually exclusive, and elements of both can be combined to create truly optimal web experiences across devices. By removing the constraints of using a single approach over another, it becomes possible to draw from each to employ a broader set of tools for solving UX problems in an omnichannel world.

1. Integrated
Use
of
Responsive
&
Adap4ve
Web
Design
Zackary
Webb
Ÿ
Razorfish
Ÿ
Chicago

2. This
guy
Shannon
Denton
Razorfish,
CEO
–
North
America

3. Awesome
experiences
on
every
device

4. ?
?
?
?
?
Adap4ve
Responsive

5. Server
&
Client
AWD
=
Server-­‐Side
• Variable
URLs
• User-­‐agent
redirects
• Device-­‐specific
layouts
• Flexible
source
order
• Op4mized
media
PRO:
Op4mal
performance
CON:
Inefficient
maintenance
RWD
=
Client-­‐Side
• Consistent
URLs
• Media
queries
• Fluid
layouts
• Fixed
source
order
• Scalable
media
PRO:
Efficient
maintenance
CON:
Performance
issues

6. MIXING
IT
UP
Integrated
Use
of
Responsive
&
Adap4ve
Web
Design

7. Adap4ve
Branches
Smart
Phone
Site
Desktop
Site
Server-­‐Side:
User
Agent
Redirect
Tablet
Site
Responsive
Templates
Adap4ve
Branches

8. Progressive
Enhancement
+
RESS
Smart
Phone
Media
&
Features
Desktop
Media
&
Features
Server-­‐Side
Scrip4ng
Tablet
Media
&
Features
Responsive
Templates
Client-­‐Side:
• Media
Queries
• Responsive
Templates

9. Device
Ranges
Smart
Phone
&
Tablet
Site
Desktop
Site
Server-­‐Side:
User
Agent
Redirect
Client-­‐Side:
• Media
Queries
• Responsive
Templates
• Scalable
Media
(op4mized
for
smaller
screens)
Client-­‐Side:
• Media
Queries
• Responsive
Templates
• Scalable
Media
(op4mized
for
larger
screens)

10. OTHER
CONSIDERATIONS
Integrated
Use
of
Responsive
&
Adap4ve
Web
Design

11. Mobile
First
1
2
3
4

12. Accessibility

13. So
what?

14. QUESTIONS
&
COMMENTS

15. THANK
YOU!