Slide 1
Slide 1 text
http://flic.kr/p/6iMxyT
Can Media Queries Save Us All?
Presented by Tim Kadlec - @tkadlec
Friday, May 27, 2011
Slide 2
Slide 2 text
http://flic.kr/p/7DzC2S
No*
*at least not by themselves
Friday, May 27, 2011
Slide 3
Slide 3 text
http://flic.kr/p/6Jnxr1
So what’s the problem?
Friday, May 27, 2011
Slide 4
Slide 4 text
http://flic.kr/p/7c8Nkq
She is.
Friday, May 27, 2011
Slide 5
Slide 5 text
http://flic.kr/p/7QPvjg
So is this person... So is the cat
Friday, May 27, 2011
Slide 6
Slide 6 text
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
Slide 7 text
http://flic.kr/p/8PGKvr
Friday, May 27, 2011
Slide 8
Slide 8 text
http://flic.kr/p/coTdy
Option #1: Ignore
Friday, May 27, 2011
Slide 9
Slide 9 text
http://flic.kr/p/8rWoUd
Option #2: Separate Sites
Friday, May 27, 2011
Slide 10
Slide 10 text
http://flic.kr/p/9i3TMD
Slight Detour...
Friday, May 27, 2011
Slide 11
Slide 11 text
http://flic.kr/p/7Er6af
How do we define mobile?
Friday, May 27, 2011
Slide 12
Slide 12 text
Text
Friday, May 27, 2011
Slide 13
Slide 13 text
Is this a mobile device?
Friday, May 27, 2011
Slide 14
Slide 14 text
Is this mobile use?
Friday, May 27, 2011
Slide 15
Slide 15 text
Text
Form != Function
Friday, May 27, 2011
Slide 16
Slide 16 text
Option #2: Separate Sites
Friday, May 27, 2011
Slide 17
Slide 17 text
http://flic.kr/p/2LZPkH
Option #3: Adapt
Friday, May 27, 2011
Slide 18
Slide 18 text
Text
http://www.alistapart.com/articles/responsive-web-design/
Friday, May 27, 2011
Slide 19
Slide 19 text
Friday, May 27, 2011
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
http://flic.kr/p/99UEu4
Don’t Get Too Granular
Friday, May 27, 2011
Slide 22
Slide 22 text
/* base styles - optimized for desktop */
@media (max-width: 600px) {....}
@media (max-width: 400px) {....}
@media (min-width: 1300px) {....}
Friday, May 27, 2011
Slide 23
Slide 23 text
“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
Slide 24
Slide 24 text
Start with this
Friday, May 27, 2011
Slide 25
Slide 25 text
/* base styles - optimized for small screens */
@media (min-width: 400px) {
....
}
@media (min-width: 600px) {
....
}
@media (min-width: 1300px) {
....
}
Friday, May 27, 2011
Slide 26
Slide 26 text
Text
http://filamentgroup.com/lab/
respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/
Friday, May 27, 2011
Slide 27
Slide 27 text
/* 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
Slide 28 text
http://flic.kr/p/713QR9
Performance
Friday, May 27, 2011
Slide 29
Slide 29 text
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
Slide 30 text
Text
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Friday, May 27, 2011
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Responsive Images
Friday, May 27, 2011
Slide 33
Slide 33 text
http://docs.sencha.com/io/src/
Friday, May 27, 2011
Slide 34
Slide 34 text
https://github.com/filamentgroup/Responsive-Images
Responsive Images Script
Friday, May 27, 2011
Slide 35
Slide 35 text
Responsive Images
Assets
Friday, May 27, 2011
Slide 36
Slide 36 text
if (screen.width >= 320) {
// bring the hotness
}
By Width
Friday, May 27, 2011
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
if (localStorage.supported &&
screen.width >= 320) {
//bring the hotness
}
By Some Combination
Friday, May 27, 2011
Slide 39
Slide 39 text
http://flic.kr/p/81vbku
Combine with Device Detection
He said
what?
Friday, May 27, 2011
Slide 40
Slide 40 text
http://flic.kr/p/3HMbN
Friday, May 27, 2011
Slide 41
Slide 41 text
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
Slide 42 text
http://flic.kr/p/7MhBfD
Thank you!
Tim Kadlec
http://www.timkadlec.com
Twitter: @tkadlec
Friday, May 27, 2011
Slide 43
Slide 43 text
• 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