Your SlideShare is downloading. ×
0
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Can Media Queries Save Us All?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Can Media Queries Save Us All?

2,411

Published on

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

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,411
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
24
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

×