Responsives Design

Aus Online Marketing Wiki
Wechseln zu: Navigation, Suche


Da das Internet immer mehr über mobile Geräte mit sehr kleinen Displays genutzt wird, bedarf es einer neuen Art von Webdesign. „Responsives Design“ (engl. Responsive Webdesign) kann auf diesen Trend mit einem dynamischen grafischen Aufbau auf verschiedenste Displaygrößen reagieren. Im Mai 2010 tauchte der Begriff „Responsive Webdesign“ erstmalig in einem Artikel von Ethan Marcotte für das Magazin „A List Apart“ auf. 2011 brachte Marcotte ein Buch mit dem Titel „Responsive Webdesign“ heraus und bereits 2012 rieten Magazine wie .net magazine und Forbes zur Verwendung dieses neuen Designansatzes.

Was ist „Responsives Design“?

Beim „Responsiven Design“ handelt es sich um einen speziellen grafischen als auch technologischen Ansatz, der für die Erstellung einer Webseite zu Grunde gelegt wird. Die Darstellung und Anordnung von Navigation, Header, Seitenspalten und Textboxen reagieren auf die Eigenschaften des benutzten Endgerätes, insbesondere des Smartphones und des Tablets. Nicht nur die Elemente, sondern auch die verschiedenen Eingabemethoden (Maus, Touchpad oder Touchscreen) werden dabei berücksichtigt. Die Technologie hierfür bieten die neueren Webstandards HTML5, CSS3 und JavaScript.

Unterschied zwischen „Responsives Design“ und „Mobile Webseite“

Der entscheidende Unterschied zwischen dem Responsiven Design und einer „Mobilen Webseite“ besteht darin, dass kein zusätzliches Template zur Desktopvariante erstellt wird. Früher richtete man sich beim Aufsetzen einer Webseite nach der klassischen Desktop-Ansicht und bot den Benutzern mobiler Endgeräten ein unabhängiges, zusätzliches Template an. Beim „Responsiven Webdesign“ gibt es nur ein Template, das sich selbstständig den Eigenschaften des Endgerätes anpasst.

Vorteile

Trennt man die Mobil- von der Desktop-Version der Website, entscheidet sich also für den Ansatz der „Mobilen Webseite“ dann entsteht dabei natürlich ein doppelter Pflegeaufwand von redaktionellem Content, Technik und Footage. Das es verschiedene Tablet- oder Smartphone-Formate gibt und deren Entwicklung noch nicht abgeschlossen ist, muss man damit rechnen, dass man zukünftig vielleicht noch eine dritte oder vierte Version des Layouts benötigen wird.

Ziele

Beim „Responsiven Design“ stehen die größtmögliche Übersichtlichkeit und Benutzerfreundlichkeit im Fokus. Die Darstellung der Webseite soll sich nicht einfach nur der Bildschirmgröße anpassen, sondern auch die verfügbaren Eingabemethoden, Formulare und die Qualität der Internetverbindung berücksichtigen.

Grundlagen

Wesentliche Voraussetzung für solch ein reagierendes Design sind sogenannte Media Queries. Dieses CSS3-Konzept fragt im Vorhinein die Art und Eigenschaften des Gerätes ab und stellt die Webseite auf einem großen Gerät (PC-Bildschirm) anders da als beispielsweise auf einem Smartphone. Abfragekriterien können dabei sein:

  • Gerätegröße
  • Bildschirmauflösung
  • Bildschirmorientierung (Hoch- oder Querformat)
  • Eingabemöglichkeiten (Tastatur, Fingergeste [Touch], Sprache)

Verwendung des Responsiven Designs

HTML

Überschreitet das Endgerät die Bildschirmbreite von 480 Pixel nicht, wird automatisch das Stylesheet smartphones.css geladen. In dieser Ressource können die Anpassungen für die kleineren Displays der Smartphones – zumeist 320 bis 480 Pixel breit - vorgenommen werden. Bei der Verwendung in HTML ist von Nachteil, dass alle verfügbaren Stylesheets heruntergeladen werden.

CSS

In CSS können die Media Queries direkt in das Stylesheet eingebettet werden. Der Vorteil: Bestimmte Regeln werden vom Browser erkannt und nur dann beachtet, wenn sie den definierten Bedingungen tatsächlich entsprechen. Der Nachteil: CSS3 können von ältere Browsern (IE unter Version 9) nicht interpretiert werden. Abhilfe schaffen sogenannte „Polyfills“, die mittels JavaScript der Browser-Funktionalität nachhelfen.

Literatur: • Andrea Ertel und Kai Laborentz: Responsive Webdesign: Anpassungsfähige Websites programmieren und gestalten, 1. Auflage. Galileo Computing, 2013, ISBN 978-3836225823 • Ethan Marcotte: Responsive Webdesign. 1. Auflage. A Book Apart, New York, 2011, ISBN 978-0-9844425-7-7. • CSS3: HTML5 and CSS3: Develop with Tomorrow’s Standards Today (Pragmatic Programmers) ISBN 1-934356-68-9