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
330
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
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.3k
Parallel::Pipesの紹介
skaji
2
900
TypeScript LSP の今までとこれから
quramy
1
470
Blueskyのプラグインを作ってみた
hakkadaikon
1
450
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
110
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
500
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
1
170
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
190
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
100
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
640
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
570
人には人それぞれのサービス層がある
shimabox
3
640
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Building an army of robots
kneath
306
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Designing Experiences People Love
moore
142
24k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
A Tale of Four Properties
chriscoyier
159
23k
Thoughts on Productivity
jonyablonski
69
4.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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