Mobile Optimierung bezeichnet bestimmte Verfahren bei der Programmierung von Webseiten, die die Ausgabe an jede Displaygröße anpassen und so die bestmögliche Anzeige und eine bequeme Nutzung der Inhalte gewährleisten. Hintergrund der Entwicklung ist die Tatsache, dass mittlerweile die meisten Menschen über Smartphones und Tablets auf das Internet zugreifen und eine optimale Usability auf diesen Geräten erreicht werden soll. Die Wichtigkeit zeigt sich auch daran, dass Google die so genannte Mobile Friendliness als erheblichen Rankingfaktor gewichtet.
Warum mobile Optimierung wichtig ist
Der Siegeszug von Smartphones und Tablets – wobei Smartphones eindeutig überwiegen - rollt seit einigen Jahren unaufhörlich voran und verdrängt herkömmliche Notebooks und PCs beim Surfen und Shoppen im Internet immer mehr. In Deutschland liegt der Anteil der mobilen Surfer mittlerweile bei rund 60 Prozent, in einigen anderen Ländern bereits bei über 80 Prozent. Dieser Trend wird sich auch in der nächsten Zukunft fortsetzen. Für Unternehmen, die auf Mobile First setzen, ist eine Optimierung ihrer Webseiten essentiell wichtig.
Unterschiede zwischen mobiler und stationärer Nutzung
Zwischen mobilem Surfen mit dem Smartphone und stationärem via Notebook oder PC lassen sich vier deutliche Unterschiede herausschälen.
- Die Displaygröße fällt wesentlich geringer aus.
- Die Navigation erfolgt nicht per Maus, sondern mit den Fingern per Touchscreen oder teilweise per Spracheingabe.
- Java und Flash sind mit Mobilgeräten in den meisten Fällen nicht darstellbar.
- Unterwegs muss mit langsameren Verbindungen gerechnet werden, je nachdem wie weit der Mobilfunk-Standard LTE verfügbar ist.
Möglichkeiten der mobilen Optimierung
Stand 2017 haben Programmierer mehrere Möglichkeiten für eine Optimierung von Webseiten, die sich für mobile Geräte als praktikabel erweisen. Die erste Methode heißt Responsive Design, die auch von Google eindeutig empfohlen wird. Dabei wird eine Webseite mit ihren Funktionen technisch so gestaltet, dass sich die Inhalte wie Fenster, Bilder, Texte etc. automatisch an die Displaygröße anpassen, unabhängig davon, ob es sich um ein Tablet mit 10-Zoll-Diagonale oder um ein Mobiltelefon mit 5-Zoll-Bildschirm handelt. Hier ist ein – wenn auch geringer - Nachteil darin zu sehen, dass sich nicht jeder Content ohne Verluste an jedes Display anpassen lässt.
Bei der zweiten Methode wird eine Seitenversion bereitgestellt, die speziell auf den mobilen Zugang hin programmiert wurde. Die Inhalte sind dafür auf eine mobile Internetadresse zu übertragen. Das ist nicht ganz einfach, da auch alle auf einem konventionellen PC erreichbaren Inhalte umgeleitet werden müssen.
Ein Beispiel: Wenn die URL einer Desktop-Variante http://www.homepage.de lautet, ist die Bezeichnung für Smartphones und Tablets entweder http://mobile.homepage.de oder http://m.homepage.de.
Es gibt auch noch eine dritte Methode, von der aber in der Regel abgeraten wird. Sie nennt sich Dynamic Serving und ist eine Mixtur aus Desktop- und mobiler Version, wobei letztere einfach nur eine abgespeckte Variante der ersten ist. Die Usability auf Tablets und Smartphones ist in diesem Fall normalerweise schlechter als am PC.
Responsive Design ist derzeit die beste Alternative für mobile Optimierung, auch im Hinblick auf Googles Mobile First Kampagne zur Indizierung, da nur eine URL für Desktop- und Mobilversion eingesetzt wird.
Häufige Fehler
Die mobile Optimierung weist einige Tücken auf, die beachtet werden müssen. Ansonsten kommt es schnell zu Fehlern, die bei guter Vorausplanung im Grunde leicht zu verhindern sind.
- Fehlerhafte Redirects: Wenn mit zwei unterschiedlichen URLs für mobile und Desktop-Version gearbeitet wird, ist auf eine korrekte Einrichtung der Redirects zu achten. Andernfalls erhält der Nutzer eine Fehlermeldung oder ihm wird eine falsche Webseite angezeigt. Programmierer sollten sich deshalb die Mühe machen, vor der Implementierung der Mobilversion einen exakten Plan für die Umleitung zu erstellen. Darüber hinaus sollte über entsprechende Befehle ein Verweis auf die originale Desktop-Version eingebaut werden.
- Videos werden nicht abgespielt: Für die Optimierung von Videos sollten vorab die Bedingungen an Software und Lizenzen minimiert werden. Es sind vorzugsweise solche Formate zu wählen, die auf allen Geräten abgespielt werden können. Eine Programmierung im relativ neuen Standard HTML5 ist hier empfehlenswert.
- Touch-Elemente liegen zu nah beieinander: Werden Schaltflächen und Navigationselemente zu klein gestaltet und nah zueinander positioniert, kommt es häufig zu Bedienungsfehlern, die auf Dauer frustrieren. Viele Nutzer wechseln dann lieber zu anderen Webseiten mit ähnlichen Inhalten, wenn diese besser bedienbar sind.
- Falsch installierte Interstitials: Interstitials sind Banner, die einen Webseitenbesuch unterbrechen und die Aufmerksamkeit des Users auf eine bestimmte Botschaft aufmerksam machen wollen. Werden die Banner, die zum Download einer bestimmten App auffordern, falsch installiert, können die Inhalte einer mobilen Seite in den Suchmaschinen meist nicht mehr richtig indiziert werden.
- Datenmengen sind zu groß: So lange das Mobilfunknetz nicht ausreichend Bandbreiten zur Verfügung stellt, kann es beim Surfen unterwegs zu starken Verlangsamungen kommen, wenn der Datenumfang der mobilen Seite zu groß ist. Sie muss verschlankt werden, indem man zum Beispiel Bildinhalte stärker komprimiert.
Nützliche Hinweise für die mobile Optimierung
Es gibt zahlreiche Maßnahmen für eine mobile Optimierung von Webseiten, die sich zum Teil aus den oben genannten Fehlern ableiten lassen. Dazu zählen unter anderem:
- die Optimierung und Komprimierung von Bildern und Videos
- die Auslagerung von JavaScript und CSS zur Verkürzung der Ladezeiten
- die Anpassung des Head-Bereichs auf kleine Bildschirme
- die Verwendung des Viewport-Metatags bei Responsive Design Webseiten
- die sinnvolle Beschränkung von Multimedia-Inhalten, denn Sounddateien und Animationen verlangsamen den Ladevorgang
- die Nutzung eines so genannten Vary Headers, wenn Dynamic Serving eingesetzt wird
- der Verzicht auf Hover-Menüs in der Navigation
- die gute Lesbarkeit von Schriften auch auf kleinen Displays
Außerdem sollte jede mobile Webseite in einem Simulator auf ihre Funktionalität getestet werden, bevor sie ins Netz gestellt wird. Entsprechende Tools, unter anderem auch von Google, finden sich im Internet.
Mobile Optimierung und Suchmaschinenoptimierung (SEO)
Da Google als führende Suchmaschine seine Algorithmen insofern geändert hat, dass mobile Seiten bevorzugt behandelt werden bzw. Mobile Friendliness seit April 2015 ein wichtiger Rankingfaktor geworden ist, gilt mobile Optimierung auch als wichtiger Bestandteil der Suchmaschinenoptimierung. Denn User greifen nicht nur unterwegs zum Smartphone, sondern verstärkt auch zu Hause, anstatt sich vor den PC zu setzen. Dieses Phänomen ist unter dem Begriff Second Screen bekannt.