Can Media Queries Save Us All?

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