Responsive Webdesign

Responsive Webdesign ist ein technischer Ansatz zur Gestalterischen Umsetzung von Webseiten, zur Darstellung auf unterschiedlichen Endgeräten mit verschiedenen Bildschirmbreiten, Bildschirmauflösungen und Bildschirmausrichtungen. Realisiert werden die unterschiedlichen Ausgabevarianten für das entsprechende Endgerät nicht durch Veränderung des HTML-Quellcodes, sondern durch Anpassung des CSS Style Sheets und damit durch Veränderung der Anordnung und Darstellung primärer Seitenelemente.

Ursache für Responsive Webdesign

In den letzten Jahren ist bei der Nutzung des Internets ein neues Zeitalter angebrochen. Waren bisher noch Desktop PC und Laptop die üblichen Endgeräte zur Darstellung von Internetseiten, so wurden diese nun durch mobile Endgeräte, wie Smartphones, Tablets, E-Reader, Fernsehgeräte und Spielekonsolen teilweise abgelöst, aber auch vielfach ergänzt.

Damit stand man jüngst vor dem Problem, das die Größe unterschiedlicher Displays erheblich von einander variierten. Anfänglich versuchte man dieses Problem durch gänzlich unterschiedliche Ausgabevarianten über Sub-Domains oder Browserweichen für bestimmte Endgeräte in den Griff zu bekommen. Doch der Markt entwickelte eine derartig große Vielfalt an Endgeräten, das dem Darstellungsproblem auf diesem Weg nicht mehr entgegen zu kommen war.

Begründer des Responsive Webdesigns

Der Begriff responsive Webdesign geht auf den Webdesigner und Entwickler Ethan Marcotte zurück. Er sprach im Mai 2010 in einem Artikel des Magazins „A List Apart“ erstmalig davon, wie sich ein Webdesign individuell an die differenzierten Endgeräte anpasst. Im Jahr 2011 verfeinerte Marcotte seinen Lösungsansatz detailliert und praktisch in seinem Buch „Responsive Webdesign“.

Etablierung des Responsive Webdesign

Schon im Jahr 2012 wurde auch die breite Öffentlichkeit auf das Konzept des responsive Webdesign aufmerksam und es wurde ein wichtiger Trend für die Zukunft des Webdesigns. Die mobile Nutzung des Internet stieg währenddessen stetig an, so das auch die Nachfrage hinsichtlich unabhängiger Darstellungsweisen von Internetseiten und deren Umsetzung vehement anstieg. Damit war die Relevanz des Konzepts bestätigt und das Jahr 2013 wurde offiziell zum „Jahr des Responsive Webdesigns“ ernannt. Mittlerweile hat sich das responsive Webdesign als feststehender Ausdruck in der Mediengestaltung durchgesetzt und viele Unternehmen stellen heute ihre Webseite auf responsive Webdesign um.

Responsive Webdesign in der Praxis

Responsive Webdesign lebt von Flexibilität und kann zum einen fließend oder in Stufen umgesetzt werden. Grundsätzlich legt man eine minimale und eine maximale Bildschrimbreite fest und definiert damit insbesondere nach unten hin den Bereich der Endgeräte die eine Seite darstellen können.

Bei einer fließenden Umsetzung passt sich die Webseite immer optimal in die Fensterbreite ein, das heißt wenn wenn man das Browserfenster verkleinert, verkleinert sich auch die Seite stufenlos. Die fließende Umsetzung birgt zum einen viele Tücken, wie die Anpassung der Schriftgrößen oder von Grafiken, gravierender sind jedoch die gestalterischen Einschränkungen. Zwar legt man ein allgemeines Design fest, jedoch ist die Wirkung oftmals sehr variabel, da die Seitenbreite allein durch den Besucher bzw. dessen Endgerät festgelegt wird.

Alternativ kann die Umsetzung in Stufen realisiert werden, wobei die Webseite für eine bestimmte Anzahl verschiedene Fensterbreiten optimiert wird. Bei der Darstellung wird die Stufe des Designs angezeigt, welche den Inhalt auf der Bildschirmbreite ohne waagerechtes Scrollen darstellen kann. Bei dieser Variante werden auch wieder fixe Einheiten für Breiten und Schriftgröße einsetzbar und die gestalterische Freiheit ist damit weit höher. Allerdings ist dies Variante aufwendiger in der Programmierung. Ebenso kann die Breite des Displays nicht immer vollständig ausgenutzt werden, was gerade bei kleineren Endgeräten ein bitterer Beigeschmack ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert