• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Can Media Queries Save Us All?
 

Can Media Queries Save Us All?

on

  • 2,565 views

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

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

Statistics

Views

Total Views
2,565
Views on SlideShare
2,533
Embed Views
32

Actions

Likes
7
Downloads
22
Comments
0

4 Embeds 32

http://lanyrd.com 27
http://www.scoop.it 3
http://localhost 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Can Media Queries Save Us All? Can Media Queries Save Us All? Presentation Transcript

    • Can Media Queries Save Us All? Presented by Tim Kadlec - @tkadlec http://flic.kr/p/6iMxyTFriday, May 27, 2011
    • No* *at least not by themselves http://flic.kr/p/7DzC2SFriday, May 27, 2011
    • 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 connected to the Internet. Soon, there will be so many that we’ll stop counting. - Eric SchmidtFriday, May 27, 2011
    • 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/ TextFriday, May 27, 2011
    • Friday, May 27, 2011
    • 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
    • Don’t Get Too Granular http://flic.kr/p/99UEu4Friday, May 27, 2011
    • /* base styles - optimized for desktop */ @media (max-width: 600px) {....} @media (max-width: 400px) {....} @media (min-width: 1300px) {....}Friday, May 27, 2011
    • “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
    • Start with thisFriday, May 27, 2011
    • /* base styles - optimized for small screens */ @media (min-width: 400px) { .... } @media (min-width: 600px) { .... } @media (min-width: 1300px) { .... }Friday, May 27, 2011
    • http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ TextFriday, May 27, 2011
    • /* 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
    • 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 their mobile phone, compared to the computer they use at homeFriday, May 27, 2011
    • http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ TextFriday, May 27, 2011
    • 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
    • Responsive ImagesFriday, May 27, 2011
    • <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
    • Responsive Images Script <img src="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-ImagesFriday, May 27, 2011
    • Assets Responsive ImagesFriday, May 27, 2011
    • By Width if (screen.width >= 320) { // bring the hotness }Friday, May 27, 2011
    • 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
    • By Some Combination if (localStorage.supported && screen.width >= 320) { //bring the hotness }Friday, May 27, 2011
    • Combine with Device Detection He said what? http://flic.kr/p/81vbkuFriday, May 27, 2011
    • http://flic.kr/p/3HMbNFriday, May 27, 2011
    • Summary • Device Classification • Mobile First • Resize Images - don’t just scale • Responsive assets • Pair with device detection • Challenge traditional assumptionsFriday, May 27, 2011
    • Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec http://flic.kr/p/7MhBfDFriday, May 27, 2011
    • 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