Your SlideShare is downloading. ×
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,386

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,386
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

×