Responsive Webdesign
Die Größe und Auflösungen der Bildschirme / Displays auf Laptops, PCs, Tablet-PCs, Smartphones und TV-Geräten variieren sehr. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Webseite stark abhängig vom s.g. "Endgerät".
Moderne Webseiten sollten diese unterschiedlichen Anforderungen berücksichtigen. Um dem gerecht zu werden, wurde das so genannte „Responsive Webdesign“ entwickelt.
Der Inhalt (Content) einer Seite muss nur 1 Mal erstellt werden, auch die spätere Pflege der Inhalte wird zentral an einer Stelle durchgeführt. Das Layout bzw. Design der angezeigten Website sowie die Anordnung der verschiedenen Inhaltsmodule passt sich automatisch dem Endgerät an. Dies ist für den Betrachter sehr übersichtlich und benutzerfreundlich. Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt) handelt es sich um die technische Umsetzung eines anpassungsfähigen Website-Layouts.
Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neueste Webstandards wie HTML5 und CSS3.
Grundlage für perfektes Responsive-Webdesign ist immer das Zusammenspiel von einem erstklassigen Template, der verwendeten Komponenten, der Einstellung der Grundkonfiguration sowie der Abstimmung mit dem Auftraggeber, welche Elemente beispielsweise für die Smartphone- oder Tabeltansicht ausgeblendet werden können.
Technik des Responsive Webdesign
Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.
Ein Beispiel für Responsive Webdesign gefällig?
Bitte verkleinern Sie dieses Browserfenster von OBM-Media doch mal auf die ungefähre Größe eines Smartphones oder Tablets. Sie werden feststellen, dass sich die Ansicht "live" verändert. Inhaltsmodule (z.B. die rechte Kontextspalte) werden neu positioniert oder ggf. auch ganz weggelassen. Das Hauptmenü wird ebenfalls angepasst, so dass ein Navigieren mittels Smartphone und Tablet-PC problemlos möglich ist.
