The document discusses whether media queries can help make websites responsive to different devices. It argues that media queries alone are not enough and that a mobile-first approach is needed. Key points covered include using responsive images, designing for mobile sizes first before larger screens, and combining media queries with device detection. The presentation provides examples of how to implement responsive design techniques.
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Can Media Queries Save Us All?
1. Can Media Queries Save Us All?
Presented by Tim Kadlec - @tkadlec
http://flic.kr/p/6iMxyT
Friday, May 27, 2011
2. No*
*at least not by themselves
http://flic.kr/p/7DzC2S
Friday, May 27, 2011
3. So what’s the problem?
http://flic.kr/p/6Jnxr1
Friday, May 27, 2011
4. She is.
http://flic.kr/p/7c8Nkq
Friday, May 27, 2011
5. So is this person... So is the cat
http://flic.kr/p/7QPvjg
Friday, May 27, 2011
6. “ 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
20. 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
21. Don’t Get Too Granular
http://flic.kr/p/99UEu4
Friday, May 27, 2011
22. /* base styles - optimized for desktop */
@media (max-width: 600px) {....}
@media (max-width: 400px) {....}
@media (min-width: 1300px) {....}
Friday, May 27, 2011
23. “The absence of
support for @media
queries is in fact the Hi!
first @media query”
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Friday, May 27, 2011
25. /* base styles - optimized for small screens */
@media (min-width: 400px) {
....
}
@media (min-width: 600px) {
....
}
@media (min-width: 1300px) {
....
}
Friday, May 27, 2011
26. http://filamentgroup.com/lab/
respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/
Text
Friday, May 27, 2011
27. /* 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
28. Performance
http://flic.kr/p/713QR9
Friday, May 27, 2011
29. 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
36. By Width
if (screen.width >= 320) {
// bring the hotness
}
Friday, May 27, 2011
37. By Media Query
if (matchMedia('only screen and
(max-width: 480px)').matches) {
// bring the hotness
}
https://github.com/paulirish/matchMedia.js/
Friday, May 27, 2011
38. By Some Combination
if (localStorage.supported &&
screen.width >= 320) {
//bring the hotness
}
Friday, May 27, 2011
39. Combine with Device Detection
He said
what?
http://flic.kr/p/81vbku
Friday, May 27, 2011