Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
„UNWISSENHEIT IST EIN
            SEGEN!“

                   Responsive Webdesign


Dirk Jesse | Highresolution.info     ...
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 es
besser wird, wenn es anders
wird. Wenn es aber besser
werden soll, muss es anders
werden.“
G...
Responsive Design
        =
  Mobile Design?
Responsive Design
        ≠
  Mobile Design,
    sondern …
… es ist Design für alle Geräte.
Responsive Design ist
flexibles, 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
Fonts
Basisdefinition                    Inhalte

 body {                            h1 {
    font-size: 100%; /* ~16px */...
3   Flexible Medien
Medien skalieren
up- & downscale       downscale only

 img {                 img {
    width: 100%;          max-width: 1...
Legacy Support
• min-width Support für IE6

  img { width: 100%; }




• Windows Image Resizing
 http://unstoppablerobotni...
Bandbreite beachten!
Datenvolumen reduzieren!

             volle Größe




       reduzierte Größe
Bilder optimal einbinden
• Hintergrundgrafiken

  body { background-image: url(…); }




• Responsive Images (Filament Gro...
4   Media Queries
Media Types
Desktop

  <link rel="stylesheet" media="screen" href="screen.css" />


Drucker
  <link rel="stylesheet" media...
Media Features
Eigenschaft           Schlüsselwort                     Werte       min/max

Viewportgröße         width, h...
Media Queries
Desktopbrowser allgemein:
 Viewport Mindestbreite: 768 Pixel

  <link rel="stylesheet"
        media="screen...
Media Queries
Mobilgeräte allgemein:
 Viewport Maximalbreite: 480 Pixel

  <link rel="stylesheet"
        media="screen an...
Media Queries
Desktop:
 Viewport Mindestbreite: 768 Pixel

  <link rel="stylesheet"
        media="screen and (min-width: ...
Media Queries
Hochauflösende Displays:
 iPhone Retina-Display: 326dpi

  <link rel="stylesheet"
        media="screen and ...
Mobile Resizing

<meta name="viewport" content="width=device-width; initial-scale=1.0">



Eigenschaft                Schl...
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://...
http://mediaqueri.es
„UNWISSENHEIT IST EIN
      SEGEN!“


Responsive Webdesign ist ein
Weg zum bestmöglichen Design
       für jedes Gerät.
Danke
office@highresolution.info
                 @djesse
Vortrag inspiriert durch:
                  Mike Bollinger
     http://www.slideshare.net/livefront/responsive-design-7877...
Unwissenheit ist ein Segen - Responsive webdesign
Unwissenheit ist ein Segen - Responsive webdesign
Upcoming SlideShare
Loading in …5
×

of

Unwissenheit ist ein Segen - Responsive webdesign Slide 1 Unwissenheit ist ein Segen - Responsive webdesign Slide 2 Unwissenheit ist ein Segen - Responsive webdesign Slide 3 Unwissenheit ist ein Segen - Responsive webdesign Slide 4 Unwissenheit ist ein Segen - Responsive webdesign Slide 5 Unwissenheit ist ein Segen - Responsive webdesign Slide 6 Unwissenheit ist ein Segen - Responsive webdesign Slide 7 Unwissenheit ist ein Segen - Responsive webdesign Slide 8 Unwissenheit ist ein Segen - Responsive webdesign Slide 9 Unwissenheit ist ein Segen - Responsive webdesign Slide 10 Unwissenheit ist ein Segen - Responsive webdesign Slide 11 Unwissenheit ist ein Segen - Responsive webdesign Slide 12 Unwissenheit ist ein Segen - Responsive webdesign Slide 13 Unwissenheit ist ein Segen - Responsive webdesign Slide 14 Unwissenheit ist ein Segen - Responsive webdesign Slide 15 Unwissenheit ist ein Segen - Responsive webdesign Slide 16 Unwissenheit ist ein Segen - Responsive webdesign Slide 17 Unwissenheit ist ein Segen - Responsive webdesign Slide 18 Unwissenheit ist ein Segen - Responsive webdesign Slide 19 Unwissenheit ist ein Segen - Responsive webdesign Slide 20 Unwissenheit ist ein Segen - Responsive webdesign Slide 21 Unwissenheit ist ein Segen - Responsive webdesign Slide 22 Unwissenheit ist ein Segen - Responsive webdesign Slide 23 Unwissenheit ist ein Segen - Responsive webdesign Slide 24 Unwissenheit ist ein Segen - Responsive webdesign Slide 25 Unwissenheit ist ein Segen - Responsive webdesign Slide 26 Unwissenheit ist ein Segen - Responsive webdesign Slide 27 Unwissenheit ist ein Segen - Responsive webdesign Slide 28 Unwissenheit ist ein Segen - Responsive webdesign Slide 29 Unwissenheit ist ein Segen - Responsive webdesign Slide 30 Unwissenheit ist ein Segen - Responsive webdesign Slide 31 Unwissenheit ist ein Segen - Responsive webdesign Slide 32 Unwissenheit ist ein Segen - Responsive webdesign Slide 33 Unwissenheit ist ein Segen - Responsive webdesign Slide 34 Unwissenheit ist ein Segen - Responsive webdesign Slide 35 Unwissenheit ist ein Segen - Responsive webdesign Slide 36 Unwissenheit ist ein Segen - Responsive webdesign Slide 37 Unwissenheit ist ein Segen - Responsive webdesign Slide 38 Unwissenheit ist ein Segen - Responsive webdesign Slide 39 Unwissenheit ist ein Segen - Responsive webdesign Slide 40 Unwissenheit ist ein Segen - Responsive webdesign Slide 41 Unwissenheit ist ein Segen - Responsive webdesign Slide 42 Unwissenheit ist ein Segen - Responsive webdesign Slide 43 Unwissenheit ist ein Segen - Responsive webdesign Slide 44 Unwissenheit ist ein Segen - Responsive webdesign Slide 45 Unwissenheit ist ein Segen - Responsive webdesign Slide 46 Unwissenheit ist ein Segen - Responsive webdesign Slide 47 Unwissenheit ist ein Segen - Responsive webdesign Slide 48 Unwissenheit ist ein Segen - Responsive webdesign Slide 49 Unwissenheit ist ein Segen - Responsive webdesign Slide 50
Upcoming SlideShare
TYPO3 for universities - T3CON14
Next
Download to read offline and view in fullscreen.

26 Likes

Share

Download to read offline

Unwissenheit ist ein Segen - Responsive webdesign

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Unwissenheit ist ein Segen - Responsive webdesign

  1. 1. „UNWISSENHEIT IST EIN SEGEN!“ Responsive Webdesign Dirk 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 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
  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 ist flexibles, 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. Fonts Basisdefinition 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 skalieren up- & 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 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" />
  34. 34. 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/
  35. 35. 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) { …. }
  36. 36. 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) { …. }
  37. 37. 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) { …. }
  38. 38. 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) { …. }
  39. 39. 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
  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 ein Weg zum bestmöglichen Design für jedes Gerät.
  47. 47. Danke office@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
  • MarkusJaritz1

    Oct. 16, 2013
  • nonsquared

    Jul. 15, 2013
  • joerg

    Nov. 21, 2012
  • cwil

    Nov. 20, 2012
  • MichaelGeissler

    Oct. 6, 2012
  • Mann-beisst-Hund

    Oct. 3, 2012
  • jonas2

    Sep. 7, 2012
  • chillinhen

    Nov. 22, 2011
  • palmstroem

    Sep. 8, 2011
  • svensonsan

    Jul. 11, 2011
  • neunzehn80

    Jun. 24, 2011
  • kopfbunt

    Jun. 23, 2011
  • sevenval

    Jun. 10, 2011
  • mr_white

    Jun. 8, 2011
  • olidax

    Jun. 6, 2011
  • flinsi

    Jun. 6, 2011
  • dmacx

    Jun. 6, 2011
  • redux

    Jun. 6, 2011
  • Larz73

    Jun. 5, 2011
  • coblasser

    Jun. 4, 2011

Views

Total views

25,406

On Slideshare

0

From embeds

0

Number of embeds

6,907

Actions

Downloads

249

Shares

0

Comments

0

Likes

26

×