Einführung in responsives Webdesign

In Webdesigner-Kreisen wird in letzter Zeit besonders einem Thema eine hohe Aufmerksamkeit geschenkt: Responsives Webdesign. Es macht möglich, die Darstellung einer Webseite auf unterschiedlichen Bildschirmgrößen zu beeinflussen. So erhält der iPhone-User eine andere Darstellung als Besucher, die über einen 30 Zoll großen Bildschirm auf die Webseite stoßen. Daher hier eine kleine Einführung in das Thema responsives Webdesign.

Die Sorgen der Webdesigner: Unterschiedliche Bildschirmgrößen

Die Bildschirmgröße ist im Webdesign schon immer ein heikles Thema, für die es keine Optimallösung zu geben scheint: Die einen stellen die Seitenbreite auf 100%, sodass der komplette Bildschirm genutzt wird (Beispiel: Wikipedia.org), auf großen Bildschirmen kann dies jedoch sehr unschön aussehen und wenn das Layout von Grafiken abhängig ist, kann man die flexible 100% Breite ohnehin vergessen, da die Browser meistens nur sehr unschön skallieren. Das Einstellen der Seitenbreite auf einen bestimmten Wert bringt hingegen den Nachteil mit sich, dass die Seite auf kleinen Bildschirmen vielleicht einen horizontalen Scrollbalken erzeugt oder auf großen Bildschirmen etwas mickrig aussieht, da sie nur einen Bruchteil des Bildschirms nutzt.

Die Lösung scheint nun das responsive Webdesign zu bringen, es ist zwar noch immer keine Optimallösung (was weiter unten thematisiert wird), aber immer noch die beste der drei Alternativen. Es bietet die Möglichkeit, unterschiedliche Stylesheets bei unterschiedlichen Bildschirmgrößen zu nutzen. Wenn das Gerät eines Users also beispielsweise 1800 Pixel Bildschirmbreite bietet, erhält dieser Nutzer ein anderes Design als der Nutzer, der über ein iPhone die Seite aufruft. Die HTML-Datei bleibt dabei immer gleich, lediglich die CSS Informationen werden geändert.

Bislang gab es einige Webdesigner, die spezielle Webseiten für Smartphones entwickelten und diese dann auf einer Subdomain bereitstellten. Da es aber immer unterschiedlichere Geräte gibt – angefangen vom kleinen Smartphone über Tablet-PCs, Netbooks, Laptops bis hin zu großen 30 Zoll Bildschirmen – wäre der Aufwand zu groß, für jedes Gerät eine eigene Seite zu entwickeln. Durch responsives Design ist es möglich, mit relativ wenig Aufwand eine Vielzahl von Bildschirmauflösungen zu unterstützen. Daher hier eine kleine Einführung in das Thema responsives Webdesign.

Responsives Webdesign – Media Queries verwenden

Es gibt zwei Wege, eine HTML Datei responsiv zu gestalten. Sie unterscheiden sich nur darin, ob man mehrere CSS Dateien verwendet – also immer eine eigene für jede Bildschirmgröße – oder ob man eine einzige CSS Datei nutzt, innerhalb derer man dann die einzelnen Stylesheets für die jeweilige Bildschirmgröße zuweist. Beide Varianten nutzen Media Queries unter CSS 3, die die media types aus CSS 2 ersetzen. Mit Media Queries ist es möglich, Eigenschaften und Fähigkeiten von Ausgabegeräten wie Computern und Smartphones abzufragen und je nach Ergebnis unterschiedliche Stylesheets zuzuweisen.

Aus Performance-Gründen ist der Weg über die alleinige CSS-Datei empfehlenswert. Man kann direkt im Haupt Stylesheet einer Seite per @media only screen den Browser anweisen, bei den folgenden Bedingungen das folgende Stylesheet auszugeben. Angenommen, Geräte mit einer Breite von unter 480 Pixeln (wie es bei vielen Smartphones der Fall ist) sollen angesprochen werden. Die Einbindung in das Stylesheet würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10

/*
...hier steht der bisherige CSS-Code...
*/
 
@media only screen 
and (max-device-width : 480px) {
    /* 
    ...hier folgt der Code für Geräte unter 480 Pixeln Breite...
    */
}

Für die Definition des Bildschirms (zum Beispiel die Breite, ob es der Landscape Modus ist oder die Auflösung) gibt es diverse Parameter, die hier in der Übersicht angesehen werden können.
Innerhalb der jeweiligen Definitionsbereiche wird ganz normal CSS verwendet. Nehmen wir an, wir haben einen Div-Container mit der ID main. Auf einem Smartphone soll der Container mit blauem Hintergrund angezeigt werden, auf einem herkömmlichen Bildschirm (mindestens 500px Breite) mit orangenem Hintergrund. Der Code würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	#main {
	   background: dodgerblue;
	}
}
@media only screen 
and (min-width : 500px) {
	#main {
	   background: orange;
	}
 
}

Das Beispiel mag zunächst unsinnig erscheinen, zeigt aber, wie einfach man mit Media Queries Elemente unterschiedlich darstellen kann, je nach dem, auf welchem Gerät sich der Nutzer befindet.

Das Viewport Meta Tag

Wer ein individuelles Design für Smartphones entwickelt, sollte das Viewport Meta Tag in seinen HTML-Header einbauen, um die automatische Skallierung der mobilen Browser zu verhindern. Einen ausführlichen Artikel zum Thema mit Code-Beispiel hat Firefox-Entwickler Mozilla auf seiner Webseite veröffentlicht (englischsprachig): Using the viewport meta tag to control layout on mobile browsers.

Die Nachteile von CSS Media Queries

Das responsive Webdesign über CSS Media Queries ist derzeit wohl unbestitten die beste Möglichkeit, seine Webseite für verschiedene Geräte zu optimieren. Gerade bei Smartphones kann es allerdings zu Performance-Einbußen kommen. Denn nach wie vor wird der komplette Quellcode übertragen und nach wie vor wird die ursprüngliche Größe von Grafiken heruntergeladen. Die Grafiken sind das Hauptproblem: Möchte ich, dass ein Foto auf einem 27 Zoll Bildschirm genauso imposant aussieht wie auf einem Smartphone, muss eines der beiden Geräte skallieren – und das in der Regel unter Einbußen von Qualität und Performance.

Anwendungsbeispiel

Um die Verwendung von Media Queries und die Anwendung von responsivem Design zu demonstrieren, hat der Webdesigner James Mellers ein beeindruckendes Beispiel auf seiner Webseite veröffentlicht. Beim Vergrößern und Verkleinern der Fensterbreite stellt man fest, wie sich das Objekt immer wieder der Fenstergröße anpasst.

Mobile First: Ein neuer Trend

Ein neuer Trend im Webdesign, der mit dem Thema von responsiven Webseiten einher geht, ist Mobile First. Hierbei wird beim Gestalten eines neuen Webdesigns zunächst der Fokus auf das mobile Design gelegt; erst später wird auf Basis des mobilen Designs ein Design für Desktop Geräte entwickelt. Somit ist das Design optimal für die Nutzung mit Smartphones ausgelegt und größere Geräte werden erst an zweiter Stelle beachtet.

Ob sich dieser Trend durchsetzen wird, ist schwierig zu sagen: Zwar hat die Zahl von Internetnutzern, die über Smartphones surfen, seit 2007 stark zugenommen und einige Experten erwarten, dass schon 2014 mehr User über Smartphones als über herkömmliche Desktop Computer im Internet surfen werden. Dennoch nutzen in der Gegenwart der Großteil der User noch herkömmliche Desktop-Geräte und auch in Büros wird der Computer dem Smartphone noch vorgezogen.

Beim Webdesign für mobile Geräte stoßen Webdesigner auf neue Hürden, die es zu bewältigen gibt. Hover-Effekte, die auch heute im Webdesign gerne genutzt werden, fallen bei Smartphones und Tablets weg, da der Nutzer nicht mehr mit einer Maus navigiert. Andere Bereiche müssen hingegen erweitert werden: Kleine, schmale Navigationen sind auf mobilen Geräten eher lästig, da sie schwieriger anzuklicken sind als größere Buttons.

Lesetipp: Responsive Web Design von Ethan Marcotte

Zum Thema responsives Webdesign gibt es zwar noch keine deutschen Bücher, der Webdesigner Ethan Marcotte hat allerdings ein englisches E-Book veröffentlicht, das sich ausführlich mit den Themen resonsives Webdesign, Flexibilität und Medie Queries auseinandersetzt. Das Buch gibt es mittlerweile auch in gedruckter Form. Die E-Book Variante kostet rund 7 Euro und kann bei A Book Apart heruntergeladen werden.