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 (Gesichtfeld) 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.

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.

Haupt­unterschiede

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. 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.

Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.

„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).

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

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.

RGB – Web, CMYK – Druck

Beim Speichern/Exportieren 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

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, 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.

Wenn Sie diesen Text nun auf dem Desktop-Computer mit z.B. Google Chrome Browser lesen, sehen Sie keine Silbentrennung, weil die Eigenschaft (noch) nicht bei allen Webbrowsern unterstützt wird.

Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.

„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).

Text auf dem Bild

Text als Bild als 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.

Die Vorschau zum Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.

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).

Diese Seite ist noch in Bearbeitung!