mobiloptimierung

Responsive Webdesign ≠ mobilfähig. So klappt die mobile Optimierung

In diesem Artikel erkläre ich dir, was der Unterschied zwischen “responsive” und “mobilfähig” ist und wie du deine Website für mobile Geräte optimierst. Zudem lernst du ein paar sehr coole Tricks kennen, mit denen du die Ladezeit deiner WordPress-Website verbesserst, damit sie schnell geladen wird.

Immer mehr Menschen gehen mobil ins Internet. Dadurch entstehen neue Möglichkeiten und natürlich auch ein Umdenken, bezüglich der Themen “responsive Webdesign” und “mobile Optimierung für die Website”.

Wieso mobile Optimierung?

Bevor ich dir konkrete Optimierungsmöglichkeiten zeige, möchte ich mit dir kurz das “Warum” besprechen. Dabei gehe ich auf die wichtigsten zwei Gründe etwas genauer ein:

Grund #1:

Immer mehr Menschen nutzen mobile Endgeräte (Smartphones und Tablets). Dagegen werden Computer und Notebooks immer weniger genutzt. Das gilt vor allem für die private Nutzung, wenn nach einem bestimmten Problem, Thema, Lösung, Restaurant, Produkt oder einer Dienstleistung gesucht wird.

Auf diese Veränderung sollte sich jeder Webseitenbetreiber einstellen. Denn nur, wenn deine Website auf dem mobilen Endgerät optimal dargestellt wird, wird dein Besucher auf der Seite bleiben und ein Produkt oder eine Dienstleistung bei dir buchen.

Grund #2:

Für Google ist es ein Ranking-Kriterium, wie deine Website auf mobilen Endgeräten performt. Folgende beiden Aspekte sind dabei extrem wichtig:

  • Ist die Website komplett responsive?
  • Wie hoch ist die Ladezeit deiner Website?

Je besser du in diesen beiden Aspekten abschließt, umso mehr Pluspunkte bekommst du und umso besser wird letztendlich auch dein Ranking in den Suchergebnissen sein.

Was ist der Unterschied zwischen responsive und mobilfähig?

Auf vielen Websites steht geschrieben, dass du lediglich ein responsive Design benötigst und dann ist alles in bester Ordnung. Ich bin hier allerdings einer ganz anderen Meinung und deswegen möchte ich auf diesen Punkt besonders eingehen. Denn genau an dieser Stelle kannst du deine Website für mobile Geräte perfekt optimieren.

Die Vorgehensweise ist grundsätzlich folgende: Ein Webseitenbetreiber installiert beispielsweise für eine WordPress-Website ein responsive Theme. Damit ist für ihn das Thema meist auch schon erledigt. Meiner Meinung nach fängt es jetzt aber erst so richtig an. Denn ein responsive Theme bedeutet nur, dass sich das Design an das jeweilige Endgerät automatisch anpasst. Das ist die Grundvoraussetzung und dementsprechend sehr wichtig.

Ein responsives Theme bedeutet nur, dass sich das Design an das jeweilige Endgerät automatisch anpasst.

Im nächsten Schritt solltest du deine Website mit einem Tablet und einem Smartphone betrachten. Schnell wirst du erkennen, ob das responsive Design professionell und einladend wirkt. Denn oft ist es der Fall, dass die mobile Optimierung trotz eines responsive Designs nicht durchgeführt wurde.

Dazu möchte ich dir ein paar Beispiele nennen, die dir auf einigen Websites sicherlich schon einmal aufgefallen sind:

  • Die Schriftart der Überschrift ist viel zu groß.
  • Die Schriftart des Fließtextes ist zu groß oder zu klein.
  • Der Zeilenabstand ist zu groß.
  • Bilder werden zu groß oder zu klein dargestellt.
  • Bestimmte Formatierungen werden auf dem Mobilgerät nicht korrekt dargestellt.
  • Die Navigation ist nur schwer bedienbar.

Diese Liste könnte natürlich noch deutlich länger sein, aber ich glaube du hast verstanden, um was es mir hier geht.

Auch wenn diese Aspekte nicht optimiert werden, hast du eine responsive Website, was Google auch positiv bewertet. Allerdings solltest du für deine Besucher die mobile Optimierung wirklich ernst nehmen und diese Aspekte beachten und von deinem Programmierer optimieren lassen.

Responsive Webdesign: Browser-Tipp für mobile Optimierung

In der Regel hat man ein Smartphone und vielleicht noch ein Tablet. Wenn du deine Website allerdings mit verschiedenen mobilen Endgeräten prüfen möchtest, kommst du damit schnell an deine Grenzen. Dafür gibt es allerdings eine sehr einfache Lösung. Wenn du den Google Chrome Browser verwendest, hast du eine integrierte Funktion dafür.

Du kannst dein “responsive Webdesign” für viele verschiedene Endgeräte anzeigen lassen. Klicke dazu mit der rechten Maustaste und wähle im erscheinenden Menü “Untersuchen” (im englischen Menü “inspect”) aus. Es öffnet sich eine Konsole und du kannst mobile Geräte auswählen (siehe Screenshot). Der Browser zeigt dir dann, wie deine Website mit bestimmten Endgeräten dargestellt wird.

responsive webdesign mobile geraete testen

Auf folgender Website findest du eine Anleitung, wie du diese Funktion des Browser nutzen kannst.

Tipps: WordPress mobil optimieren

Falls du WordPress verwendest, sind folgende Tipps für dich sicherlich sehr hilfreich. Dank WordPress kannst du viele Optimierungen mit einem Plugin oder einer internen Funktion durchführen. Das erleichtert deine Arbeit und spart dir Zeit:

  • Die Grundvoraussetzung ist ein responsive Theme. Ich empfehle dir, ein Premium Theme für WordPress auszusuchen. Dieses kostet zwar ein paar Dollar, dafür hast du damit deutlich mehr Möglichkeiten. Außerdem ist ein Premium Theme in der Regel besser programmiert, wovon du zusätzlich profitierst.
  • Wenn dein Theme in der mobilen Ansicht Optimierungsbedarf hat, hast du 2 Möglichkeiten. Entweder du wechselst das Theme oder du optimierst dein bestehendes Theme. Für die Optimierung kannst du ein Child Theme nutzen. Beauftrage einen Programmierer, der die Optimierungen für dich umsetzt.
  • Mittlerweile gibt es viele Theme-Builder, mit denen du wirklich spielend einfach dein Wunschdesign erstellen und damit WordPress mobil optimieren kannst. Beispiele dafür sind Thrive-Themes oder auch Divi.

Falls das Thema WordPress für dich noch neu ist, du das allerdings interessant findest, kannst du dir Folgendes ansehen. Auf dieser Seite findest du ein WordPress Tutorial, in dem du alle wichtigen Grundlagen über dieses geniale Content Management System lernst.

Nutze interne Links im Text

Kommen wir nun zu einem kleinen Geheimtipp, der enorm mächtig ist: Verlinke im Text auf deiner Website interne themenrelevante Unterseiten. Dadurch können sich deine Besucher ganz einfach durch deine Website navigieren. Denn gerade Smartphone-Nutzer bevorzugen es, im Text ganz easy auf einen Link zu klicken, anstatt mühevoll das Burger-Menü zu durchsuchen.

Durch diese einfache Optimierung erzeugst du gleich mehrere positive Dinge:

  • Interne Verlinkungen sind ein Rankingfaktor bei Google.
  • Durch interne Verlinkungen machst du es deinen Besuchern einfacher und sie fühlen sich auf deiner Website wohler.
  • Deine Besucher werden durchschnittlich mehrere Unterseiten von dir ansehen, was die Verweildauer auf deiner Website erhöht. Und auch das ist ein Rankingfaktor, der sich positiv auswirken wird.

Ladezeit für mobile Endgeräte

Jetzt haben wir viel über das Thema “Website für mobile Geräte optimieren” gesprochen. Dabei gibt es noch einen Aspekt, den du ebenfalls beachten solltest: Das Thema “Ladezeitoptimierung”. Meiner Meinung nach ist dieses Thema aus zwei Gründen besonders wichtig:

  1. Die Ladezeit deiner Website ist ein Google-Rankingfaktor.
  2. Je länger die Ladezeit deiner Website ist, umso mehr Besucher-Abbrüche wirst du haben.

Speziell bei mobilen Besuchern schlägt sich das enorm nieder, da hier die Ladezeiten im Vergleich zur Desktop-Umgebung immer etwas länger sind. Dazu 3 konkrete Tipps, wie du WordPress in Bezug auf die Ladezeit für mobile Geräte optimieren kannst:

#1: Bilder:

Bilder nehmen den prozentual größten Teil der Ladezeit ein. Dementsprechend hast du hier auch den größten Hebel. Das wichtigste ist, dass du die Bilder in exakt der Größe in WordPress hochlädst, in der du die Grafik auch einbinden wirst. Damit sparst du bereits Dateigröße ein und verringerst deine Ladezeit.

Darüber hinaus gibt es mittlerweile gigantische Tools, mit denen du vollautomatisch die Dateigröße deiner Bilder weiter reduzieren kannst. Du kannst dabei selbst einstellen, ob die Qualität beibehalten oder ein klein wenig reduziert werden soll. Dazu empfehle ich dir die folgenden beiden WordPress-Plugins:

ewww image optimizer bilder optimieren

Mit einigen Plugins zur Bildoptimierung kannst du zudem automatisch WEBP-Bilder erzeugen. Das ist ein ganz neues Format von Google, dass die Dateigröße bei gleicher Qualität nochmals reduziert.

#2: Caching

Der zweite wichtige Punkt betrifft das Caching. Ich möchte dabei jetzt gar nicht so sehr ins Detail gehen, weil du das Hintergrundwissen auch gar nicht benötigst.

Es geht darum, dass nicht bei jedem Aufruf deiner Website (oder einer Unterseite) Datenbankabfragen getätigt werden. Dank “Caching” wird von jeder Unterseite eine Kopie auf deinem Server gespeichert und ist dadurch viel schneller verfügbar, weil keine gesonderten Abfragen durchgeführt werden müssen.

Meine Plugin-Empfehlung: WP-Rocket. WP-Rocket ist einfach in der Bedienung und in wenigen Minuten komplett eingerichtet. Zudem bietet das Plugin noch weitere Optimierungen, mit denen zu zusätzliche Ladezeit einsparen kannst.

#3: Plugins und Themes ausmisten

Dieser Tipp hört sich zugegebenermaßen sehr banal an und das ist er auch. Dennoch ist er effektiv:

Ich empfehle dir, alle Plugins und Themes, die du nicht im Einsatz hast, zu deinstallieren. Deaktivieren alleine reicht nicht.

Dadurch hältst du dein System außerdem sauber und jede zusätzliche Erweiterung trägt ja ein gewisses Sicherheitsrisiko. Über die Zeit schleichen sich nämlich sehr oft viele Plugins und Themes ein, die man eigentlich gar nicht benötigt.

Auf meiner Website findest du eine kostenlose Videoserie, wie du WordPress beschleunigen kannst. Diese Tutorials zeigen live am Bildschirm, welche Einstellungen du wo setzen musst.

Fazit: Für wen lohnt sich mobile Optimierung wirklich

Das Internet entwickelt sich in Lichtgeschwindigkeit weiter. Es gibt viele interessante Themen und vielleicht frägst du dich jetzt, lohnt sich eine mobile Optimierung für mich denn eigentlich? Nun, entscheiden musst du natürlich selbst. Ich empfehle dir allerdings, deine Website genau in diese Richtung zu optimieren:

  • Website für mobile Geräte optimieren
  • Ladezeit verbessern und optimieren

Eine Website ist DAS Aushängeschild, das 365 Tage im Jahr für dich im Einsatz ist. Und damit dein Aushängeschild seinen Zwecke erfüllt, muss es regelmäßig poliert werden. Meine Empfehlung lautet also: Poliere deine Website für mobile Geräte und du wirst sicherlich davon profitieren.

Beitragsbild: Le Buzz @Unsplash

Kennst du schon die aktuellen WordPress-News?

Erhalte alle zwei Wochen unsere neusten Blog-Artikel und Neuigkeiten rund um WordPress!

Ja, ich bin mit der Datenverarbeitung einverstanden.

Wenn du fortfährst, stimmst du unserer Cookie-Richtlinie zu.