can media queries save us all?
Post on 28-Jan-2015
106 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/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 % 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%
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 ImagesAssets
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
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 Kadlechttp://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_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
Friday, May 27, 2011
top related