Suche

Responsive Webdesign


Haben Sie schon einmal vom Begriff des »Responsive Webdesigns« (RWD) gehört? Viele Kunden fragen uns, wie Internetseiten für mobile Geräte optimiert werden können. Wir möchten ihnen heute gerne erklären, was sich hinter dem Begriff verbirgt.

Responsive Webdesign (zu deutsch: „reaktionsfähiges Webdesign“) setzt auf „flüssige“ Techniken in jeder Hinsicht. Ziel der Technik ist es, eine Internetseite auf jedem Display optimal darzustellen. So soll eine Website und deren Inhalte nur einmal gepflegt werden und trotzdem für viele Geräte optimiert sein. Der gleiche Inhalt einer Website wird also auf kleinen Displays wie Smartphones und ebenso auf Desktop-Bildschirmen von 24 Zoll oder größer ausgegeben und an die jeweilige Größe angepasst dargestellt.

Wenn ein Design auf allen Geräten optimal dargestellt werden soll, bedeutet dies einen höheren technischen und gestalterischen Aufwand bei der Erstellung. Da flüssige Raster schwer in Layout-Programmen dargestellt werden können, wird oft schon in einer frühen Entwicklungsphase direkt mit der Implementierung begonnen. Die Weiterentwicklung des Designs in Layout-Programmen wird dann parallel zur Implementierung fortgeführt.1 Auch die Inhalte müssen konzeptionell anders betrachtet werden. Um eine gute Integration der Inhalte in die Website zu erzielen, müssen diese auch flexible und anpassungsfähig sein. Diese Tatsache lässt das Konzept und die Umsetzung des Responsive Webdesigns technisch oft aufwendiger und komplexer werden.

Vorteile:

  • Jede Displaygröße wird optimal berücksichtigt, da sich die Internetseite automatisch „flüssig“ an die Browsergröße anpasst.
  • Es findet keine Platzverschwendung statt. Der Platz wird immer optimal ausgenutzt.
  • Idealerweise steht der Inhalt im Vordergrund, gerade für kleine Displays.

Nachteile:

  • Mockups bzw. die typische Gestaltung in der Designphase sind schwer möglich, da ein flüssiges Layout nicht in Standard-Layout-Programmen abgebildet werden kann.
  • Die Anpassung und technische Umsetzung ist oft komplexer als andere Methoden, da auch Inhalte sehr flexibel sein müssen und sich den äußeren Gegebenheiten anpassen müssen. Dadurch steigt natürlich der Zeit- und somit auch der Kostenaufwand in der Gestaltungs- und Umsetzungsphase.

Grundlegende Techniken für Responsive Webdesign

Die Techniken, die es für einfache reaktionsfähige Websites benötigt, sind schon länger in der Webgemeinde bekannt. Aus Komplexitätsgründen wurden sie jedoch lange nicht für diese Zwecke eingesetzt. Laut Ethan Marcotte, dem Erfinder des Begriffs »Responsive Webdesign«, sind drei zentrale Elemente für die Erstellung von reaktionsfähigen Internetseiten nötig:

  1. CSS3 Media Queries
  2. Ein flexibles Gestaltungsraster – Flexible Grid
  3. Flexible Inhalte

1. CSS Media Queries

Wenn man einem flexiblen Raster keinen Maximalwert übergibt und das Browserfenster über die gesamte Breite eines aktuellen 24“ Monitors zieht, so kann dies eine Breite von 1920 Pixeln oder mehr aufweisen. Wenn sich in einem HTML-Element Text befindet und das Element über die gesamte Breite des Fensters dargestellt wird, kann dies erheblich die Lesbarkeit von Texten beeinflussen. Hierbei hilft die in CSS3 präzisierte Technik der Media Queries, die es ermöglicht, bestimmte Attribute wie Bildschirm- bzw. Viewportgröße des Browsers abzufragen und dementsprechend angepasstes CSS-Stile, als Gestaltungsangaben für eine Internetseite, an den Browser auszuliefern. Somit kann man in Grenzbereichen das Layout einer Seite sehr gut kontrollieren. Mit Hilfe der Media Queries können für unterschiedliche Displaygrößen auch komplett neue Layouts geschaffen werden.

2. Flexibles Grid

Das wohl wichtigste Element stellt das Flexible Grid (flexibles/flüssiges Raster) dar, was auf Media Queries aufbaut. Ohne dieses zentrale Element würde diese Technik nicht existieren und ist somit Grundvoraussetzung. HTML-Seiten sind seit Erfindung flexibel, wenn man HTML-Tags keine festen Größenangaben z.B. in Pixel zuweist, also mit CSS- Regeln versieht, wie es bei den meisten Internetseiten der Fall ist. In der Vergangenheit des Webdesigns hat man sich stark am Printdesign orientiert, da es leichter fällt für eine feste Breite eines Mediums ein Layout zu erarbeiten. In den Anfängen des Internets hat man sich stets an aktuellen durchschnittlichen Bildschirmbreiten der Nutzer orientiert. So betrug die durchschnittliche Auflösung eines Bildschirms im Jahr 2000 noch 800 x 600 Pixel. Dies hat sich natürlich mit größer werdenden Displays stets angepasst. In den letzten Jahren haben sich viele Entwickler dafür entschieden ein 960 Pixel breites Raster für die Gestaltung zu verwenden. Die Technik des flüssigen Rasters bezieht sich jedoch nicht auf die HTML- Seiten, sondern arbeitet mit prozentualen Angaben, die es ermöglichen, dass sich die HTML-Elemente einer Seite abhängig zu deren übergeordneten Elementen verhalten. Das oberste Element, an was sich ein HTML-Element orientieren kann, ist das Browserfenster. Damit die Lesbarkeit von Inhalten auf Seiten jedoch nicht leidet, wird die obere Grenze, also die maximale Breite eines Layouts oft beschränkt.

3. Flexible Inhalte

Möchte man ein Bild in einer Website flexibel darstellen, benötigt es wie beim Raster Größenangaben in Prozent, damit das Bild sich mit dem umliegenden Container verkleinert oder vergrößert. Mit prozentualen CSS-Breitenangaben entstehen jedoch auch Gefahren. Zum einen wenn der umliegende Container größer ist, als die native Auflösung des Bildes, wird dieses verpixelt dargestellt. Das zweite und vielleicht größere Problem, was sich auch hinter dem Begriff »Responsive Images« verbirgt, ist, dass Bilder und andere Medien mit den o.g. CSS-Regeln nicht an mobile Geräte und vor allem an deren Bandbreite angepasst werden. Sie werden immer in voller Auflösung und somit mit maximaler Dateigröße an die Geräte ausgeliefert. Einige Webentwickler sind der Meinung, dass es eine technische Lösung benötigt, die unabhängig von HTML und CSS funktioniert, in dem abhängig von Bildschirmauflösung und Netzwerkstatus des Geräts, Medien mit bestimmter Dateigröße geladen werden. Diese Variante wäre technisch die Einfachste. Doch bis sich solch ein technischer Standard durchgesetzt hat, haben sich eventuell schon komplexere Probleme entwickelt.2

Titelbild entworfen durch Freepik


  1. Hellwig, Jonas (2013) „Adaptive Website vs. Responsive Website“. http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/ 

  2. Hannemann, Anselm (2013): „Responsive Images: So setzt du flexible Bilder schon jetzt ein“. http://t3n.de/magazin/praktische-losungen-flexible-bilder-responsive-images-232734 


Liked it?

Ihnen hat gefallen, was Sie gelesen haben? Das freut uns! Wir würden uns sehr darüber freuen, wenn Sie uns einen Kommentar hinterlassen oder unseren Artikel in den sozialen Medien teilen. Vielen Dank.


Comments