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, reagierend
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 |
|---|---|
|
|
Responsive Webdesign
| Vorteile | Nachteile |
|---|---|
|
|
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