Wir leben in einer Zeit, in der wir nicht mehr nur mit dem Computer surfen, sondern auch mit dem Handy, Tablet oder Notebook mobil unterwegs sind. Die Produktpalette mobiler Devices wächst von Jahr zu Jahr an. Gerade deshalb ist das sogenannte Responsive Webdesign ein wichtiger Bestandteil des heutigen und auch des zukünftigen Webs.

Seit Ethan Marotte den Begriff 2010 erstmals einführte, befindet sich die Entwicklung in einem Aufwärtstrend. Mit der mobilen Internetnutzung steigt auch der Bedarf und das Aufkommen an Responsive Webdesign.

Wie der Name schon sagt, ist das Design dieser Seiten responsive, also reaktionsfähig. Somit verändert es sich entsprechend der Eigenschaften des Endgerätes, wie beispielsweise der Bildschirmgröße. Es existiert nur noch eine Website für alle Endgeräte. Das Design wird nicht mehr statisch festgelegt - Anordnung und Darstellung der einzelnen Elemente wie Navigationen, Spalten und Bilder sind variabel. Dadurch wird die optimierte Darstellung auf jedem Endgerät und dadurch auch geräteunabhängige Kommunikation ermöglicht.

Technische Basis hierfür sind die Webstandards HTML5, CSS3 und JavaScript. Die Darstellungen in verschiedenen Auflösungen werden über eine Technik namens Media Queries (CSS3) gewährleistet. Die Bildschirmgröße wird als Maßeinheit für den betreffenden Code-Teil verwendet. So können CSS-Definitionen für unterschiedliche Endgeräte ohne großen Aufwand aufgerufen werden. Je nach Auflösung kann sich also das Seitenlayout, die Anordnung und Größe der Elemente und Schrift sowie die Navigation ändern. Dabei muss nicht auf Javascript oder Änderungen im HTML-Code zurückgegriffen werden.

Fazit: Responsive Webdesign ist in einer mobilen Welt essenziell.

Wir haben euch ein paar gute Beispiele für Responsive Design herausgesucht, die wir auch vorstellen möchten. Unsere Website lassen wir dabei mal außen vor. Viel Spaß beim Stöbern!
Übrigens: alle von uns gestalteten und umgesetzten Webseiten sind - sofern nicht anders gewünscht - grundsätzlich responsiv und mobil-optimiert.

*Leider sind diese Webseiten nicht mehr aufrufbar. Zur Veranschaulichung haben wir sie aber dennoch in der Auflistung beibehalten.

Food Sense

fs

Trüf Design Studio

truf

Fliplingo *

flip

Cantina Valpolicella Negrar

cn

Starbucks

starbucks

Yoke Design Studio

yoke

XO Festival*

xo

Retr.io*

retrio

More Hazards

mh

Boston Globe

bg

Dieser Artikel ist schon über 2 Jahre alt. Unter Umständen kann das, worüber wir geschrieben haben durchaus veraltet sein! 😉 


Best Practice Design responsive Webdesign Web webdesign