Wusstest du, dass unter Umständen mehr als die Hälfte der Besucher deine Website auf ihrem Smartphone oder Tablet aufruft? In diesem Ratgeber erfährst du, wie du vorgehen solltest, um unabhängig von der Bildschirmgröße für ein reibungsloses Benutzererlebnis zu sorgen – vom Auswählen eines responsiven Themes bis hin zur Feinabstimmung deiner Inhalte.
In diesem Ratgeber
Hast du Fragen?
Unseren AI Assistant fragenEin für Mobilgeräte geeignetes Theme auf einer WordPress-Website ist entscheidend für ein reibungsloses, optimiertes Benutzererlebnis auf verschiedenen Geräten. Es verbessert die Zugänglichkeit und wirkt sich positiv auf das Ranking in Suchmaschinen aus.
Alle auf WordPress.com angebotenen Themes sind für Mobilgeräte optimiert und damit sowohl für mobile Browser als auch für Desktops geeignet.
Wenn du ein Drittanbieter-Theme verwendest, achte darauf, dass es als für Mobilgeräte geeignet beschrieben und auf deinen eigenen Mobilgeräten problemlos dargestellt wird. In der Dokumentation zum jeweiligen Theme findest du Anpassungsoptionen oder Einstellungen für das Design des Themes auf Mobilgeräten.
Wenn du ein responsives Theme für Mobilgeräte ausgewählt hast, musst du wahrscheinlich noch Änderungen an den Standardinhalten vornehmen, um es an deine Anforderungen anzupassen. Beim Bearbeiten deiner Website im WordPress-Editor solltest du darauf achten, dass sie auf allen Geräten richtig angezeigt wird.
Bei WordPress gibt es keinen separaten Editor für Mobilgeräte. Änderungen, die du an deiner Website vornimmst, werden sowohl auf Mobilgeräten als auch auf Desktops wirksam. Wenn deine Website ein für Mobilgeräte geeignetes Theme hat, werden die Inhalte an alle Bildschirmgrößen angepasst. Dies wird als „Responsivität“ bezeichnet.
Du kannst oben rechts im Editor auf das Icon für die Vorschau klicken, um zu sehen, wie deine Website für Besucher aussieht. Wähle Mobil oder Tablet aus, um eine angenäherte Darstellung der Inhalte im Editor anzuzeigen:
Eine angenäherte Darstellung ist es deshalb, weil viele Elemente der Editor-Ansicht durch das Website-Theme beeinflusst werden. Die Stile des Themes werden im Editor nicht angezeigt. Sie werden erst angezeigt, wenn du eine Vorschau der Seite in einem neuen Tab öffnest oder deine Website im Browser deines Geräts aufrufst. Um deine Inhalte mit den angewendeten Stilen des Themes anzuzeigen, klicke auf die Option „Vorschau in neuem Tab“.
Nachdem du auf die Option „Vorschau in neuem Tab“ geklickt hast, kannst du die mobile Version mit dem Inspektor-Tool im Browser anzeigen. So verwendest du den Untersuchungsmodus deines Browsers, um die Vorschau einer Seite oder eines Beitrags für Mobilgeräte anzuzeigen:
- Klicke in der oberen rechten Ecke des WordPress-Editors auf das Icon für die Vorschau.
- Wähle die Option „Vorschau in neuem Tab“ aus.
- Klicke mit der rechten Maustaste auf die Vorschauseite und klicke dann auf „Untersuchen“ (Chrome, Firefox, Edge) bzw. „Element untersuchen“ (Safari).
- Klicke im Untersuchungsmodus des Browsers auf das Mobilgeräte-Icon, um die Vorschau auf die mobile Ansicht umzustellen.
Nachdem du deine Änderungen veröffentlicht hast, kann es hilfreich sein, die Website auf deinem Smartphone oder Tablet zu öffnen, wie es Besucher der Website tun würden, um dich abschließend zu vergewissern, dass sie wie gewünscht dargestellt wird.
Hier findest du Tipps dazu, wie du die Responsivität deines Website-Designs maximieren und sicherstellen kannst, dass die Inhalte auf Smartphones, Tablets und Desktops richtig dargestellt werden.
Wenn ein Bild Text enthält, der in das Bild selbst eingefügt wurde, wird dieser Text auf kleineren Bildschirmen unter Umständen abgeschnitten:
Das liegt daran, dass der Text im Bild nicht responsiv ist.
Im WordPress-Editor kannst du Text auf ein Bild schreiben. Wenn du auf diese Weise Text zu einem Bild hinzufügst, erhältst du responsiven Text. Im Video unten wird das gleiche Bild wie oben mit dem Cover-Block erstellt, um die Responsivität auf kleineren Bildschirmen zu demonstrieren:
Um die Responsivität der Schriftgrößenanpassung auf deiner Seite zu maximieren, solltest du statt Pixeln (px) die Maßeinheit em oder rem verwenden. Wenn du Pixel für die Schriftgröße verwendest, wird im Grunde die Größe einer bestimmten Schriftart auf der Seite hartcodiert, d. h., die Schriftart wird unabhängig von der Bildschirmgröße immer in genau dieser Größe angezeigt. Im Gegensatz dazu sind em– und rem-Werte relative Größeneinheiten, die je nach verfügbarem Platz auf dem Bildschirm des Betrachters skaliert werden.
Statt ein Textmenü für dein mobiles Layout zu verwenden, kannst du den Navigationsblock deiner Website so anpassen, dass das Menü für Mobilgeräte angezeigt wird, das als Overlay-Menü (manchmal auch „Hamburger-Menü“) bezeichnet wird. Diese Funktion kann dazu beitragen, den Header kompakter zu gestalten und das Menü auf Mobilgeräten leichter zugänglich zu machen.
Bei einigen Blöcken gibt es die Option „Auf Mobilgeräten stapeln“, damit der verfügbare Platz auf kleineren Bildschirmen besser genutzt wird. Inhalte, die auf einem Desktop-Bildschirm nebeneinander angezeigt würden, werden dann auf kleineren Bildschirmen untereinander angeordnet, damit sie auf Mobilgeräten leichter lesbar sind.
Die Einstellung „Auf Mobilgeräten stapeln“ ist bei folgenden Blöcken verfügbar:
Buttons und Menüs sind auf kleineren Geräten einfacher lesbar, wenn sie in mehrere Zeilen umgebrochen werden.
Die Option „Zeilenumbruch auf mehrere Zeilen erlauben“ ist in den Layout-Einstellungen der folgenden Blöcke verfügbar:
- Buttons-Block
- Teilen-Buttons-Block
- Navigationsblock
- Social-Icons-Block
- Kommentar-Block
- Zeilen- und Stapelblöcke
Accelerated Mobile Pages (AMP) ist ein Drittanbieter-Open-Source-Framework für Websites, die auf Mobilgeräten fast sofort geladen werden, um Website-Besuchern schnelles Surfen zu ermöglichen. Wenn du deiner Website AMP hinzufügen möchtest, kannst du das AMP-Plugin installieren. Bei Plugin-fähigen WordPress.com-Websites, die vor dem 13. Juni 2022 erstellt wurden, wurde das AMP-Plugin standardmäßig installiert.
Beachte, dass bei Verwendung von AMP viele Funktionen von deiner Website entfernt werden (betrifft z. B. das Layout und viele Features), damit sie auf Mobilgeräten schneller lädt. Am besten nutzt du diese Möglichkeit nur, wenn dein Theme speziell für AMP erstellt wurde. Alle Themes auf WordPress.com sind für Mobilgeräte geeignet, sodass AMP nicht erforderlich ist, um ein für Mobilgeräte optimiertes Erlebnis zu erzielen.
Wenn auf deiner Website Anzeigeprobleme auftreten und du AMP installiert hast, solltest du das AMP-Plugin deaktivieren und prüfen, ob sich dadurch die Performance deiner Website verbessert. Wenn auf deiner Website die Option „Mobile Version verlassen“ angezeigt wird und du diese vollständig entfernen möchtest, deaktiviere das AMP-Plugin ebenfalls.
Wenn du AMP bereits seit einiger Zeit auf deiner Website verwendest, ist zu beachten, dass die Google-Ergebnisse nicht sofort aktualisiert werden und die AMP-Seiten nach der Deaktivierung noch länger erhalten bleiben. Unter Umständen empfiehlt es sich, nach dem Deaktivieren von AMP Seitenweiterleitungen einzurichten. Suchmaschinen indexieren die URLs der AMP-Seite und es dauert eine Weile, bis diese URLs wieder verworfen werden. In der Zwischenzeit werden Mobilgerätebenutzer möglicherweise auf eine 404-Fehlerseite geleitet.
Du kannst zwischen verschiedenen gängigen kostenlosen Plugins für die Weiterleitung wählen. Du musst eine 301-Weiterleitung einrichten und benötigst wahrscheinlich einen Regex-Ausdruck wie /(.*)\/amp. Führe nach Möglichkeit Tests durch, um sicherzugehen, dass du die Weiterleitung richtig eingerichtet hast. Beachte auch die Anleitungen zum jeweiligen Weiterleitungs-Plugin.
Support 