Responsive Webdesign – Eine Website, alle Geräte

Geschrieben am 13. Dezember 2012 · in Allgemein, Cutting-Edge, Technik, Webdesign

Einleitung:

Immer mehr Internetnutzer rufen Inhalte mobil ab. Diese neue Art der Internetnutzung, vornehmlich über mobile Geräte mit sehr kleinen Displays, erfordert eine neue Art des Webdesigns. Mit dynamischem grafischem Aufbau von Webseiten und dem Konzept des Responsive Webdesign reagieren Webdesigner auf die verschiedenen Displaygrößen der mobilen Geräte. Wesentliche Voraussetzung sind Media Queries, welche Art und Eigenschaften des betrachtenden Gerätes abfragen und somit die Webseite auf einem großen Display anders darstellen, als auf einem Smartphone oder Tablet-Computer.

blog_screens

Media Queries mit CSS3 in Aktion

Media Queries sind eine CSS3-Technik, die es Webentwicklern ermöglicht, bestimmte Bedingungen wie z.B. die Browser-Fenstergröße und die Bildschirmauflösung des Nutzers zu prüfen, um so ein jeweils optimiertes Layout für das aufrufende Endgerät als Responsive Webdesign auszuliefern. Media Queries sind eine Erweiterung der schon in CSS2 vorhandenen medienabhängigen Cascading Stylesheets für verschiedene Ausgabeformate wie z.B. eine Screen- oder eine Druckversion. Das meist verwendete Media-Query-Feature ist die Ausgabebreite “width”. Indem spezifische CSS-Regeln für verschiedene Ausgabemedien definiert werden, können Websites für unterschiedliche Viewports wie z.B. Smartphones, Tablets oder Desktop-Browser mit variierenden Auflösungen und Merkmalen dargestellt werden.

Auch diese (meine) Website ist “responsive”

Versuchen Sie doch mal, die Größe des Browserfensters dieser Website zu ändern. Sie werden bemerken, wie sich alle Elemente an die neue Breite anpassen und neu sortieren. Bilder werden maßstabsgetreu skaliert, Spalten werden untereinander angeordnet, das Menü wird ab einer bestimmten Breite zur Dropdown-Auswahl. Das garantiert, dass diese Website sowohl auf normalen Desktop-Bildschirmen mit beispielsweise FullHD-Auflösung (1920×1080 Pixel) wie auch auf kleinen Smartphones mit 640x480er-Auflösung gut aussieht. Keine Information geht verloren – die Bedienbarkeit bleibt erhalten.

blog_iphone_landscapeblog_iphone_portrait

 

Schritte zur flexiblen Website

Auf´s Wesentliche reduziert liest sich das Vorgehen wie folgt:

  • Schritt 1: Weg von festen Schriftgrößen
  • Schritt 2: Weg von festen Layout-Grids
  • Schritt 3: Einsatz von Media Queries
  • Schritt 4: Erweitertes Testen auf mobilen Geräten

Browserunterstützung

Mit CSS3 Media Queries ist eine fast fertige Standardisierung des W3C als Candidate Recommendation verfügbar, die bereits effizient für Websites mit Responsive Webdesign eingesetzt wird. Alle gängigen Desktop-Browser und die mobilen Vertreter wie iOS Safari, Opera Mini oder Android Browser unterstützen inzwischen Media Queries. Ab Version 9 ist auch der Internet Explorer nicht mehr aussen vor. Nachfolgend eine Aufstellung der unterstützten Browsertypen.

blog_media_queries_browser_support

Caniuse.com: Browserunterstützung für CSS3 Media Queries

Weitere Infos

Eine wirkliche gelungene Präsentation zum Thema hat Jonas Hellwig erstellt. Sie ist hier verfügbar.