Durch Tablets und Smartphones hat sich das Surf-Verhalten der Nutzer und damit auch die Anforderungen an Websites stark verändert. Während die Nutzung über Desktop-Geräte in den letzten Jahren relativ konstant geblieben ist, sind die Zahlen für mobiles Surfen stetig angestiegen und haben inzwischen in punkto Surf-Dauer pro Tag die Desktop-Geräte klar überholt. Für Google ist seit April 2015 die Bereitstellung einer mobilen Version der eigenen Seite ein wichtiger Ranking-Faktor, der klare Auswirkungen auf das Ranking innerhalb der mobilen SERPs hat. Begriffe wie „mobile friendly“ oder „mobile first“ sind inzwischen ein klarer Bestandteil jeder Online-Strategie.
Was ist Responsive Design
Responsive Design beschreibt die automatische Anpassung der Seitenstruktur und der grafischen Elemente einer Seite an das jeweilige Auflösungsformat des genutzten Geräts. Durch die unterschiedlichen Formate werden die einzelnen Elemente einer Seite neu angeordnet und ermöglichen es dem User so, die Funktionen einer Seite einfacher und besser zu nutzen.
Ein großer Vorteil des responsive Designs für Unternehmen ist die Einsparung von Ressourcen und Kosten im Unterhalt einer Website. Während früher noch für jedes Gerät eine eigene Seite erstellt werden musste, übernimmt nun das responsive Design die Anpassung. Doch nicht nur für Unternehmen ist dies ein großer Vorteil. Auch der User profitiert hierbei. Die Seite gewinnt an Übersichtlichkeit und die Reduktion auf das Wesentliche sorgt für ein besseres und schnelleres Handling.
Wie funktioniert Responsive Design
Responsive Design basiert auf HTML 5 und CSS 3 und passt sich durch Media Queries an die jeweiligen Eigenschaften des Nutzers an. Hierbei werden automatisch Eigenschaften, wie die Größe, Auflösung, Format oder die Eingabemöglichkeiten eines Gerätes abgefragt und die Seite dementsprechend angepasst. Um eine optimale Funktionsweise des Responsive Designs zu gewährleisten, müssen das Layout und der Inhalt der Website klar voneinander getrennt werden. Ist dies gegeben, passen sich grafische Elemente und die Schriftgröße automatisch an die Auflösung und das Format des Gerätes an.
Um sich an alle Formate anzupassen, werden die einzelnen Elemente einer Website neu angeordnet und einige ausgeblendet. Es ist daher sehr wichtig, eine klare Priorisierung der einzelnen Elemente zu definieren und somit zu gewährleisten, dass alle wichtigen Inhalte auch auf allen Geräten angezeigt werden. Hierbei müssen mehrere Stufen festgelegt werden, um die unterschiedlichen Breiten der Geräte zu definieren und sowohl auf einem Tablet als auch dem Smartphone den Inhalt der Website korrekt und für den User so angenehm wie möglich darzustellen.
Weiterführende Links / Quellen:
http://www.w3schools.com/html/html_responsive.asp
http://www.responsive-webdesign.mobi/infos-zu-responsive-webdesign/
