Für „responsive design“ werden von Webdesignern gern „Frameworks“ verwendet, die bemerkenswerte Arbeit leisten und dem Designer Arbeit abnehmen können. Doch vergleichbare Ergebnisse lassen sich deutlich „schlanker“ bereits mit einem Style-Sheet erreichen. Was dem Browser des Seiten-Besuchers Arbeit und teilweise erheblichen Datentransfer erspart.
Grundlage dieses Beitrags ist, dass es für den Betrachter ansprechend aussieht. Es werden keine Pixel gezählt.
Frameworks operieren mit umfangreichen Bibliotheken, die für alle Eventualitäten exakte Lösungen parat haben. Ob die tatsächlich irgendwo im Projekt benötigt werden, wird dabei irgnoriert. Ich würde nie einen Stuhl in den Stadtpark mitzunehmen: da gibt es Bänke. Ein Sitzkissen, vielleicht…
Die CSS-Stilvorlage ist so ein „Sitzkissen“. Alle Webseiten basieren auf den grundlegenden HTML-Strukturen. Diese sind mit CSS gestaltbar. Das kann ein Framework dynamisch, ein Entwickler mit ein bisschen Nachdenken erledigen. Für den Ersteller ist die direkte Planung einer Webseite mit dem Style-Sheet gegenüber einem Framework aufwändiger. Als Belohnung gibt es keine Überraschungen, weil beispielsweise ein aktualisiertes Framework andere Resultate liefert oder der Zugriff darauf blockiert ist.
Wesentlicher Ausgangspunkt ist „gute Lesbarkeit“. Der Fließtext sollte eine garantiert lesbare Mindestgröße haben. Für mich sind das 0.9rem (ca. 14 Pixel). „Kleingedrucktes“ kann mit 0.7rem (ca. 11 Pixel) noch leidlich auf einem hochauflösenden Mobiltelefon gelesen werden.
Auf einem größeren Monitor darf die Schrift natürlich größer sein. „rem“ in Kombination mit Schrift ist eine Höhenangabe. Wie viele Zeichen der verwendeten Schriftart in eine festgelegte Spaltenbreite passen, ist daher unsicher. Ausgehend von durchschnittlich 70 Zeichen pro Zeile, liegt das „Spaltenmaß“ mit proportionalen Schriften typischerweise zwischen 35-45rem. Für den konkreten Fall lässt sich das am Schnellsten durch Ausprobieren ermitteln.
Ein (einspaltiges) Layout mit Maximalbreite sollte bei „mehr Platz“ in der Fenstermitte liegen. margin:0 auto ist das etablierte Verfahren dafür. Soll der „weiße Rand“ möglichst synchron zur Schriftgrößen-Anpassung erfolgen und auf jeden Fall ein definierter Rand bleiben, kann statt der dafür gern bemühten Media-Queries ein bisschen Rechnen helfen:
body { margin: 0 clamp(2vw,(100vw - \[Spaltenbreite]rem)/2, 80vw); font-size: 1rem; line-height: 1.2em; max-width: \[Spaltenbreite]rem }
clamp garantiert für den linken/rechten Rand eine Mindestbreite und errechnet beide passend zur eingestellten Maximalbreite. Ergänzend zur „fixen“ Schriftgröße (ggf. für ältere Browser) wird noch eine variable definiert:
body { font-size: clamp([Minimum]rem,-[.9]Minimum]rem + [5]Faktor]vw,[1.2]Maximum]rem) }
Faktor?
„Faktor“ ist die proportionale Änderung der Größe zwischen Minimum und Maximum. Das ist der Schnittpunkt einer Geraden in der Y-Achse:
(FontMax - FontMin) / (TextMaxbreite - TextMinBreite) = Steigung (Steigung * -FontMin) + FontMax = Schnittpunkt
Der „Faktor“ ergibt sich aus
Schnittpunkt + (Steigung * 100) = Faktor
Ausgehend von den Eingangsgrößen hat der Faktor die Maßeinheit „rem“ – doch das wäre statisch. Damit sich die Schriftgröße fließend zwischen den Eckwerten verändert, bietet sich „vw“ als Einheit an. Als Faustformel zur Umrechnung funktioniert
-FontMin + (Faktor * 3)vw
als Näherung. Das sieht in den gängigen Browsern „fluffig“ aus.
Alle nachfolgenden Maße für Schrift werden vorzugsweise als „em“ definiert, damit die Größenvererbung in Containern funktioniert.
Für den kontrollierten Umfluss von Elementen sind Hilfsformate mit display:flex nützlich. Das ist bei SELFHTML anschaulich beschrieben. Angaben für Bilder, etc. sind mit % bequem dynamisch einstellbar.
Für den Fließtext ist ein Zeilenumbruch im Browser einstellbar, womit sich der optische Spalteneindruck verbessert. Deutsch hat viele buchstabenreiche Worte. Trennstriche verhindern das „ausfranzen“ schmaler Spalten.
Bilder können mit „Lazy Loading“ versehen die Ladezeiten der Seite verkürzen, wobei „auf das minimal Nötige runterrechnen“, gegenüber Framework und/oder Browser rechnen lassen, eine erheblich größere Rolle spielt.
Am Ende kann ein Stylesheet für alle eintretenden Eventualitäten durchaus einige 10kB groß sein. Im Vergleich zu Megabyte-großen Frameworks ist das vernachlässigbar.
Von manchen – durchaus beeindruckenden, objektiv jedoch unwichtigen oder auch völlig unnötigen – „Spielereien“ abgesehen, kann mit einem Bruchteil Daten eine ansprechende Webseite präsentiert werden. Im Gegensatz zu diversen „Framework-gestützten“ Seiten, die zusammengeklickt sind, wird oft eine attraktivere Seite heraus kommen.
Was schlicht daran liegt, dass mal drüber nachgedacht wurde.