WP Grundlagen: Grafische Einheiten

Es könnte alles so einfach sein, ist es aber nicht (© Fanta 4): Der Rest der Welt hat das Metrische System übernommen, ein paar Regionen (zB. USA) nicht - ihr Problem. Wir haben 10 Finger (praktisch), das Urmeter (so ab 1799 !!) sagt uns wie lange der zehnmillionste Teil des Erdmeridianquadranten (Strecke vom Pol zum Äquator) ist. Wir haben also einen Bezugspunkt, an dem wir alles festmachen können. Wir wissen, wie lange ein Meter ist, jeder kann sich das vorstellen. Und trotzdem verwenden wir nicht cm und mm im Webdesign (obwohl wir das könnten!) sondern Pixel (px).

Weil: Pixel sind eine absolute Einheit, die aber relativ zum Ausgabegerät (Bildschirm, Drucker) verwendet wird. Bei Geräten mit niedriger Auflösung (alte Monitore) entspricht ein Pixel einem Bildpunkt des Gerätes, bei Geräten mit höherer Auflösung werden mehrere Gerätepunkte pro Pixel verwendet.

Die grüne Box im Beispiel oben hat eine fixe Größe von 720 x 300 px. Ist in dieser Box nun ein Contanier mit den Dimensionen 50 % Breite und 100% Höhe, so entspricht das den Pixelwerten von 360 x 300.

Da der Bezug (die Relation) im CSS immer auf das nächste Element erfolgt ist es extrem wichtig, dass die Struktur des Designs (Container, Gruppen, Reihen, Stapel, …) zuvor korrekt erstellt wurde.

Würde man nun eine weitere Box innerhalb der roten Box mit den selben Dimensionen (50 % Breite und 100 % Höhe positionieren, so hätte diese eine Dimension von 180 x 300 Pixel. 50 % von 50 % von 720 px = 180 px. Es entstünde eine Kaskade, also eine stufenförmige Gestaltung.

Pixel und % helfen bei responsive Webdesign nur bedingt weiter. Wir benötigen eine Einheit, mit der sich Gestaltungen in Bezug auf das Browserfenster, genau genommen auf den durch das Webdesign gestaltbaren Bereich des Fensters, den Viewport, herstellen lassen. Diese Einheiten heissen Viewport Width (VW) und Viewport Height (VH).

Das Beispiel zeigt (rot) die Höhe des Viewports (100 vh) und die halbe Breite (blau, 50 vw). Die Grüne Box kombiniert eine relative Breite (50 vw) mit einer absoluten Höhe (300 px).

Was nun, wenn man die Relation nicht zu einem Element oder dem Viewport herstellt sondern zu einem Font? Genau genommen zu dem Geviert einer Schrift. Das Geviert ist eine Masseinheit aus dem Bleisatz, es bezeichnet den Bereich, den ein Bleiletter (Buchstabe) einnimmt. Der gewählte Buchstabe ist das grosse M. Daher die Bezeichnung EM als Masseinheit. Em bezieht sich auf die Typographie-Einstellungen des umgebenden Elements, kaskadiert also, während das Root-EM als Referenz das Root-Element (HTML-Element) verwendet, daher REM.

Praktisch bedeutet das: immer wo möglich REM verwenden, nur falls das nicht geht eben EM. Für Elementor gibt es eine Artikel zu den Font-Settings hier.

Die Arbeitsweise ist also folgende:

Im Kopfbereich steht ein Logo. Dies soll immer gleich groß dargestellt werden. Hier werden Pixel (320 px) verwendet.

Ein Design mit voller Breite solle vertikal 2geteilt werden: daher wird eine Konstruktion verwendet, die 2 Spalten (Conatiner) nebeneinander mit einer Breite von 50 vw verwendet. In der rechten Spalte wird als Hintergrundbild mit der Option cover ein Hintergrundbild gesetzt.

In der linken Spalte wird ein Container mit 80 % Breite mittig gesetzt. Dadurch bleiben 2 x 10 % Breite für den Aussenabstand über. Abhängig von der Fensterbreite wird also der Raum für den Text durch eine %-Angabe definiert: 80 Prozent von 50 vw. Alternativ könnte man auch hier statt 80 % 40 vw als Breite des Textbereiches (grün) einstellen. Das Ergebnis ist das selbe. Will man nun die linke Spalte wieder teilen so können 2 Container nebeneinander mit 50% Breite gesetzt werden (grüne Box rechte Spalte unten).

Die Schriftgrößen werden mit 1 rem, 1,5 rem und 3 rem definiert, sie beziehen sich auf die Schriftgröße des Root-Containers, in Elementor wäre das die Schrifteinstellungen unter Typographie > Body. Der Vorteil von der Verwendung von REM liegt darin, dass alle Fontangaben dadurch abhängig von der Schrift zueinander gesetzt sind und nicht zu einem absoluten Pixelwert. Das Schriftbild wird konsistent, Änderungen einfacher.

Wer die Einheiten im Web nicht kennt muss darauf vertrauen, dass die Templates richtig erstellt wurden. Alles in Pixel zu setzen wird nicht gut funktionieren und auch - im Falle einer Änderungen - viel Arbeit machen.

Relative Einheiten sorgen dafür, dass die Website auf verschiedenen Bildschirmgrößen besser aussehen, die Arbeit am Design wird auch einfacher mit den richtigen Grundeinstellungen.