Responsive Design 101

710 views
588 views

Published on

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.html

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
710
On SlideShare
0
From Embeds
0
Number of Embeds
226
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Design 101

  1. 1. Responsive Design A Brief Introduction
  2. 2. A DEMO Flexible Grid Design On the Way to Responsive Design Responsive Design
  3. 3. WHAT Flexible, Fluid, and Adaptive Web Sites Respond to Users’ Needs Device Capacities
  4. 4. WHY Mobile-first Strategy Mobile Site VS. Mobile APP Enhanced user experience for users Less frustration for developers
  5. 5. HOW 3 Technical Ingredients (CSS): Fluid grids Flexible images Media Queries New Way of Thinking - UX Perspective Technical Ingredients New Thinkings
  6. 6. UX PERSPECTIVE Content Strategy
  7. 7. UX PERSPECTIVE Content Strategy
  8. 8. UX PERSPECTIVE Content Strategy - Goals Emphasize important content Make relationships clear Make it accessible on small screens Content Strategy - How Start with Contents: Content Inventory Categorize Contents Prioritize Contents Start from the Smallest Screen Size: Mobile First
  9. 9. UX PERSPECTIVE Content Strategy - Goals Emphasize important content Make relationships clear Make it accessible on small screens Content Strategy - How Start with Contents: Content Inventory Categorize Contents Prioritize Contents Start from the Smallest Screen Size: Mobile First
  10. 10. UX PERSPECTIVE Content Strategy Navigation Design
  11. 11. UX PERSPECTIVE Content Strategy Navigation Design Toogle
  12. 12. UX PERSPECTIVE Content Strategy Navigation Design Toogle Sliding
  13. 13. UX PERSPECTIVE Content Strategy Navigation Design Toogle Sliding Footer Anchor
  14. 14. UX PERSPECTIVE Content Strategy Navigation Design Context-specific Touchscreen VS. Cursor-based Interaction Geolocation API? Number Dialing? Instant Messaging?
  15. 15. UX PERSPECTIVE Content Strategy Navigation Design Context-specific Testing Responsive Design: e.g., Responsive.is, Mobitest
  16. 16. WHO IS DOING IT? Starbucks TIME TechCrunch
  17. 17. ACCESSIBILITY
  18. 18. ACCESSIBILITY Connection: Flexible Site Heavily Rely on Structured HTML and CSS
  19. 19. MORE INSPIRATIONS http://www.awwwards.com/websites/responsive-design/ http://mediaqueri.es/

×