Optimierung mobiler Webseiten durch Responsive Web Design

Laut den Daten von StatCounter.com liegt der durchschnittliche Anteil der mobilen Browser im Vergleich zu Desktop Browsern, die auf eine Webseite zugreifen, schon bei fast 30%. Die tatsächliche Anzahl hängt zwar stark vom Inhalt und Zweck der Webseite ab, so hat zum Beispiel w3schools.com nur knapp über 4% Zugriffe von mobilen Geräten – trotzdem darf man sie keinesfalls mehr vernachlässigen. Einen guten Überblick, mit welchen Geräten und Browsern auf die eigene Webseite zugegriffen wird, erhält man zum Beispiel durch die Einbindung von Google Analytics - dazu muss die Webseite jedoch bereits existieren. Es ist aber bereits vor der Erstellung einer Webseite wichtig, sich über mobile Browser Gedanken zu machen, denn damit kann man sich eine Menge Arbeit ersparen. Hier kommt Responsive Web Design ins Spiel.

Mobile Webseite

Existiert die Webseite bereits und ist sie noch nicht für mobile Geräte optimiert, so ist oft der einfachste Ansatz, eine komplett neue Webseite für mobile Geräte zu erstellen (man spricht dann von einer mobilen Webseite). Denn oft ist es im Design einer Webseite nicht vorgesehen, dass sie auf sehr kleinen Displays dargestellt wird. Die Anzahl der Elemente und Menüs sind oft viel zu groß, um sie auf einem kleineren Display darzustellen. Die einzige Möglichkeit ist, das gesamte Konzept und die Menüführung zu überdenken und ein komplett eigenständiges Template für mobile Geräte zu erstellen. Das bedeutet im schlimmsten Fall nochmal denselben Aufwand wie für die ursprüngliche Webseite. Eine serverseitige Browserweiche entscheidet dann, welche Webseite dem Benutzer dargestellt wird.

Liquides/Fluides Layout

Ein anderer Ansatz, der bereits häufig für normale Webseiten verwendet wird, um die Seite an verschieden große Displays und Browserfenster anzupassen, ist ein sogenanntes liquides Layout (oft auch fluides Layout genannt). Dabei werden die Größen von Elementen prozentual zur Fenstergröße angegeben, je kleiner also das Browserfenster, umso schmaler das Element. Bis zu einem gewissen Grad funktioniert diese Technik sehr gut, wird das Browserfenster jedoch sehr schmal – vergleichbar mit dem Browserfenster eines Smartphones – so sieht die Webseite nichtmehr brauchbar aus, da Elemente nicht anders angeordnet werden und zusammengequetscht wirken.

Adaptives Layout

Für mobile Geräte brauchbar ist ein so genanntes adaptives Layout. Bei diesem wird das Design der Webseite stufenweise je nach Fensterbreite mithilfe von so genannten CSS3 Media Queries angepasst. Die Stufen sind fest definiert, zwischen den Stufen ändert sich das Design nicht. Hierbei werden auch Elemente der Seite unterschiedlich angeordnet und dargestellt.

Eine CSS3 Media Query kann entweder auf eine ganze CSS Datei angewendet werden, dann wird diese Query bei der Einbindung der CSS Datei im HTML-Element angegeben:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="example.css" />

Es können aber auch innerhalb einer CSS Datei mehrere Layouts angegeben werden:

@media screen and (min-device-width: 800px) {

  /* CSS Regeln auf die die Query angewendet werden soll kommen hier hin */

}

Mehr Infos zur Nutzung von CSS Media Queries findet man unter diesem Link.

Responsive Web Design

Das Responsive Web Design beschreibt eine Kombination aus liquidem und adaptivem Layout, das Design passt sich stufenlos an die Fensterbreite an, bei gewissen Stufen wird aber gegebenenfalls das Layout und die Darstellung verändert. Dieser Ansatz liefert für gewöhnlich das beste Ergebnis auf einer Vielzahl von Geräten und Displaygrößen. Mithilfe der CSS3 Media Queries werden die Stufen und unterschiedlichen Layouts definiert, die Größenangaben der Elemente (vor allem in der Breite) geschehen prozentual.

Mobile First Prinzip

Einen weiteren Vorteil bietet das Mobile First Prinzip. Dabei geht man zunächst nur von der Webseite für mobile Geräte aus und erstellt erst danach die Layouts für größere Displays. Das bietet den Vorteil, dass man keine zu komplexen Menüs erstellt oder zu viele unterschiedliche Informationen auf einer Seite anzeigt, die auf kleinen Bildschirmen schwer unterzubringen wären. Zudem wird man auf diese Weise auch auf Interaktionen verzichten, die durch das Darüberfahren mit der Maus (ohne zu klicken) ausgelöst werden (zum Beispiel Drop Down Menüstrukturen). Diese Interaktionen würden mit einem Touch Display nicht funktionieren. Meist kann man sich durch das Mobile First Prinzip auch komplexere Änderungen im Layout sparen, für welche JavaScript notwendig wäre.

Fazit

Entwirft man in der heutigen Zeit eine Webseite, so sollte man unabhängig von Inhalt und Zweck der Webseite zumindest ein adaptives oder responsives Layout verwenden. Geht man davon aus, dass sehr viele Benutzer mit einem mobilen Gerät darauf zugreifen werden, so ist das Mobile First Prinzip jedenfalls empfehlenswert. Es gibt bereits zahlreiche Frameworks, die einen bei der Erstellung einer Webseite mit responsivem Layout unterstützen, so zum Beispiel das Gumby Framework.

Diese Techniken kommen vor allem auch bei Web-Apps (PhoneGap Apps) für das Smartphone zum Einsatz, da man hier sehr viele verschiedene Display Größen (von kleinen Smartphones bis zu großen Tablets mit Retina-Display) unterstützen muss.

Auch dieser Blog bedient sich der oben genannten Techniken, Sie können es selbst ausprobieren, indem Sie das Browserfenster verkleinern oder vergrößern. Bei großen Auflösungen wird hier ein adaptives Layout verwendet, wird das Fenster sehr schmal (kleine Displayauflösung), so passt sich die Breite zudem prozentual an das Display an – das Layout ist also „responsive“.