Mobile Website optimieren: Was ist zu beachten? [+Infografik]

In den alten Tagen des Internet, bevor es die mobile Website gab, mussten Webdesigner stets darauf achten, dass ihre Seiten nicht zu schwer wurden und auf allen Bildschirmen angezeigt werden konnten. Dies bedeutete nicht nur den Verzicht auf die eine oder andere Technologie, sondern auch, dass man sich mit der Seitenbreite an der Breite der von vielen Servern noch benutzten Bildschirmauflösung 800 × 600 orientieren und auch sehr darauf achten musste, dass nicht zu viele und nicht zu große Bilder verwendet wurden.

Mit der Zeit wurden die Internetzugänge schneller, die Bildschirme breiter und es etablierten sich einige Technologien wie Java und Flash, die man dann als normalerweise vorhanden voraussetzen durfte.

Nachdem es sich Webdesigner nun einige Jahre leisten konnten, auch opulentere Websites zu gestalten, gibt es nun einen gegenläufigen Trend: Da immer mehr Menschen Smartphones und andere mobile Endgeräte besitzen, werden Websites immer häufiger mit solchen Endgeräten betrachtet. Da diese weniger leistungsfähig sind als die heute üblichen PCs und Laptops samt zugehörigen Bildschirmen, müssen sich die Gestalter von Internetseiten nunmehr Gedanken darüber machen, ob ihre Arbeiten bei allen Betrachtern richtig und vor allen Dingen lesbar angezeigt werden.

EXTRA: Mobile Conversion – 4 Strategien zur Optimierung

Smartphone oder Laptop: Wie betracht der Besucher deine Website?

Zunächst einmal sollte man feststellen, ob der Besucher mit einem Smartphone oder einem ähnlichen mobilen Endgerät unterwegs ist. In diesem Falle kann er dann nämlich zu einer speziell für mobile Endgeräte optimierten Version der Website weitergeleitet werden, welche dann ohne faule Kompromisse speziell für solche optimiert sein kann.

Vorteile einer optimierten Version deiner Website:

1. Besucher von mobilen Endgeräten können an alle Informationen kommen
2. Besucher von Desktop-PC’s oder Laptops bekommen eine Website geboten, welche die aktuellen technischen Möglichkeiten von Festnetzzugängen und modernen Desktopcomputern nutzt.

Kurze Ladezeit: So wichtig wie noch nie!

Besonders ärgerlich beim mobilen Surfen ist die geringe Übertragungsgeschwindigkeit, welche de facto vorhanden ist. Zwar werben die Anbieter von Mobiltarifen für Smartphones mit recht ordentlichen Übertragungsgeschwindigkeiten. Bei näherem Hinsehen stellt man jedoch fest, dass die angegebenen hohen Werte stets nur für ein bestimmtes – in vielen Fällen lächerlich geringes – Datenvolumen gelten, welches natürlich schnell aufgebraucht ist. Dann geht es für den Rest des Monats mit einer Geschwindigkeit weiter, die an die Zeiten der analogen Modems erinnert.

Da das „Gewicht“ einer Website maßgeblich von der Anzahl und Größe der auf ihr vorhandenen Bilder bestimmt wird, ist dies ein wichtiger Ansatzpunkt für die Optimierung einer Website für mobile Endgeräte.

Da Smartphones über einen recht kleinen Bildschirm verfügen, müssen die Abmessungen von Bildern natürlich entsprechend kleiner gewählt werden. Dadurch werden die Dateien automatisch kleiner. Zusätzlich fällt bei einem kleineren Bild auch eine durch höhere JPEG-Komprimierung verschlechterte Qualität weniger auf.

Google-Test: Und wie schnell ist deine Website?

Google Tool: ,,Test My Site“

Dieses kostenlose Angebot von Google prüft die Geschwindigkeit deiner Website auf mobilen Endgeräten und gibt Tipps zur Optimierung.

Wer liest lange Texte auf dem Handy? – Niemand!

Wenn auch der Text bei der Datenmenge, die zum Anzeigen einer Seite übertragen werden muss, nicht übermäßig zu Buche schlägt, spielt er doch eine Rolle bei der Optimierung einer Website für Smartphones. Die meisten Menschen lesen ungern längere Texte am Bildschirm. Dies gilt natürlich ganz besonders für den kleinen Bildschirm eines Smartphones. Daher solltest du nicht nur darauf achten, dass die Größe der Zeichen zur Größe des Bildschirms passt, sondern auch darauf, dass Texte nicht zu lang sind.

 Auch Audiodateien sind verhältnismäßig groß.

Daher solltest du auf Soundeffekte und Hintergrundmusik bei Seiten für mobile Endgeräte ebenfalls verzichten.

EXTRA: Relevanter Content – Das Ranking-Kriterium für Google

Sind Usability-Funktionen sinnvoll eingesetzt?

Viele Technologien, die wir heute bei Websites verwenden, funktionieren auf Smartphones nicht. Vor allen Dingen funktioniert Flash weder beim iPhone, noch auf dem iPad oder dem iPod. Wird diese Technologie verwendet, beispielsweise um Videos anzuzeigen, sind Apple-User automatisch ausgeschlossen.

Ebenfalls beachtet werden muss, dass mobile Endgeräte typischerweise nicht mit einer Maus sondern mit einem Touchscreen bedient werden. Daher sind zum Beispiel Hoover-Effekte sinnlos. Ebenfalls ungeeignet für mobile Endgeräte sind die heute verbreiteten Drop-Down-Menüs. Stattdessen lieber herkömmliche Linkleisten verwenden.

Unser Buchtipp passend zum Thema:

Responsive Webdesign: Konzepte, Techniken, Praxisbeispiele

Gebundene Ausgabe: 524 Seiten
Verlag: Rheinwerk Computing
Auflage: 3 (29. Mai 2017)
Preis: 39,90€
bei Amazon mit 5 Sternen bewertet

Jetzt ansehen!

Google: Die Grundregeln für mobile Webdesign

https://www.slideshare.net/slideshow/embed_code/40242420Principles of Mobile Site Design by Google from Burak Bakay

Die Anpassung des Layouts nicht vergessen!

Unterschiedliche Bildschirmformate der Endgeräte

Auch was das Layout der Seiten und die Navigation angeht ticken mobile Endgeräte anders: Während die Bildschirme moderner Desktop-PCs breiter als hoch sind, weist das Display eines Smartphones ein Hochformat auf. Daher eignet sich das heute verbreitete dreispaltige Layout auf keinen Fall für solche Endgeräte.

Aktuellste Standards der Technik

Was interaktive Seiten angeht, sollte man sich an die uralte Regel für technische Systeme halten, die besagt, dass die aufwändige Technologie immer in der Zentrale installiert sein sollte, damit die Benutzer des Systems mit möglichst einfachen Geräten auskommen. Das bedeutet, dass lieber PHP oder CGI anstelle von Java Skript oder Java verwendet werden sollte, wenn Skripte benötigt werden.

10 Tipps für eine Smartphone-taugliche Website! [Infografik]

Fazit: Die Mobile Website ist kein Trend

Das Gestalten von Internetseiten für mobile Endgeräte erlegt dem Netzschaffenden in der Tat eine ganze Reihe ärgerlicher Beschränkungen auf. Dennoch kommt man als Webdesigner kaum daran vorbei, Internetauftritte immer auch daraufhin zu untersuchen, ob sie auch mobile Surfer erreichen, da das Surfen mit mobilen Endgeräten mittlerweile sehr bedeutend ist. Eine Version, die sowohl auf dem Desktop-PC als auch auf einem Smartphone richtig angezeigt wird, wird daher immer mehr oder weniger eine Minimalversion sein.