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




http://flic.kr/p/6Jnxr1

So what’s the problem?




http://flic.kr/p/7c8Nkq

She is.




http://flic.kr/p/7QPvjg

So is this person... So is the cat




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

“


http://flic.kr/p/8PGKvr




http://flic.kr/p/coTdy

Option #1: Ignore


http://www.flickr.com/photos/el7bara/128946212/

http://www.flickr.com/photos/el7bara/128946212/

http://flic.kr/p/8rWoUd

Option #2: Separate Sites




http://flic.kr/p/9i3TMD

Slight Detour...




http://flic.kr/p/7Er6af

How do we define mobile?




Text


Is this a mobile device?


Is this mobile use?


Text

Form != Function


Option #2: Separate Sites


http://flic.kr/p/2LZPkH

Option #3: Adapt




Text

http://www.alistapart.com/articles/responsive-web-design/





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


http://flic.kr/p/99UEu4

Don’t Get Too Granular




/* base styles - optimized for desktop */

@media (max-width: 600px) {....}

@media (max-width: 400px) {....}

@media (min-width: 1300px) {....}


“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!




Start with this


/* base styles - optimized for small screens */





Text

http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/






/* base styles - optimized for small screens */

@media (min-width: 400px) {....}/*/mediaquery*/




http://flic.kr/p/713QR9

Performance




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


Text

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/




Original Resized K Saved % SavedHolmesWatsonMycroftMoriarty

AdlerWinter

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%


Responsive Images


<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/


http://src.sencha.io/http://mysite.com/myimage.png'










<img src="small.jpg?full=large.jpg">

https://github.com/filamentgroup/Responsive-Images

Responsive Images Script




Responsive ImagesAssets


if (screen.width >= 320) { // bring the hotness}

By Width


if (matchMedia('only screen and (max-width: 480px)').matches) { // bring the hotness}

https://github.com/paulirish/matchMedia.js/

By Media Query




if (localStorage.supported && screen.width >= 320) { //bring the hotness}

By Some Combination


http://flic.kr/p/81vbku

Combine with Device Detection

He said what?




http://flic.kr/p/3HMbN




Summary

• Device Classification

• Mobile First

• Resize Images - don’t just scale

• Responsive assets

• Pair with device detection

• Challenge traditional assumptions


http://flic.kr/p/7MhBfD

Thank you!

Tim Kadlechttp://www.timkadlec.com

Twitter: @tkadlec




http://www.timkadlec.com

http://www.timkadlec.com

• 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_Rise

• 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


http://www.businessinsider.com/chart-of-the-day-pc-usage-2011-2




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_Rise






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://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/










Can Media Queries Save Us All?

Technology

tablets http

tkadlec http

granular http

performance http

europe http

sources http

media maxwidth

separate sites http