responsive design 101
DESCRIPTION
Links were disabled when I conversed .key to .pdf. Links on the DEMO page: 1. Flexible Grid: http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html 2. Partial Responsive Design: http://d.alistapart.com/responsive-web-design/ex/ex-site-mini.html 3. Responsive Design: http://d.alistapart.com/responsive-web-design/ex/ex-site-FINAL.htmlTRANSCRIPT
Responsive DesignA Brief Introduction
A DEMO
Flexible Grid Design
On the Way to Responsive Design
Responsive Design
WHAT
Flexible, Fluid, and Adaptive Web Sites
Respond toUsers’ Needs
Device Capacities
WHY
Mobile-first Strategy
Mobile Site VS. Mobile APP
Enhanced user experience for users
Less frustration for developers
HOW
3 Technical Ingredients (CSS):
Fluid grids
Flexible images
Media Queries
New Way of Thinking - UX Perspective
Technical Ingredients
New Thinkings
UX PERSPECTIVEContent Strategy
UX PERSPECTIVEContent Strategy
UX PERSPECTIVEContent Strategy - Goals
Emphasize important content Make relationships clearMake it accessible on small screens
Content Strategy - How
Start with Contents: Content InventoryCategorize Contents Prioritize ContentsStart from the Smallest Screen Size: Mobile First
UX PERSPECTIVEContent Strategy - Goals
Emphasize important content Make relationships clearMake it accessible on small screens
Content Strategy - How
Start with Contents: Content InventoryCategorize Contents Prioritize ContentsStart from the Smallest Screen Size: Mobile First
UX PERSPECTIVEContent Strategy
Navigation Design
UX PERSPECTIVEContent Strategy
Navigation Design
Toogle
UX PERSPECTIVEContent Strategy
Navigation Design
Toogle Sliding
UX PERSPECTIVEContent Strategy
Navigation Design
Toogle Sliding Footer Anchor
UX PERSPECTIVEContent Strategy
Navigation Design
Context-specific
Touchscreen VS. Cursor-based InteractionGeolocation API? Number Dialing? Instant Messaging?
UX PERSPECTIVEContent Strategy
Navigation Design
Context-specific
Testing Responsive Design: e.g., Responsive.is, Mobitest
WHO IS DOING IT?
Starbucks
TIME
TechCrunch
ACCESSIBILITY
ACCESSIBILITY
Connection:
Flexible Site
Heavily Rely on Structured HTML and CSS
MORE INSPIRATIONS
http://www.awwwards.com/websites/responsive-design/
http://mediaqueri.es/