SlideShare ist ein Scribd-Unternehmen logo
„UNWISSENHEIT IST EIN
            SEGEN!“

                   Responsive Webdesign


Dirk Jesse | Highresolution.info     Webinale 2011, Berlin
Die Welt ist im
!   Wandel!
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
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.“
Georg Christoph Lichtenberg (1742-99)
dt. Aphoristiker u. Physiker
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 */       font-size: 200%; /* ~ 32px */
    line-heigth: 1.6;                  …
    …                              }
 }



                                   p{
                                        font-size: 87,5%; /* ~ 14px */
                                        …
                                   }
3   Flexible Medien
Medien skalieren
up- & downscale       downscale only

 img {                 img {
    width: 100%;          max-width: 100%;
 }                     }

 video,                video,
 object {              object {
    width: 100%;          max-width: 100%;
 }                     }
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; }
Bandbreite beachten!
Datenvolumen reduzieren!

             volle Größe




       reduzierte Größe
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">
4   Media Queries
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" />
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/
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) {
        ….
  }
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) {
       ….
  }
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) {
        ….
  }
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) {
        ….
  }
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
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://plugins.jquery.com/project/MediaQueries

  – JS-Library: css-mediaqueries.js
    http://code.google.com/p/css3-mediaqueries-js/
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-7877412



   YAML Demo „Responsive Design“
http://www.highresolution.info/webdesign/responsive-design/index.html

Weitere ähnliche Inhalte

Ähnlich wie webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"

CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
Michael Jendryschik
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
Michael Jendryschik
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
rene_peinl
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
holgerrueprich
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
Sven Wolfermann
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
Wbfntdy 2012
Wbfntdy 2012Wbfntdy 2012
Wbfntdy 2012
Markus Greve
 
AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...
AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...
AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...
e-dialog GmbH
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
Markus Greve
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsMaria Herrmann
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Christoph Zeller
 
Netzstrategen digitaler feierabend - 1. präsentation - basiswissen
Netzstrategen   digitaler feierabend - 1. präsentation - basiswissenNetzstrategen   digitaler feierabend - 1. präsentation - basiswissen
Netzstrategen digitaler feierabend - 1. präsentation - basiswissenstrategen-team
 

Ähnlich wie webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen" (20)

CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Wbfntdy 2012
Wbfntdy 2012Wbfntdy 2012
Wbfntdy 2012
 
AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...
AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...
AdWords Konferenz_2012: Viktor Zemann: Optimierungs-Strategien & -Tools tibil...
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Netzstrategen digitaler feierabend - 1. präsentation - basiswissen
Netzstrategen   digitaler feierabend - 1. präsentation - basiswissenNetzstrategen   digitaler feierabend - 1. präsentation - basiswissen
Netzstrategen digitaler feierabend - 1. präsentation - basiswissen
 

Mehr von smueller_sandsmedia

webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...smueller_sandsmedia
 
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekteninternational PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projektensmueller_sandsmedia
 
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
smueller_sandsmedia
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
smueller_sandsmedia
 
international PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHPinternational PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHPsmueller_sandsmedia
 
webinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummieswebinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummiessmueller_sandsmedia
 

Mehr von smueller_sandsmedia (6)

webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
 
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekteninternational PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
 
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
international PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHPinternational PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHP
 
webinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummieswebinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummies
 

webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"