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
![Page 1: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/1.jpg)
Responsive DesignA Brief Introduction
![Page 2: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/2.jpg)
A DEMO
Flexible Grid Design
On the Way to Responsive Design
Responsive Design
![Page 3: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/3.jpg)
WHAT
Flexible, Fluid, and Adaptive Web Sites
Respond toUsers’ Needs
Device Capacities
![Page 4: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/4.jpg)
WHY
Mobile-first Strategy
Mobile Site VS. Mobile APP
Enhanced user experience for users
Less frustration for developers
![Page 5: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/5.jpg)
HOW
3 Technical Ingredients (CSS):
Fluid grids
Flexible images
Media Queries
New Way of Thinking - UX Perspective
Technical Ingredients
New Thinkings
![Page 6: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/6.jpg)
UX PERSPECTIVEContent Strategy
![Page 7: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/7.jpg)
UX PERSPECTIVEContent Strategy
![Page 8: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/8.jpg)
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
![Page 9: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/9.jpg)
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
![Page 10: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/10.jpg)
UX PERSPECTIVEContent Strategy
Navigation Design
![Page 11: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/11.jpg)
UX PERSPECTIVEContent Strategy
Navigation Design
Toogle
![Page 12: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/12.jpg)
UX PERSPECTIVEContent Strategy
Navigation Design
Toogle Sliding
![Page 13: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/13.jpg)
UX PERSPECTIVEContent Strategy
Navigation Design
Toogle Sliding Footer Anchor
![Page 14: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/14.jpg)
UX PERSPECTIVEContent Strategy
Navigation Design
Context-specific
Touchscreen VS. Cursor-based InteractionGeolocation API? Number Dialing? Instant Messaging?
![Page 15: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/15.jpg)
UX PERSPECTIVEContent Strategy
Navigation Design
Context-specific
Testing Responsive Design: e.g., Responsive.is, Mobitest
![Page 16: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/16.jpg)
WHO IS DOING IT?
Starbucks
TIME
TechCrunch
![Page 17: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/17.jpg)
ACCESSIBILITY
![Page 18: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/18.jpg)
ACCESSIBILITY
Connection:
Flexible Site
Heavily Rely on Structured HTML and CSS
![Page 19: Responsive Design 101](https://reader034.vdocument.in/reader034/viewer/2022051818/54b7a12e4a79591c048b45ac/html5/thumbnails/19.jpg)
MORE INSPIRATIONS
http://www.awwwards.com/websites/responsive-design/
http://mediaqueri.es/