Webseiten und Webseitendesigns müssen sich immer mehr an mobile Endgeräten orientieren. Zwar werden immer noch klassische Webseiten über PC-Browser aufgerufen, der Trend geht aber klar in Richtung mobil. Dabei geht es aber nicht nur darum, bereits vorhandene Inhalts so zu optimieren, dass sie auf einem Handy angezeigt werden können. Es geht auch darum, Schnittstellen zu nutzen, die ein Smartphone heute hat. Das sind vor allem:
- eingebaute Kamera
- GPS
- Mikrophon
- Telefonschnittstelle
Responsive Design
Beim Responsive Design geht es darum, dass eine Webseite sich automatisch an ein Endgerät anpasst. Das geschieht vor allem durch das Setzen so genannter Breakpoints. Beim Responsive Design (übersetzt mit reagierendes Design) wird nur noch eine Version einer Webseite programmiert. Diese liefert die Ergebnisse dann für verschiedene Ausgabegrößen aus. Oftmals geschieht das durch so genannte Cascading Style Sheets, in denen festgeschrieben wird, welche Designelemente für mobile Geräte verwendet werden. Der Text bricht im Browser selbst um, aber es muss Bilder und Logos in verschiedenen Größen geben.
Adaptives und liquides Design
Bei adaptiven Design werden Webseiten einmal für Desktopversionen und dann für mobile Versionen entwickelt. Allerdings sind die Breakpoints sehr festgelegt und es findet keine fließende Anpassung statt. Beim liquiden Design wir der zur Verfügung stehende Raum in einem immer gleichen prozentualen Verhältnis genutzt. Damit bleiben alle Layoutelemente an ihrem Platz.
Charakteristische Eigenschaften
Unabhängig vom Design finden sich bei mobilen Webseiten aber auch bestimmte charakteristische Eigenschaften
, die teilweise jetzt auch in Webseiten einziehen. Besonders zu nennen ist das Hamburger-Menu, dass sich als Navigation durchgesetzt hat, weil es Platz sparend ist. Als Navigationselement sieht der Betrachter zunächst nur drei waagrechte Striche, die an einen Hamburger erinnern. Werden diese mit dem Finger berührt, öffnet sich – meistens seitwärts – ein Menü das Unterseiten anzeigt.
Eine andere Eigenschaft ist, dass mobile Seiten länger sind als es Desktop-Seiten bislang waren. Früher galt die Regel, dass Scrollen der Webseiten zu vermeiden ist, weil User das nur ungern machen. Beim Smartphone ist man aber wegen des geringen Platzes bereits gewohnt, zu scrollen. Das hat große Auswirkungen auf das Layout. Man sieht jetzt auf einer Homepage immer mehr Elemente, die bislang nur auf Unterseiten vorhanden waren. So kann man bei einer Hotelseite in einem Block Fotos sehen, darunter dann ein Sonderangebot, darunter folgend eine Buchungs-Schnittstelle, dann wiederum Menüvorschläge aus dem Restaurant und schließlich noch Wissenswertes über die Stadt.
Schnittstellen
Zwar haben auch Laptops heute Kameras und können zumindest über den Internetzugang geortet werden, allerdings sind solche Schnittstellen erst so richtig mit dem Smartphone nutzbar geworden. So kann eine Webseite heute die Kamera aktivieren oder aber über das GPS feststellen, wo man sich gerade befindet und Informationen ausliefern, die sich auf den Ort beziehen. Das ist zum Beispiel bei einer Webseite wichtig, die Restaurants auflistet. Hier kann über die Ortung gleich angezeigt werden was sich in der Nähe befindet.
