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
320
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
390
JavaScript Exposed at Midwest JS
tkadlec
3
290
Focusing On What Matters, at Fluent, 2017
tkadlec
0
140
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
680
Once More, With Feeling
tkadlec
9
1.7k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
210
Better By Proxy at Velocity NY 2015
tkadlec
3
670
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.2k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
7.2k
Other Decks in Programming
See All in Programming
Interface vs Types ~型推論が過多推論~
hirokiomote
1
240
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
100
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
180
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
880
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
180
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
2
440
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
110
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
170
複数アプリケーションを育てていくための共通化戦略
irof
9
3.5k
從零到一:搭建你的第一個 Observability 平台
blueswen
0
310
Step up the performance game with Spring Boot and Project Leyden
mhalbritter
0
170
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
900
Rails Girls Zürich Keynote
gr2m
94
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Designing Experiences People Love
moore
142
24k
A Tale of Four Properties
chriscoyier
159
23k
The Language of Interfaces
destraynor
158
25k
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