Responsive Webdesign ist ein flexibles, geräteunabhängiges Designansatz für das Web, der sich an verschiedene Bildschirmgrößen anpasst. Der Vortrag erläutert die wichtigsten Aspekte wie flexible Layouts, Schriften und Medien sowie die Verwendung von Media Queries zur Optimierung für unterschiedliche Geräte. Dabei wird betont, dass Responsive Design nicht nur für mobile Geräte, sondern für alle Arten von Displays relevant ist.

1. „UNWISSENHEIT IST EIN
SEGEN!“
Responsive Webdesign
Dirk Jesse | Highresolution.info Webinale 2011, Berlin

2. Die Welt ist im
! Wandel!

3. Display Resolution Statistics (w3schools.com, 2011)
90%
80%
70%
60%
50%
40%
30%
20%
10%
0%
January January January January January January January January January January January January
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Higher 1024x768 800x600 640x480 Other

6. Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/

7. Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/

8. „Es ist nicht gesagt, dass es
besser wird, wenn es anders
wird. Wenn es aber besser
werden soll, muss es anders
werden.“
Georg Christoph Lichtenberg (1742-99)
dt. Aphoristiker u. Physiker

9. Responsive Design
=
Mobile Design?

10. Responsive Design
≠
Mobile Design,
sondern …

11. … es ist Design für alle Geräte.

12. Responsive Design ist
flexibles, geräteunabhängiges
Design für das Web.

13. http://www.alistapart.com/articles/responsive-web-design/

14. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

15. Rocket Science
? oder Alter Hut

16. http://www.alistapart.com/articles/switchymclayout/

17. http://www.themaninblue.com/writing/perspective/2004/09/21/

18. 1 Flexibles Layout
Make %, not px!

19. Letztes Jahr …
>1024px
~ 768px
~ 480px

20. Nächstes Jahr …
>> 1024px
? px
? px
?
?

21. http://www.alistapart.com/articles/fluidgrids/

22. http://www.designinfluences.com/fluid960gs/

23. http://cssgrid.net/

24. http://www.yaml.de

25. 2 Flexible Schriften

26. Mobile Displays

27. Fonts
Basisdefinition Inhalte
body { h1 {
font-size: 100%; /* ~16px */ font-size: 200%; /* ~ 32px */
line-heigth: 1.6; …
… }
}
p{
font-size: 87,5%; /* ~ 14px */
…
}

28. 3 Flexible Medien

29. Medien skalieren
up- & downscale downscale only
img { img {
width: 100%; max-width: 100%;
} }
video, video,
object { object {
width: 100%; max-width: 100%;
} }

30. Legacy Support
• min-width Support für IE6
img { width: 100%; }
• Windows Image Resizing
http://unstoppablerobotninja.com/entry/fluid-images
JS aktiviert AlphaImageLoader (Proprietärer IE-Filter), oder …
img { -ms-interpolation-mode: bicubic; }

31. Bandbreite beachten!

32. Datenvolumen reduzieren!
volle Größe
reduzierte Größe

33. Bilder optimal einbinden
• Hintergrundgrafiken
body { background-image: url(…); }
• Responsive Images (Filament Group)
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
<img src="small.r.jpg" data-fullsrc="large.jpg">

34. 4 Media Queries

35. Media Types
Desktop
<link rel="stylesheet" media="screen" href="screen.css" />
Drucker
<link rel="stylesheet" media="print" href="print.css" />
Mobilgeräte ???
<link rel="stylesheet" media="handheld" href="mobile.css" />

36. Media Features
Eigenschaft Schlüsselwort Werte min/max
Viewportgröße width, height, <length> ja
aspect-ratio <ratio>
Displaygröße device-width, device-height, <length> ja
device-aspect-ratio <ratio>
Auflösung resolution <resolution> ja
Ausrichtung orientation portrait, -
landscape
Farbe color, color-index, <integer> ja
monochrome
TV-Darstellungsmodus scan progressive, -
interlace
Art des Displays grid 1 (grid) -
0 (bitmap)
http://www.w3.org/TR/css3-mediaqueries/

37. Media Queries
Desktopbrowser allgemein:
Viewport Mindestbreite: 768 Pixel
<link rel="stylesheet"
media="screen and (min-width: 768px)"
href="screen.css" />
/* Desktop Styles */
@ media screen and (min-width: 768px) {
….
}

38. Media Queries
Mobilgeräte allgemein:
Viewport Maximalbreite: 480 Pixel
<link rel="stylesheet"
media="screen and (max-width: 480px)"
href="screen.css" />
/* Mobile Styles */
@media screen and (max-width: 480px) {
….
}

39. Media Queries
Desktop:
Viewport Mindestbreite: 768 Pixel
<link rel="stylesheet"
media="screen and (min-width: 768px)"
href="screen.css" />
/* Desktop Styles */
@ media screen and (min-width: 768px) {
….
}

40. Media Queries
Hochauflösende Displays:
iPhone Retina-Display: 326dpi
<link rel="stylesheet"
media="screen and (min-resolution: 300dpi)"
href="screen.css" />
/* Desktop Styles */
@ media screen and (min-resolution: 300dpi) {
….
}

41. Mobile Resizing
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Eigenschaft Schlüsselwort Wert
Viewport width <integer> | device-width
Zoom-Level (initial) initial-scale <number>
Zoom-Level (maximal) max-scale <number>
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

42. http://www.highresolution.info/webdesign/responsive-design/index.html

43. http://www.laufbild-werkstatt.de/

44. http://stephencaver.com/

45. Browser-
5 Nachhilfe

46. Browser-Kompatibilität
• Media Queries für FF 2, IE 6-8, Safari 2
– jQuery-Plugin für Media Queries von 2008
http://plugins.jquery.com/project/MediaQueries
– JS-Library: css-mediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/

47. http://mediaqueri.es

48. „UNWISSENHEIT IST EIN
SEGEN!“
Responsive Webdesign ist ein
Weg zum bestmöglichen Design
für jedes Gerät.

49. Danke
office@highresolution.info
@djesse

50. Vortrag inspiriert durch:
Mike Bollinger
http://www.slideshare.net/livefront/responsive-design-7877412
YAML Demo „Responsive Design“
http://www.highresolution.info/webdesign/responsive-design/index.html