Workshop zur Erweiterung des Responsive Webdesign Horizonts

Eine der wichtigsten Veränderungen beim Responsive Webdesign gegenüber normalem Webdesigns ist die Verwendung relativer Maßeinheiten. Denn jedes HTML Element muss nun die Fähigkeit haben sich an die verschiedensten Display und Geräteeigenschaften anpassen zu können. Deswegen empfiehlt es sich hier nun für die Angabe der Breite eines jeden Elements “Prozent” zu verwenden. So bleibt die Breite immer flexibel und die Inhalte können sich entsprechend anpassen. Ein weiteres relatives Maß “em” bzw. “rem” kommt bei der Angabe der Höhen, Schriftgrößen und Zwischenabstände zum Einsatz. Das bringt Vorteile bei der Skalierung im Browser oder durch Zoomen auf dem Tablet, da so alle Elemente sauber vergrößert oder verkleinert werden können.

Beispiel:

Absolut: 400px
Relativ: 25em, 25rem

Die Umrechnung von Pixel zu em / rem funktioniert ganz einfach mit folgender Formel:

(Wert in Pixel) / (Standardbrowsergröße für 1em in px) = (Wert in em)
400px / 16 = 25em

Media Queries spielen zusätzlich eine tragende Rolle, denn ohne Sie wäre es kaum möglich eine Anpassung der Elemente je nach Bildschirmgröße ohne Javascript vorzunehmen. Hier wurden die verschiedensten Schreibweisen behandelt und welche Auswirkungen sie auf die Funktion der Queries haben. Hier ein paar Beispiele wie man Queries richtig einsetzen kann:

Somit wäre eine typische Schreibweise um ein spezielles Styling nur für Smartphones zu generieren folgendes:

Ein weiteres Thema des Workshops war der möglichst einfache und fehlerresistente Aufbau eines eigenes Grids um zu verstehen wie z.B. auch die Systeme von Bootstrap oder Foundation arbeiten. Wichtigster Aspekt ist hierbei die Verwendung von relativer Einheiten für die Berechnung der Breiten und Höhen. Zuerst sollte man sich überlegen wie viele Spalten das Grid unterstützen soll. In meinem Beispiel gehe ich von einem simplen dreispaltigen Grid aus, welches nur einen Breakpoint (Umbruchspunkt mittels Media Queries an dem neue Eigenschaften für eine Element greifen) hat. Das sieht dann folgendermaßen aus:

Ein weiteres Thema des Workshops war der möglichst einfache und fehlerresistente Aufbau eines eigenes Grids um zu verstehen wie z.B. auch die Systeme von Bootstrap oder Foundation arbeiten. Wichtigster Aspekt ist hierbei auch die Verwendung von relativer Einheiten für die Berechnung der Breiten und Höhen. Zuerst sollte man sich überlegen wie viele Spalten das Grid unterstützen soll. In meinem Beispiel gehe ich von einem simplen dreispaltigen Grid aus, welches nur einen Breakpoint (Umbruchspunkt mittels Media Queries an dem neue Eigenschaften für ein Element greifen) hat. Das sieht dann folgendermaßen aus:

Zur Sprache kam ausserdem die Anpassung von Bildern und Videos für das Responsive Webdesign, damit diese auch sauber skalieren können. Bei Bildern geschieht das sehr leicht, man benötigt hierzu nur folgende Eigenschaften:

Bei Videos sieht es etwas anders aus, da man hier meist Inhalte per iFrame von externen Mediatheken wie Youtube oder Vimeo läd. Da man den Inhalt der iFrames nicht beeinflussen kann, muss man bei den Videos ein wenig in die Trickkiste greifen. Man packt das Video in einen <div> Container dessen Höhe wir auf 0 setzen, aber ein Padding von 56,25% geben. Die 56,25% lassen sich aus dem Seitenverhältnis der Videos berechnen (die meisten aller Videos im Web sind im 16:9 Format). Und dieser Wert dient dann als Padding,damit das Video vollständig angezeigt werden kann, egal wie breit der Container gerade ist.

Höhe / Breite (des Videos) = Wert in % für das Padding
9 / 16 = 0.5625

Danach muss man nur noch das iFrame so einstellen, dass es den Container komplett ausfüllt. Die fertigen Eigenschaften sehen dabei so aus: