Mobiles Webdesign: So optimieren Sie Ihr WordPress für Smartphones und Tablets

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…

WordPress für mobile Geräte optimieren

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

  1. Der Inhalt sollte vollständig auf dem Display (oder dem Test-Tool) für die betreffende Auflösung zu sehen sein.
  2. Es dürfen keine horizontalen Scrollbalken entstehen.
  3. Es muss ein mobil-spezifisches, leicht (auch auf kleinen Smartphones) zu bedienendes Menü vorhanden sein.
  4. 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.

Die Webseiten Eingabe vom Online-Tool Am I Responsive

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.

Das Ergebnis einer Webseite im Online-Tool Am I Responsive

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“.

So rufen Sie Webdeveloper in Chrome auf

In Firefox lassen Sie sich die Webdeveloper-Symbolleiste anzeigen, gehen dann auf „Größe ändern“ und zuletzt auf „Angepasste Layouts anzeigen“.

Der Aufruf der angepassten Layouts in Firefox

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.

Responsive Layout Tester in Google Chrome aufgerufen

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.

Das Make Theme für WordPress

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.

Der Drag and Drop Page Builder des Make Themes für WordPress

Hier ein Eindruck von den vielen das Design betreffenden Einstellungen des kostenlosen Make Themes:

Die Design Anpassungsmöglichkeiten des Make Themes für WordPress

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.

Die Lizenzmodelle des Make Themes für WordPress

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.

Das Hammy WordPress Plugin

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:

Die Einstellungen des Hammy Plugins für WordPress

  • 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

Das WPtouch Plugin für WordPress

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

Die Preium Version des WPtouch Plugins für 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.- $.

Die Lizenzen der WPtouch Suite für WordPress

  • 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

Das 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.

Ein mobiles Theme vom Jetpack for WordPress Plugin generieren lassen

Links zum Beitrag

Test-Tools für die Ansicht auf mobilen Geräten

Optimierung für mobile Geräte mit responsiven WordPress Themes

Optimierung für mobile Geräte mittels Plugin

(dpe)

ist freier Journalist, WordPress-Entwickler und Spezialist für WordPress-Sicherheit. Er schreibt seit 2012 für Dr. Web. Auf seinem Blog TechBrain.de schreibt er über das Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Torsten
Gast

Das kann Firefox übrigens auch ohne Webdeveloper-Toolbar über
Extras – Web-Entwickler – Bildschirmgrößen testen (Alt+Befehl+m)

Theo
Gast

Noch ein interessantes Test-Tool ist http://lab.maltewassermann.com/viewport-resizer/ . Ich verwende gern http://helloduo.com/

Johannes
Gast

Hey,
super Artikel. Das Thema beschäftigt mich schon länger. Hat mir sehr geholfen.

Roby
Gast

Super Tipp mit dem Make Theme. Gleich genutzt und kann bestätigen, dass es richtig gut ist. Mit allen Optimierungen endlich bei Pagespeed die 99/99 geschafft.
Die Pro Version finde ich allerdings ein wenig teuer, aber die Free-Version reicht zunächst vollkommen aus.
Das Plugin Hammy hatte ich schon getestet, hatte aber je nach Theme Erfolg oder nicht.
Grüße
Roby

trackback

[…] Die Website dr. web erklärt ausführlich, wie man sein Blog mobil […]

trackback

[…] Website dr. web erklärt ausführlich, wie man sein Blog mobil […]

Matthias Mann
Gast

Ich bin seit einigen Monaten nutzer des Plugins WPtouch. Funktioniert sehr gut, ist blitzschnell installiert und aktiviert und bereits mit der Standard-Konfiguration perfekt nutzbar. Kann ich nur empfehlen.

Dieter Petereit
Dr. Web

Hat aber mit den hier bei Dr. Web empfohlenen Designgrundsätzen ungefähr soviel gemeinsam wie eine Kuh mit einem Kreuzfahrtschiff.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen