Responsive Design - Webseiten für Smartphones und Tablets optimieren

Worum geht es beim "Responsive Design"

Mit Responsive Webdesign ist es möglich, Inhalte einer Website flexibel darzustellen, so dass die Benutzerfreundlichkeit auf Computer, Tablet aber auch auf dem Smartphone gewährleistet ist.
Die Aussage „Form Follows Funktion“ ist oft in diesem Zusammenhang zu hören. Sie bedeutet, dass beim Responsive Webdesign Funktionalität, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Gerätes folgen. Man könnte Responsive Webdesign auch „reagierendes Webdesign“ nennen, denn der Inhalt, sowie die Navigationselemente und der Aufbau der Website passen sich im Gegensatz zu konventionellen Websites der Auflösung des Gerätes an.

Die Vorteile sind offensichtlich!

Wer kennt das nicht: Man möchte nur schnell nach den Öffnungszeiten oder der Telefonnummer eines Restaurants oder eines Geschäftes mit dem Smartphone schauen und bekommt eine starre Seite vorgesetzt, in der man zoomen und scrollen muss bis man überhaupt etwas findet. Responsive Webdesign ist also ein klarer Vorteil für die User und erspart beim Surfen mit Smartphone und Co. unangenehme Überraschungen.

Doch warum nicht einfach eine Website für die mobile Ansicht und eine für die klassische Desktop Ansicht?

Der Marktanteil von Smartphone und Tablets ist in der letzten Zeit rasant gestiegen. Es muss also auf eine Vielzahl von Endgeräten Rücksicht genommen werden.
Bei einer strikten Trennung von Mobil- und Desktop-Version der Website, also einer nicht responsive-fähigen Website, entsteht ein erhöhter Pflegeaufwand von redaktionellem Content und Bildmaterial. Dazu kommt, dass die Website unter Umständen für zukünftige Tablet- oder Smartphone-Formate eine dritte oder vierte Version des Layouts benötigt.

Die Infografik an der linken Seite von verve verdeutlicht das responsive Webdesign sehr anschaulich und stellt alle wichtigen Daten und Fakten zuammen.

Die Bedeutung des Responsive Designs für die App Entwicklung

Mehr als die Hälfte der Deutschen, surft mobil im Internet. Das geht aus einer Web-Studie der Initiative D21 hervor. Demnach ist die Zahl derjenigen, die mit Tablets und Smartphones online gehen, gegenüber dem Vorjahr, um 14 Prozentpunkte gestiegen. Treiber dieser Entwicklung ist die zunehmende Verbreitung mobiler Geräte. So besitzen mittlerweile 58 Prozent der Menschen im Land, inzwischen ein Smartphone und 26 Prozent ein Tablet.

Web Apps und hybrid Apps als mobile Lösung?

Eine aufwändigere Variante des responsive Webdesign, ist die Entwicklung einer Webapp, auf die ein Benutzer automatisch umgeleitet wird, sobald er mit einem Smartphone oder Tablet auf die Website zugreift. Eine Webapp benötigt - anders als beim responsive Webdesign - keine neue Technologie und wird, wie die Weblösung für den Desktop-Browser, auch mit HTML, CSS und JavaScript erstellt. Der Vorteil einer Webapp, gegenüber einer Lösung mit Responsive Webdesign besteht darin, dass nicht nur die Darstellung geändert und den kleinen Bildschirmen angepasst werden kann, sondern auch die Prozesse selbst. Schaut man sich die Apps oder Weblösungen für Smartphones an, die sehr erfolgreich sind, so sind dies in den allermeisten Fällen Apps mit ganz wenigen Funktionen.

Es sollte daher nicht nur das Design angepasst und die Prozesse anders angeordnet werden, sondern es sollte zudem überlegt werden, welche Funktionen man überhaupt für die mobile Version benötigt.
Eine Webapp, kann zusätzlich auch in den jeweiligen App-Stores zum Herunterladen angeboten werden: Die Webapp wird zur Hybrid App.

Aus technischer Sicht wird die in HTML, CSS und JavaScript geschriebene Webapp in eine Art Hülle eingepackt, damit die App dann für die unterschiedlichen Plattformen wie iOS oder Android zur Verfügung gestellt werden kann. Interessant an den hybriden Apps ist, dass die Kosten für die Entwicklung der App nur einmal anfallen und die App dann mit wenig Aufwand auf den verschiedenen Plattformen zur Verfügung gestellt werden kann.

Grundpinzipien des responsive Webdesigns - Begriffe

Die drei wohl wichtigsten Begriffe zu diesem Thema sind „mobile Website“, „fluides Design“ und „responsive Design“. Was responsive Design ist, wurde bereits oben geklärt.

Fluides Design

Das Layout des fluiden Designs basiert auf prozentualen Breitenangaben. Dadurch passt sich die Seite flexibel in der Breite an den verfügbaren Platz an. Üblicherweise definiert man einen Maximalwert für die Breite der Seite. Wenn es das Design erfordert, können innerhalb der Seite einzelne Bereiche auch weiterhin in festen Breitenangaben definiert sein.

Auf großen Bildschirmen können demnach mehr Inhalte abgebildet werden, als auf kleinen Bildschirmen. Um die erforderliche Flexibilität zu erreichen, müssen einige, oder auch alle Spalten des Rasters, variabel sein. Diese Spalten basieren auf Prozentwerten und nicht auf Pixelwerten. Die Website ist normalerweise nur in der horizontalen Ausrichtung flexibel, die vertikale Ausrichtung bleibt starr. Häufig wird auch eine Obergrenze für die maximale Ausbreitung des Designs festgelegt.

Ein fluides Design lässt sich nicht so einfach gestalten wie ein fixes Design und auch die technische Umsetzung ist komplexer. Alle Elemente die in einer flexiblen Spalte untergebracht sind, müssen in der Breite skalierbar sein. Prozentwerte sind in Layoutprogrammen jedoch üblicherweise nicht möglich. Der Programmierer muss daher im darauf achten, welche Bereiche flexibel sind und die Grafiken entsprechend vorbereiten.

Der Vorteil eines fluiden Layouts ist die optimale Platznutzung. Zudem kann häufig mehr Inhalt dargestellt werden.
Als Nachteil ist wohl die komplexe Planung des Rasters zu sehen, des Weiteren ist der Programmierer gestalterisch stark eingeschränkt und die Anpassung der Inhalte ist sehr aufwendig.

Mobile Website

Als Mobile Website wird eine besondere Variante der klassischen Website bezeichnet, die in ihrem Layout und der Usability optimal auf mobile Geräte wie Smartphones und Tablets eingestellt ist. Klassische Websites werden auf mobilen Geräten oft nicht richtig dargestellt. Eine Mobile Website wird parallel zur klassischen Website eingerichtet. Beim Aufruf der Webseite wird dann die Displaygröße ermittelt und im Falle eines mobilen Gerätes, das kompaktere Layout angezeigt. Wie oben schon erwähnt ist der Pflegeaufwand allerdings sehr hoch und es kann sein, dass für zukünftige Geräte weitere Layouts folgen müssen.

Wie wird das „responsive Webdesign“ umgesetzt?

Vieles lässt sich klassisch mit HTML und CSS umsetzten, allerdings gibt es noch kleine Helfer namens Media Queries.

Bevor man anfängt alles zu verkleinern und zu verschieben sollte man sich über die sogenannten Breakpoints Gedanken machen. Ein Breakpoint ist der Punkt, an dem das Design für die Größe des Viewports umspringt. Dabei muss nicht auf alle Gerätetypen geachtet werden, die es gibt, es reicht drei oder vier Punkte zu setzen, an denen das Layout umspringen soll.

Der nächste Schritt sollte das Unterbinden des „default“ Verhaltens sein. „default“ bewirkt bei Smartphones das die Seite in voller Breite angezeigt wird, hierzu wird die Seite herausgezoomt.
Im HTML Header sollte deshalb ein Meta-Tag eingebaut werden:

<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0">


Damit ihr einen kleinen Anhaltspunkt habt, wie ihr anfangen sollt, hier ein kleines Beispiel:

@media only screen and
(min-device-width:320px) and
(max-device-width:480px){

 /* Smartphone */

}

@media only screen and (min-width: 760px) {

 /* Tablet */
}

@media only screen and (min-width: 980px) {

 /* Mittlere Monitore */
}

@media only screen and (min-width: 1280px) {

 /* Große Monitore */
}

In die einzelnen @media können nun die CSS Einstellungen „überschrieben“ werden. Sie werden allerdings nur dann angewendet, wenn die Größe benötigt wird.

Bei Media Queries gibt es natürlich eine Menge von Abfragen, hier die wohl wichtigsten:

width:

Das Merkmal width (Breite) beschreibt bei fortlaufenden Medien die Breite des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite einer Seite.
Der abgefragte Wert stellt eine positive Längenangabe dar. Die Präfixe min- und max- sind hierbei erlaubt.

@media (width: 60px) { /* Breite entspricht genau 60px */ }
@media (min-width: 50px) { /* Breite beträgt mindestens 50px */ }
@media (max-width: 70px) { /* Breite beträgt höchstens 70px */ }

height:

Das Merkmal height (Höhe) beschreibt bei fortlaufenden Medien die Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Höhe einer Seite.
Der abgefragte Wert stellt auch hier eine positive Längenangabe dar. Die Präfixe min- und max- sind ebenfalls erlaubt. Die Anwendung erfolgt analog zum Merkmal width.

device-width:

Das Merkmal device-width (Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel.
Der abgefragte Wert stellt eine positive Längenangabe dar und auch die Präfixe min- und max- sind erlaubt.

@media (device-width: 900px) { /* Breite entspricht genau 900px */ }
@media (min-device-width: 900px) { /* Breite beträgt mindestens 900px */ }
@media (max-device-width: 1024px) { /* Breite beträgt höchstens 1024px */ }

device-height:

Das Merkmal device-height (Geräte-Höhe) beschreibt die Höhe des Ausgabebereichs, z.B. Höhe eines Bildschirms in Pixel. Die Anwendung erfolgt analog zum Merkmal device-width.

orientation:

Das Merkmal orientation (Orientierung) beschreibt das Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert landscape (Querformat), wenn der Wert des Merkmals width größer ist als der Wert des Merkmals height. Andernfalls entspricht die Orientierung dem Wert portrait (Hochformat).
Der abgefragte Wert ist eines der Schlüsselwörter portrait oder landscape. Dies betrifft Bitmap-Medientypen.

@media (orientation: portrait) { /*Hochformat */ }

aspect-ratio und device-aspect-ratio:

Das Merkmal aspect-ratio (Seitenverhältnis) beschreibt das Verhältnis des Merkmals width zum Merkmal height.
Der abgefragte Wert ist ein Verhältniswert. Auch hier betrifft es den Bitmap-Medientypen. Min- und Max- sind erlaubt.

@media (aspect-ratio: 4/3) { /* Beispiel 1 */ }
@media (min-aspect-ratio: 4/3) { /* Beispiel 2 */ }
@media (max-aspect-ratio: 4/3) { /* Beispiel 3 */ }

Hier wird der Verhältniswert 4/3 den Varianten des aspect-ratio-Merkmals zugewiesen. Das Stylesheet wird verarbeitet, wenn das Seitenverhältnis der Viewport genau 4 zu 3 entspricht (Beispiel 1). Das ist zum Beispiel bei einem Anzeigebereich von 492 zu 369 Pixel der Fall. Das Stylesheet in Beispiel 2 wird angewendet, wenn das Seitenverhältnis 4/3 oder höher (z.B. 5/3 oder 6/3) beträgt. Im Beispiel 3 wird das Stylesheet entsprechend nur verarbeitet, wenn das Seitenverhältnis 4/3 oder geringer ist (z.B. 2/3 oder 1/3).

Beim Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) wird das Verhältnis des Merkmals device-width zum Merkmal device-height beschrieben. Dieses Merkmal wird sonst genau gleich wie aspect-ratio behandelt.

Dies ist nun ein kleiner Ausschnitt aus dem Bereich der Media Queries. Eine ausführliche Liste weiterer Media Queries und deren Anwendungsbereiche, findet ihr unter w3schools.com.