Responsive Design: Vorsicht vor diesen Fallstricken
Responsive Design gilt – gerade nach dem Mobile-Friendly-Update vom 21. April 2015 – als Lösung für alle SEO-Probleme auf mobilen Webseiten. Doch gibt es einige Fallstricke, die es zu vermeiden gilt.
Was ist „Responsive Design“?
Grundlegend handelt es sich um einen Gestaltungsansatz, bei dem die Webseite auf verschiedene Darstellungsformate reagiert (engl. „responsive“ – reagierend) und nicht mit einer komplett eigenen Lösung für die mobilen Ansichten arbeitet – in der Vergangenheit wurde oft eine Subdomain für die mobile Ansicht verwendet (m.example.com oder mobile.example.com), die aber zusätzlich zur regulären Webseite gepflegt werden müssen und auf korrekte Canonical-Angaben angewiesen sind.
Ebenfalls leicht unterschiedlich von der Technik ist eine „adaptive“ Webseite, bei der sich das Design nach den verschiedenen Viewports richtet. So wird zum Beispiel definiert, dass bestimmte Elemente wie die Navigation eine andere Optik bekommen, wenn eine minimale Breite (1.024px für alles was kleiner als ein iPad ist) unterschritten wird. Eine komplett flüssige Anpassung findet dabei nicht statt, das Design „springt“ an den vorher festgelegten Größenwerten.
„Mobile First“ Ansatz
Oftmals wird eine Webseite, die komplett Responsive sein soll, nach dem „mobile first“ Ansatz erstellt. Dabei wird zuerst die Version für mobile Geräte erstellt, davon ausgehend dann die genutzte Fläche vergrößert. Dies bietet den Vorteil, dass auf jeden Fall die Darstellung auf Smartphones und Tablets optimiert ist – Desktop-Ansichten sind in der Regel unproblematisch und können im zweifel auch die Tablet-Variante verwenden. Um die „Mobile First“-Entwicklung zu vereinfachen, gibt es verschiedene Frameworks, die bekanntesten sind dabei „Foundation“ (worauf auch diese Webseite aufbaut) sowie „Bootstrap“, welches ursprünglich von Twitter entwickelt wurde.
Häufige Fallstricke
- Bildgrößen
Wichtig bei mobilen Webseiten ist nicht nur die dargestellte Bildgröße, sondern auch die tatsächliche Dateigröße. Gerade auf dem Handy spielt die Übertragungsrate eine entscheidende Rolle für die „Schwuppdizität“ (die gefühlte Reaktionszeit) der Seite. Lösungsansatz: Bilder als Hintergrundbild im CSS zu laden und bei verschiedenen Breakpoints verschiedene Hintergründe zu laden.
- Überflüssige Scripte & CSS
Scripte, die für Elemente gebraucht werden, die nur auf Desktop-Computer benötigt werden, sollten in der Mobile-Version nicht geladen werden. Dies betrifft sowohl CSS-Dateien (dies lässt sich via Media Queries lösen) als auch Javascript, z.B. wenn dieses für Animationen verwendet wird, die bei Mouseover ablaufen.
- Externe Einbindungen
Elemente, die z.B. per Iframe eingebunden werden, sind nur recht kompliziert auf die richtige Größe zu bringen. Dies betrifft z.B. Videoplayer. Ein Lösungsansatz ist es hier, mit einem Startbild (siehe Bildgrößen) zu arbeiten und „Onclick“ das entsprechende Element zu laden.
- Schlechte Usability
Gerade wenn eine Mobile-First-Webseite am Desktop entwickelt wird, wird oft vergessen, dass Events wie „Mouseover“ auf einem mobilen Gerät nicht vorhanden sind und damit auch keine Interaktionsmöglichkeit anzeigen können. Es muss also wirklich klar sein, welches Element sich anklicken lässt und welches nicht.
- Mangelndes Testing
Hat es für reine Desktop-Seiten gereicht, die gängigen Desktop-Browser zu testen, muss man jetzt eine Vielzahl von Geräten abdecken: Windows 10 Mobile, Android, iOS haben jeweils eigene Browser und verhalten sich womöglich je nach CSS unterschiedlich. Will man eine „Mobile First“-Webseite erstellen, muss man darauf achten, dass es auch auf den wichtigsten Endgeräten vernünftig aussieht.
Da gerade das CSS mit verschiedenen Breakpoints unübersichtlich werden kann empfiehlt es sich, mit einem CSS-Preprocessor wie SASS oder LESS zu verwenden. Dadurch kann man mit Variablen arbeiten und Funktionen verwenden, die den CSS-Code leichter pfleg- und erweiterbar machen. Zudem gibt es den Vorteil, dass der Preprocessor valides CSS generiert – gibt es Fehler, schlägt die Erstellung bereits fehl.
Fazit
Wer eine neue Webseite oder einen grundlegenden Relaunch plant, sollte eine echte Responsive-Webseite in betracht ziehen. Ob es dann eine adaptive Webseite mit verschiedenen, definierten Breakpoints wird oder eine „echte“, fluide Webseite hängt letztlich davon ab, wie viele Formate man abdecken will. Eine fluide Webseite ist prinzipiell noch etwas flexibler.
Kommentare
Responsive Design Fan 27. Dezember 2015 um 0:00
Vorsicht muss man immer walten lassen und nicht nur bei responsive Design. Sicherlich versuchen viele Webagenturen und Internetagenturen bei responsive Webdesign richtig abzukassieren. Damit dies jedoch nicht passiert, sollte man Einträge und Beiträge wie diesen lesen. Man sollte jedoch nicht die Notwendigkeit von responsive Web Design unterschätzen!