Ein responsive WordPress-Theme ist eine tolle Option, um den eigenen Blog für die Ansicht auf mobilen Geräten vor­zu­be­reiten. Doch auch nach der Auswahl eines geeig­neten Themes, kann man noch jede Menge Optimierungen für die Ansicht des Blogs auf mobilen Geräten vor­nehmen. Ich habe ein paar prak­ti­sche Tipps zusammen gestellt.

1. Konzentration auf die wich­tigsten Menüpunkte

Um die eigene Webseite für den Leser über­schau­barer zu machen ist es hilf­reich, nicht zu viele Navigationspunkte ein­zu­richten. Durch die Konzentration auf die wesent­li­chen Punkte kann sich der Leser schneller auf der Webseite zurecht finden, was gerade auf mobilen Geräten ein wich­tiger Aspekt ist.

Denn von einem Tablet oder Smartphone aus, surft man oft nur mit halber Aufmerksamkeit (z.B. in der U-Bahn auf dem Weg nach Hause, in der Mittagspause, abends auf der Couch wäh­rend der Fernseher läuft, im Fitness-Studio auf dem Laufbahn usw.). Aus diesem Grund ist eine klare, über­sicht­liche Navigation sinnvoll.

2. Nicht zu viele Sub-Menüs anlegen

Die Option meh­rere Unter-Menüs anzu­legen, ist bei WordPress sehr ver­breitet und oft­mals sind diese Untermenüs für die Navigation einer Webseite auch nötig. Falls diese Untermenüs nicht wirk­lich benö­tigt werden, soll­test du über­legen auf sie zu ver­zichten. So kann die Navigation noch über­sicht­li­cher werden. Alternativ kannst du eine Such-Funktion, Kategorien oder Schlagwörter anbieten, um eine intui­ti­vere Navigation auf der Webseite zu ermöglichen.

Allgemein sollte man darauf achten, dass der wich­tigste Inhalt der Webseite auf mobilen Geräten sofort sichtbar ist. Denn die Besucher möchten sich nicht gerne durch eine ewig lange Navigation scrollen, bevor sie z.B. die neusten Blogartikel sehen können. Das Motto heißt also: »Zuerst der Inhalt, dann die Navigation« (con­tent first - navi­ga­tion second).

3. Die Anzahl der Artikel auf der Blog-Startseite reduzieren

Unter Einstellungen / Lesen kann man in WordPress die Anzahl der Blog-Artikel auf der Startseite bestimmen. Damit die Startseite auf einem Smartphone nicht zu lang wird und man die Seite ewig her­un­ters­collen müsste, sollte man die Gesamtanzahl der Artikel etwas reduzieren.

4. Nur rele­vante Widgets anzeigen

Widgets sind eine tolle WordPress-Funktion und man kann die unter­schied­lichsten Inhalte anzeigen. Doch um den Widgetbereich auf den klei­neren Smartphone- und Tablet-Bildschirmen nicht zu lang werden zu lassen, sollte man sich auf die für den Blog wirk­lich wich­tigen Widgets beschränken.

Eine Möglichkeit, um für die Anzeige von Kategorien und Archiv im Widget-Bereich Platz zu sparen, ist die Dropdown-Option der beiden Standard-Widgets. Auf mobilen Geräten werden die Dropdowns in prak­ti­schen Auswahl-Menüs angezeigt.

5. Nicht zu lange Artikel-Introtexte

Wenn du den more-tag in WordPress ver­wen­dest, um deine Artikel-Introtexte zu kürzen, soll­test du darauf achten, dass du die Introtexte nicht zu lang anlegst. Kürzere Introtexte sind auf mobilen Geräten gene­rell sinn­voller. Um den Textfluß auf­zu­lo­ckern, kannst du dann ab und zu Bilder oder Vorschau-Bilder in den Introtexten deiner Artikel einbinden.

6. Bilder in mög­lichst kleiner Auflösung

Weiter soll­test du darauf achten, Artikel-Bilder in mög­lichst kleiner Dateigröße abzu­spei­chern. Die Dateigröße kannst du bei jpgs z.B. über die Auflösung regu­lieren. Eine mitt­lere Auflösung reicht in vielen Fällen völlig aus.

7. Apadative Images nutzen

Außerdem kannst du die Adaptive Images-Lösung nutzen, um alle Bilder deines Blogs auto­ma­tisch in ver­schie­denen Größen abzu­spei­chern. Auf mobilen Geräten kann dann mit Hilfe von »Adaptive Images« auf die klei­neren Bildgrößen zuge­griffen werden. Eine Anleitung für die Integration von »Adaptive Images« fin­dest du im Artikel »Mit Adaptive Images Bilder für responsive Webdesigns opti­mieren«.

8. Eine Such-Funktion anbieten

Eine Such-Funktion auf einem Blog zu inte­grieren, ist natür­lich nicht nur auf mobilen Geräten wichtig. Aber gerade hier kann der gesamte Inhalt einer Webseite nicht auf einer großen Fläche über­sicht­lich ange­zeigt werden. Daher ist es beson­ders hilf­reich, ein gut zugäng­liche Suche anzu­bieten. Auf vielen mobilen Webseiten und Apps wird die Suche sogar direkt im Headerbereich ange­boten (oft­mals sogar anstelle einer Navigation).

Fazit

Generell heißt das Schlüsselwort für die mobile Optimierung also redu­zieren. Denn durch den begrenzten Platz auf den kleinen Smartphone- und Tablet-Displays wird es beson­ders wichtig, sich auf die wich­tigsten Elemente und Inhalte einer Webseite zu konzentrieren.

Across all your mobile lay­outs, aim for the minimum amount necessary to help people meet their needs wether they are loo­king up or fin­ding infor­ma­tion, explo­ring and playing, che­cking in on important updates, or editing and crea­ting con­tent. Not only will reduc­tion make put­ting mobile lay­outs toge­ther easier, it will also give people focused ways to get things done.
Luke Wroblewski in »Mobile First«

Von dieser Philosophie des Reduzierens kann dann aber auch glei­cher­maßen die Desktop-Ansicht deines Blogs pro­fi­tieren. Denn nur weil dort mehr Platz zur Verfügung steht, muss dieser Platz ja nicht unbe­dingt bis auf den letzten Winkel mit Information aus­ge­füllt werden. Die Konzentration auf die wesent­li­chen Inhalte eines Blogs ist meiner Ansicht nach für alle Bildschirm-Formate und Geräte eine Bereicherung.

Fallen dir wei­tere Möglichkeiten ein, um WordPress-Webseiten und -Blogs für die Ansicht auf mobilen Geräten zu opti­mieren. Über deine Tipps und dein Feedback freue ich mich sehr!