integrated use of responsive and adaptive web design (zackary webb)
Post on 21-Oct-2014
370 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
![Page 1: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/1.jpg)
Integrated Use of Responsive & Adap4ve Web Design
Zackary Webb � Razorfish � Chicago
![Page 2: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/2.jpg)
This guy
Shannon Denton Razorfish, CEO – North America
![Page 3: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/3.jpg)
Awesome experiences on every device
![Page 4: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/4.jpg)
? ?
? ? ?
Adap4ve Responsive
![Page 5: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/5.jpg)
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
![Page 6: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/6.jpg)
MIXING IT UP Integrated Use of Responsive & Adap4ve Web Design
![Page 7: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/7.jpg)
Adap4ve Branches
Smart Phone Site
Desktop Site
Server-‐Side: User Agent Redirect Tablet Site
Responsive Templates
Adap4ve Branches
![Page 8: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/8.jpg)
Progressive Enhancement + RESS
Smart Phone Media & Features
Desktop Media & Features
Server-‐Side Scrip4ng Tablet Media & Features
Responsive Templates
Client-‐Side: • Media Queries • Responsive Templates
![Page 9: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/9.jpg)
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)
![Page 10: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/10.jpg)
OTHER CONSIDERATIONS Integrated Use of Responsive & Adap4ve Web Design
![Page 11: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/11.jpg)
Mobile First
1 2 3 4
![Page 12: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/12.jpg)
Accessibility
![Page 13: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/13.jpg)
So what?
![Page 14: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/14.jpg)
QUESTIONS & COMMENTS
![Page 15: Integrated Use of Responsive and Adaptive Web Design (Zackary Webb)](https://reader033.vdocuments.us/reader033/viewer/2022052819/5445e057afaf9fe72a8b46a4/html5/thumbnails/15.jpg)
THANK YOU!