Die mobile Suche wird immer wichtiger. Inzwischen werden bereits mehr als die Hälfte aller Google-Suchanfragen von mobilen Geräten aus gestellt. Wer noch keine mobile oder responsive Website hat, sollte handeln.
Wer in der mobilen Google-Suche möglichst weit oben ranken möchte, sollte dafür Sorge tragen, dass die eigene Website auch für mobile Geräte geeignet ist. Ob es sich um eine separate Mobilversion einer Desktop-Website handelt oder ob die Seiten direkt responsiv gestaltet sind, macht an dieser Stelle keinen Unterschied, so John Müller von Google in seinem Webmaster Hangout vom 09.11.2017.
Eine responsive Website ist bekanntlich einfacher in der Wartung und Pflege, denn sie muss nicht in zwei Varianten (Desktop und mobil) gleichzeitig bereitgestellt werden. Daneben entfallen mögliche Browserweichen, die den Besucher durch eine fehlerhafte Erkennung durchaus auf die falsche Version einer Seite weiterleiten können.
Wie funktioniert „Responsive Design“?
Mit den modernen Webstandards HTML5, JavaScript und CSS3 lässt sich die Ausrichtung und Anordnung von Elementen sehr genau steuern. In der Praxis spielt beispielsweise die fließende Ausrichtung von Elementen eine wichtige Rolle. Mehrere Bilder, aber auch Textblöcke, können dadurch beispielsweise auf dem Desktop nebeneinander dargestellt werden, erscheinen auf einem schmalen Smartphone-Display jedoch untereinander angeordnet – sie brechen am Rand des Browserfensters automatisch um, sobald der Platz nicht ausreicht. Häufig werden hierfür die „float“-Eigenschaft oder „display:flex“ verwendet. Mit „min-width“ und „max-width“ ist eine exakte Kontrolle über die Größe von Elementen möglich.
Was häufig falsch gemacht wird
Ein häufiger Fehler bei responsiven Webseiten ist, dass der „viewport“-Meta-Tag vergessen wurde. Dieser ist essenziell und gibt dem Webbrowser Anweisungen zur Skalierung der Seite, wodurch sich die Responsivität erst vollständig entfalten kann.
Daneben ist öfters zu sehen, dass animierte Inhalte auf manchen Gerätetypen nicht wiedergegeben werden können. Häufig handelt es sich um Flash-Animationen, die von Apples iOS nicht unterstützt werden. Setzt an dieser Stelle auf HTML5 und stellt Eure Animation als Video oder als SVG-Animation bereit, damit die Nutzer aller Gerätetypen sie abspielen können. HTML5 stellt einen eigenen Video- und SVG-Container bereit.
Beschleunigung durch Reduzierung und AMP
Lange Ladezeiten stellen gerade bei mobiler Internetnutzung ein Ärgernis dar. Bekanntlich springen nicht wenige Besucher ab, wenn eine Seite nicht innerhalb einer bestimmten Zeit geladen wurde. Deshalb ist eine hohe Ladegeschwindigkeit einer Seite mitentscheidend für deren Erfolg. Erreichen lässt sich dies durch eine Reduzierung des Seitenquelltextes, die Optimierung von Skripten und CSS-Anweisungen sowie die Reduzierung von Bildgrößen, beispielsweise durch eine stärkere JPEG-Kompression. Die Größe von PNG- und GIF-Dateien lässt sich über eine Absenkung der Farbtiefe verkleinern – allerdings bietet sich das in erster Linie bei Logos oder Zeichnungen an, wo die Anzahl der verwendeten Farben von vornherein begrenzt ist. Auch durch die Optimierung des browser- und serverseitigen Cachings lässt sich die Ladezeit verkürzen.
Das „PageSpeed Insights“-Tool von Google ermittelt die Ladegeschwindigkeit einer Seite und gibt individuelle Tipps zu deren Beschleunigung.
Wer einen Schritt weitergehen möchte, hat zusätzlich die Möglichkeit, Google AMP zu verwenden („Accelerated Mobile Pages“), Googles Abkömmling von HTML mit einem stark reduzierten Befehlssatz. JavaScript ist ebenfalls nur eingeschränkt erlaubt, hier muss auf Skripte zurückgegriffen werden, die seitens des AMP-Projekts zur Verfügung gestellt werden. AMP-konforme Webseiten werden von Google automatisch auf eigene Server geladen und über das eigene Content Delivery Network (kurz: CDN) ausgeliefert, wodurch sich die Ladegeschwindigkeit abermals steigern lässt.
Was Ihr sonst noch beachten solltet
Zum Schluss solltet Ihr prüfen und sicherstellen, dass in der Robots.txt-Datei die für das Seitenlayout benötigten CSS-Dateien nicht für Suchmaschinen gesperrt sind. Denn ohne sie erkennt der Googlebot möglicherweise nicht die Responsivität Eures Internetauftritts, sodass Eure Website in den mobilen SERPs erst weiter unten erscheint.
Fazit
Responsives Design ist das Mittel der Wahl, wenn es um die Erstellung moderner Webseiten geht. Nicht nur Nutzer von Smartphones bis hin zum Desktop-PC profitieren davon, gleichzeitig erhöht Ihr damit die Wahrscheinlichkeit für ein besseres Ranking bei Google. Auf dem Weg zur guten Auffindbarkeit in der mobilen Suche gibt es einige Fallstricke, die wir in diesem Beitrag erläutert haben, die sich aber relativ einfach vermeiden lassen.
Bildnachweis: © fotolia.com, Julien Eichinger
Kategorie(n): Ratgeber
Datum: 6. Dezember 2017