Integrated  Use  of  Responsive  &  Adap4ve  Web  Design    

Zackary  Webb    �    Razorfish    �    Chicago  

This  guy    

Shannon  Denton  Razorfish,  CEO  –  North  America  

 Awesome  experiences  on  every  device  

?  ?  

?   ?  ?  

Adap4ve  Responsive  

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  

MIXING  IT  UP  Integrated  Use  of  Responsive  &  Adap4ve  Web  Design  

Adap4ve  Branches  

Smart  Phone  Site  

Desktop  Site  

Server-­‐Side:  User  Agent  Redirect   Tablet  Site  

Responsive  Templates  

Adap4ve  Branches  

Progressive  Enhancement  +  RESS  

Smart  Phone  Media  &  Features  

Desktop  Media  &  Features  

Server-­‐Side  Scrip4ng   Tablet  Media  &  Features  

Responsive  Templates  

Client-­‐Side:  •  Media  Queries  •  Responsive  Templates  

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)  

OTHER  CONSIDERATIONS  Integrated  Use  of  Responsive  &  Adap4ve  Web  Design  

Mobile  First  

1   2   3   4  

Accessibility  

So  what?  

QUESTIONS  &  COMMENTS  

THANK  YOU!