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! 😉