responsive for Designers
Menü
Homepages
Templates
Redaktionssysteme
Responsive Design
home Homepages Templates Redaktionssysteme

Layouts für Responsive Design

Responsive Websites passen sich automatisch der Bildschirm-Breite der Geräte ihrer Besucher an, das heißt vor allem:

  • die Breite Ihrer Website passt sich automatisch an (fließend oder "in Sprüngen")
  • die Breite der Bilder und grafischen Animationen auf Ihrer Website passen sich automatisch an
  • mehrspaltige Layouts reduzieren sich in der Zahl der Spalten automatisch, je kleiner der Bildschirm wird
  • die Navigation auf Laptops und Smartphones wird ausgeblendet und dann über separate Buttons (Navi-Icons) aufgerufen
  • die Kontraste auf mobilen Geräten sollten automatisch erhöht werden
  • die anklickbaren Texte und Bilder sollten auf mobilen Geräten angepasst werden: der Zeigefinger auf Touchscreens ist ungenauer als der Mouse-Cursor.

Diese Veränderungen wirken sich je nach Design der Website unterschiedlich aus, die folgende grafische Animation zeigt einige Beispiele. Erläuterungen folgen weiter unten.

Erläuterung zu den Beispielen

Diese Beispiele lassen sich natürlich beliebig mischen und dienen nur der Anregung.

Die (klassische) Website

Websites wurden in den letzten Jahren meist in einer Breite zwischen 950 - 1000 Pixeln entworfen und hatten meist kaum mehr als zwei Layout-Spalten. Daher unterscheiden sich die beiden großen Varianten in der Regel nicht, erst die mobilen Varianten (Laptop und Smartphone) brechen auf einspaltige Layouts um und die Navigation erfolgt über die eingeblendeten Navi-Icons.

Die Galerie-Website

Mit der Vergrößerung der Monitore in den letzten Jahren ergibt sich nun die Möglichkeit, dass Websites die ganze Breite ausnutzen können. Nun kann also neben der klassischen Breite (950  - 1000 Pixel) auch eine "XL-Variante" angeboten werden, im Prinzip sogar mehrere (z.B. bis 1200 Pixel, eine zweite bis 1600 Pixel Breite etc.).

Die Portal-Website

Aktuell enthalten Websites-Layous häufig mehr als zwei Spalten, um wachsende Inhaltsmengen besser platzieren zu können. Dann reduzieren sich die Spaltenzahlen häufig schon zwischen großen und kleineren Monitoren. Häufig werden auch grafische Animationen eingesetzt, die die ganze Bildschirmbreite füllen. Solche aufwendigeren Layouts stellen in der Regel auch größere Herausforderung an die grafische Konzeption: z.B. Tabellen, Formulare und grafische Animationen müssen genau bedacht werden.

Umbruchpunkte für die Größen

Die nachfolgenden Angaben zu den Breiten der Geräte und Websites sind die (anpassbaren) Standards des bootstrap-Frameworks, mir dem w2media meist arbeitet.

Geräte Website
Smartphones (<768px) automatisch auf volle Breite
Tablets (768-992px) 750px breit
Laptops/schmale Screen (993-1199px) 970px breit
breite Screens (>1200px) 1170px breit

Typografie und Responsive Design

Die Schrift einer mobilen Website muss auf kleineren Bildschirmen und auch bei Sonneneinstrahlung lesbar sein. Beim Umgang mit Fonts sollte man daher Folgendes beachten:

  • Wenn man Tablets und Smartphones nutzt, stellenlängere Ladezeiten und schwierige Lichtverhältnisse zusätzliche Anforderungen an Designer. Die Hauptaspekte für gut lesbare Texte auf mobilen Geräten sind Schriftgröße, Kontrast und Spationierung (Spacing). Mit den modernen Browsern ist das zum Glück auch kein Problem mehr: Buchstaben- und Wortzwischenräume können definiert werden.
  • Viele Websites setzen Webfonts ein, die die Ladezeiten negativ beeinflussen: daher sollte man soweit wie möglich auf Webfonts verzichten. Will man als Designer einen Webfont einsetzen, sollte man in Erwägung ziehen, diese lediglich für Überschriften zu verwenden und den Fließtext in einer Standardschriftart zu halten.

Grafiken und Animationen im Responsive Design

Bilder, Fotogalerien und Animationen können auf mehrere Arten an die verschiedenen Bildschirmbreiten angepasst werden:

  1. die Breiten werden prozentual definiert: d.h. aber auch, das gerade auf den langsamsten Geräten die für die großen Screens erstellten Grafiken geladen werden müssen und dann "runtergerechnet" werden.
  2. der Platz für die Grafiken wird umsortiert: bei größeren Bildschirmen nimmt z.B. die Galerie in der mitteren Spalte 50% Raum der Gesamtbreite ein und die Thumbnails selbst sind vierspaltig aufgereiht. Bei kleineren Geräten wird die Bildergalerie auf 100% Breite gesetzt (die linke und rechte Spalte wird noch oben oder unten umsortiert) und die Thumbnails selber werden drei- und später zweispaltig angezeigt.
  3. es werden je Bildschirmbreite unterschiedliche Grafiken mit angepasster Größe geladen: dies eignet sich vor allem für Headervisuals und Logos.
  4. Grafiken werden bei kleineren Bildschirmbreiten ausgeblendet: bei Smartphones sind bestimmte Animationen und (Info-)Grafiken kaum oder nicht mehr lesbar: dieswee werden dann ausgeblendet.

Je nach Website kann man diese Techniken kombinieren. Vor allem für Websites mit Redaktionssystemen muss aber bedacht werden, das der Redakteur mit Grafiken in verschiedenen Größen für verschiedenen Bildschirmbreiten nicht oder nur mit erheblichem Aufwand arbeiten kann; da gilt noch mehr: einfach ist einfach besser.

Responsive Design und Workflow

Der traditionelle Workflow Konzept -> Design -> Programmierung -> Veröffentlichung funktioniert so kaum noch bei der Erstellung reponsiver Websites. Design und Programmierung müssen enger verzahnt werden, damit der Designer sieht, was möglich und wünschenswert ist. Bei größeren Websites ist es oft sogar hilfreich, einen responsiven HTML-Prototyp dem Kunden zeigen zu können, ehe alle Designantscheidungen im Detail getroffen werden: so weckt man keine falsche Erwartungen beim Kunden nach der Devise: "Das soll überall gleich gut aussehen!".

Das heißt vor allem, dass das inhaltliche Konzept von Anbeginn auf Responsivität zugeschnitten wird, die Inhalte hierarchisiert werden. Auch im späteren Prozeß kann der Kunde eingebunden werden, damit bei der finalen Version die Kundenwünsche auf allen Gräten beachtet werden können.