Can Media Queries Save Us All?
•
7 likes•1,681 views
The document discusses whether media queries can help make websites responsive to different devices. It argues that media queries alone are not enough and that a mobile-first approach is needed. Key points covered include using responsive images, designing for mobile sizes first before larger screens, and combining media queries with device detection. The presentation provides examples of how to implement responsive design techniques.
Recommended
More Related Content
Similar to Can Media Queries Save Us All?
Similar to Can Media Queries Save Us All? (20)
Recently uploaded
Recently uploaded (20)
Can Media Queries Save Us All?
- 1. Can Media Queries Save Us All? Presented by Tim Kadlec - @tkadlec http://flic.kr/p/6iMxyT Friday, May 27, 2011
- 2. No* *at least not by themselves http://flic.kr/p/7DzC2S Friday, May 27, 2011
- 3. So what’s the problem? http://flic.kr/p/6Jnxr1 Friday, May 27, 2011
- 4. She is. http://flic.kr/p/7c8Nkq Friday, May 27, 2011
- 5. So is this person... So is the cat http://flic.kr/p/7QPvjg Friday, May 27, 2011
- 6. “ One of the interesting estimates is that there are about 35 billion devices connected to the Internet. Soon, there will be so many that we’ll stop counting. - Eric Schmidt Friday, May 27, 2011
- 8. Option #1: Ignore http://flic.kr/p/coTdy Friday, May 27, 2011
- 9. Option #2: Separate Sites http://flic.kr/p/8rWoUd Friday, May 27, 2011
- 10. Slight Detour... http://flic.kr/p/9i3TMD Friday, May 27, 2011
- 11. How do we define mobile? http://flic.kr/p/7Er6af Friday, May 27, 2011
- 12. Text Friday, May 27, 2011
- 13. Is this a mobile device? Friday, May 27, 2011
- 14. Is this mobile use? Friday, May 27, 2011
- 15. Form != Function Text Friday, May 27, 2011
- 16. Option #2: Separate Sites Friday, May 27, 2011
- 17. Option #3: Adapt http://flic.kr/p/2LZPkH Friday, May 27, 2011
- 18. http://www.alistapart.com/articles/responsive-web-design/ Text Friday, May 27, 2011
- 19. Friday, May 27, 2011
- 20. Device Classification • By device type (feature phones, smart phones, desktop, tv, tablets) • By capabilities ((X)HTML, CSS, Javascript) • By UI mode (touch, pointer) • By resolution • Holistic approach Friday, May 27, 2011
- 21. Don’t Get Too Granular http://flic.kr/p/99UEu4 Friday, May 27, 2011
- 22. /* base styles - optimized for desktop */ @media (max-width: 600px) {....} @media (max-width: 400px) {....} @media (min-width: 1300px) {....} Friday, May 27, 2011
- 23. “The absence of support for @media queries is in fact the Hi! first @media query” http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Friday, May 27, 2011
- 24. Start with this Friday, May 27, 2011
- 25. /* base styles - optimized for small screens */ @media (min-width: 400px) { .... } @media (min-width: 600px) { .... } @media (min-width: 1300px) { .... } Friday, May 27, 2011
- 26. http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ Text Friday, May 27, 2011
- 27. /* base styles - optimized for small screens */ @media (min-width: 400px) { .... }/*/mediaquery*/ @media (min-width: 600px) { .... }/*/mediaquery*/ @media (min-width: 1300px) { .... }/*/mediaquery*/ Friday, May 27, 2011
- 28. Performance http://flic.kr/p/713QR9 Friday, May 27, 2011
- 29. 58% of mobile users expect websites to load as quickly, almost as quickly or faster on their mobile phone, compared to the computer they use at home Friday, May 27, 2011
- 30. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Text Friday, May 27, 2011
- 31. Original Resized K Saved % Saved Holmes 34.7K 8.1K 26.6K 76.6% Watson 39.0K 8.4K 30.6K 78.4% Mycroft 30.5K 6.7K 23.8K 78.0% Moriarty 43.4K 8.2K 35.2K 81.1% Adler 26.0K 6.6K 19.4K 74.6% Winter 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0% Friday, May 27, 2011
- 32. Responsive Images Friday, May 27, 2011
- 33. <img src='http://src.sencha.io/http:// mysite.com/myimage.png' alt='My image'/> <img src='http://src.sencha.io/x50/http:// mysite.com/myimage.png' alt='My image'/> http://docs.sencha.com/io/src/ Friday, May 27, 2011
- 34. Responsive Images Script <img src="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-Images Friday, May 27, 2011
- 35. Assets Responsive Images Friday, May 27, 2011
- 36. By Width if (screen.width >= 320) { // bring the hotness } Friday, May 27, 2011
- 37. By Media Query if (matchMedia('only screen and (max-width: 480px)').matches) { // bring the hotness } https://github.com/paulirish/matchMedia.js/ Friday, May 27, 2011
- 38. By Some Combination if (localStorage.supported && screen.width >= 320) { //bring the hotness } Friday, May 27, 2011
- 39. Combine with Device Detection He said what? http://flic.kr/p/81vbku Friday, May 27, 2011
- 41. Summary • Device Classification • Mobile First • Resize Images - don’t just scale • Responsive assets • Pair with device detection • Challenge traditional assumptions Friday, May 27, 2011
- 42. Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec http://flic.kr/p/7MhBfD Friday, May 27, 2011
- 43. Sources • http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2 • http://www.slideshare.net/OnDevice/the-mobile-only-internet-generation • http://www.comscore.com/Press_Events/Press_Releases/2011/1/Web- based_Email_Shows_Signs_of_Decline_in_the_U.S._While_Mobile_Email_Usage_on_the_Ris e • http://internet2go.net/news/data-and-forecasts/pew-85-us-adults-have-mobile-phones- one-ten-high-earners-own-tablets • http://www.bulletbits.com/slow-sites-and-bad-press/ • http://techcrunch.com/2011/01/25/eric-schmidt-at-dld11-google-will-add-1000-new- employees-in-europe/ • http://www.lukew.com/ff/entry.asp?1258 • http://www.slideshare.net/Gomez_Inc/gomez-mobile-web-experience-survey-why-the- mobile-web-is-disappointing-end-users Friday, May 27, 2011