fotolia©Valerie Potapova

Innerhalb weniger Jahre haben sich die Anforderungen an eine gute Webseite gravierend verändert. Die Nutzung mobiler Geräte wie Smartphones oder Tablets nimmt rasant zu, jedoch lassen sich „herkömliche“ Seiten damit nur sehr schwer lesen. Entsprechend hat Google reagiert und stuft Websites, die nicht für  Mobilgeräte optimiert sind, deutlich herab, wodurch sie natürlich entsprechend schlechter gefunden werden.

Ob Ihre Webseite mit einem Mobilgerät gut nutzbar ist, können Sie sie hier testen:

Um die Ansicht an einem mobilen Endgerät am PC oder Laptop zu simulieren einfach Strg + Shift + I drücken und dann (links im Menü der Entwicklerkonsole) das Smartphone-Symbol neben der Lupe anklicken.
Nun lassen sich verschiedene Endgeräte und Ladegeschwindigkeiten auswählen.

Wie kommen die unterschiedlichen Anforderungen zustande?

fotolia©Barabas Attila

1. Mobilgeräte werden mithilfe eines Touchscreens bedient. Eng nebeneinander liegende Links lassen sich kaum zuverlässig anklicken und vor allem Hoover-Menüs (die beim Überfahren mit der Maus angezeigt werden) können mit einem Touchscreen überhaupt nicht genutzt werden. Verschachtelte Menüs sind am Smartphone häufig nervenaufreibend.
Besser: Moderne Webseiten hängen Inhalte, die früher als einzelne Seiten dargestellt wurden, häufig untereinander. Mit ein paar „Fingerwischern“ ist die gewünschte Stelle rasch erreicht. Damit der Nutzer einer Maus keinen Krampf in der Hand bekommt, kann zusätzlich ein „normales Menü“ eingefügt werden, mit dessen Hilfe zu der entsprechenden Stelle gesprungen wird.
Die Links sollten groß genug sein (z.B. als Bild oder Button), genügend Abstand zueinander haben und die Zahl auf das notwendige Maß reduziert werden. Menüs sollten besser am oberen Rand, als an der Seite platziert werden, damit die Webseite nicht zu breit wird.

2. Die Bildschirmgrößen sind sehr unterschiedlich. 3-spaltige Seiten und feste, absolute Größen führen dazu, dass die Seite am Handy kaum lesbar ist, weil sie zu breit und die Schrift meist zu klein ist.  Andererseits erscheint eine für das Smartphone passende Schrift am Standmonitor viel zu groß.

Das Zauberwort hier heißt  „Responsive Design“. Dabei passt sich die Webseite flexibel den unterschiedlichen Geräten an, mit dem Ziel sie für alle Gerätevarianten gut nutzbar zu machen und sie gleichzeitig überall gut aussehen zu lassen.

fotolia©Artur Marciniec

Wichtig: Auch mit Responsive Design absolute Größen bei Spalten- und Tabellen vermeiden, besser Prozentangaben. Nur bei eingebetteten Bildern sollten die Größen angegeben werden, damit die Seite schnell geladen werden kann. 1-spaltiges Layout verwenden.

3. Die Datenverbindung ist häufig noch langsamer und evtl teuer.
Deshalb auf alle nicht notwendigen Spielereien wie Musik, Animation etc verzichten und komprimierte Bilder in nicht mehr als der notwendigen Größe verwenden.

4. Auf Flash oder Java verzichten, da viele mobile Endgeräte diese nicht darstellen können.

5. Neben diesen besonders wichtigen Punkten gibt es noch eine Vielzahl von Details, die darüber entscheiden, ob eine Webseite benutzerfreundlich gestaltet ist. Trotzdem sollte man sich auch als Laie nicht abschrecken lassen, denn mit den richtigen, keineswegs teuren Hilfsmitteln kann jeder eine schöne und technisch hochwertige Seite erstellen. Am besten nutzt man eine ausgereifte Software wie z.B. WordPress. Hält man sich an die Regeln, insbesondere den oben genannten, wird die Seite fast automatisch für mobile Endgeräte optimiert.