Responsive Webdesign

Natürlich wünscht sich heutzutage jeder eine mobile Websiteversion, maßgeschneidert auf sein mobiles Endgerät. Ein spezielles Design für das BlackBerry, ein Anderes für das iPhone, das iPad, sowie das netbook – und dabei müssen alle Auflösungen miteinander kompatibel sein. In den nächsten fünf Jahren, werden die Webentwickler mit der Aufgabe konfrontiert werden, für eine Fülle von neuen Erfindungen Oberflächen zu gestalten und man wird sich dabei fragen, wann dies wohl ein Ende finden wird.

Im Bereich der Webentwicklung werden wir an einen Punkt geraten, wo wir nicht mehr in der Lage sein werden, für diese Vielzahl von Auflösungen und Geräten Oberflächen zu entwickeln. Für viele Websites immer wieder eine neue Version zu entwerfen, wenn ein neues Gerät auf den Markt kommt, wird unmöglich sein.

Vor einigen Jahren, als flexible Layouts noch als ein Luxus für Websites galten, waren das Einzige, was an dem Design flexibel war, die strukturellen Elemente und der Text. Bilder führten leicht dazu, dass gesamte Layout zu zerstören und strukturelle Elemente führten ebenfalls zu verzerrten Darstellungen des Inhalts. Flexible Designs waren nicht wirklich so flexible; sie konnten zwar ein paar hundert Pixel überbrücken, aber sie waren eigentlich nie in der Lage, sich von einem Computerbildschirm auf ein Netbook umzustellen.

Heutzutage können wir die Dinge flexibler gestalten. Bilder können sich nun automatisch anpassen und wir haben Workarounds die dafür sorgen, dass das Layout nicht mehr bricht.

Responsive Webdesign („reagierendes Webdesign“) ist der Ansatz der vorschlägt, dass die Gestaltung und die Entwicklung auf die Umgebung und das Verhalten des Nutzers, basierend auf der Bildschirmgröße, der Plattform und der Orientierung reagiert. In der Praxis besteht Responsive Webdesign aus einem Mix aus flexiblem Strukturen, Bildern und dem intelligenten Einsatz von CSS Media Queries. Wenn der Besucher der Website von seinem Laptop zu seinem iPad wechselt, sollte sich die Seite automatisch auf das neue Endgerät anpassen. Mit anderen Worten, die Website soll die Technologie besitzen, automatisch auf die technische Situation des Betrachters zu reagieren. Das würde vermeiden, für jedes neue Endgerät ein neues Design entwerfen zu müssen.

Responsive Webdesign benötigt eine abstraktere Denkweise und präsentiert eine neue Herangehensweise beim gestalten. Es gibt gegenwärtig noch kein „Rezept“ für diese Technik, jedoch haben sich schon einige Methoden in diesem Kontext etabliert. Im Folgenden werden diese verschiedenen Techniken und Methoden vorgestellt. [vgl. Knight 2011]

CSS Media Queries

CSS3 (Cascading Stylesheets 3) unterstützt alle Medientypen von CSS2.1, wie z.B. screen, print und handheld, aber hat ein Dutzend neuer Medieneigenschaften dazu bekommen, wie z.B. max-width, device-width, orientation und color. Neue Geräte die nach der Veröffentlichung von CSS3 herauskamen (wie z.B. das iPad oder Android Geräte) werden definitiv die neuen Medieneigenschaften unterstützen. Wenn man ein CSS3 Attribut verwendet, um ein neues Endgerät anzusprechen, wird dieses wahrscheinlich problemlos funktionieren. Ältere Endgeräte werden die neuen CSS3 Eigenschaften dabei einfach ignorieren. Aktuell gibt es neun verschiedene Medientypen:

1. aural Sprachbrowser
2. braille Geräte mit Braillezeile
3. embossed Brailledrucker
4. handheld Mobiltelefone & Handcomputer
5. print Drucker
6. projection Projektoren
7. screen Monitore
8. tty Ausgabemedien mit Festbreitenschrift
9. tv Fernseher

Mit Hilfe von CSS Media Queries ist man in der Lage, Stylesheets abhängig von den Eigenschaften eines Mediums oder eines Ausgabegerätes zu laden. Es sind logische Ausdrucke, die Medien mit speziellen Medienmerkmalen miteinander verknüpfen können. Für diese Verknüpfungen existieren einige Schlüsselwörter:

1. and Dient als logisches Und
2. , Dient als logisches Oder
3. not Dient als logische Negation
4. only Dienst als Workaround für ältere Browser, die Media Queries nicht verstehen

Um z.B. eine bestimmtes Stylesheet, was z.B. speziell für die Darstellung einer mobilen Version einer Website dient einzubinden, kann man folgendermaßen vorgehen:

@media (max-width: 450px) {
  /* Stylesheet fuer mobile Geraete */
}

Es ist allerdings auch möglich, mittels min-width und max-width definierte Bereiche anzugeben, um so z.B. speziell Netbooks anzusprechen:

@media (min-width: 450px) and (max-width: 950px) {
  /* Stylesheet fuer Netbooks */
}

Zusätzlich können nun noch die Medientypen in Verbindung mit speziellen Medieneigenschaften zum Einsatz kommen. Im folgenden Beispiel wird gezeigt, wie man vorgehen könnte, um die Darstellung an ein iPad anzupassen.

@media screen and (orientation: landscape) {
  /* Stylesheetklasse fuer iPads mit landscape Orientierung */
  .iPadLandscape {
    width: 25%;
    float: right;
  }
}

@media screen and (orientation: portrait) {
  /* Stylesheetklasse fuer iPads mit portrait Orientierung */
  .iPadPortrait {
    clear: both;
  }
}

Im Folgenden wird eine Übersicht der Medieneigenschaften präsentiert, auf die man mittels Media Queries zugreifen kann, um ein spezielles Endgerät mit gewissen Eigenschaften anzusprechen:

1. width Breite der Anzeigefläche
2. height Höhe der Anzeigefläche
3. device-width Breite des Geräts
4. device-height Höhe des Geräts
5. aspect-ratio Quotient von width und height
6. device-aspect-ratio Quotient von device-width und device-height
7. orientation Ausrichtung des Geräts (portrait oder landscape)
8. color Farbtiefe des Geräts
9. color-index Einträge (Anzahl) in der Farb-Lookup-Tabelle des Geräts
10. monochrome Bits pro Pixel im Bildspeicher eines einfarbigen Geräts [vgl. Jendryschik 2010]

Responsive Images

Eine besondere Herausforderung, in der Thematik von Responsive Webdesign, stellt der Umgang mit Bildern und Grafiken dar. Es gibt eine Reihe von Techniken um Bilder proportional zu skalieren und Viele sind auch verhältnismäßig leicht umzusetzen.

Die einfachste Variante ist die Verwendung von CSSs max-width für eine einfache Lösung.

img {
  max-width: 100%;
}

Solange keine andere Regel innerhalb des Stylesheets diese überschreibt, wird jedes Bild in der Originalgröße geladen, jedoch auf die Sichtfläche prozentual angepasst. Die maximale Breite des Bildes wird auf 100% der Sichtfläche gesetzt, so dass wenn die 100% weniger werden, das Bild prozentual mitskaliert wird. Prinzipiell sollte man bei dieser Technik die verwendeteten Bilder in der Größe anlegen, in der man vor hat, sie maximal zu nutzen. Höhe und Breite wird dabei nicht fest im Quelltext angegeben, stattdessen überlässt man dem Browser die Skalierung der Bilder mittels relativer CSS Angaben.
Während diese Technik eine gute Lösung und einen guten Start in Responsive Images bietet, stellen allerdings Bildauflösungen und Downloadzeiten weitere Problematiken dar. Die Bilder werden zwar in der korrekten Größe präsentiert, brauchen jedoch verhältnismäßig lange zum Laden, obwohl es sich evtl. nur um eine winzige Darstellung auf einem iPhone handelt.

Eine bessere Variante, wie in Abbildung 1.10 zu sehen ist, präsentiert dagegen die Filament Group. Sie greifen die Idee des flexiblen Bildes auf, skalieren allerdings nicht nur proportional, sondern sie tauschen auch noch ab einer gewissen Auflösung das Bild gegen ein Kleineres aus. Das hat den Vorteil, dass bei kleineren Sichtflächen (z.B. Smartphones), keine extrem großen Bilder geladen werden müssen, um anschließend herunterskaliert zu werden. Dies spart an Ladezeit und reduziert die fehlerhafte Darstellung von Bildern bei extremen Skalierungen.

Responsive Image auf www.filamentgroup.com

Um dies technisch zu realisieren, haben sie das neue optionale HTML Attribut data-fullsrc verwendet, um neben dem herkömmlichen Attribut src noch ein weiteres Bild angeben zu können. Den Austausch der Bildquellen haben sie mit der Hilfe eines dynamischen Javascripts und einem definierten „Breakpoint“ (Sichtbereichsbreite wo der Wechsel der Bildquellen stattfindet) gelöst.

Diese Technik wird von allen aktuellen Browsern, wie IE8+, Chrome, Safari, Opera, als auch von allen mobilen Endgeräten die dieselben Browser (iPhone, iPad, etc.) verwenden untersützt. Ältere Browser, sowie der Firefox, verhalten sich ebenfalls korrekt, bis auf die Tatsache, dass sie beide Bilder (das kleine und das große) im Hintergrund laden. Das hat zur Folge, dass die Ladezeit in diesem Fall nicht mehr reduziert wird. [vgl. Knight 2011]

Ein- und Ausblenden von Inhalten

Es ist natürlich möglich, alle Elemente einer Website proportional zu verkleinern, sodass alles in das individuelle Sichtfenster des Gerätes passt. Es ist gut, dass es möglich ist, aber es ist nicht immer der richtige Weg jedes Element, was auf einem großen Bildschirm zu sehen ist, auch auf einem kleinen, mobilen Gerät sichtbar zu machen.

Bei Responsive Webdesign sollte es nicht nur darum gehen, flexible Oberflächen für möglichst viele Plaformen und Bildschirme zu entwickeln. Es sollte auch darum gehen, sich auf das wesentliche zu beschränken und dem Nutzer zu überlassen, ob er weitere Details erfahren will, oder nicht. Diese sollte er dann auf einfache Art und Weise anfordern können.

Mit der Möglichkeit, Inhalte mit dem CSS Attribut display leicht ein- und auszublenden, Seitenelemente umzupositionieren und Bilder automatisch zu skalieren, kann ein Design für eine Vielzahl von Auflösungen und Endgeräte optimiert werden. [vgl. Knight 2011]