Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)

989 views

Published on

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.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
989
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)

  1. 1. Integrated  Use  of  Responsive  &   Adap4ve  Web  Design     Zackary  Webb    Ÿ    Razorfish    Ÿ    Chicago  
  2. 2. This  guy     Shannon  Denton   Razorfish,  CEO  –  North  America  
  3. 3.  Awesome  experiences  on  every  device  
  4. 4. ?   ?   ?   ?   ?   Adap4ve   Responsive  
  5. 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. 6. MIXING  IT  UP   Integrated  Use  of  Responsive  &  Adap4ve  Web  Design  
  7. 7. Adap4ve  Branches   Smart  Phone  Site   Desktop  Site   Server-­‐Side:   User  Agent   Redirect   Tablet  Site   Responsive  Templates   Adap4ve  Branches  
  8. 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. 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. 10. OTHER  CONSIDERATIONS   Integrated  Use  of  Responsive  &  Adap4ve  Web  Design  
  11. 11. Mobile  First   1   2   3   4  
  12. 12. Accessibility  
  13. 13. So  what?  
  14. 14. QUESTIONS  &  COMMENTS  
  15. 15. THANK  YOU!  

×