Print vs. Responsive Web Design (RWD)
Am Anfang des Internets gab es ausschließlich Desktop-Monitore, welche mit der Zeit nur etwas größer und breiter geworden sind. Damals waren alle Bildschirme – wie Fernseher – rechteckig und nur waagerecht. Das ist auch verständlich, denn das Sichtfeld bei Menschen ist größer horizontal (bis zu 180°) als vertikal (bis zu 100°). Die Gestaltung eines damaligen Internetauftritts war dem Print-Design ähnlich – alle Elemente hatten feste Breiten, Größen, Positionen; Zeilenumbruch und Silbentrennung waren leicht zu kontrollieren – wie bei einem Plakat, Flyer oder einer Broschüre.
Jetzt gibt es mobile Geräte wie Laptops, Notebooks, Tablets, Smartphones, die unterschiedliche Größen und Auflösungen sowie Seitenverhältnisse haben und sowohl vertikal als auch horizontal bedient werden. Smartphones werden häufiger als Desktop Computer verwendet.
Eine Broschüre sieht immer gleich aus, egal wer sie in der Hand hat. Eine Website sieht jedoch unterschiedlich aus, abhängig vom Endgerät, auf dem sie aufgerufen ist.
Außerdem gibt es verschiedene Webbrowser, bei denen die Darstellung einer Website auf demselben Bildschirm abweichen kann.
Hauptunterschiede
Maßangaben
Im Webdesign arbeiten wir nicht mit Millimeter, Zentimeter, Zoll, Pica, Punkt etc. sondern mit Pixel (px).
Die Schriftgrößen werden normalerweise mit px, em oder rem angegeben. Im responsiven Web Design werden die Breiten von Elementen in der Regel prozentual (%) angegeben. Die Höhe eines Elementes kann beispielsweise an Browserfensterhöhe (vh) angepasst werden. Auch die Browserfensterbreite (vw) steht zur Verfügung. Oft wird auch zusätzlich die minimale und maximale Breite/Höhe verwendet. Es gibt also auch neue, komplett andere Maßangaben, die im Druck nicht vorkommen.
Format
Im responsiven Webdesign gibt es kein festes Format, wie beim Print-Design. Bei der Erstellung jedes Webauftritts müssen alle mögliche Display-Breiten und -Höhen beachtet werden.
Breite der Inhaltselemente einer Website, die mit dem Responsive Web Design (RWD) erstellt wurde, ist prozentual angegeben und passt sich der Breite ihres „Behälters“ bzw. des Browser-Fensters an (Fluid-Width Layout = Layout mit flüssigen Breiten).
Abhängig von der Displaybreite können die Elemente ein- oder mehrspaltig positioniert werden. Texte, Bilder, Buttons, die auf dem Desktop Monitor nebeneinander stehen, sind auf dem Smartphone meist untereinander platziert. Bilder, Videos, Slider werden oft auf dem Smartphone-Ansicht komplett ausgeblendet.
„Flüssige“ Elemente in responsivem Webdesign an einer Muster-Seite testen – den Button unten anklicken und die Gerät-Vorschau an die Ecke ziehen (um die Höhe und Breite zu verändern) und das Verhalten der Elemente zu beobachten (funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge).
Testen von flüssigen Elementen im Responsive Webdesign ist nur auf einem größerem Bildschirm möglich.
Der einfachste Weg, um das Verhalten der Inhalte einer responsiven Website zu beobachten, ist das Browser-Fenster auf dem Desktop Computer (bzw. Laptop oder Notebook) in der Breite und Höhe anpassen. Man kann auch genaue Bildschirmgrößen und auch bekannte Geräte testen – hier die Anleitung.
Grafiken/Bilder und Farben
Der für Druck passende CMYK Farbraum ist für Web nicht geeignet und kann zu einer fehlerhaften Farbdarstellung führen. Das richtige Farbraum für das Internet ist RGB. Die Farben von Elementen der Website werden meist Hexadezimal oder in RGB bzw. RGBA angegeben.
Beim Speichern/Exportieren von Bildern, Grafiken, Icons – am besten den Farbraum sRGB auswählen. Im Gegenteil zu Adobe RGB wurde sRGB früher entwickelt und gilt immer noch als Standard.
Achtung! Die Farbdarstellung auf dem Bildschirm hängt von verschiedenen Faktoren ab, u.a. Kalibrierung des Bildschirmes und Anschlusstyp (HDMI, DVI, VGA/D-Sub, Display Port etc.). Auch in Druck gibt es Abweichungen, welche z. B. von Papiersorten abhängig sind.
Bilder und Icons sollen nicht nur im RGB Farbraum sein, sondern auch im richtigen Dateiformat. Dateitypen, die aktuell bei allen gängigen Webbrowsern unterstützt werden, sind:
- .jpg – der häufigste Dateityp für Bilder/Fotos
- .png – verwendet bei Grafiken mit transparenten Bereichen (z.B. mit transparenten Hintergrund)
- .gif – für Grafiken mit wenig Farbabstufungen, auch für Animationen verwendet
- .svg – Vektorgrafiken
Nicht geeignet sind Bilddateien mit Endungen wie .tiff, .ai, .psd, .eps.
Der Standard für Druck sind 300dpi, aber für Web sind 72 dpi ausreichend. Geringe Dateigröße sorgt für schnellere Ladezeiten im Web und daher soll sie auch optimiert werden. Informationen zu Dateibenennung und Dateigröße für das Web finden Sie auf der Seite Weboptimierung.
Text
Wie im Punkt Maßangaben beschrieben gibt es im Web andere Parameter für die Größen und Breiten.
Die Schriftgröße im Druck wird mit Punkten angegeben, aber im Webdesign grundsätzlich mit Pixel. Die Textangaben aus einer Druckdatei lassen sich nicht einfach 1:1 auf die Website übertragen. Die Zeilenhöhe wird in responsivem Webdesign relativ zur Schriftgröße angelegt. Die Maßangabe für die Laufweite in 1/1000 Geviert gibt es im Web-Design nicht – dafür gibt es Zeichenabstand.
Die verfügbare Text-Formatierung im Web, die in gängigen Browsern funktioniert:
- Schriftfamilie (font-family)
- Schriftfarbe (color) – hexadecimal, rgb(a)
- Schriftgröße (font-size) – in px, em, rem
- Zeilenhöhe (line-height) – in Prozent (z.B. 130%) oder Dezimalbruch (1.3)
- Schriftstärke (font-weight) – dünn (100), schmal (200), buch (300), normal (400), medium (500), halbfett (600), fett (700), extra fett (800), schwarz (900) (Auswahl abhängig von der Schriftfamilie)
- Schriftstil (font-style) – normal oder kursiv
- Textausrichtung (text-align) – linksbündig, rechtsbündig, zentriert
- Zeichenabstand/Buchstabenabstand (letter-spacing) – absolut in px, oder relativ in em bzw. rem
- Textumwandlung (text-transform) – Kapitälchen, Kleinbuchstaben, Großbuchstaben
Warum der Zeilenumbruch im responsiven Webdesign schwer zu kontrollieren ist liegt an der Breite des Browser-Fensters. Je schmaler das Browser-Fenster, desto kürzer die Textzeile.
„Flüssiger“ Text in responsivem Webdesign an einer Muster-Seite testen – den Button unten anklicken und die Gerät-Vorschau an die Ecke ziehen (um die Höhe und Breite zu verändern) und das Verhalten des Textes zu beobachten (funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge).
Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.
Text auf dem Bild
Text als Bild (Rastergrafik) auf der Website zu verwenden ist nicht die optimale Lösung. Es kann dazu führen, dass auf einigen Endgeräten der Text zu groß ist, auf den anderen zu klein und unlesbar.
Im Webdesign verwendet man Hintergrundbilder um Text auf dem Bild zu platzieren. Das Bild ist damit der Hintergrund für die Elemente im Vordergrund (Texte, Icons, Buttons etc.). Dadurch lässt sich die Textgröße für verschiedene Endgeräte optimieren. Das Hintergrundbild passt sich die Breite und Höhe des Elements an.
Dabei ist zu beachten, dass ein Hintergrundbild immer abgeschnitten wird und kaum völlig zu sehen ist. Je nach dem Endgerät und dadurch die Breite und Höhe des Webbrowser wird das Hintergrundbild oben, unten, rechts und/oder links abgeschnitten.
Es gibt einige Einstellungen zur Positionierung des Hintergrundbildes, jedoch es ist nicht möglich die Ansicht so zu kontrollieren, wie im Print-Design, wo es nur ein Format gibt – im Web müssen alle Endgeräte beachtet werden.
Responsive Darstellung beim Element mit einem Hintergrundbild testen – den Button unten anklicken und das Bild-Element an die Ecke ziehen um die Höhe und Breite zu verändern und das Verhalten des Hintergrundbildes zu beobachten.
(funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge)
Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.
Hintergrundbild mit Text in responsivem Webdesign testen – den Button unten anklicken und die Gerät-Vorschau an die Ecke ziehen (um die Höhe und Breite zu verändern) und das Verhalten des Textes zu beobachten (funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge).
Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.
Screendesign (Entwürfe)
Ähnlich, wie ein Haus nach Bauplan – so wird anhand Screendesign eine Internetpräsenz erstellt. Es gibt viele Möglichkeiten Entwürfe zu erstellen – man kann sie auf Papier skizzieren, im Grafikprogramm wie Photoshop, Illustrator, Indesign gestalten oder mit interaktivem Software bauen.
Auch beim Entwerfen des Designs gibt es Unterschiede zwischen Print und Web. Wobei ein gedrucktes Produkt nur ein Format hat (z. B. ein DIN A3 Plakat), muss eine Website alle Display-/Bildschirmauflösungen in Kauf nehmen.
Heutzutage gibt es zahlreiche Endgeräte welche unterschiedliche Breiten haben: Smartphones (ab 320px), Tablets (ab 768px, quer gehalten z. B. ab 1024px), Notebooks (z. B. 1280px), Desktop Monitore (z. B. 1920×1080px HD, 3840×2160 4K). Seitenverhältnisse zwischen Breite und Höhe können unterschiedlich sein, die Geräte können auch hoch oder quer gehalten werden (siehe RWD testen).
Die Nutzung von Mobilgeräten wie Smartphones und Tablets steigt. Viele Smartphone Nutzer besitzen kein Desktop Computer bzw. benutzen ihn nicht mehr. Über die Hälfte von Internetverkehr erfolgt über Smartphones. Deswegen ist Responsive Web Design (RWD) mit Mobile First heute der Standard.
Ein Entwurf nur für Desktop reicht nicht mehr aus.
Für Erstellung einer Website werden daher Entwürfe für mindestens zwei Ansichten benötigt: Smartphone und Desktop. Auf den beiden Entwürfen sind die größten Unterschiede in Darstellung von wichtigen Elementen zu sehen (Header, Navigation/Hauptmenü, Footer, Slider, Karussell, Bildergalerien etc.).
Falls die Darstellung auf dem Tablet und Notebook auch abweichen soll, sollten auch diese entworfen werden.
Auch wenn für eine bestehende Website ein komplett neues Element erstellt werden soll, muss man sich zuerst die Darstellung wenigstens auf dem Smartphone Display und Desktop Monitor überlegen.
Rastersystem
Bei Erstellung von Internetauftritten wird oft ein CSS-Frontend-Framework mit vorgefertigten Breakpoints verwendet. CSS-Frontend-Framework steht für Rahmenstruktur und ist ein Programmiergerüst mit responsivem Rastersystem. Breakpoints sind die Punkte ab denen das Layout sich ändert. Bootstrap ist ein Rastersystem, dass folgende Breakpoints – in dem Fall Display Breiten – bietet: Unter 576px, ab 576px, ab 768px, ab 992px, ab 1200px. Es müssen jedoch nicht immer alle Breakpoints verwendet werden.
Falls es fixierte Elemente geben soll, welche beim Runterscrollen immer an derselben Position im Browserfenster bleiben („Nach-oben-Pfeil“, Sticky-Header, andere Buttons/Icons), muss das auch entworfen werden.
Screendesign Beispiel:
Diese Seite ist noch in Bearbeitung!