integrated use of responsive and adaptive web design (zackary webb)
Post on 21-Oct-2014
371 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
top related