Can Media Queries Save Us All?

  • 2,286 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,286
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
23
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Can Media Queries Save Us All? Presented by Tim Kadlec - @tkadlec http://flic.kr/p/6iMxyTFriday, May 27, 2011
  • 2. No* *at least not by themselves http://flic.kr/p/7DzC2SFriday, May 27, 2011
  • 3. So what’s the problem? http://flic.kr/p/6Jnxr1Friday, May 27, 2011
  • 4. She is. http://flic.kr/p/7c8NkqFriday, May 27, 2011
  • 5. So is this person... So is the cat http://flic.kr/p/7QPvjgFriday, 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 SchmidtFriday, May 27, 2011
  • 7. http://flic.kr/p/8PGKvrFriday, May 27, 2011
  • 8. Option #1: Ignore http://flic.kr/p/coTdyFriday, May 27, 2011
  • 9. Option #2: Separate Sites http://flic.kr/p/8rWoUdFriday, May 27, 2011
  • 10. Slight Detour... http://flic.kr/p/9i3TMDFriday, May 27, 2011
  • 11. How do we define mobile? http://flic.kr/p/7Er6afFriday, May 27, 2011
  • 12. TextFriday, May 27, 2011
  • 13. Is this a mobile device?Friday, May 27, 2011
  • 14. Is this mobile use?Friday, May 27, 2011
  • 15. Form != Function TextFriday, May 27, 2011
  • 16. Option #2: Separate SitesFriday, May 27, 2011
  • 17. Option #3: Adapt http://flic.kr/p/2LZPkHFriday, May 27, 2011
  • 18. http://www.alistapart.com/articles/responsive-web-design/ TextFriday, 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 approachFriday, May 27, 2011
  • 21. Don’t Get Too Granular http://flic.kr/p/99UEu4Friday, 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 Hi! first @media query” http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuFriday, May 27, 2011
  • 24. Start with thisFriday, 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. http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ TextFriday, 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. Performance http://flic.kr/p/713QR9Friday, 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 homeFriday, May 27, 2011
  • 30. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ TextFriday, May 27, 2011
  • 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. Responsive ImagesFriday, 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. Responsive Images Script <img src="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-ImagesFriday, May 27, 2011
  • 35. Assets Responsive ImagesFriday, May 27, 2011
  • 36. By Width if (screen.width >= 320) { // bring the hotness }Friday, May 27, 2011
  • 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. By Some Combination if (localStorage.supported && screen.width >= 320) { //bring the hotness }Friday, May 27, 2011
  • 39. Combine with Device Detection He said what? http://flic.kr/p/81vbkuFriday, May 27, 2011
  • 40. http://flic.kr/p/3HMbNFriday, May 27, 2011
  • 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. Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec http://flic.kr/p/7MhBfDFriday, May 27, 2011
  • 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