integrated use of responsive and adaptive web design (zackary webb)
Post on 21-Oct-2014
371 views
DESCRIPTION
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.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!