Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Can Media Queries Save Us All?
Search
Tim Kadlec
September 22, 2011
Programming
2
290
Can Media Queries Save Us All?
Presented May 27, 2011 at WebVisions in Portland, OR.
Tim Kadlec
September 22, 2011
Tweet
Share
More Decks by Tim Kadlec
See All by Tim Kadlec
The State of Node.js Security, at Node.js Interactive 2017
tkadlec
1
280
JavaScript Exposed at Midwest JS
tkadlec
3
270
Focusing On What Matters, at Fluent, 2017
tkadlec
0
120
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
600
Once More, With Feeling
tkadlec
9
1.6k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
170
Better By Proxy at Velocity NY 2015
tkadlec
3
590
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.1k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
6.8k
Other Decks in Programming
See All in Programming
Namespace on read
tagomoris
2
370
CSC307 Lecture 06
javiergs
PRO
0
360
CSC307 Lecture 11
javiergs
PRO
0
240
Terraformテスト入門
msato
0
540
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
継続的な活動で築く地方エンジニアの道
myamashii
2
360
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Designing the Hi-DPI Web
ddemaree
276
34k
Why Our Code Smells
bkeepers
PRO
332
56k
Docker and Python
trallard
37
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
The Invisible Side of Design
smashingmag
294
50k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
What's new in Ruby 2.0
geeforr
338
31k
A Tale of Four Properties
chriscoyier
155
22k
Building Adaptive Systems
keathley
34
2k
Designing for Performance
lara
604
67k
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/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