Türchen 14: Was sind Viewports im responsive Webdesign?

  • Responsive Webdesign heißt, dass eine Website darart gestaltet ist, dass sie sich dem Gerät anpasst, auf dem sie angezeigt wird (Englisch "to respond to": antworten, erwidern, eingehen auf, reagieren auf).

    Dies umfasst drei Bereiche:

    • Anpassung an den sogenannten "Viewport" (sichtbare Breite des Bildschirms)
    • Anpassung an die Eingabemöglichkeiten (berührungsempfindliche Bildschirme, 1- oder 2-Finger-Gesten, rechte und linke Maustaste, Mouseover usw.)
    • Anpassung an die Übertragungsrate (Breitband, Mobilfunk)

    Teil 1: Viewport

    Webdesign für unterschiedliche Geräte erfordert ein Umdenken für Grafiker und Designer aus der Branche der Verlag- und Druckerzeugnisse. Dort ist die Regel, dass Plakate oder Buchseiten eine feste, unveränderliche Größe haben.

    Nach dem allgemeinen Verständnis gibt es fünf Standardgrößen für Bildschirme:

    Fünf Standardgrößen für Bildschirme im Responsive Webdesign

    • Sehr klein (XS - extra small): Entspricht Smartphone im Querformat
    • Klein (S - small): Entspricht Smartphone im Hochformat
    • Mittel (M - medium): Entspricht Tablet-Computer im Querformat
    • Groß (L - large): Entspricht Tablet-Computer im Hochformat
    • Sehr groß (XL - extra large): Entspricht Computerbildschirm

    Für die Gestaltung der Aufteilung empfiehlt es sich, die Oberfläche in fünf waagerechte Raster zu unterteilen und in Kacheln zu denken. Wird der Viewport kleiner, umbricht die fünfte Kachel auf die nächste Zeile.

    Responsive Webdesign: 5 Kacheln auf einer Zeile

    Verkleinert sich der Viewport weiter, umbricht die vierte Kachel auf die nächste Zeile.

    Responsive Webdesign: 4 Kacheln auf einer Zeile

     Auf diese Weise wird das Muster fortgesetzt, bis alle Kacheln untereinander liegen.

    Responsive Webdesign: 3 Kacheln auf einer Zeile

    Responsive Webdesign: 2 Kacheln auf einer Zeile

    Responsive Webdesign: 1 Kachel auf einer Zeile

    Dies ist nur eine mögliche Art, das Verhalten der Kacheln bei verschieden großen Viewports zu steuern.

    Weitere Möglichkeiten sind:

    • Kachel verkleinern (zum Beispiel bei Bildern)
    • Kachel weglassen
    • Neue Kachel hinzufügen
    • Kachel austauschen

    Wird dieses Prinzip für das gesamte Layout angewendet, so kann die Darstellung des Kopfbereiches und der Seitenleisten entsprechend automatisch optimal an die Displaygröße angepasst werden.

    Responsive Webdesign: Sidebars und Header für 3 Viewports

    Unterstützen Sie uns auf Startnext mit Ihrem finanziellen Beitrag!