Can Media Queries Save Us All?

http://flic.kr/p/6iMxyT Can Media Queries Save Us All? Presented by Tim
Kadlec - @tkadlec Friday, May 27, 2011

http://flic.kr/p/7DzC2S No* *at least not by themselves Friday, May 27,
2011

http://flic.kr/p/6Jnxr1 So what’s the problem? Friday, May 27, 2011

http://flic.kr/p/7c8Nkq She is. Friday, May 27, 2011

http://flic.kr/p/7QPvjg So is this person... So is the cat Friday,
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 Schmidt “ Friday, May 27, 2011

http://flic.kr/p/8PGKvr Friday, May 27, 2011

http://flic.kr/p/coTdy Option #1: Ignore Friday, May 27, 2011

http://flic.kr/p/8rWoUd Option #2: Separate Sites Friday, May 27, 2011

http://flic.kr/p/9i3TMD Slight Detour... Friday, May 27, 2011

http://flic.kr/p/7Er6af How do we define mobile? Friday, May 27, 2011

Text Friday, May 27, 2011

Is this a mobile device? Friday, May 27, 2011

Is this mobile use? Friday, May 27, 2011

Text Form != Function Friday, May 27, 2011

Option #2: Separate Sites Friday, May 27, 2011

http://flic.kr/p/2LZPkH Option #3: Adapt Friday, May 27, 2011

Text http://www.alistapart.com/articles/responsive-web-design/ Friday, 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 approach Friday, May 27, 2011

http://flic.kr/p/99UEu4 Don’t Get Too Granular Friday, 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 first @media query” http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu Hi! Friday, May 27, 2011

Start with this Friday, 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

Text http://filamentgroup.com/lab/ respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ Friday, 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

http://flic.kr/p/713QR9 Performance Friday, 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 home Friday, May 27, 2011

Text http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Friday, May 27, 2011

Original Resized K Saved % Saved Holmes Watson Mycroft Moriarty
Adler Winter 34.7K 8.1K 26.6K 76.6% 39.0K 8.4K 30.6K 78.4% 30.5K 6.7K 23.8K 78.0% 43.4K 8.2K 35.2K 81.1% 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0% Friday, May 27, 2011

Responsive Images Friday, 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

<img src="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-Images Responsive Images Script Friday, May 27, 2011

Responsive Images Assets Friday, May 27, 2011

if (screen.width >= 320) { // bring the hotness }
By Width Friday, May 27, 2011

if (matchMedia('only screen and (max-width: 480px)').matches) { // bring the
hotness } https://github.com/paulirish/matchMedia.js/ By Media Query Friday, May 27, 2011

if (localStorage.supported && screen.width >= 320) { //bring the hotness
} By Some Combination Friday, May 27, 2011

http://flic.kr/p/81vbku Combine with Device Detection He said what? Friday, May
27, 2011

http://flic.kr/p/3HMbN Friday, May 27, 2011

Summary •Device Classification •Mobile First •Resize Images - don’t just
scale •Responsive assets •Pair with device detection •Challenge traditional assumptions Friday, May 27, 2011

http://flic.kr/p/7MhBfD Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec Friday, May
27, 2011

• 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-users Sources Friday, May 27, 2011

Can Media Queries Save Us All?

Can Media Queries Save Us All?

More Decks by Tim Kadlec

Other Decks in Programming

Featured

Transcript