Can Media Queries Save Us All?

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

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