Genau in einer Woche, am 21.04.2015, ist es soweit, dann wird Google seinen „neuen“ Algorithmus scharf stellen. Neu dabei soll eine (stärkere) Gewichtung der Optimierung für Mobilgeräte sein. Eine Sache die eigentlich auf der Hand liegt. Da immer mehr Nutzer mit Mobilgeräten (Smartphone, Tablets …) surfen, müssen die Seitenbetreiber sich auf dieses neue Nutzerverhalten einstellen und ihre Webseiten in Sachen Erscheinungsbild und Bedienung anpassen. Wer das macht, wird von Google belohnt, wer nicht, der nicht 😉 Was genau hinter dem „mobil-freundlichen Update“ steckt, wer reagieren sollte und wie man seine bisher statischen Seiten in ein responsives Kleid hüllt, das erfährt man nachfolgend.
Inhalt
Wer sollte seine Seite umstellen und wie?
Diese ganze Sache erinnert ein wenig daran als Google angekündigt hat, künftig https-Seiten im Algorithmus zu bevorzugen. Schon damals war der Aufschrei groß und viele folgten den Aufruf von Google, ohne die Thematik überhaupt reflektiert zu haben.
Generell betrifft die Algorithmus-Anpassung den mobilen Suchindex. Wer also sowieso keine oder nur einen geringen Anteil an Mobile-Nutzern hat, für den macht der überhastete Umstieg gar keinen Sinn. Wer hingegen voll auf Mobile-Nutzer setzt und bisher noch nicht reagiert hat, für den dürfte ohnehin alles zu spät sein.
Je nach dem wie die eigene Seite aufgebaut ist, fällt die Umstellung einfach oder könnte zu einem großen Problem werden. WordPress-Nutzer können beispielsweise einfach eins der unzähligen Plugins installieren, die schnell und unkompliziert eine mobil-freundlichen Blog zaubern. Ich werde dazu in den kommenden Tagen einige Plugins vorstellen.
Schwieriger haben es Nutzer von „statischen“ Seiten, also einfach HTML- oder PHP-Seiten, in denen der Inhalt direkt im Design ist und nicht aus einer Datenbank abgerufen werden. Hier ist nämlich Handarbeit angesagt, die ganz schön ausufern kann.
Test auf Optimierung für Mobilgeräte
Ob die eigene Seite denn schon die Ansprüche von Google hinsichtlich der Freundlichkeit gegenüber Mobilgeräten erfüllt, kann man ganz einfach unter: https://www.google.com/webmasters/tools/mobile-friendly/ testen. Entweder es gibt ein: „Großartig! Diese Seite ist für Mobilgeräte optimiert.“ oder aber ein „Nicht für Mobilgeräte optimiert“ und viel, viel Arbeit.
Bei Fall 2 hat man nun verschiedene Möglichkeiten. Man kann die Website „responsive“ machen, dann wird das gleiche Design unter der gleichen URL jeweils dynamisch an das Endgerät angepasst oder aber man kann auch ein extra Mobilgeräte-Design erstellen, dass dann den jeweiligen Nutzern unter der gleichen oder einer separaten Domain angezeigt wird.
In diesem Beitrag möchte ich auf ersteres näher eingehen. Konkret soll es nachfolgend darum gehen, wie man die vorhandene „statische“ Seite dynamisch macht.
Wie ein Responsive Design aufgebaut wird
Um ein statisches Design in ein responsives Design umzuwandeln geht man nach folgenden zwei Schritten vor:
- Man macht das statische Design elastisch/flexibel, sprich man arbeitet nicht mit festen Breiten und Höhen, sondern mit prozentualen, sodass sich das Design der jeweiligen Bildschirmgröße anpassen kann.
- Im zweiten Schritt kann man das flexible Design nun responsive machen, in dem man genau anweist, in welchen Fällen sich das Design wie verhalten soll.
Die Umwandlung von einem statischen in ein responsives Design macht dieser Beitrag auf t3-developer.com denke ich recht gut klar. Schaut unbedingt dort einmal vorbei, damit ihr das ganze auch in die Praxis umsetzen könnt.
Zu einem responsiven Design gehört auch die Anpassung von bestimmten Elementen. Darunter zählt beispielsweise die Website-Navigation, die für eine optimale Bedienung am Mobilgerät separat angepasst werden muss. Zum Glück gibt es hier bewährte Design-Muster und fertige Lösungen, sodass der Aufwand sich in Grenzen hält. Mehr dazu gibt es im nächsten Kapitel.
Die Navigation ist einer der Knackpunkte beim responsiven Design. Denn gerade auf kleinen Smartphone-Displays sind die meisten Navigationen, wie man sie von der Desktop-Ansicht kennt, entweder schlecht zu bedienen und/oder nehmen einfach zu viel Platz auf den Bildschirm ein. Es gibt deshalb die verschiedensten Design-Pattern für Navigationsmenüs im responsive Webdesign, die jeweils ihre eigene Vor- und Nachteile haben. Hinzu kommt, dass es oft auch Geschmackssache ist, zu welchen Pattern man denn nun greift. Unter anderem könnt ihr zwischen folgenden Pattern wählen:
- Navigation nicht verändern
- Select Menu – Dropdown Menü
- (Multi) Toggle – Accordion(-artig)
- Menu Overlay – Dropdown Menü
- Off Canvas – Das Navigations Menü verschwindet
- Grid Based – Tabulare Ansicht
Die Vorteile und Nachteile zu diesen Navigationspattern, sowie unterstützende Bibliotheken zur Umsetzung findet man hier: http://t3n.de/news/responsive-webdesign-teil-2-502167/
Weitere Pattern findet man unter anderem auch auf: http://exisweb.net/incredibly-useful-list-of-responsive-navigation-and-menu-patterns
Ich selbst habe bisher zu Dropdown Menüs gegriffen und mit „Responsive Nav“ (http://responsive-nav.com/) ganz gute Erfahrung gemacht. Sehr schnelle und einfach Umsetzung, allerdings mit dem Nachteil, dass JavaScript benötigt wird.
Bilder responsive machen
Das schönste responsive Webdesign bringt nichts, wenn die darin integrierte Bilder nicht auch responsive gemacht wurden. Früher war das einfach, per CSS griff man auf einen Kompromiss zurück, der zwar nicht ideal war, aber genau das machte was man wollte: Das gleiche Bild wird für alle Displaygrößen flexibel angezeigt und zwar mit dem einfachen CSS-Code:
img {
max-width: 100%;
height: auto;
}
Auf diesen „Trick“ kann man natürlich immer noch zurückgreifen. Allerdings bringt diese Methode auch einige Nachteile mit sich. So wird immer das selbe Bild ausgeliefert und lediglich nur skaliert. Bei einer Auslieferung auf ein Smartphone schadet dies beispielswesie in vielen Fällen die Performance und belastet die Bandbreite, was aber völlig unnötig ist, da ein kleineres Bild hier völlig genügt hätte.
Es macht also Sinn, bei verschiedenen Auflösungen/Geräte auch verschiedene Bilder auszuliefern bzw. anzeigen zu lassen. Dafür gibt es das inzwischen neue HTML-Element, sowie die neuen Attribute srcset und sizes, sowie die Werte x, w und vw.
Möchte man nun beispielsweise, wie oben vorgeschlagen, verschiedene Bilder bei verschiedenen Anzeigenbreiten (Viewport-Breiten) anzeigen lassen, dann würde man auf das srcset-Attribut und den w-Wert folgendermaßen zurückgreifen:
<img src="klein.jpg" srcset="klein.jpg 320w, mittel.jpg 600w, gross.jpg 900w"
alt="Variable Größe" />
Das ganze funktioniert nun folgendermaßen. In kompatiblen Browsern überschreibt das srcset-Attribut das src-Attribut. Der w-Wert beschreibt die physikalische Breite des Bildes in Pixeln. Je nach dem die Viewport-Breite also groß ist, wird ein anderes Bild ausgeliefert und angezeigt. Bei Viewports unter 320 Pixel Breite wird dementsprechend das Bild klein.jpg, bei einer Größe des Viewports von größer als 320 Pixel und kleiner 600 Pixel wird das Bild mittel.jpg und ab 600 Pixel das Bild gross.jpg geladen. Das „normale“ src-Attribut gilt übrigens als Auffanglösung. Falls der Browser nicht mit dem srcset-Attribut umgehen kann, wird das Bild aus dem src-Attribut ausgespielt.
Eine alternative Schreibweise mit dem Picture-Element wäre übrigens:
<picture> <source srcset="goss.jpg" media="(min-width:900px)"> <source srcset="mittel.jpg " media="(min-width: 600px)"> <source srcset="klein.jpg" media="(min-width: 320px)"> <img src="klein.jpg" /> <picture>
Einen ausführlichen Beitrag rund um das Thema mit einigen Beispielen findet man unter: http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/
Für Suchmaschinenoptimierer könnte folgender Beitrag noch interessant sein: http://www.stefan-weiss.net/responsive-image-seo.htm. Darin wird untersucht, welche Bilder Google wie schnell indexiert.
Responsive Ads
Ja auch das Geld verdienen sollte ab sofort responsive geschehen. Bei Google Adsense gibt es ja schon „Responsive Anzeigeblöcke“, also Anzeigen die ihre Größe automatisch anpassen. Ich setze seit kurzem auf einigen Projekten diese responsiven Anzeigen an, kann aber bisher noch nicht viel dazu sagen.
Sieht man mal von Google Adsense ab, hängen die meisten Online-Vermarkter bei diesem Thema noch ganz schön hinterher. Man ist in vielen Fällen auf sich allein gestellt und muss sich selbst etwas basteln. Wer ganz normale Display Ads in jedem responsive Design ausspielen möchte, ohne den Ad-Code zu modifizieren, der sollte sich mal das Projekt Lazy-Ads anschauen: https://github.com/madgex/lazy-ads
Fazit
Je nach dem wie alt die Website ist, muss man teilweise viel Arbeit in die Umsetzung zu einer mobil-freundliche Seite stecken. Deshalb sollte man sich immer erst einmal Fragen, ob die Umstellung wirklich nötig ist oder nicht. Mit diesem Beitrag wollte ich euch einen kleinen Überblick bieten, welche Baustellen es gibt, wenn man von einem statischen zu einem responsiven Design wechseln möchte. Das war natürlich nur ein kurzer Überblick. Das Thema Responsive Design füllt ganze Bücher
Wie sieht es bei euren Seiten aus? Schon auf ein responsives Design umgestellt oder lasst euch das Google Update kalt? Ich freue mich auf eure Antworten und Meinungen.
* = Affiliate-Link