Can Media Queries Save Us All?                       Presented by Tim Kadlec - @tkadlec                                   ...
No*                       *at least not by themselves                                                     http://flic.kr/p...
So what’s the problem?                                           http://flic.kr/p/6Jnxr1Friday, May 27, 2011
She is.                       http://flic.kr/p/7c8NkqFriday, May 27, 2011
So is this person...   So is the cat                              http://flic.kr/p/7QPvjgFriday, May 27, 2011
“         One of the interesting estimates is                 that there are about 35 billion                 devices conn...
http://flic.kr/p/8PGKvrFriday, May 27, 2011
Option #1: Ignore                        http://flic.kr/p/coTdyFriday, May 27, 2011
Option #2: Separate Sites                                         http://flic.kr/p/8rWoUdFriday, May 27, 2011
Slight Detour...                                http://flic.kr/p/9i3TMDFriday, May 27, 2011
How do we define mobile?                                http://flic.kr/p/7Er6afFriday, May 27, 2011
TextFriday, May 27, 2011
Is this a mobile device?Friday, May 27, 2011
Is this mobile use?Friday, May 27, 2011
Form != Function                                          TextFriday, May 27, 2011
Option #2: Separate SitesFriday, May 27, 2011
Option #3: Adapt                                http://flic.kr/p/2LZPkHFriday, May 27, 2011
http://www.alistapart.com/articles/responsive-web-design/                                                                 ...
Friday, May 27, 2011
Device Classification                       • By device type (feature phones, smart                         phones, deskto...
Don’t Get Too Granular                                           http://flic.kr/p/99UEu4Friday, May 27, 2011
/* base styles - optimized for desktop */                 @media (max-width: 600px) {....}                 @media (max-wid...
“The absence of       support for @media       queries is in fact the                                                     ...
Start with thisFriday, May 27, 2011
/* base styles - optimized for small screens */                 @media (min-width: 400px) {                 ....          ...
http://filamentgroup.com/lab/                  respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/      ...
/* base styles - optimized for small screens */                 @media (min-width: 400px) {                 ....          ...
Performance                         http://flic.kr/p/713QR9Friday, May 27, 2011
58% of mobile users expect websites                 to load as quickly, almost as quickly                 or faster on the...
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/                                                        ...
Original Resized K Saved % Saved                   Holmes      34.7K   8.1K    26.6K    76.6%                   Watson    ...
Responsive ImagesFriday, May 27, 2011
<img src=http://src.sencha.io/http://                 mysite.com/myimage.png alt=My image/>                 <img src=http:...
Responsive Images Script                       <img src="small.jpg?full=large.jpg">               https://github.com/filam...
Assets                       Responsive ImagesFriday, May 27, 2011
By Width                       if (screen.width >= 320) {                           // bring the hotness                  ...
By Media Query                   if (matchMedia(only screen and                     (max-width: 480px)).matches) {        ...
By Some Combination                       if (localStorage.supported &&                         screen.width >= 320) {    ...
Combine with Device Detection                          He said                          what?                             ...
http://flic.kr/p/3HMbNFriday, May 27, 2011
Summary                       • Device Classification                       • Mobile First                       • Resize ...
Thank you!    Tim Kadlec    http://www.timkadlec.com    Twitter: @tkadlec                               http://flic.kr/p/7...
Sources                       •   http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2                       • ...
Upcoming SlideShare
Loading in...5
×

Can Media Queries Save Us All?

2,488

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
2,488
On Slideshare
0
From Embeds
0
Number of Embeds
4
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×