wordpress mobil responsive design

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.


2 Kommentare  |  Kommentar schreiben

2 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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.