Can Media Queries Save Us All?

3,016 views

Published on

Presented May 27, 2011 at WebVisions in Portland, OR.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,016
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
24
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Can Media Queries Save Us All?

  1. 1. Can Media Queries Save Us All? Presented by Tim Kadlec - @tkadlec http://flic.kr/p/6iMxyTFriday, May 27, 2011
  2. 2. No* *at least not by themselves http://flic.kr/p/7DzC2SFriday, May 27, 2011
  3. 3. So what’s the problem? http://flic.kr/p/6Jnxr1Friday, May 27, 2011
  4. 4. She is. http://flic.kr/p/7c8NkqFriday, May 27, 2011
  5. 5. So is this person... So is the cat http://flic.kr/p/7QPvjgFriday, May 27, 2011
  6. 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 SchmidtFriday, May 27, 2011
  7. 7. http://flic.kr/p/8PGKvrFriday, May 27, 2011
  8. 8. Option #1: Ignore http://flic.kr/p/coTdyFriday, May 27, 2011
  9. 9. Option #2: Separate Sites http://flic.kr/p/8rWoUdFriday, May 27, 2011
  10. 10. Slight Detour... http://flic.kr/p/9i3TMDFriday, May 27, 2011
  11. 11. How do we define mobile? http://flic.kr/p/7Er6afFriday, May 27, 2011
  12. 12. TextFriday, May 27, 2011
  13. 13. Is this a mobile device?Friday, May 27, 2011
  14. 14. Is this mobile use?Friday, May 27, 2011
  15. 15. Form != Function TextFriday, May 27, 2011
  16. 16. Option #2: Separate SitesFriday, May 27, 2011
  17. 17. Option #3: Adapt http://flic.kr/p/2LZPkHFriday, May 27, 2011
  18. 18. http://www.alistapart.com/articles/responsive-web-design/ TextFriday, May 27, 2011
  19. 19. Friday, May 27, 2011
  20. 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 approachFriday, May 27, 2011
  21. 21. Don’t Get Too Granular http://flic.kr/p/99UEu4Friday, May 27, 2011
  22. 22. /* base styles - optimized for desktop */ @media (max-width: 600px) {....} @media (max-width: 400px) {....} @media (min-width: 1300px) {....}Friday, May 27, 2011
  23. 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-yiibuFriday, May 27, 2011
  24. 24. Start with thisFriday, May 27, 2011
  25. 25. /* base styles - optimized for small screens */ @media (min-width: 400px) { .... } @media (min-width: 600px) { .... } @media (min-width: 1300px) { .... }Friday, May 27, 2011
  26. 26. http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ TextFriday, May 27, 2011
  27. 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. 28. Performance http://flic.kr/p/713QR9Friday, May 27, 2011
  29. 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 homeFriday, May 27, 2011
  30. 30. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ TextFriday, May 27, 2011
  31. 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. 32. Responsive ImagesFriday, May 27, 2011
  33. 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. 34. Responsive Images Script <img src="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-ImagesFriday, May 27, 2011
  35. 35. Assets Responsive ImagesFriday, May 27, 2011
  36. 36. By Width if (screen.width >= 320) { // bring the hotness }Friday, May 27, 2011
  37. 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. 38. By Some Combination if (localStorage.supported && screen.width >= 320) { //bring the hotness }Friday, May 27, 2011
  39. 39. Combine with Device Detection He said what? http://flic.kr/p/81vbkuFriday, May 27, 2011
  40. 40. http://flic.kr/p/3HMbNFriday, May 27, 2011
  41. 41. Summary • Device Classification • Mobile First • Resize Images - don’t just scale • Responsive assets • Pair with device detection • Challenge traditional assumptionsFriday, May 27, 2011
  42. 42. Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec http://flic.kr/p/7MhBfDFriday, May 27, 2011
  43. 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-usersFriday, May 27, 2011

×