Im Test: Mobile Webseiten mit WPtouch Pro

  • so wird ein WordPress Blog mobil

Mobility im Fokus

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.

Update April 2012

Foto-TippWPtouch Pro unterstützt jetzt auch Apple iOS Geräte mit Retina Auflösung.

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 stelle ich euch ein solches Plugin für die beliebte WordPress Plattform vor: WPtouch Pro in der Version 2. Es ermöglicht die schnelle Mobilisierung eures WordPress Blogs, damit Besucher eurer Website diese zukünftig auch auf Smartphones und Tablets genießen können.

Installation und Aktivierung

Update Mai 2013

Foto-TippWPtouch ist jetzt in Version 3 verfügbar. Hinzugekommen sind ein zweites Menü, 3 neue mobile Themes, Unterstützung für soziale Netzwerke  und mehr Flexibilität bei der Gestaltung. Der Kaufpreis enthält 1 Jahr Updates.

WPtouch wird in vier Varianten angeboten – kostenlos, Einzel-Lizenz (für 1 Website), 3er Lizenz (für 3 Websites) und Entwickler-Lizenz (25 Websites). Außerdem sind noch Enterprise Lizenzen für eine größere Anzahl an Domainen verfügbar. Weitere Informationen finden sich in der Preisübersicht des Herstellers. Hier findet ihr einen Vergleich der unterschiedlichen WPtouch Editionen. Schon wenn ihr plant, mehr als eine Website zu mobilisieren, rechnet sich der Kauf der 3er Lizenz. Die kostenlose Edition bietet nur einen reduzierten Leistungsumfang und empfiehlt sich daher lediglich, um einen ersten Eindruck von WPtouch zu erhalten. Plant ihr eure Webseite 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 Pro 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 beispielsweise 1 oder 3). Danach kann es losgehen…

Allgemeine WPtouch-Einstellungen

So konfiguriert ihr WPtouchUnter dem Menüpunkt “Allgemeines” könnt ihr die grundlegenden WPtouch-Einstellungen vornehmen: Seitentitel, die Landing-Page für mobile Aufrufe (die Startseite für mobile Geräte kann von eurer 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önnt ihr Werbedienste wie Adsense oder Admob einbinden bzw. Code von google Analytics in eure 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 findet ihr unter dem Eintrag “Kompatibilitä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önnt ihr komplette Unterseiten von der Mobilisierung ausschließen. Diese werden dann in der regulären Ansicht auf dem mobilen Gerät angezeigt. Diese Funktion kann zum Beispiel verwendet werden, um Foto-Galerien unverändert wiederzugeben, da diese in einem speziellen Layout angelegt sein können. Weitere Optionen in “Tools und Fehlerbehebung” und “Backup/Import” vereinfachen die Suche nach Fehlern und gestatten die Sicherung und Wiederherstellung Ihrer WPtouch-Einstellungen.

Generelle Einstellungen in WPtouch

Bild 1

Werbung definieren in WPtouch

Bild 2

Push-Dienste in WPtouch

Bild 3

Kompatiblität von Plugins mit WPtouch

Bild 4

Theme-Einstellungen

Prinzipiell erfolgt die Mobilisierung eurer Webseite 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 digitalfotografieren.com zum Einsatz – einer Website, die mit Hilfe von WPtouch mobilisiert wurde.

Mobile Seite testen

Foto-TippMit dem Firefox-Plugin User Agent Switcher könnt ihr die mobile Ansicht eurer Website bereits auf dem PC testen und damit eine Vorschau erhalten.

In den allgemeinen Theme-Einstellungen könnt ihr zum Beispiel das Zoomen mit Hilfe von Fingergesten auf eurer Website erlauben. Oder ihr schließt 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. Aktiviert ihr diesen Modus, kann ein Anwender eure 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 eure Artikel über Facebook, Twitter & Co. verbreiten können.

Mobiles Theme in WPtouch

Bild 5

allgemeine Einstellungen des mobilen Themes

Bild 6

iPhone Web-App Modus

Bild 7

Seiten-Parameter in WPtouch konfigurieren

Bild 8

Der Eintrag “Stil/Layout” eröffnet schließlich die gezielte Angabe eines speziellen Logos für eure 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önnt ihr 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 DachDoch WPtouch unterstützt nicht nur Smartphones. Unter “iPad Einstellungen” aktiviert ihr schnell und einfach die Unterstützung für das beliebte Apple iPad, Bild 10. Hier legt ihr spezielle Parameter für das Erscheinungsbild eurer mobilen Webseite 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.

“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 ihr zusätzlich individuell erweitern könnt.

Mit Aktivierung von “Extensions” bindet ihr Twitter und Flickr in eure mobile Webseite 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.

Stile und Farben in WPtouch definieren

Bild 9

Mobiles Theme auf iPad einstellen

Bild 10

Unterstützte Smartphones auf WPtouch

Bild 11

Social Media für das mobile Theme

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. Hier entscheidet ihr beispielsweise, ob eine Kontaktmöglichkeit via E-Mail bestehen soll oder Symbole in den Menüs erlaubt sind, Bild 13. Außerdem könnt ihr die Anzahl der Hierarchie-Ebenen begrenzen, indem doppelte Vorfahren von Child-Einträgen deaktiviert werden.

Komfortabel ist auch das Handling von Symbolen für Menüs, Seiten bzw. Lesezeichen, Bild 14. Ihr könnt aus 10 unterschiedlichen Symbol-Klassen wählen, wovon 9 Sets bereits vorinstalliert sind. Per Drag & Drop weist ihr 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önnt ihr speziell für euren mobilen Blog 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.

Menüs in WPtouch definieren

Bild 13

Auswahl von Icons in WPtouch

Bild 14

zusätzliche Icons im mobilen Theme

Bild 15

Benutzerdefinierte Menüs im mobilen Theme

Bild 16

Im Einsatz

Die Mobilisierung einer durchschnittlichen WordPress Website nahm in meinem 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. Plant ausreichend Vorlauf zum Testen ein. Um größtmögliche Kompatibilität sicherzustellen, wurde die mobile Website auf Apple iPhone, Windows Phone und Samsung Galaxy Tablet mit Android getestet. Das finale Ergebnis wusste zu überzeugen, siehe Vorher-Nachher-Vergleich mit WPtouch in der folgenden Abbildung.

Vorher/Nachher-Vergleich am Beispiel der Website von digitalfotografieren.com

Davor
Danach

Wo sich die reguläre Website 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.

Google Adsense, Admob & Co

Foto-TippMit eurer Adsense ID könnt ihr auch mobile Werbe-Anzeigen integrieren und dabei Parameter, wie Position der Anzeige, anpassen.

Sehr nützlich ist zudem die Funktion bestimmte Shortcodes zu entfernen. So nutzt das Theme der regulären digitalfotografieren-Website spezifische Layout-Codes, die nicht zum Standard HTML-Code gehören. Diese werden erfahrungsgemäß nicht korrekt auf der mobilen Website umgesetzt.

Indem ihr diese zur Ausschlussliste hinzufügt, werden diese Code-Segmente in der mobilen Variante komplett ignoriert und führen nicht zu Darstellungsproblemen. So lassen sich ganz einfach alternative Darstellungen für die Desktop Ansicht und die mobile Ansicht definieren.

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 Vorschau-Bilder der Artikel verzerrt wiedergegeben werden, verwendet am besten das Plugin Regenerate Thumbnails. Es erzeugt sämtlich Thumbnail-Ansichten eurer WordPress-Bilder neu und legt dabei auch das benötigte Format für WPtouch an.

Fazit

Der Testkandidat hat überzeugtWPtouch 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 Pro 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 Pro auswerten zu können.

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

Pro

  • Sehr gutes Preis-Leistungsverhältnis
  • Zahlreiche Optionen zur Individualisierung
  • Unterstützt viele mobile Geräte
  • Schneller Support
  • Regelmäßige Updates

Contra

  • Keine Auswertung mobiler Zugriffe
  • Rudimentäre Dokumentation

Link zum Anbieter

BraveNewCode Inc.: www.bravenewcode.com/wptouch

Wie macht ihr eure WordPress Webseite mobil? Mittels Plugin oder Responsive Design? Ich freue mich auf Kommentare oder Fragen zum Test.

GD Star Rating
loading...
Im Test: Mobile Webseiten mit WPtouch Pro, 4.6 von 5 basierend auf 5 Bewertungen
10 Kommentare
  1. Hallo,
    ich verwende auch WP Touch Pro und habe mit einem Plugin Probleme. Habe versucht Get Sociale zu deaktivieren, weil es in der mobilen Ansicht sonst über dem Text liegt. Doch egal was ich mache, wird es immer wieder angezeigt. Soll heißen das WP touch es nicht abschalten kann.

    Hast Du einen Tipp für mich?

    Jochen

  2. Martin

    Danke für den informativen Artikel! Kann man diese Datumsbox auch ganz ausblenden? Also auch ohne ein Vorschaubild oder Icon stattdessen anzuzeigen? Möchte, dass die ganz verschwindet, hab aber leider noch keine Lösung gefunden.

    • fotobeam

      Hallo Martin,

      in WPtoch Pro kannst Du sowohl Datum als auch Vorschaubilder in der Blog-Ansicht ausblenden:

      Datum: “Aktives Theme” –> “Menü, Beiträge, Seiten” –> “Blog-Auflistungen” –> “Datum anzeigen” abwählen
      Bilder: “Aktives Theme” –> “Stil/Layout” –> “Kalender/Thumbnail-Symbole = Keine”

      Grüße,
      fotobeam

  3. Vielen Dank für den gutlesbaren und ausführlichen Bericht. Werde mal unsere Datenbank sichern und das Plugin ausprobieren. Der Hinweis kam gerade zur richtigen Zeit, da wir auch unseren Shop gerade “mobilisieren”.
    Gruß

    Seb

  4. Guten Tag,
    ich habe soeben diese hochinteressanten Artikel gelesen!
    Meine Frage nun, ob ich die Software zu einem Upload im Apple Store oder googlePlay Store anbieten kann?
    Grüsse
    Ron

7 Pings & Trackbacks
  1. [...] Kontaktformular. Und wie Ihre Website für Smartphones und Tablets optimiert wird, erfahren Sie hier in einem ausführlichen Test des WordPress Plugins WPtouch [...]

  2. [...] Web bin ich auf der Seite von Fotobeam.de auf den Artikel “Test von WPtouch” aufmerksam geworden. Der Artikel ist sehr empfehlenswert, es wird alles ganz genau erklärt, [...]

  3. [...] Blogs auf kleinen Smartphone-Displays “WPtouch” (einen schönen Test gibt es z.B. hier) in WordPress eingebunden. Dieses bringt eine eigene Möglichkeit mit, um einen Artikel bei, z.B., [...]

  4. [...] respektive Konfiguration noch mehr wissen möchte, sollte sich den unbedingt den Artikel über Wptouch Pro bei fotobeam.de [...]

  5. [...] dem Plugin WPtouch Pro wird Ihre Website im Handumdrehen mobil. Im ausführlichen Test lesen Sie, wie das funktioniert. WPtouch Pro setzt auf die Top 5 der WordPress Plugins das [...]

  6. [...] Im Folgenden werden die Top 10 kostenloser WordPress Plugins vorgestellt, die Ihnen kreative Möglichkeiten eröffnen und grundlegende Funktionen vereinfachen – beginnend bei der Suchmaschinenoptimierung (SEO), über die Integration von Twitter bis hin zum eigenen Kontaktformular. Und wie Ihre Website für Smartphones und Tablets optimiert wird, erfahren Sie in einem ausführlichen Test des WordPress Plugins WPtouch Pro. [...]

  7. […]     WPTouch Pro vorgestellt von Andreas Richter auf fotobeam.de […]

Hinterlasse eine Antwort