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