1. CSS3 Media Queries
WDCM Dresden, 15.12.2011

2. Gliederung
1. Prolog
2. Syntax
3. Beispiele
4. Epilog

3. 1. Prolog
First there was the screen.

4. Früher optimierte man
Webseiten üblicherweise
für einen Desktop-PC-
Bildschirm.

5. Zudem hatte man die
Möglichkeit, Zielmedien
per screen, print, projection,
… anzusprechen.

6. Nützlich. Aber …

7. http://www.flickr.com/photos/simajr/4285483549/

8. Heute geht mehr!
»By using media queries, presentations can
be tailored to a specific range of output
devices without changing the content itself.«
W3C

9. Desktop

10. Tablet

11. Smartphone

12. http://www.flickr.com/photos/libraryman/95516793/

13. Moment mal: Warum
will man überhaupt
verschiedene Geräte
ansprechen?!

14. • In 3 Jahren wurden über 200 Millionen
Android-Geräte aktiviert.
(täglich kommen 550.000 hinzu)
• In 5 Jahren wurden über 250 Millionen
iOS-Geräte verkauft.
• Apple verkauft mehr iPads als Dell PCs.
• Tablets-Verkäufe 2011 in D. im Vergleich
zum Vorjahr um über 160 % gestiegen.

15. http://t3n.de/news/tablets-verkaufe-um-160-prozent-gestiegen-352008/

16. http://blog.kennstdueinen.de/2011/03/mobiles-internet-in-zahlen-infografik/

17. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201112

18. http://www.flickr.com/photos/7891209@N04/2951368555/

19. http://www.flickr.com/photos/7891209@N04/2951368555/

20. 2. Syntax
Gimme some code.

21. @media screen and (max-width: 800px) {
/* Awesome CSS code … */
}
»Führe CSS aus, wenn Medientyp screen
unterstützt wird und das Browserfenster
kleiner als 800 Pixel breit ist.«

22. Medientyp
@media screen and (max-width: 800px) {
/* Awesome CSS code … */
}
»Führe CSS aus, wenn Medientyp screen
unterstützt wird und das Browserfenster
kleiner als 800 Pixel breit ist.«

23. Verknüpfung
@media screen and (max-width: 800px) {
/* Awesome CSS code … */
}
»Führe CSS aus, wenn Medientyp screen
unterstützt wird und das Browserfenster
kleiner als 800 Pixel breit ist.«

24. Ausdruck
@media screen and (max-width: 800px) {
/* Awesome CSS code … */
}
»Führe CSS aus, wenn Medientyp screen
unterstützt wird und das Browserfenster
kleiner als 800 Pixel breit ist.«

25. Geht auch so:
<link rel="stylesheet" href="style.css"
media="screen and (min-width: 800px)">

26. @media screen
and (max-device-width: 480px) {
/* iPhone / iPod touch */
}

27. @media screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* iPad (horizontal) */
}

28. @media screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* iPad (vertikal) */
}

29. @media print and (color) {
/* Farbdrucker */
}
@media print and (monochrome) {
/* Schwarzweißdrucker */
}

30. Media-Features
• width • color
• height • color-index
• device-width • monochrome
• device-height • resolution
• orientation • scan
• aspect-ratio • grid
• device-aspect-ratio

31. Wichtig
Nie Media Queries ohne
viewport-Meta-Angabe verwenden:
<meta name="viewport"
content="width=device-width">

32. Wichtig
Nie Media Queries ohne
viewport-Meta-Angabe verwenden:
<meta name="viewport"
content="width=device-width">
»Setze die Viewport-Breite auf die
tatsächliche Breite des Gerätedisplays.«

33. http://www.w3.org/TR/css3-mediaqueries/

34. 3. Beispiele
What you see is what you get.

35. Demo: orientation
http://www.flickr.com/photos/marfis75/5374308475/

36. Schriftgröße
http://trentwalton.com/2011/12/05/on-font-size/

37. Demo: debugging
http://xkcd.com/376/

38. Demo: WWW

39. 4. Epilog
You’ve officially been pimped.

40. http://knowyourmeme.com/memes/xzibit-yo-dawg

41. Browsersupport
4+ 3.5 + 7+ 3+ 9+
http://paulirish.com/2010/high-res-browser-icons/
http://caniuse.com/#search=media

42. http://www.modernizr.com/

43. http://code.google.com/p/css3-mediaqueries-js/

44. https://github.com/scottjehl/Respond

45. CSS3 Media Queries
!=
perpetuum mobile
wööörd!

46. Problem: Ladezeiten

47. Problem: Kontext
http://www.flickr.com/photos/noeluap/3130274669/

48. Interessanter Ansatz:
Gestaltungsprozess
umkehren. Mobile first!

51. Danke!
Francesco Schwarz
frncs.co (Blog)
frncs.co/+ (Google+)
@isellsoap (Twitter)
http://www.flickr.com/photos/ucumari/5696147028/

52. Quellen, Links & Co.
• http://www.webkrauts.de/2011/12/12/der-aktuelle-stand-der-dinge-im-mobile-web-development/
• http://24ways.org/2011/adaptive-images-for-responsive-designs-again
• http://www.elmastudio.de/webdesign/was-konnen-css3-media-queries-wirklich-leisten/
• http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
• http://kulturbanause.de/2011/04/websites-mit-css3-media-queries-fur-iphone-ipad-android-co-optimieren/
• http://www.asymco.com/2011/12/02/the-big-bang-theory-of-computing/
• http://de.engadget.com/2011/11/16/google-200-millionen-android-gerate-aktiviert-taglich-kommen-5/
• http://www.slideshare.net/jameswillweb/css3-media-queries-mobile-elixir-or-css-snake-oil
• http://www.slideshare.net/jendryschik/css-media-queries-4685524
• http://johanbrook.com/design/css/debugging-css-media-queries/
• http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• http://mediaqueri.es/
• http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/