Responsive Webdesign

Responsive Webdesign (zu deutsch sich anpassendes Webdesign) steht für einen gestalterischen Ansatz (Design) einer Website.
Mit speziellen Techniken werden die Inhalte für unterschiedliche Endgeräte optimiert und der Fläche des Bildschirms angepasst.

Die Inhalte werden nicht auf jedem Gerät gleich angezeigt, sondern für den Nutzer so aufbereitet, dass die Seiten gut zu bedienen sind und der Inhalt schnell erfasst und gelesen werden kann.
Das Layout passt sich den unterschiedlichen Darstellungsformen von Desktop-Computer, Tablets und Smartphone an.

Responsive Design. Relaunch gefällig?

Media Queries - kurz erklärt

Mit Hilfe von Media Queries werden CSS-Daten auf bestimmte Gerätegrößen beschränkt.

In einer CSS-Datei, welche in einem HTML-Dokument eingebunden wird, wird die Darstellung der Inhalte geregelt.
Nach der Festlegung einer Darstellung-Version wird unterhalb der Regel mit Hilfe von Media-Queries die vorherige Regel  überschrieben und für bestimmte Endgeräte bzw. Bildschirmgrößen angepasst.

Beispiel:

{
/* Eingabe der geänderten Styles */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
}

Hiermit wird dem Browser die Anweisung gegeben bei einer Bildschirmdarstellung bei einer Mindestbreite von 768 Pixel und einer maximalen Breite von 1024 Pixel bestimmte Styles anzuzeigen. Bildschirme mit einer größeren oder einer kleineren Darstellung hingegen werden von diesen Styles nicht betroffen.

Im Anschluss kann dann eine ähnliche Anweisung für andere Bildschirme wie etwa für Smartphones gesetzt werden.

Ausführliche, mögliche Media Queries sind auf der Seite des W3C dokumentiert.

Mobile first oder Desktop first

"Mobile first" und "desktop first" steht für die unterschiedliche Herangehensweise bei der Gestaltung einer Website.

Mobile first

Mobile first beschreibt den Ansatz, erst das Design für mobile Geräte zu erstellen. Damit ist sichergestellt dass die wirklich wichtigen Inhalte in den Mittelpunkt geraten und bestmöglichst auch auf kleinen Smartphone-Displays gut zu sehen sind.

Im zweiten Schritt wird die Oberfläche für größere Bildschirme gestaltet. Weitere Inhalte können hinzukommen, bzw. nicht mehr untereinander sondern nebeneinander angezeigt werden.

Desktop first

Desktop first beschreibt die Planung der Inhalte ausgehend von Desktop-Computern. Ausgehend von der Darstellung auf Desktop- oder Laptop wird das Design ausgearbeitet.
Im Anschluss wird das Layout so verändert dass die Darstellung auf Tablet und Smartphone gut funktioniert.

Vor- und Nachteile gibt es für beide Ansätze. Wir raten dazu, die Gestaltung dem Inhalt und der Nutzergruppe anzupassen.

Fixed / Elastic / Fluide / Adaptive / Responsive

Fixed Design

Fixed Design: die Gestaltung wird in Pixel festgelegt. Der Entwickler legt sich auf eine feste Bildschirmgröße oder gar auf einen Browser fest. Wird der Viewport verändert, erscheinen waagerechte Scrollbalken oder der Inhalt ist nicht mehr komplett erfassbar. Vorteil: unkompliziert in der Umsetzung, in der "geplanten" Darstellungsgröße passt alles wie vorab gewünscht. Nachteil: Kompromisse bei der Nutzung weiterer Endgeräte.

Elastic Design

Dieses Layout ist nicht sehr oft zu finden. Der Inhalt vergrößert sich immer auf die komplette Breite des Viewports. Das heisst: die Website lässt sich theoretisch unendlich vergrößern und verkleinern. Um einen zu schmalen Viewport zu vermeiden wird üblicherweise ein Media-Query eingesetzt, damit die Skalierung an einem bestimmten Punkt stoppt.
Ein sehr bekanntes Internet-Versandhaus nutzt ein elastisches Design.

Fluides Design

Fluides Design wird erreicht in dem man den einzelnen Elementen keine festen Pixelwerte sondern Prozentwerte zuweist. Bei einem zweispaltigen Layout kann beispielsweise der Hauptspalte eine Breite von 75%, einen Abstand zur Seitenspalte von 2% und der Seitenspalte eine Breite von 23% zugewiesen werden. Der Text innerhalb der Spalten passt sich dem Bildschirm an. Mittels der Angabe von Mindestbreiten lassen sich unlesbare Spalten vermeiden und damit ist responsive Webdesign möglich!

Nachteil: während der Planung ist nicht jeder Zustand abbildbar - das Planungsdenken wie beim Druck ist nicht möglich. Die Umsetzung mit den richtigen Breakpoints und unterschiedlicher Medien ist sehr komplex.

Adaptive Design

Verschiedene Layouts werden für verschiedene Viewports entwickelt. Man erkennt adaptive Design daran dass, wenn man sein Browserfenster zusammenschiebt, bei verschiedenen Breakpoints das Design "springt".  Es gibt also einige Layouts, welche (mit Media Queries) auf verschiedenen Geräten angezeigt werden.
Nachteil: keine optimale Nutzung des Viewports, komplexe Planung um die "richtigen" Breakpoints und unterschiedlichen Layouts festzulegen.

Responsive Design

Responsive Design setzt auf fluide Layouts, adaptive Design auf starre. Flexible Raster, Bilder und Media-Dateien passen sich stets dem Viewport an. Nachteil ist die komplexe Planung, Umsetzung und Gestaltung.

Adaptive und Responsive Design ist aber in den allermeisten Fällen ein guter Weg, eine Homepage barrierefrei für alle Nutzer anzubieten.