Responsive design
0 likes407 views
This document discusses responsive design and some of its challenges. It introduces responsive design principles like flexible grids, images and media using percentages instead of fixed values. It also discusses media queries and viewports. Some challenges mentioned include heavy file sizes for mobile, flaky media query support on mobile, and generating optimized images on the fly. It notes the "dark side" of responsive design and questions whether mobile context can truly be detected. It concludes by mentioning responsive design could apply beyond just the web.
Responsive design
- 1. Responsive Design By Alard Weisscher
- 2. Boston Globe
- 3. Alard Weisscher By Alard Weisscher
- 4. In the beginning … .page { width: 960px }
- 5. Ingredients 1. Flexible grid based layout 2. Flexible images and media 3. Media queries
- 6. Using percentages instead of fixed values. Sizing related to its context. Strange nrs …
- 7. Scaling images. Meet max-width: 100%, overflow and the IE nightmares
- 8. Media queries @media screen and (min-‐width: 1024px) { … }, <meta name=‘viewport’ … />
- 9. The DARK SIDE of responsive design
- 10. Browser resizing of images BIG files for mobile, processor intensive, media queries support flaky in mobile
- 11. On the fly generation of right size Experiment: use javascript and PHP to generate a image on the fly.
- 12. Heavy footprint of files on mobile Javascript, CSS files, images e.g. NY times mobile (54K) vs NY times desktop (637.4K)
- 13. Mobile First Default is light weight, progressively build upwards.
- 14. But hey! … mobile is a different context People have different needs in different contexts. Touch proof? Poor connectivity? Can you even ‘detect’ if a person is in a mobile context?
- 15. RD Resources Google: responsive design tools
- 16. Responsive design beyond the Web Interactive Video / TV world