Immer mehr Menschen nutzen heutzutage Smartphones und Tablets, um mobil im Internet zu surfen. Doch richtig Spaß macht das nur, wenn die angesurften Webseiten auch für die Ansicht auf mobilen Geräten optimiert sind. Nicht für mobile Ansicht optimierte Webseiten nehmen einem User schnell den Spaß am Besuch, Besucherrückgang kann die Folge für den Betreiber sein. Machen Sie daher Ihre Webseite fit für das mobile Zeitalter und bieten Sie Ihren Besuchern mit einer für mobile Geräte optimierten Webseite einen echten Mehrwert. Wir zeigen Ihnen heute, welche Möglichkeiten es hierfür gibt, wenn Sie ein selbstgehostetes WordPress als Basis verwenden. Mobiles Webdesign kann so einfach sein…
Testen Sie, ob Ihre Webseite bereits für die Ansicht auf mobilen Geräten optimiert ist
Für einen kurzen, aber aussagekräftigen Überblick, ob Ihre Webseite bereits für die Nutzung auf mobilen Geräten optimiert ist, bieten sich vor allem zwei Tools an. Sehr gut ist die Erweiterung “Webdeveloper” für moderne Browser wie z.B. Google Chrome oder Mozilla Firefox. Aber auch das hervorragende Online-Tool “Am I Responsive” bietet sich für eine kurze Überprüfung an.
Absolut aussagekräftig ist jedoch nur ein kurzer Test auf den jeweiligen mobilen Geräten selbst. Surfen Sie Ihre Webseite an und prüfen Sie, wie die Webseite angezeigt wird und wie benutzerfreundlich sie ist. Apple-User können sich auch die Apple Entwickler-Software “XCode” installieren, die einen iOS- und Android-Simulator beinhaltet. XCode bekommt man auf der Apple-Developer-Webseite.
Worauf beim Test zu achten ist
- Der Inhalt sollte vollständig auf dem Display (oder dem Test-Tool) für die betreffende Auflösung zu sehen sein.
- Es dürfen keine horizontalen Scrollbalken entstehen.
- Es muss ein mobil-spezifisches, leicht (auch auf kleinen Smartphones) zu bedienendes Menü vorhanden sein.
- Bilder müssen vollständig zu sehen und dürfen nicht nur mit horizontalem Scrollen vollständig zu erfassen sein.
Ein Test mit dem Online-Tool “Am I Responsive”
Rufen Sie die Webseite von “Am I Responsive” auf, scrollen Sie minimal nach unten, bis “See your Site Responsive” erscheint und geben Sie Ihre Domain ein.
Drücken Sie nun “GO!” und sehen Sie Ihre Webseite oberhalb in verschiedenen Auflösungen und auf verschiedenen Geräten. Das wirklich Gute an diesem Online-Tool ist übrigens, dass die Webseite in den einzelnen Ansichten scrollbar ist, genau wie in Ihrem Browser. In dieser Ansicht würden Sie auch sofort erkennen, wenn Handlungsbedarf bestehen sollte.
Sieht Ihr Ergebnis so aus, dann besteht kein Handlungsbedarf.
Ein Test mit der Webdeveloper-Erweiterung für Chrome oder Firefox
Installieren Sie die Webdeveloper-Erweiterung in Ihrem Browser und rufen Sie die Webseite auf, die Sie testen möchten. Im Google Chrome klicken Sie nun auf das Webdeveloper-Icon rechts neben der Domainleiste, dann auf den Reiter “Resize”, und dort auf “View Responsive Layouts”.
In Firefox lassen Sie sich die Webdeveloper-Symbolleiste anzeigen, gehen dann auf “Größe ändern” und zuletzt auf “Angepasste Layouts anzeigen”.
Es öffnet sich nun ein neuer Tab und Sie sehen Ihre Webseite in folgenden Auflösungen: mobile portrait (320×480), mobile landscape (480×320), small tablet portrait (600×800), small tablet landscape (800×600), tablet portrait (768×1024) und tablet landscape (1024×768). Selbstverständlich lassen sich die einzelnen Auflösungen scrollen und auch ansonsten benutzen wie auf mobilen Geräten.
Optimierung für mobile Geräte mit responsiven WordPress-Themes
Responsive WordPress-Themes sind nicht ohne Grund der Trend im Webdesign schlechthin. Einmal installiert funktioniert das Theme in jeder Auflösung, wenn es denn gut gemacht ist. Nicht nur auf Desktop-Rechnern und Notebooks, sondern auch auf Smartphones und Tablets wird Ihre Webseite immer optimal und benutzerfreundlich dargestellt. Ein großer Nachteil jedoch ist, dass Bilder stets in großen Auflösungen für die Darstellung auf Desktops und Notebooks vorhanden sein müssen, um demzufolge dann auf den kleinen Auflösungen für Smartphones und Tablets per CSS heruntergerechnet zu werden. Das kann die Darstellung auf mobilen Geräten teils deutlich verlangsamen.
Hier kann jedoch durch die Verwendung eines Plugins zur Generierung von sogenannten Adaptive Images Abhilfe geleistet werden. Ein solches Plugin generiert auf Basis des in WordPress hochgeladenen Bildes die für die Darstellung auf mobilen Geräten benötigten Bildgrößen und liefert diese dann anstelle des (zu) großen Bildes aus. Eines dieser Plugins – Hammy – stelle ich weiter unten in diesem Artikel vor.
Make – ein richtig gutes responsives WordPress Theme
Kostenlose responsive WordPress-Themes gibt es mittlerweile wie Sand am Meer, eine kurze Suche auf WordPress.org liefert extrem viele Ergebnisse. Das Design jedoch lässt häufig zu wünschen übrig, oder aber es gibt nicht genug Anpassungsmöglichkeiten an die eigenen Bedürfnisse. Wer nun kein Geld für ein Premium-Theme ausgeben möchte, sollte einmal das Make Theme von The Theme Foundry testen, welches in einer kostenlosen Version namens Make und einer kostenpflichtigen Premium-Version namens Make Plus erhältlich ist.
Schon die kostenlose Version ist so vielseitig an die eigenen Bedürfnisse anpassbar, wie man es bisher nur von Premium Themes kannte. Es gibt kaum etwas, was man mit diesem Theme nicht realisieren könnte. Zudem sieht es noch sehr gut aus.
Zum Beispiel sind sämtliche Farben anpassbar, egal ob Hintergrund der Webseite oder aber die Seite selbst. Man kann ein Logo hochladen, Schriften anpassen usw. Es gibt bereits in der kostenlosen Version soviel Möglichkeiten zur Anpassung, dass es diesen Artikel sprengen würde, wollte man sie alle aufzählen. Erwähnen will ich hier noch den Drag-und-Drop-Generator für WordPress-Seiten, mit dem man in Minutenschnelle benutzerdefinierte Layouts erstellen kann, wie z.B. Slider-Sektionen, Text in Spaltendarstellung oder aber variable Bildgalerien. Das gibt es sonst nur in teuren Premium-Themes.
Hier ein Eindruck von den vielen das Design betreffenden Einstellungen des kostenlosen Make Themes:
Die Premium-Version Make Plus bietet noch etliche Optionen mehr, unter anderem die optimale Anpassung an die beliebten Plugins WooCommerce und Easy Digital Downloads. Support und Updates für ein Jahr sind im Kaufpreis inkludiert.
Adaptive-Images-Plugin zur Nutzung mit einem responsiven WordPress-Theme
Das WordPress-Plugin Hammy generiert aus den mit WordPress hochgeladenen Bildern nach einem kurzen Setup automatisch die für die Nutzung mit mobilen Geräten nötigen Skalierungen. Sobald eine Webseite mit einem mobilen Gerät angesurft wird, erkennt Hammy automatisch dessen Auflösung und liefert die für dieses Gerät passenden Bilder aus. Große Bilder werden bei Nutzung eines responsiven WordPress-Themes dann nicht mehr mit CSS klein gerechnet, sondern es werden passend kleine Bilder ausgeliefert, was der Ladegeschwindigkeit sehr zugute kommt.
Bevor Sie das Plugin nutzen können, sind ein paar wenige Einstellungen nötig. Vor allem müssen noch die korrekten Bildbreiten für die adaptiven Bilder bestimmt werden. Ein Beispiel könnte so aussehen:
- Entwickler: Noel Tock
- Wird ständig weiter entwickelt: Ja
- Letzte Version vom: 16.02.2014
- Kosten: kostenfrei von WordPress.org
- Lizenz: GNU General Public
- Wechselwirkungen mit anderen Plugins: nicht bekannt
- Entwickler Homepage: Adaptive Content Images within WordPress
Optimierung für mobile Geräte mittels Plugin
Ihr derzeitiges Theme unterstützt keine auf mobile Geräte optimierte Ansicht und auf ein anderes Theme möchten Sie auch nicht wechseln? Auch für dieses Problem gibt es die passende Lösung in Form von Plugins. Diese speziellen Mobile-Theme-Plugins erzeugen ein mehr oder minder hübsches Theme, welches nur die Nutzer Ihrer Webseite zu sehen bekommen, die mit Smartphone oder Tablet Ihre Webseite ansurfen.
Anhand des User-Agent, der von jedem Browser übermittelt wird, entscheidet Ihr WordPress dann, ob das normale, oder aber das mobile Theme an den Besucher ausgeliefert wird. So ist auf jedem Ausgabemedium eine entsprechende Nutzererfahrung möglich.
Das WPtouch-Mobile-Plugin
WPtouch ermöglicht es Ihnen, ein einfaches und elegantes Design für die mobilen Besucher Ihrer Webseite zu erstellen. Der Administrationsbereich erlaubt Ihnen viele Aspekte der Erscheinung des mobilen Themes anzupassen und liefert Ihnen eine schnelle und benutzerfreundliche mobile Version Ihrer Webseite, ohne dass Sie sich mit der Programmierung auseinander setzen müssen. Ihr reguläres Desktop-WordPress-Theme kann weiterhin genutzt werden.
- Entwickler: BraveNewCode Inc.
- Wird ständig weiter entwickelt: Ja
- Letzte Version vom: 18.07.2014
- Kosten: kostenfrei von WordPress.org
- Lizenz: GNU General Public
- Wechselwirkungen mit anderen Plugins: nicht bekannt
- Entwickler Homepage: WPtouch Homepage
Die Premium Version - WPtouch Mobile Suite for WordPress
Auch von diesem Plugin gibt es eine Premium-Version mit zusätzlichen Features, die WPtouch Mobile Suite for WordPress. Diese bietet neben fünf Designs der mobilen Version Ihrer Webseite auch die Möglichkeit, Werbung im mobilen Theme unterzubringen. Des Weiteren verfügt die kostenpflichtige Version des Plugin über einen Cache, so dass Ihre mobile Webseite bis zu 5x schneller als ein responsives WordPress-Theme ausgeliefert werden kann. Neue Themes, Erweiterungen und Updates für WPtouch können aus der WPtouch Cloud ohne weitere Kosten bezogen werden. Die Preise starten ab 49.- $.
- Entwickler: BraveNewCode Inc.
- Wird ständig weiter entwickelt: Ja
- Letzte Version vom: 18.07.2014
- Kosten: von 49.- $ bis 349.- $
- Lizenz: Spezielle Lizenz
- Wechselwirkungen mit anderen Plugins: nicht bekannt
- Entwickler Homepage: WPtouch Homepage
Eine mobile Webseite erzeugen mit dem Jetpack for WordPress Plugin
Sollten Sie bereits Nutzer des beliebten Sammel-Plugin Jetpack for WordPress sein, so haben Sie die Möglichkeit, ein mobiles Theme von Jetpack generieren zu lassen.
Links zum Beitrag
Test-Tools für die Ansicht auf mobilen Geräten
- Am I Responsive – Online Test Tool
- Webdeveloper Erweiterung für Google Chrome
- Webdeveloper Add-On für Mozilla Firefox
- Apple XCode inklusive dem iOS und Android Simulator
- Tutorial XCode: How To Test WordPress On Tablets And Mobiles You Don’t Own
Optimierung für mobile Geräte mit responsiven WordPress Themes
- Das Make Theme - Download der kostenfreien Version sowie umfangreiche Info
- Make Theme – Demo 1
- Make Theme – Demo 2
- Make Theme – Demo 3
- Make Theme – Demo 4 – Premium Version des Themes – WooCommerce Shop
- WordPress Plugin Hammy für Adaptive Images
- Adaptive Content Images within WordPress – die Hintergründe zum Hammy Plugin
Optimierung für mobile Geräte mittels Plugin
(dpe)
