Responsive Webdesign

Unter Responsive Webdesign versteht man die Anpassung des Layouts an verschiedene Bildschirmauflösungen. Die Skalierbarkeit von Texten, Bildern oder gar Videos steht hier im Vordergrund. In Zeiten der mobilen Endgeräte wie Smartphones und Tablets wird Responsive Design immer bedeutender.

Für einen mobilen Surfer ist es sehr umständlich unleserliche und visuell unschöne Webseiten auf dem Smartphone aufzurufen. Usability sieht in diesem Fall anders aus: Kein Vergrößern des Contents mehr durch Fingerbewegungen, sondern eine skalierbare Darstellung der Unternehmensinhalte. Mittels Responsive Webdesign wird das Gerät des Webseitenbesuchers erkannt und die Ansicht automatisch optimiert. Ob vier Spalten nebeneinander oder alle untereinander anordnen: Die Aufteilung auf dem mobilen Display kann unterschiedlich gelöst werden.

Navigation als Button-Ansicht
Die mobilen Bildschirmauflösungen reichen von 240×320 Pixel und gehen bis zu 1024×600 Pixel. Bei der Umsetzung des Designs ist darauf zu achten, dass der mobile User die Navigationsstruktur der Webseite nicht komplett neu präsentiert bekommt, sondern Bekanntes auch auf seinem Smartphone oder iPad wiederfindet. Doch wie gelingt das? Mobile User surfen bekanntlich komplett anders als am stationären PC. Eine mögliche Lösung ist die Button-Auflistung der ursprünglichen Navigation.

Untereinander findet der Nutzer die Menüpunkte auf voller größe auf Smartphone & Co. Eine andere Variante ist ein Dropdown-Menü, mit dem viel Platz eingespart werden kann. So kann der User individuell die angebotenen Menüpunkte auswählen. Schon hier wird klar: Responsive Webdesign reagiert auf das Userverhalten, egal welche Auflösung verwendet wird. Tabellen, Logos und Texte passen sich flexibel an das Display an.

Designer müssen umdenken
Die Zeiten von fixierten Bildern und festgelegten Schriftgrößen sind vorbei. Beim Responsive Design muss daher mit einer prozentualen Pixelgröße gerechnet werden anstatt mit fest vorgelegten Maßstäben. Eine Schriftgröße von 14pt ist auf einem großen Monitor angenehm, auf dem iPhone allerdings nicht gut lesbar. Passende JavaScript Plugins sorgen für die optimale Anpassung der Texte und Überschriften. Auch die Bilder dürfen nicht zu groß sein, denn diese sorgen für eine lange Wartezeit auf mobilen Geräten. Über die Module CSS3 Media Queries lässt sich der Content bequem anpassen. Auch der Headbereich sowie der Footer lassen sich über die CSS3 Queries bearbeiten.

Responsive Design ist der Trend 2012. Machen Sie ihre Webseiten für alle mobilen Formen zugänglich. Tipp: Skeleton Framework – Ein Framework für “Responsive”, mobil-freundliche Entwicklung.