Der mobile Sektor erwächst immer weiter und bringt Veränderungen mit, gerade was das Webdesign betrifft. Die Schwierigkeit beim mobilen Besucher liegt darin dass sie einen viel kleineren Viewport haben, als zum Beispiel der durchschnittliche Bildschirm im Büro oder Zuhause.
Es müssen also die Inhalte einer Webseite und deren Informationen in diesem beschränkten Bereich untergebracht werden, ohne dass der Besucher die Lust verliert. Das ist gar nicht mal so einfach, gerade wenn es komplexere Webseiten sind, die zum Beispiel auch über komplexe und sehr tief gehende Navigation verfügen.
2 Wege zum mobile Internet
Bei der Umsetzung von mobilen Webseiten gibt es zwei Varianten, einerseits ist es eine komplett eigene Webseite zu erstellen, die lediglich von mobilen Besuchern aufgerufen werden kann. Sie ersetzt in diesem Sinne die normale Webseite, da der mobile Besucher automatisch umgeleitet wird. Diese Vorgehensweise hat den Vorteil, dass nicht die HTML Struktur bzw. dessen Inhalte identisch mit der normalen Webseite sein müssen. Es können komplett eigene Inhalte geschaffen werden!
Bei datenbankbasierenden Webseiten (z.B. bei manchen Content Management Systemen) müsste bei einem speziellen mobilen Design keine weitere Webseite angelegt werden, da hierzu einfach ein separates Template zugewiesen wird. Die Inhalte bleiben gleich, nur die grundlegende Struktur des HTML-Gerüstes wird verändert.
Der andere Weg, in dem es in diesem Artikel auch grundsätzlich gehen wird, ist das Erstellen eines responsiven Webdesigns. Dieses Design richtet sich an den entsprechenden Viewport des Ausgabegerätes. Hierzu wird keine eigene bzw. separate Webseite und Inhalte benötigt, sondern lediglich mittels CSS andere Werte zugewiesen. Der Vorteil bei dieser Variante ist, dass wie schon erwähnt keine separate Website benötigt wird, auf die der Benutzer umgeleitet werden muss. Dies ist besonders dann ein wichtiger Punkt wenn sich Inhalte oft ändern, denn so muss nur eine Webseite gepflegt werden!
Responsive Webdesign Beispiele
Die nachfolgenden Beispiele zeigen sehr schön welche Möglichkeiten einem die responsiven Designs bieten. Durch die Verwendung von prozentualen Werten in den CSS-Eigenschaften können z.B. auch die unterschiedlichen Breiten und Höhen des Viewports bei der Drehung eines Tablets oder Smartphones zu Veränderungen führen, ohne das die Seite neu geladen werden muss.
An Beispielen gibt es noch weit mehr, wer sich gerne noch weitere ansehen möchte kann z.B. mal bei mobile AWESOMENESS vorbeischauen. Dort werden viele verschiedene Umsetzungen von mobilen Designs präsentiert.
Das wichtigste was man wissen muss!
Um die neuen CSS Anweisungen auch auf eine spezielle Viewportgröße zu begrenzen müssen so genannte Media Queries verwendet werden. Vor der eigentlichen Erklärung was Media Queries sind, ist hier ein kleines Beispiel:
@media all and (max-width: 899px) {
[...]
}
Dies gibt beispielsweise an, dass alle Werte in der geschweiften Klammer nur verwendet werden soll wenn der Viewport bei 899 Pixel und drunter ist. Solche Zeilen befinden sich in der CSS-Datei, denn so können auch innerhalb einer CSS-Datei mehrere Designzustände definiert werden.
Dies lässt sich natürlich je nach Situation verändern, sodass auch folgende Varianten Möglich wären:
<!-- Nur bei Geräten mit einer Bildschirmbreite von 800 Pixel -->
@media screen and (device-width: 800px) {
[...]
}
<!--- Nur bei Geräten, die sich im Hochformat befinden -->
@media all and (orientation:portrait) {
[...]
}
<!--- Nur bei Geräten, die sich im Querformat befinden -->
@media all and (orientation:landscape) {
[...]
}
Natürlich können auch spezielle CSS-Dateien verwendet werden, die jeweils die richtigen Styles haben und man diese auslagern möchte. Dazu kann innerhalb des <link>-Tags ein entsprechender Verweis eingebunden werden. Die würde dann z.B. so aussehen:
<link type="text/css" rel="stylesheet"
media="only screen and (max-device-width: 480px)" href="mobile-480.css" />
Diese Werte alleine bringen in aller Regel nichts, denn die einzelnen Geräte ignorieren sie, da schlicht und einfach die Webseite herunterskaliert wird. Um genau das zu vermeiden sollte in den <head> der Seite folgender <meta>-Tag eingebaut werden:
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
Mit diesen Werten wird die Möglichkeiten des Zooms innerhalb einer Seite auf 0 gesetzt. Der Zoom macht nur bei Webseiten Sinn, die herunterskaliert werden und nicht bei optimierten Webseiten, die sich an die Größe des Gerätes anpassen.
Dies waren auch schon die wichtigsten Werte, die man für den Einstieg für responsive Webdesigns benötigt. Dieses Thema ist natürlich noch vielschichtiger, da auch noch spezielle Grafiken eingebunden werden können, sobald z.B. ein Gerät mit Retina-Display die Seite aufruft.