Can Media Queries Save Us All?

A9a379f2e92c7ded4564190c5b286b78?s=47 Tim Kadlec
September 22, 2011

Can Media Queries Save Us All?

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

A9a379f2e92c7ded4564190c5b286b78?s=128

Tim Kadlec

September 22, 2011
Tweet

Transcript

  1. http://flic.kr/p/6iMxyT Can Media Queries Save Us All? Presented by Tim

    Kadlec - @tkadlec Friday, May 27, 2011
  2. http://flic.kr/p/7DzC2S No* *at least not by themselves Friday, May 27,

    2011
  3. http://flic.kr/p/6Jnxr1 So what’s the problem? Friday, May 27, 2011

  4. http://flic.kr/p/7c8Nkq She is. Friday, May 27, 2011

  5. http://flic.kr/p/7QPvjg So is this person... So is the cat 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
  7. http://flic.kr/p/8PGKvr Friday, May 27, 2011

  8. http://flic.kr/p/coTdy Option #1: Ignore Friday, May 27, 2011

  9. http://flic.kr/p/8rWoUd Option #2: Separate Sites Friday, May 27, 2011

  10. http://flic.kr/p/9i3TMD Slight Detour... Friday, May 27, 2011

  11. http://flic.kr/p/7Er6af How do we define mobile? 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. Text Form != Function Friday, May 27, 2011

  16. Option #2: Separate Sites Friday, May 27, 2011

  17. http://flic.kr/p/2LZPkH Option #3: Adapt Friday, May 27, 2011

  18. Text http://www.alistapart.com/articles/responsive-web-design/ 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. http://flic.kr/p/99UEu4 Don’t Get Too Granular 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 first @media query” http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Hi! 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. Text http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ 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. http://flic.kr/p/713QR9 Performance 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. Text http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Friday, May 27, 2011

  31. Original Resized K Saved % Saved Holmes Watson Mycroft Moriarty

    Adler Winter 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K 23.8K 78.0% 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 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. <img src="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-Images Responsive Images Script Friday, May 27, 2011

  35. Responsive Images Assets Friday, May 27, 2011

  36. if (screen.width >= 320) { // bring the hotness }

    By Width Friday, May 27, 2011
  37. if (matchMedia('only screen and (max-width: 480px)').matches) { // bring the

    hotness } https://github.com/paulirish/matchMedia.js/ By Media Query Friday, May 27, 2011
  38. if (localStorage.supported && screen.width >= 320) { //bring the hotness

    } By Some Combination Friday, May 27, 2011
  39. http://flic.kr/p/81vbku Combine with Device Detection He said what? Friday, May

    27, 2011
  40. http://flic.kr/p/3HMbN 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. http://flic.kr/p/7MhBfD Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec Friday, May

    27, 2011
  43. • 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 Sources Friday, May 27, 2011