Back to top

Google "mobile friendly" Update: was Sie jetzt wissen sollten

Responsive Webseite auf verschiedneen Endgeräten

Bestimmt haben Sie es in den letzten Tagen mitbekommen: Google hat ernst gemacht und straft Webseiten ohne eine „mobile friendly“ Optimierung in den Suchergebnissen (SERPs) ab. Ohne eine solche Optimierung werden entsprechende Webseiten von Google nicht mehr angezeigt. Bei einem Marktanteil von über 94% in Deutschland und einem Anteil von 25,16% mit den mobilen Endgeräten (Tablets und Smartphones mit Android oder iOS) am gesamten Internetverkehr in Deutschland kann man sagen: ohne eine Optimierung verlieren Sie gut ein Viertel der Besucher bei Google. Je nach Branche kann der Anteil der Besucher über Smartphones und Tablets auch deutlich höher sein! Als "mobile friendly" betrachtet Google Webseiten, die für die Darstellung auch auf den kleineren Bildschirmen optimiert wurden. Dabei stehen verschiedene Techniken zur Verfügung.

Sollte Ihre Webseite noch nicht für mobile Geräte optimiert sein, besteht jetzt dringender Handlungsbedarf. Der Wachstumstrend bei der Internetnutzung über Smartphones ist noch lange nicht beendet und wird die Nutzung der Desktops bald einholen. Können Sie dann auf die Besucher mit Smartphone verzichten? Gerne beantworte ich Ihnen Ihre Fragen zum Thema und unterstütze Sie bei der Planung Ihrer Webseite.

Responsive? Adaptiv? Unterschiedliche Begriffe verstehen.

Eigene Webseite einfach testen

Google hat einen Test bereitgestellt, mit dem Sie ganz bequem testen können, ob Ihre Webseite bereits "mobile friendly" ist. So können Sie ganz einfach feststellen, ob Ihre Webseite in den mobilen Ergebnislisten angezeigt wird oder nicht.

Bestimmt haben Sie die beiden Begriffe schon einmal aufgeschnappt und wissen, dass die "irgendwas mit dem Internet" zu tun haben. "Responsive Web Design" und "Adaptive Web Design" werden dabei am häufigsten im Zusammenhang mit der Optimierung von Webseites für Smartphone und Tablets genannt. Beide Begriffe beschreiben ähnliche Techniken mit denen Webseiten an verschiedene Geräte angepasst werden können.

Adaptive Web Design (AWD) ≈ anpassungsfähig, verwendbar

Der Begriff Adaptive Web Design wurde in dem eBook „Adaptive Web Design“ von Aaron Gustafson erdacht und besteht im Kern aus verschiedenen Layouts für eine Webseite, welche für ausgewählte (nicht alle!) Bildschirmgrößen optimiert sind. In der Regel wird hier je eine Version für den Desktop, das iPad und das iPhone erstellt. Diese Geräte werden gerne herangezogen, da sie sehr verbreitet sind und die Geräteklassen nachhaltig definiert haben. Es handelt sich hierbei praktisch um an bestimmte Geräte angepasste Versionen der Webseite.

Responsive Web Design (RWD) ≈ reaktionsfähig, reagierendGoogle zeigt auf Smartphones nur noch Webseiten an, die mobile friendly sind

Das flüssige Layout des RWD bricht komplett mit dem gewohnten Gestaltungsprozess, da nicht mehr mit einem fixen Gestaltungsraster gearbeitet werden kann. Das flüssige Layout orientiert sich viel mehr an dem zur Verfügung stehenden Platz und versucht diesen optimal auszunutzen. Das erschwert die Arbeit mit Mockups, Wireframes und Skizzen, da diese auf statischen Medien angefertigt werden können. Mit dem Responsive Web Design kann das erste Mockup der Webseite nur noch als Basis für das Responsive Webdesign der Webseite dienen. Die Limitierung der Skizzen führt auch dazu, dass der Wechsel in Code-Editor wesentlich früher erfolgt und gemeinsam mit dem Kunden an einem Prototypen gearbeitet werden muss, der die dynamische Anpassung der Webseite an die verschiedenen Größen veranschaulichen kann.

Ihr Browser kann keine Videos abspielen :(

Das Video zeigt, wie sich eine Webseite im Resposive Design mit den verschiedenen Größen verhält.

Vor- und Nachteile der beiden Techniken

Beide Ansätze haben ihre spezifischen Vor- und Nachteile:

Adaptive Webdesign

Vorteile Nachteile
  • Arbeiten mit klassichen Gestaltungsrastern möglich
  • Technisch relativ einfach umzusetzen
  • Inhalte müssen nur für wenige Größen optimiert werden
  • Es werden nur bestimmte Geräte unterstützt
  • Häufige Fehldarstellungen auf nicht unterstützen Geräten
  • Aufwändige Analyse für welche Geräte optimiert werden soll
  • Oft mehr CSS-Code notwendig

Responsive Webdesign

Vorteile Nachteile
  • Alle Display-Größen werden berücksichtigt
  • Der Platz wird optimal ausgenutzt
  • Der Inhalt steht im Vordergrund
  • Auch zukünftige Geräte werden unterstützt
  • Kein klassisches Gestaltungsraster
  • Komplexer in der technischen Umsetzung und Gestaltung

Welche Display-Größen gibt es in der Praxis?

Betrachten wir allein die verschiedenen Displaygrößen, mit denen allein in den letzten 30 Tagen unsere Webseite hosysteme.de aufgerufen wurde, erhalten wir ein sehr heterogenes Bild der verschiedenen Display-Größen.

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Eine Darstellung der verschiedenen Display-Größen

 

Fazit

Betrachtet man die Anzahl der verschiedenen Display-Größen erkennt man schnell, dass ein Adaptive Web Design am Beispiel unserer Seite bereits eine Menge der Besucher nicht mehr berücksichtigen kann. Ein responsive Layout ist hier die einzig vernünftige Lösung! Aus diesen und anderen genannten Gründen kann man festhalten: Der Stand der Technik bei einer mobilen Webseite ist eindeutig „responsive“. Mit dem Ansatz "one size fits all" werden alle Geräteklassen optimal unterstützt, es müssen keine Anpassungen für einzelne Geräte vorgenommen werden und akutelle Standards werden berücksichtigt. Sollte Ihre Webseite noch nicht "mobile friedly" optimiert sein, wird es jetzt höchste Zeit! Beobachten Sie sich bei Ihrer nächste Google suche einfach selbst: wird die Seite nicht bei Google angezeigt existiert diese nicht!

Ich schreibe hier regelmäßig über Neuigkeiten und technische Entwicklungen. Darüber hinaus betreue ich auch den Twitter-Account @hosysteme. Als der Ansprechpartner für Marketing und Webseiten beantworte ich gerne auch Ihre Fragen. Folgen Sie mit bei Twitter @elbym oder erreichen Sie mich telefonisch im Büro.