Slide 1: Can Media Queries Save Us All?
Presented by Tim Kadlec - @tkadlec
http://flic.kr/p/6iMxyT
Friday, May 27, 2011
Slide 2: No*
*at least not by themselves
http://flic.kr/p/7DzC2S
Friday, May 27, 2011
Slide 3: So what’s the problem?
http://flic.kr/p/6Jnxr1
Friday, May 27, 2011
Slide 4: She is.
http://flic.kr/p/7c8Nkq
Friday, May 27, 2011
Slide 5: So is this person...
So is the cat
http://flic.kr/p/7QPvjg
Friday, May 27, 2011
Slide 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
Slide 7: http://flic.kr/p/8PGKvr
Friday, May 27, 2011
Slide 8: Option #1: Ignore
http://flic.kr/p/coTdy
Friday, May 27, 2011
Slide 9: Option #2: Separate Sites
http://flic.kr/p/8rWoUd
Friday, May 27, 2011
Slide 10: Slight Detour...
http://flic.kr/p/9i3TMD
Friday, May 27, 2011
Slide 11: How do we define mobile?
http://flic.kr/p/7Er6af
Friday, May 27, 2011
Slide 12: Text
Friday, May 27, 2011
Slide 13: Is this a mobile device?
Friday, May 27, 2011
Slide 14: Is this mobile use?
Friday, May 27, 2011
Slide 15: Form != Function
Text
Friday, May 27, 2011
Slide 16: Option #2: Separate Sites
Friday, May 27, 2011
Slide 17: Option #3: Adapt
http://flic.kr/p/2LZPkH
Friday, May 27, 2011
Slide 18: http://www.alistapart.com/articles/responsive-web-design/
Text
Friday, May 27, 2011
Slide 19: Friday, May 27, 2011
Slide 20: Device Classification
• By device type (feature phones, smart
phones, desktop, tv, tablets) Javascript)
• By capabilities ((X)HTML, CSS, • By UI mode (touch, pointer) • By resolution • Holistic approach
Friday, May 27, 2011
Slide 21: Don’t Get Too Granular
http://flic.kr/p/99UEu4
Friday, May 27, 2011
Slide 22: /* base styles - optimized for desktop */ @media (max-width: 600px) {....} @media (max-width: 400px) {....} @media (min-width: 1300px) {....}
Friday, May 27, 2011
Slide 23: “The absence of support for @media queries is in fact the first @media query”
Hi!
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Friday, May 27, 2011
Slide 24: Start with this
Friday, May 27, 2011
Slide 25: /* base styles - optimized for small screens */ @media (min-width: 400px) { .... } @media (min-width: 600px) { .... } @media (min-width: 1300px) { .... }
Friday, May 27, 2011
Slide 26: http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ Text
Friday, May 27, 2011
Slide 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
Slide 28: Performance
http://flic.kr/p/713QR9
Friday, May 27, 2011
Slide 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
Slide 30: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Text
Friday, May 27, 2011
Slide 31: Original Resized K Saved % Saved Holmes Watson Mycroft Moriarty Adler Winter Total
34.7K 39.0K 30.5K 43.4K 26.0K 34.7K 8.1K 8.4K 6.7K 8.2K 6.6K 7.8K 26.6K 30.6K 23.8K 35.2K 19.4K 26.9K 76.6% 78.4% 78.0% 81.1% 74.6% 77.5%
208.3K
45.8K
162.5K
78.0%
Friday, May 27, 2011
Slide 32: Responsive Images
Friday, May 27, 2011
Slide 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
Slide 34: Responsive Images Script
<img src="small.jpg?full=large.jpg">
https://github.com/filamentgroup/Responsive-Images
Friday, May 27, 2011
Slide 35: Assets Responsive Images
Friday, May 27, 2011
Slide 36: By Width
if (screen.width >= 320) { // bring the hotness }
Friday, May 27, 2011
Slide 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
Slide 38: By Some Combination
if (localStorage.supported && screen.width >= 320) { //bring the hotness }
Friday, May 27, 2011
Slide 39: Combine with Device Detection
He said what?
http://flic.kr/p/81vbku
Friday, May 27, 2011
Slide 40: http://flic.kr/p/3HMbN
Friday, May 27, 2011
Slide 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
Slide 42: Thank you!
Tim Kadlec
http://www.timkadlec.com Twitter: @tkadlec
http://flic.kr/p/7MhBfD
Friday, May 27, 2011
Slide 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/Webbased_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-phonesone-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-newemployees-in-europe/ http://www.lukew.com/ff/entry.asp?1258 http://www.slideshare.net/Gomez_Inc/gomez-mobile-web-experience-survey-why-themobile-web-is-disappointing-end-users
Friday, May 27, 2011
