Neun Grundprinzipien von Responsive Webdesign
Kommentare

Angesichts der zunehmenden Anzahl an Devices, mit denen das Internet genutzt werden kann, ist ein Responsive Webdesign eine gute Lösung, um den eigenen Content für verschiedene Displaygrößen zu optimieren.

Dabei wird nicht länger nur für Desktop und Smartphones designt, auch die Darstellung auf anderen Devices, etwa TV-Bildschirmen oder Wearables muss bedacht werden. Das Web muss also fluider werden – Sandijs Rulukus erklärt anhand neun Grundprinzipien von Responsive Design, wie das umgesetzt werden kann.

Flexibilität mit Responsive Webdesign

Vielen Webdesignern fällt es schwer, Responsive Webdesign umzusetzen, wenn sie Layouts aus einer Print-Perspektive betrachten – immerhin gibt es im Responsive Design keine starren Seitengrößen oder festgelegte Angaben in Millimetern, an denen man sich orientieren kann. Darum hat Sandijs Rulukus einige Grundprinzipien des Responsive Webdesigns zusammengestellt, um Webdesignern den Zugang zu vereinfachen. Dazu gehört:

1.    Responsives oder Adaptives Webdesign?

Auf den ersten Blick erscheinen Responsives und Adaptives Webdesign gleich. Tatsächlich ergänzen sich beide Ansätze, sodass es keine Faustregel gibt, wann das eine oder das andere genutzt werden sollte. Stattdessen kommt es auf den Content an, anhand dessen entschieden werden muss, welches Design sich für dessen Darstellung besser eignet.

2.    Flow

Auf kleineren Displays nimmt der Content mehr vertikalen Platz ein. Bei einem statischen Design kommt es schnell zu Überlagerungen, sodass Content nur schlecht oder gar nicht lesbar ist. Im Responsive Design gibt es daher den Flow, sodass Content weiter nach unten verschoben wird und so lesbar bleibt.

3.    Relative Einheiten

Es gibt nicht nur verschiedene Displaygrößen, auch die Pixeldichte variiert. Dementsprechend ist Responsive Design auf flexible Einheiten wie zum Beispiel Prozent angewiesen. Wird ein Element auf 50 Prozent Breite gesetzt, nimmt es immer die Hälfte des Displays ein – egal, wie groß das Display ist. Bei statischen Einheiten wie Pixel funktioniert das nicht.

4.     Breakpoints

Mit Breakpoints kann festgelegt werden, an welchen Stellen das Layout sich verändert, etwa, wo beim Wechsel von Desktop- zu mobilem Device ein mehrspaltiges Layout in ein einspaltiges Layout umgewandelt wird.

5.    Maximale und minimale Werte

Während es sich bei mobilen Devices anbietet, dass der Content das gesamte Display einnimmt, ist eine solche Darstellung auf einem TV-Bildschirm meist nicht optimal. Das Definieren von maximalen und minimalen Werten kann dabei Abhilfe schaffen, etwa indem die Breite auf 100 Prozent gesetzt wird und die maximale Breite auf 1000px.

6.    Nested Objekte

Nutzt man relative Einheiten, bedeutet das, dass mehrere Elemente voneinander abhängig sind. Um die Darstellung einiger Content-Typen wie Logos oder Buttons zu optimieren, bietet es sich an, sie in einem Container zusammenzufassen, um zu verhindern, dass einzelne voneinander abhängige Elemente auseinandergerissen werden.

7.    Mobile First oder Desktop First?

Vom technischen Standpunkt aus betrachtet macht es wenig Unterschied, ob die Gestaltung des Projekts mit einem Mobile-First oder einem Desktop-First-Ansatz begonnen wird. Allerdings kann der Mobile-First-Ansatz dabei helfen, Layout-Entscheidungen zu treffen, weil sich so bereits in einem frühen Designstadium mit den Layout-Einschränkungen auf mobilen Devices beschäftigt wird.

8.    Webfonts oder Systemfonts?

Für ein Responsive Webdesign bietet es an, die vorhandenen Systemschriftarten zu nutzen. Webfonts sehen zwar häufig besser aus, allerdings kann die Verwendung vieler Webfonts auf einer Seite die Seitenladezeit deutlich beeinträchtigen und sich so negativ auf die User Experience auswirken.

9.    Bitmap-Bilder oder Vektoren?

Bei der Darstellung von Bildern in Responsive Webdesign scheiden sich die Geister, welche Methode die beste ist. Bei sehr aufwändigen und detaillierten Icons sollte eher auf ein Bild im JPG-, PNG- oder Gif-Format zurückgegriffen werden, für andere Bilder bietet sich eher ein Vektor im SVG-Format an.

Es gibt keine Faustregel für ein perfektes Responsive Design, denn die Darstellung einer Website auf verschiedenen Devices hängt immer auch vom Content ab. Mit diesen Grundprinzipien dürfte Webdesignern jedoch der Zugang zu Responsive Webdesign vereinfacht und ihnen Anregungen zu dessen Umsetzung in ihrem nächsten Projekt geliefert werden.

Aufmacherbild: Fountain pen writing the word principles von Shutterstock / Urheberrecht: wavebreakmedia

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -