OSG Blog

Responsive Design: Vorsicht vor diesen Fallstricken 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... 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“?

Responsive Design funktioniert geräteübergreifend

Responsive Design funktioniert geräteübergreifend

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.

Responsive Design: Vorsicht vor diesen Fallstricken
4 (80%) 5 votes

Laura Höß

Laura Höß ist Teamleader im Bereich Media bei der Online Solutions Group GmbH und hat seit 2008 Erfahrung im Bereich Online Marketing. Sie ist neben der Betreuung der Großkunden, vor allem für die übergreifende Leitung des Teams und die Weiterentwicklung der Abteilung zuständig.

  • Stephan

    24. November 2015 #1 Author

    „Responsive Design gilt […] als Lösung für alle SEO-Probleme auf Mobile Webseiten.“
    Wer hat das denn jemals behauptet?

    Antworten

  • Responsive Design Fan

    27. Dezember 2015 #2 Author

    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!

    Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.