Einleitung

Das Thema Mobilität gewinnt zunehmend an Bedeutung. Im selben Maße in dem die Verbreitung von Smartphones und Tablet PCs wächst, steigt auch der Wunsch nach dem mobilen Zugriff auf Webseiten. Aufgrund der Vielzahl an mobilen Endgeräten – beginnend bei Apple iPhone, über Android in verschiedenen Versionen bis hin zu Windows Phone, BlackBerry oder Symbian kann diese Mobilisierung einer Website schnell ein kompliziertes Unterfangen werden.

Insbesondere vor dem Hintergrund verschiedener technischer Standards erweist sich das Thema für den durchschnittlichen Betreiber einer Website als anspruchsvoll. Abhilfe schaffen hier sogenannte Plugins, also Erweiterungen für das Content Management System (CMS). In diesem Artikel wird ein solches Plugin für die beliebte WordPress Plattform vorgestellt: WPtouch Pro. Es ermöglicht die schnelle Mobilisierung eines WordPress Blogs.

Installation und Aktivierung

WPtouch wird in vier Varianten angeboten – kostenlos, Einzel-Lizenz (für 1 Website), 5er Lizenz (für 5 Websites) und Entwickler-Lizenz (unbegrenzte Anzahl Websites). Hier finden Sie einen Vergleich der unterschiedlichen WPtouch Editionen. Schon wenn Sie planen, mehr als eine Website zu mobilisieren, rechnet sich der Kauf der 5er Lizenz. Die kostenlose Edition bietet nur einen reduzierten Leistungsumfang und empfiehlt sich daher lediglich, um einen ersten Eindruck von WPtouch zu erhalten. Planen Sie Ihre Website jedoch professionell auf mobilen Endgeräten zu präsentieren, ist der Kauf der WPtouch Pro Edition sinnvoll.

Die Installation erfolgt über die bekannten Plugin-Mechanismen von WordPress. WPtouch erscheint nach erfolgreicher Installation im WordPress-Menü mit einem separaten Eintrag. In der sich anschließenden Aktivierung wird der Lizenzschlüssel eingegeben, welcher zugleich die Anzahl der zu mobilisierenden WordPress Blogs enthält (also 1 oder 5 bzw. unlimitiert). Danach kann es losgehen…

Allgemeine WPtouch-Einstellungen

So konfigurieren Sie WPtouch

Unter dem Menüpunkt “Allgemeines” können Sie die grundlegenden WPtouch-Einstellungen vornehmen: Seitentitel, die Landing-Page für mobile Aufrufe (die Startseite für mobile Geräte kann von Ihrer normalen Homepage abweichen), die Anzeige des Umschalt-Links zwischen mobiler und regulärer Ansicht, Angaben für Begrüßung, Footer oder 404-Seiten, Bild 1. Unter “Werbung & Statistik” können Sie Werbedienste wie Adsense oder Admob einbinden bzw. Code von google Analytics in Ihre mobile Website integrieren, Bild 2. Die “Push-Benachrichtigungen” unterstützen die Anwendung Prowl, um auf Apple-Geräten Echtzeit-Informationen zu erhalten, Bild 3.

Einen sehr nützlichen Bereich von WPtouch Pro finden Sie unter dem Eintrag “Kompatiblität”, Bild 4. Hier lassen sich beispielsweise bestimmte Shortcodes oder Plugins aus Ihrem regulären Theme deaktivieren, welche nicht mit der mobilen Ansicht kompatibel sind. Zusätzlich können Sie komplette Unterseiten von der Mobilisierung ausschließen. Diese werden dann in der regulären Ansicht auf dem mobilen Gerät angezeigt. Auf fotobeam wird diese Funktion verwendet, um Foto-Galerien unverändert wiederzugeben, da diese in einem speziellen Layout angelegt sind. Weitere Optionen in “Tools und Fehlerbehebung” und “Backup/Import” vereinfachen die Suche nach Fehlern und gestatten die Sicherung und Wiederherstellung Ihrer WPtouch-Einstellungen.

Bild 1	Bild 2	Bild 3	Bild 4

Theme-Einstellungen

Prinzipiell erfolgt die Mobilisierung Ihrer Website mit WPtouch Pro über ein spezielles Theme, welches für mobile Endgeräte optimiert ist. Es kommt also keine separate Subdomain, wie z.B. m.meineWebsite.de zum Einsatz, was die Nutzung für den durchschnittlichen Anwender vereinfacht. Standardmäßig sind zwei Themes im Lieferumfang von WPtouch, wobei das Classic-Theme die meisten Optionen bietet, Bild 5. Dieses kommt auch bei der mobilen Version von fotobeam.de zum Einsatz. Probieren Sie es doch einfach mal aus.

In den allgemeinen Theme-Einstellungen können Sie zum Beispiel das Zoomen mit Hilfe von Fingergesten auf Ihrer Website erlauben. Oder Sie schließen bestimmte Kategorien und Tags von der Mobilisierung aus, Bild 6. Ein weiterer interessanter Aspekt ist die Unterstützung des Web-App-Modus für Apple-Geräte. Aktivieren Sie diesen Modus, kann ein Anwender Ihre mobile Website als App auf einem iPhone, iPad oder iPod touch ablegen, Bild 7.

Im folgenden Bereich lassen sich grundlegende Einstellungen für das Aussehen des Menüs, der Beiträge und Seiten treffen, Bild 8. So kann beispielsweise die Anzeige des Autor-Namens, der Kategorien, der Tags oder des Datums festgelegt werden. Interessant ist auch die Möglichkeit, einen “Teilen”-Button zu verwenden, mit dem Besucher Ihre Artikel über Facebook, Twitter & Co. verbreiten können.

Bild 5	Bild 6	Bild 7	Bild 8

Der Eintrag “Stil/Layout” eröffnet schließlich die gezielte Angabe eines speziellen Logos für Ihre mobilen Seiten sowie der Definition von Schriftarten, Farben, Hintergründen und Thumbnail-Symbolen, Bild 9. Das Logo kann auch in einer verdoppelten Retina-Auflösung hinterlegt werden, damit Anwender mit hochauflösenden Smartphone-Displays in den Genuss einer verbesserten Darstellung kommen. Außerdem können Sie in der Artikelübersicht sowohl standardisierte Kalender-Bilder mit dem Erscheinungsdatum eines Artikels einblenden lassen oder aber die Verwendung individueller Artikel-Vorschaubilder aktivieren.

Smartphone und Tablet unter einem Dach

Doch WPtouch unterstützt nicht nur Smartphones. Unter “iPad Einstellungen” aktivieren Sie schnell und einfach die Unterstützung für das beliebte Apple iPad, Bild 10. Hier legen Sie spezielle Parameter für das Erscheinungsbild Ihrer mobilen Website auf dem iPad fest, darunter z.B. Logo, Farben, Hintergrund und Buttons. Damit ist WPtouch eine der wenigen Lösungen, die schon heute Tablet PCs unterstützt. Man darf gespannt sein, ob zukünftig Android & Co. Einzug in das Plugin halten.

“Handy-Benutzerprogramme” definiert die sogenannten User-Agents, Bild 11. Diese User-Agents werden von mobilen Geräten verwendet, um sich zu identifizieren und die Art des Smartphones, Tablets bzw. des verwendeten Browsers zu übermitteln. Damit ist sichergestellt, dass die mobile Website auch korrekt auf dem jeweiligen Gerät erscheint. Standardmäßig unterstützt WPtouch schon eine Vielzahl an Geräten und User Agents, die Sie zusätzlich individuell erweitern können.

Mit Aktivierung von “Extensions” binden Sie Twitter und Flickr in Ihre mobile Website ein, Bild 12. Auf diese Weise können die letzten 10 Twitter-Einträge im Menü und die 20 letzten Flickr-Bilder auf einer eigenen Seite eingeblendet werden.

Bild 9	Bild 10	Bild 11	Bild 12

Menüs und Symbole

Ein wichtiger Bereich in WPtouch sind die Vorgaben für das Erscheinungsbild von Menüs und Symbolen auf mobilen Geräten. Entscheiden Sie beispielsweise, ob eine Kontaktmöglichkeit via E-Mail bestehen soll oder Symbole in den Menüs erlaubt sind, Bild 13. Außerdem können Sie hier die Anzahl der Hierarchie-Ebenen begrenzen, indem Sie doppelte Vorfahren von Child-Einträgen deaktivieren.

Komfortabel ist auch das Handling von Symbolen für Menüs, Seiten bzw. Lesezeichen, Bild 14. Sie haben die Möglichkeit aus 10 unterschiedlichen Symbol-Klassen zu wählen, wovon 9 Sets bereits vorinstalliert sind . Per Drag & Drop weisen Sie dann den unterschiedlichen Menü-Einträgen das jeweilige Symbol zu – einfacher geht’s nicht. Ebenso einfach ist übrigens auch das Verwalten der Symbol-Sets, Bild 15. Das Hinzufügen eigener Symbole und Löschen vorhandener Sets wird damit zum Kinderspiel.

Zu guter Letzt können Sie speziell für Ihre mobile Website eigene Einträge im Hauptmenü anlegen. Dabei sind bis zu drei benutzerdefinierte Menüpunkte möglich, die hinsichtlich Titel, URL und Position spezifiziert werden, Bild 16.

Bild 13	Bild 14	Bild 15	Bild 16

 Im Einsatz

Die Mobilisierung einer durchschnittlichen WordPress Website nahm im Test ca. 1 Arbeitstag in Anspruch. Dies umfasste sowohl die Installation als auch Konfiguration. Aufgrund der zahlreichen Einstellungen kann die Zeit zur Anpassung an die individuellen Vorstellungen variieren. Planen Sie ausreichend Vorlauf zum Testen ein. Um größtmögliche Kompatibilität sicherzustellen, wurde die mobile Website auf Apple iPhone, Windows Phone 7 und Samsung Galaxy Tablet mit Android getestet.

Das finale Ergebnis wusste zu überzeugen, siehe Vorher-Nachher-Vergleich mit WPtouch in der rechten Abbildung. Wo die reguläre Website sich eher unübersichtlich und überladen auf dem mobilen Gerät präsentiert, überzeugt die mobile Variante durch eine klare Struktur und einfache Bedienung. Sinnvolle Features, wie die Anzeige von Kommentaren durch kleine rote Symbole in der Blog-Übersicht, runden das Erscheinungsbild ab. Auch die Ladezeiten haben sich verkürzt. Ein Punkt, der bei geringer Bandbreite mobiler Verbindungen nicht zu vernachlässigen ist.

Sehr nützlich ist zudem die Funktion bestimmte Shortcodes zu entfernen. So nutzt das Theme der regulären fotobeam-Website spezifische Layout-Codes, die nicht zum Standard HTML-Code gehören. Diese werden erfahrungsgemäß nicht korrekt auf der mobilen Website umgesetzt. Indem man diese zur Ausschlussliste hinzufügt, werden diese Code-Segmente in der mobilen Variante komplett ignoriert und führen nicht zu Darstellungsproblemen.

Praktisch ist auch die Möglichkeit WordPress-Plugins in der mobilen Ansicht zu deaktivieren. Hier kann es ebenfalls zu Inkompatibilitäten kommen, die auf diese Weise verhindert werden. Ein Tipp: Sollten die Vorschau-Bilder der Artikel verzerrt wiedergegeben werden, verwenden Sie am besten das Plugin Regenerate Thumbnails. Es erzeugt sämtlich Thumbnail-Ansichten Ihrer WordPress-Bilder neu und legt dabei auch das benötigte Format für WPtouch an.

Fazit

Der Testkandidat hat überzeugt

WPtouch Pro bietet den bisher größten Funktionsumfang an mobilen Plugins für WordPress. Während andere Anbieter nur rudimentäre Funktionen implementiert haben, überzeugt WPtouch mit zahlreichen Konfigurationsmöglichkeiten, übersichtlicher Bedienung und der Unterstützung unterschiedlicher Mobil-Geräte. Wünschenswert wäre die Integration eines eigenen Dashboards, um die Zugriffe mobiler Anwender direkt in WPtouch auswerten zu können.

Besonders positiv hervorzuheben ist der Support durch den Hersteller. Im Test wurden verschiedene Anfragen über das Forum schnell, zuverlässig und individuell beantwortet. Damit verdient sich WPtouch eine ganz klare Empfehlung, wenn es darum geht, Ihre Webseiten fit für das mobile Internet zu machen.

Link zum Anbieter

BraveNewCode Inc.: http://www.bravenewcode.com/store/plugins/wptouch-pro/