0
„UNWISSENHEIT IST EIN            SEGEN!“                   Responsive WebdesignDirk Jesse | Highresolution.info     Webina...
Die Welt ist im!   Wandel!
Display Resolution Statistics (w3schools.com, 2011)                                                                       ...
Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
„Es ist nicht gesagt, dass esbesser wird, wenn es anderswird. Wenn es aber besserwerden soll, muss es anderswerden.“Georg ...
Responsive Design        =  Mobile Design?
Responsive Design        ≠  Mobile Design,    sondern …
… es ist Design für alle Geräte.
Responsive Design istflexibles, geräteunabhängiges      Design für das Web.
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Rocket Science?   oder Alter Hut
http://www.alistapart.com/articles/switchymclayout/
http://www.themaninblue.com/writing/perspective/2004/09/21/
1   Flexibles Layout    Make %, not px!
Letztes Jahr …                       >1024px            ~ 768px~ 480px
Nächstes Jahr …                    >> 1024px           ? px? px           ? ?
http://www.alistapart.com/articles/fluidgrids/
http://www.designinfluences.com/fluid960gs/
http://cssgrid.net/
http://www.yaml.de
2   Flexible Schriften
Mobile Displays
FontsBasisdefinition                    Inhalte body {                            h1 {    font-size: 100%; /* ~16px */    ...
3   Flexible Medien
Medien skalierenup- & downscale       downscale only img {                 img {    width: 100%;          max-width: 100%;...
Legacy Support• min-width Support für IE6  img { width: 100%; }• Windows Image Resizing http://unstoppablerobotninja.com/e...
Bandbreite beachten!
Datenvolumen reduzieren!             volle Größe       reduzierte Größe
Bilder optimal einbinden• Hintergrundgrafiken  body { background-image: url(…); }• Responsive Images (Filament Group) http...
4   Media Queries
Media TypesDesktop  <link rel="stylesheet" media="screen" href="screen.css" />Drucker  <link rel="stylesheet" media="print...
Media FeaturesEigenschaft           Schlüsselwort                     Werte       min/maxViewportgröße         width, heig...
Media QueriesDesktopbrowser allgemein: Viewport Mindestbreite: 768 Pixel  <link rel="stylesheet"        media="screen and ...
Media QueriesMobilgeräte allgemein: Viewport Maximalbreite: 480 Pixel  <link rel="stylesheet"        media="screen and (ma...
Media QueriesDesktop: Viewport Mindestbreite: 768 Pixel  <link rel="stylesheet"        media="screen and (min-width: 768px...
Media QueriesHochauflösende Displays: iPhone Retina-Display: 326dpi  <link rel="stylesheet"        media="screen and (min-...
Mobile Resizing<meta name="viewport" content="width=device-width; initial-scale=1.0">Eigenschaft                Schlüsselw...
http://www.highresolution.info/webdesign/responsive-design/index.html
http://www.laufbild-werkstatt.de/
http://stephencaver.com/
Browser-5   Nachhilfe
Browser-Kompatibilität• Media Queries für FF 2, IE 6-8, Safari 2  – jQuery-Plugin für Media Queries von 2008    http://plu...
http://mediaqueri.es
„UNWISSENHEIT IST EIN      SEGEN!“Responsive Webdesign ist einWeg zum bestmöglichen Design       für jedes Gerät.
Dankeoffice@highresolution.info                 @djesse
Vortrag inspiriert durch:                  Mike Bollinger     http://www.slideshare.net/livefront/responsive-design-787741...
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
Upcoming SlideShare
Loading in...5
×

Unwissenheit ist ein Segen - Responsive webdesign

18,888

Published on

Published in: Technology

Transcript of "Unwissenheit ist ein Segen - Responsive webdesign"

  1. 1. „UNWISSENHEIT IST EIN SEGEN!“ Responsive WebdesignDirk Jesse | Highresolution.info Webinale 2011, Berlin
  2. 2. Die Welt ist im! Wandel!
  3. 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
  4. 4. Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
  5. 5. Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
  6. 6. „Es ist nicht gesagt, dass esbesser wird, wenn es anderswird. Wenn es aber besserwerden soll, muss es anderswerden.“Georg Christoph Lichtenberg (1742-99)dt. Aphoristiker u. Physiker
  7. 7. Responsive Design = Mobile Design?
  8. 8. Responsive Design ≠ Mobile Design, sondern …
  9. 9. … es ist Design für alle Geräte.
  10. 10. Responsive Design istflexibles, geräteunabhängiges Design für das Web.
  11. 11. http://www.alistapart.com/articles/responsive-web-design/
  12. 12. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  13. 13. Rocket Science? oder Alter Hut
  14. 14. http://www.alistapart.com/articles/switchymclayout/
  15. 15. http://www.themaninblue.com/writing/perspective/2004/09/21/
  16. 16. 1 Flexibles Layout Make %, not px!
  17. 17. Letztes Jahr … >1024px ~ 768px~ 480px
  18. 18. Nächstes Jahr … >> 1024px ? px? px ? ?
  19. 19. http://www.alistapart.com/articles/fluidgrids/
  20. 20. http://www.designinfluences.com/fluid960gs/
  21. 21. http://cssgrid.net/
  22. 22. http://www.yaml.de
  23. 23. 2 Flexible Schriften
  24. 24. Mobile Displays
  25. 25. FontsBasisdefinition Inhalte body { h1 { font-size: 100%; /* ~16px */ font-size: 200%; /* ~ 32px */ line-heigth: 1.6; … … } } p{ font-size: 87,5%; /* ~ 14px */ … }
  26. 26. 3 Flexible Medien
  27. 27. Medien skalierenup- & downscale downscale only img { img { width: 100%; max-width: 100%; } } video, video, object { object { width: 100%; max-width: 100%; } }
  28. 28. 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; }
  29. 29. Bandbreite beachten!
  30. 30. Datenvolumen reduzieren! volle Größe reduzierte Größe
  31. 31. 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">
  32. 32. 4 Media Queries
  33. 33. Media TypesDesktop <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" />
  34. 34. Media FeaturesEigenschaft Schlüsselwort Werte min/maxViewportgröße width, height, <length> ja aspect-ratio <ratio>Displaygröße device-width, device-height, <length> ja device-aspect-ratio <ratio>Auflösung resolution <resolution> jaAusrichtung orientation portrait, - landscapeFarbe color, color-index, <integer> ja monochromeTV-Darstellungsmodus scan progressive, - interlaceArt des Displays grid 1 (grid) - 0 (bitmap)http://www.w3.org/TR/css3-mediaqueries/
  35. 35. Media QueriesDesktopbrowser 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) { …. }
  36. 36. Media QueriesMobilgerä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) { …. }
  37. 37. Media QueriesDesktop: 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. 38. Media QueriesHochauflö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) { …. }
  39. 39. Mobile Resizing<meta name="viewport" content="width=device-width; initial-scale=1.0">Eigenschaft Schlüsselwort WertViewport width <integer> | device-widthZoom-Level (initial) initial-scale <number>Zoom-Level (maximal) max-scale <number>https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  40. 40. http://www.highresolution.info/webdesign/responsive-design/index.html
  41. 41. http://www.laufbild-werkstatt.de/
  42. 42. http://stephencaver.com/
  43. 43. Browser-5 Nachhilfe
  44. 44. 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/
  45. 45. http://mediaqueri.es
  46. 46. „UNWISSENHEIT IST EIN SEGEN!“Responsive Webdesign ist einWeg zum bestmöglichen Design für jedes Gerät.
  47. 47. Dankeoffice@highresolution.info @djesse
  48. 48. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×