Technik von Responsives Webdesign

Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte Media Queries, ein CSS-3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.
Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:

  • Größe des Gerätes selbst
  • Bildschirmauflösung
  • Orientierung (Hoch- oder Querformat)
  • Eingabemöglichkeiten (Tastatur, Fingergeste (Touch), Sprache)

Responsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Grid und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert auf den Nutzer und dessen Anforderungen.
Schriften:
Im responsiven Design werden Schriftgrößen, Zeilenhöhen etc. auf der Basis von % und/oder em definiert. So entspräche eine Schriftgröße von ca. 16 Pixeln 100% oder 1em. Alle anderen Werte wären entsprechend umzurechnen.

Layout

Gängig war zuletzt 960px, inzwischen wird vielfach auch 1.140px propagiert. Es ist weiterhin sinnvoll, seinen Layouts eine Obergrenze mit zu geben. So vermeidet man, dass das Layout auf einem Bildschirm mit 5.000px Screenbreite vollkommen auseinander gerissen wird. Die Obergrenzendefinition, etwa über max-width: 1140px, erlaubt aber die Anpassung nach unten.
Bilder, Slider, Videos
Bildern, Videos und anderen Objekten gibt man stets eine Maximalgröße von 100% mit (max-width:100%;). Für den Internet Exploder gibt es ein fertiges Script, das auch diesen Designerschreck in die Lage versetzt, so zu arbeiten.
Der geübte Designer erkennt sofort ein Problem. Bilder werden immer in voller Größe geladen, auch wenn die Anzeigegröße nur 31,25% beträgt. Da wäre es ja schöner, man hätte die Möglichkeit, entsprechend kleinere Bilder zu laden. Bei der Filamentgroup auf Github gibt es eine Javascript-Lösung, die genau das ermöglicht. Das Funktionsprinzip wird auf dieser Demoseite beschrieben. Skaliert einfach mal das Browserfenster.

 

Media Queries

CSS Media Queries sind letztlich das Herzstück eines erfolgreichen responsiven Webdesigns. Mit dem bereits seit Jahren gebräuchlichen media-Tag, schon in der Vergangenheit stets benutzt, um ein spezielles Stylesheet für die Druckausgabe zu laden, lässt sich heutzutage die Steuerung der Anwendung bestimmter Stylesheets für bestimmte Devices sehr gut steuern.
Mit den CSS3-Mediaqueries kann man ein HTML-Element je nach Eigenschaft des darzustellenden Browsers ein anderes Aussehen verpassen. So könnte man die Seite auf einem Desktop-Rechner mit großem Bildschirm mehrspaltig nebeneinander zeigen. Neben der breiten Inhaltsspalte hätten dann noch zwei oder sogar drei Randspalten mit Zusatzinformationen Platz. Auf Smartphones hingegen müsste man den Inhalt linear, also unter- und nacheinander aufreihen, damit der Anwender den Inhalt einfacher lesen kann.
Bild {Webberry}
Auf folgende Features kann mittels Media Queries zugegriffen werden:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid

Neue Herausforderung für Websites

Die Webprogrammierer kamen nur kurz zu einer Schnaufpause… Hatten sie doch endlich die Browser-Kompatibilität wie IE 7,8,9.. im Griff, wird die Umsetzung von „Responsivem Web-Design“ verlangt.
Um was geht es…
Während man früher sein Layout für eine gewisse Standardauflösung optimiert hat, wie z.B. 800x600px oder 1024x748px müssen Layouts heute auch auf Mobilien Endgeräten funktionieren und das nicht nur horizontal, sondern auch vertikal!

Referenz: http://kalender-fribourgregion.ch/

Dies wird in Zukunft gravierend an Bedeutung gewinnen, denn im dritten Quartal 2012 wanderten 170 Millionen Smartphones über die Ladentheken, somit doppelt soviel wie ein Jahr zuvor. Die Prognose von IDC für die nächsten vier Jahre macht deutlich, wo das Wachstum liegen wird. Die Marktforscher rechnen bei Smartphones zum Jahr 2016 mit nahezu einer Verdoppelung der Verkäufe auf 1,4 Milliarden Geräte. Die Zahl der abgesetzten Tablet-Computer soll IDC zufolge von 122,3 Millionen im Jahr 2012 auf 282,7 Millionen steigen. Die Nachfrage nach Desktop-Rechnern werde dagegen bei rund 150 Millionen stagnieren. Bei tragbaren PCs rechnet IDC immerhin mit einem Wachstum von 31,1 Prozent auf 268,8 Millionen Geräte. Quelle: heise.de

Vorbei also die Zeiten, in denen sich Webentwickler auf Webseiten nur innerhalb einer verbindlich maximalen Standardbreite austoben durften. Smartphones und Tablets fordern aufgrund ihrer physikalischen Größe Tribut. Doch wie erreicht man, dass Webseiten überall gut aussehen? „Responsive Web-Design“ passt Inhalte automatisch der zur Verfügung stehenden Darstellungsgröße an.

Das Anforderungsprofil einer Webseite kann man schnell auf einen Nenner bringen: Der Anwender sollte eine Seite jederzeit erreichen und benutzen können – egal ob am großen Bildschirm daheim, am Laptop im Café oder auf dem Smartphone in der SBB. Es geht darum, Inhalte bereitzustellen, die der User ohne Mühe immer und überall konsumieren kann.