Mobil-freundliche WordPress-Seite – so funktioniert’s
Eine mobil optimierte WordPress-Seite ist keine Option, sie ist eine Pflicht. Im Prinzip keine neue Erkenntnis, und doch begegnen uns immer wieder Webseiten, die eben diese Anforderungen nicht oder nur unzureichend erfüllen. Dabei ist es mit dem CMS relativ leicht, dem Nutzer eine optimale mobile Darstellung zu präsentieren, zumindest mit den ersten beiden unserer drei Optionen des heutigen Blogbeitrags…
3 Möglichkeiten zur mobilen Optimierung der WordPress-Seite
Keiner möchte sich länger mit einer schlecht oder gar nicht mobil optimierten Seite befassen, weder Suchmaschinen noch Nutzer. Ergebnis: Die Suchmaschine befördert die Website im Ranking nach unten, die Nutzer verlassen sie frustriert. Sicherlich keine guten Voraussetzungen für eine erfolgreiche Internetpräsentation.
Um das zu ändern, stehen bei WordPress die folgenden 3 Optionen zur mobilen Optimierung zur Verfügung:
1. Ein Responsive Theme nutzen
Am besten ist es natürlich, wenn Du dich von Beginn an für ein responsives Theme entschieden hast. Aber auch der Wechsel ist recht unproblematisch, vorausgesetzt, Du hältst dich bei der Wahl an folgende Anforderungen:
Funktionsumfang
Bietet das responsive Design alle für die Website notwendigen Funktionen? Welche das sind, ist natürlich vom jeweiligen auf der Website präsentierten Angebot abhängig. Wenn Du eine Online-Buchungsmöglichkeit anbietest oder umfangreiche Referenzen präsentieren möchtest, sollte das Theme natürlich dazu passen.
Individualisierung
Inwieweit lässt sich das Theme individualisieren/an die eigenen Wünsche anpassen, also z.B. bei Fonts, Farben und Logo-Einbindung?
Design
Passt das responsive Theme zum gewünschten Design, also zum Ziel der Website/zu den Produkten/Leistungen bzw. zu den Anforderungen der Zielgruppe?
2. Ein Plugin zur mobilen Darstellung nutzen
Es gibt zahlreiche Plugins, durch die Du mit wenigen Klicks Deine WordPress-Seite mobil-freundlich gestalten kannst. Auch wenn Deine Seite kein responsives Theme hat, wird sie dank der Plugins optisch so präsentiert. Diese Option ist einfacher als auf ein responsives Theme zu wechseln, kann aber auch zu Problemen führen, z.B. Einfluss auf die Funktionsfähigkeit anderer Plugins haben. Außerdem ist die Plugin-Lösung meist schwierig bei sehr stark individualisierten WordPress-Websites bzw. der Einbindung zahlreicher, sehr umfangreicher Plugins.
Möglich machen die mobile Optimierung z.B. die Plugins WP Touch und Jetpack:
WPTouch
Das Plugin ist die populärste, am meisten genutzte Erweiterung, um die WordPress-Seite mobil zu optimieren. WPTouch ist als kostenfreie und kostenpflichtige Version erhältlich. Die kostenfreie erfüllt auf jeden Fall alle Anforderungen an eine mobile Seite. Die Premiumversion ermöglicht darüber hinaus zahlreiche individuelle Anpassungen. Zum Download von WPTouch.
Jetpack
Bei diesem Plugin handelt es sich nicht um ein reines Mobil-Plugin. Jetpack gehört zu den umfangreichsten WordPress-Plugins, u.a. mit Funktionen zur Erweiterungen für Kommentare, Social-Network-Verknüpfungen, Widgets, Shortcodes und eben auch einem Modul mit dem Namen „Mobile Theme“. Die Seite bietet damit für alle Bildschirmgrößen eine optimale Darstellung und wird schnell geladen.
Der Vorteil bei Jetpack: Du erhältst mit einem Plugin gleich mehrere Funktionen (mittlerweile über 30), die ebenfalls sehr nützlich sein können. Aber: Der große Funktionsumfang kann auch schnell dazu führen, dass die Seite unnötig aufgebläht wird, worunter die Performance leidet. Schaue Dir also die Funktionen genau an und überlege, was für die einwandfreie Funktion und komfortable Nutzung tatsächlich benötigt wird. Zum Download von Jetpack.
3. Manuell die statische WordPress-Seite anpassen
Die dritte Option erfordert WordPress-Entwickler Know-how. Der WP-Code wird in diesem Fall individuell angepasst (u.a. die Bilder, das Menü und die Fonts), sodass alle Inhalte den Anforderungen an eine optimale Darstellung auf Mobilgeräten entsprechen.
Generelle Hinweise für die mobile Anpassung
Um im Notfall wieder zur alten Version zurückkehren zu können, solltest Du bei der manuellen Code-Anpassung auf jeden Fall ein Backup erstellen. Aber auch für die anderen Optionen – mobil-freundliche Anpassung per WordPress Plugin oder per responsive Theme – ist das empfehlenswert.
Ebenfalls wichtig: Testen, testen, testen. Entweder über die verschiedenen Mobilgeräte selbst oder mit speziellen Tools, z.B. mit XRespond, Responsive Design Checker oder dem Mobile-Friendly Test von Google.
Zudem spielt bei der optimalen Präsentation auf Smartphone und Co. die Ladezeit eine große Rolle. Achte also darauf, dass neben der Optik auch die Geschwindigkeit mitspielt. Tipps dazu findest Du in unserem Blogbeitrag Ladezeiten optimieren.
16 Kommentare zu “Mobiles Design für WordPress – Diese 3 Möglichkeiten machen Deine Seite mobil-freundlich”
Hans-Joachim Grobosch #
Geschrieben am 8. September 2020 um 08:43 Uhr
Hallo!
Als sehr zufriedener Kunde von Webgo folgende Frage:
Ich habe das OceanWP Thema und meine Seite als absoluter Anfänger mit Elementor erstellt.
Das bisherige Ergebnis ist schon nicht so schlecht, aber überhaupt nicht responsive.
Ich kann mir die Seite ja auf den verschiedenen Geräten „anzeigen“ lassen und auch dort ändern, dann ändert sich die Seite aber auch in der Desktop Version.
Ist das Thema überhaupt responsive und wie kann ich als Anfänger am einfachsten meine Seite Mobilgeräte freundlich umgestalten?
Marcel El-Ghori (webgo GmbH) #
Geschrieben am 10. September 2020 um 08:02 Uhr
Lieber Hans-Joachim,
zunächst einmal freut es uns, dass Du zufrieden bei uns bist. Hast Du denn schon bei der HOSTtest Wahl 2020 mitgemacht? Wir würden uns freuen, Deine Stimme zu erhalten: webgo.de/hosttest/ und danken Dir herzlich im Voraus!
Zu Deinem Anliegen:
Grundsätzlich ist das Theme OceanWP responsive. Leider lässt sich auf diese Weise schwer erahnen wo das Problem liegen könnte. Es gibt nur allem Anschein nach, grundsätzlich Komplikationen in Kombination mit Elementor. Prüfe einmal ob die Website (Seitendesign) mit Elementor gestaltet ist. Ggf. mit dem Elementor Editor. Sollte dies nicht möglich sein, hilft es vielleicht im Support/Hilfe Forum von OceanWP bzw. eher bei Elementor reinzuschauen.
Es tut uns leid, dass wir Dir nicht noch gezielter helfen können. Für eine überaus einfache Art eine Homepage responsive zu gestalten, gibt es unseren Homepage-Baukasten. Eine responsive Website zu erstellen ist mit unserem Homepage Baukasten auf jeden Fall sehr unkompliziert. Solltest Du wider erwarten einmal nicht weiterkommen, hilft Dir unser Support gerne bestmöglich weiter.
Mehr Infos zu unserem Homepage-Baukasten findest Du hier: Homepage-Baukasten von webgo
Liebe Grüße
Dein webgo Social Team
Peter #
Geschrieben am 17. März 2021 um 09:24 Uhr
Ich möchte gern auf einer Site die Auch mit OceanWP und Elementor gemacht wurde ein anderes Menü hinzufügen. Das Menü soll immer so aussehen wie in der Mobilen Version. Wie bekommt man das hin?
Marcel El-Ghori (webgo GmbH) #
Geschrieben am 17. März 2021 um 15:19 Uhr
Lieber Peter,
vielen Dank für Deine Frage zum Homepage Design. Leider können wir Dir hier nur bedingt weiterhelfen, möchten dies dennoch bestmöglich tun.
Die Einstellungen für das Mobile- bzw. klassische Menü findest Du im „Header“ Bereich. Hier findest Du zudem auch den Punkt „General“ hier kannst Du den jeweiligen „Header“ Style wählen und bspw. das Padding anpassen. Darüber hinaus kommt es zusätzlich auch darauf an, welche Elementor Version Ihr nutzt. Zum einen gibt es die klassische, zum anderen auch die „Pro“ Variante. Helfen könnte Dir dabei auch folgendes Video: https://www.youtube.com/watch?v=zqmVdbwJKv0
Wie zuvor der Antwort von Hans-Joachim zu entnehmen, ist das Theme OceanWP grundsätzlich responsive. Zudem könnte es evtl. nach wie vor Schwierigkeiten in der Kombination von OceanWP und Elementor geben. Falls es nicht funktionieren sollte, probiere es ggf. einmal mit einem anderen Theme als OceanWP aus.
Sollte dies nicht wie gewünscht funktionieren, hilft es vielleicht im Support/Hilfe Forum von OceanWP oder Elementor reinzuschauen.
Weitere eventuell hilfreiche Links zu diesem Thema:
https://wordpress.org/support/theme/oceanwp/
https://de.wordpress.org/support/forum/themes/
https://wordpress.org/support/plugin/elementor/
Wir hoffen Dir damit zumindest etwas weitergeholfen zu haben und wünschen Dir viel Erfolg mit Deiner WordPress Page!
Liebe Grüße
Dein webgo Social Team
Karen Harbs #
Geschrieben am 27. Mai 2021 um 10:29 Uhr
Hallo liebes Team,
ich nutze das Theme Pro Bard, das bisher sowohl auf dem PC als auch mobil gut angezeigt hat.
Seit kurzem habe ich Probleme mit der Mobilansicht. Dort zeigt es keine Bilder an und auch die Startseite ist unsleserlich.
Könnt ihr helfen? Danke.
Karen Harbs
Marcel El-Ghori (webgo GmbH) #
Geschrieben am 27. Mai 2021 um 13:33 Uhr
Liebe Karen,
vielen Dank für Deinen Kommentar und die damit verbundene Frage, die wir Dir wirklich gerne beantwortet hätten.
Leider können wir nicht sagen, warum das Plugin seit kurzem Schwierigkeiten mit der mobilen Darstellung hat, können wir so pauschal leider nicht sagen.
Gerne versuchen wir natürlich dennoch Dir bestmöglich weiterzuhelfen.
Höchstwahrscheinlich hat es ein Update gegeben und es kam dadurch eventuell zu Inkompatitbilitäten. Die aktuellste Version des Themes ist 1.8.9.7 und erfordert eine WordPress Version von mindestens 4.7 oder höher.
Im WordPress Support Forum des Themes findest Du eventuell Hilfestellungen: https://wordpress.org/support/theme/bard/
Sollte dies nicht weiterhelfen, kannst Du Dich auch direkt an die Entwickler wenden. Die können Dir hier sicherlich optimal weiterhelfen. Wir haben lediglich Einblick in das „Support Bard Free“ Forum (https://wp-royal.com/support-bard-free/), kommen jedoch leider nicht in das Forum für die Pro Version, welche leider ausschließlich „Membern“ vorbehalten ist.
Zu finden unter: https://wp-royal.com/support-bard-pro/
Auch kannst Du Dich unter „support@wp-royal.com“ direkt an die Entwickler wenden.
Wir hoffen Dir damit zumindest etwas weiter geholfen zu haben und wünschen Dir viel Erfolg!
Liebe Grüße
Dein webgo Social Team
Laura #
Geschrieben am 4. Juli 2021 um 09:47 Uhr
Hallo! Inwiefern ist denn Ocean WP/ Elementor denn für verschiedene Displaygrößen responsiv? Ich habe eine Seite gebaut, die auf einem 15,4″ Display super funktioniert, auf einem 14″ Display muss ich aber den Bildschirmzoom auf 90% runterstellen, sonst verschiebt sich eine Menge…
Liebe Grü&e&danke schonmal,
Laura
Marcel El-Ghori (webgo GmbH) #
Geschrieben am 8. Juli 2021 um 10:43 Uhr
Liebe Laura,
herzlichen Dank für Deine Frage, welche wir Dir gerne bestmöglich beantworten möchten. Gleichwohl wir dies leider nicht im Detail klären oder mit 100%tiger Sicherheit lösen können.
Es gibt leider häufiger Schwierigkeiten bei der Kombination von Elementor mit Ocean WP. Hier könnte es vielleicht helfen, die entsprechende Plugins nach und nach zu deaktivieren und zu prüfen, an welchem es liegen könnte. Es gibt auch ein zusätzliches „Ocean“ Plugin (Ocean Extra), welches auch Schwierigkeiten verursachen könnte. Auch hilft es eventuell im Editor von Elementor die Einstellungen zu überprüfen, da auch hier die Ursache liegen könnte.
Wie Du sicherlich nachvollziehen kannst, ist daher eine pauschale und zielführende Antwort in Deinem Fall nicht so einfach möglich und hoffen Dir dennoch mit Deinem Anliegen zumindest etwas geholfen zu haben!
Liebe Grüße
Dein webgo Social Team
Anne #
Geschrieben am 24. August 2022 um 13:54 Uhr
Guten Tag,
ich nutze das Theme Brite. Seit der Aktivierung des Plugins WPtouch funktioniert der Customizer nicht mehr. ich kann also weder Anpassungen im Plugin für die mobile Ansicht vornehmen, noch kann ich die Seite allgemein unter Design customizen. Wenn ich darauf klicke lädt die Seite nur, bleibt aber immer weiß, wenn ich das Plugin deaktiviere geht der Customizer wieder, es liegt also definitiv daran. Habt ihr eine Lösung wie ich das Plugin WP touch nutzen kann und dennoch der Customizer funktioniert? Ich habe auf einer anderen Website schon mal dieses Plugin für die mobile Ansicht verwendet und es hat super geklappt. Dort ging auch mit den Anpassungen alles gut.
Marcel El-Ghori (webgo GmbH) #
Geschrieben am 5. September 2022 um 12:59 Uhr
Liebe Anne,
vielen Dank für Deinen Frage, welche wir Dir gerne bestmöglich beantworten möchten. Gleichwohl wir derartige Schwierigkeiten mit Plugins und Themes bzw. der Kombination, leider nicht im Detail klären oder mit 100%tiger Sicherheit lösen können. Hier sind die Entwickler des Plugins und/oder des Themes gefragt. 🙂
Es gibt leider häufiger Schwierigkeiten zwischen Plugin und Themes, insbesondere dann, wenn zwischenzeitlich das eine oder andere ein Update und damit auch neue Funktionalitäten hinzugekommen sind. Wie wir sehen konnten, hast Du Dich mittlerweile an die absolut richtige Stelle gewandt und im Support Bereich von WPTouch um Hilfe gebeten.
Wir hoffen, dass die Hilfe eines Users dabei helfen konnte Dein Problem zu lösen. Andernfalls könntest Du ggf. die Entwickler direkt kontaktieren.
Wir wünschen Dir mit Deiner WordPress Seite weiterhin viel Erfolg und alles Gute!
Liebe Grüße
Marcel vom webgo Social Team
PCNERD Webagentur #
Geschrieben am 31. Oktober 2022 um 11:57 Uhr
Danke für den guten Beitrag über mobiles Design. Wir achten auch immer darauf, das Elemente nicht nur durch ein Hover-Effekt zu bedienen sind. Elemente wie z.B. Flipcards sind für die mobile Ansicht nicht geeignet, da hier der User durch den Hover-Effekt eine weitere Information erhält. Dafür braucht es also entweder ein extra Element im mobilen Design oder man muss gleich ein andere Element wählen. Bei WordPress arbeiten wir gerne mit dem Elementor, da hier gleich viele Elemente responsiv sind.
LG Florian von pcnerd.de
Serhat Köylüce (webgo GmbH) #
Geschrieben am 16. Januar 2023 um 12:07 Uhr
Lieber Florian,
vielen Dank für deinen Kommentar. Es stimmt, dass einige Elemente primär für die Desktop-Ansicht konzipiert wurden und für die mobile Ansicht eher ungeeignet sind. Da macht es durchaus Sinn, diesen Inhaltsbereich für Mobilgeräte gesondert angepasst zu gestalten, damit die User-Experience dementsprechend angenehm bleibt. Eine unbequeme Handhabung der Webseite kann gerade bei Besuchern über Mobilgeräte zu Frust führen, weswegen hier besonders Wert in die Gestaltung gelegt werden sollte. Wie Du schon erwähnt hast, bietet Elementor dahingehend eine gute technische Umgebung zur Gestaltung solcher responsive Seiten.
Liebe Grüße,
Serhat vom webgo Social Team
Terrassenüberdachung #
Geschrieben am 27. März 2023 um 13:44 Uhr
Danke für die tolle Arbeit die Ihr leistet, werde hier auch in Zukunft zurückgreifen 😉 DANKE !!!! Liebe Grüße Mia
Marcel El-Ghori (webgo GmbH) #
Geschrieben am 11. Mai 2023 um 08:56 Uhr
Liebe Mia,
Lieber Ibrahim,
wir freuen uns, dass Du unsere Arbeit schätzt und hoffen, dass Eure Website in Zukunft bei uns liegt. 😉
Liebe Grüße
Marcel vom webgo Social Team
Alpha #
Geschrieben am 14. August 2023 um 15:20 Uhr
Hallo liebes WG-Team,
leider finde ich – trotz langem Suchen – im empfohlenen PlugIn Jetpack das Modul „Mobile Theme“ nicht. Könnt ihr mir netterweise nochmal weiterhelfen, ggf. mit einem Screenshot?
Besten Dank vorab!
Serhat Köylüce (webgo GmbH) #
Geschrieben am 30. August 2023 um 15:50 Uhr
Liebe/r „Alpha“,
vielen Dank für Ihr Kommentar.
Bedauerlicherweise können wir keinen exakten Werdegang nennen, da wir selber das Plugin Jetpack nicht verwenden. Laut Recherchen müssen Sie, sobald Sie das Plugin installiert und aktiviert haben, erst mal ein Jetpack-Account anlegen. Erst danach erscheinen in Ihrem WordPress-Dashboard weitere Menüpunkte. Gehen Sie hier auf „Jetpack > Einstellungen“. Nun sollte oben-mittig der Punkt „Schreiben“ auffindbar sein. Hier wiederum soll angeblich diese Einstellung vorhanden sein.
Da dieser Artikel aus 2018 ist, können wir auch nicht auszuschließen, dass diese Funktion nicht (mehr) für die selbstgehostete WordPress-Variante vorhanden ist, sondern nur noch über den eigenen Hosting-Dienst von WordPress (also wordpress.com). Über den Unterschied zwischen einer selbstgehosteten WordPress-Seite (wordpress.org) und dem eigenständigen Hosting-Dienst von WordPress (wordpress.com) können Sie im dazugehörigen Blog-Beitrag nachlesen: https://www.webgo.de/blog/unterschied-zwischen-wordpress-com-und-wordpress-org/
Dass wir nicht konkreter weiterhelfen konnten, tut uns leid. Wir empfehlen ansonsten im offiziellen WordPress-Forum die dortigen WordPress-Experten zu fragen, da diese meist genaueres sagen können: https://wordpress.org/support/plugin/jetpack/
Ich wünsche weiterhin einen schönen Tag!
Liebe Grüße,
Ihr webgo Team