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


Responsive Webdesign, was ist das überhaupt? Wie der Name schon sagt, ist das Design dieser Webseiten responsive, also reaktionsfähig: Es verändert sich entsprechend der Eigenschaften des Endgerätes, wie beispielsweise der Bildschirmgröße. Statt mehrerer voneinander getrennter Versionen (Desktop, Mobil, App) existiert somit nur noch eine Website. Das Design wird hierbei nicht mehr statisch festgelegt – Anordnung und Darstellung der einzelnen Elemente wie Navigationen, Spalten und Bilder sind variabel. Dies ermöglicht die optimierte Darstellung auf jedem Endgerät und eine geräteunabhängige Kommunikation.

Gerade in der Zeit der mobilen Internetnutzung ist also Responsive Webdesign ein wichtiges Schlüsselwort. Kaum ein Nutzer surft noch ausschließlich mit dem Computer, sondern ist auch mit dem Smartphone, Tablet oder Notebook mobil unterwegs. Und die Produktpalette mobiler Devices wächst von Jahr zu Jahr an.

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

Die technische Basis liefern dabei 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. Um euch das Ganze noch einmal zu veranschaulichen empfehlen wir dieses Video:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Ein paar besonders schöne Beispiele für Responsive Design könnt ihr in unserem Blog finden, genau wie hilfreiche Tools zur Umsetzung der eigenen Website.

stoerer_blog_2