Webseiten, die im Sinne von responsivem Webdesign programmiert sind, passen sich automatisch dem Bildschirm (Viewport) an, auf dem sie angesehen werden (Smartphone, Tablet, Laptop, Desktop-PC etc. ). Videos, Bilder und Texte werden entsprechend des anzeigenden Bildschirms in die jeweils passende Form skaliert.
Häufig werden hierbei drei bis vier Größenschritte vorgegeben, in denen sich das Design verändert (z.B. werden bei einem breiten Bildschirm drei Spalten, auf einem weniger großen zwei und auf einem Smartphone nur eine Spalte angezeigt). Zwischen diesen Schritten zoomt das Design mit der Größe des Bildschirms mit.
Die Idee
Endgeräte werden immer breiter (große Monitore in den Büros), auf der anderen Seite immer kleiner (Smartphones). Daher muss sich das Design an die unterschiedlichen Darstellungen anpassen, natürlich sieht eine Seite auf einem 43 Zoll Monitor anders aus als auf einem 6 Zoll Smartphone, wo auch noch zischen Hoch- und Querformat unterschieden wird.
Das Grunddesign aller Seiten bleibt gleich – je nach Darstellungsmöglichkeiten werden die Inhalte aber an mehr oder weniger Platz angepasst. So kann man z.B. auf einem großen Bildschirm einen vierspaltigen Text sehen, auf dem kleinen ist er ein– oder zweispaltig, und die Navigation ist gut zu erreichen (und auch mit dem Finger zu bedienen).
Auf portablen Geräten gibt es keinen Maus-Cursor und auch keinen hover-Status sowie kein Flash und keine Dropdown-Menüs. Das muss beim Design und der Menüstruktur, sowie auch bei den Navigationselementen unbedingt für diese Geräte beachtet werden.
Seiteninhalte und Schriftgrößen werden nicht (mehr) absolut in Pixeln dargestellt, sondern „fluid“, also relativ zur Bildschirmgröße. So können sie sich der Größe der Seite anpassen. Auch Bilder „wachsen“ oder „schrumpfen“ mit der Größe des Bildschirms, sofern diese zumindest als JPGs eingebunden sind.
Mehraufwand beim Programmieren
Responsive Webdesign stellt – zunächst – einen Mehraufwand dar. Darstellungen müssen in verschiedenen Schritten geändert und der Bildschirmgröße und dem Nutzerverhalten angepasst werden. Darüber hinaus muss das Gesamtkonzept der Website den Blick auf die verschiedenen Darstellungen mit enthalten.
Ein wichtiger Punkt in diesem Zusammenhang ist die Navigation der Website. Daher ist die Konzeptionsphase einer Website mit RW länger. Dafür erhält man eine konsistente Website „aus einem Guss“, die sowohl lokal als auch mobil ähnlich zu bedienen ist. Der höhere Aufwand relativiert sich außerdem wenn man bedenkt, dass man ohne RW sonst vielleicht eine eigene mobile Version (mobi.xxx.de) oder sogar Apps für die verschiedenen portablen Betriebssysteme, z.B. iOs (Apple) und Android (Google) anbieten würde, und diese komplett neu entwickeln müsste.
Für RW ist es nötig, HTML5 und CSS3 zu verwenden, denn über die Media Queries, die in CSS3 enthalten sind, kann man die Darstellung des jeweiligen Geräts abfragen, auf dem die eigene Webseite gerade angezeigt wird.