Webseiten sind heute zwar responsive, sehen aber manchmal auch richtig doof aus.
Wir optimieren zwar alle Webseiten auf die gängigsten Geräte- & Bildschirmgrößen. Trotzdem machen uns (mindestens) drei Faktoren immer wieder einen Strich durch die Rechnung:
Die immer größere Vielfalt der Geräte: Desktop-Rechner, Tablets, Smartphones, Mini-Tablets, Phablets, eBook-Reader, Netbooks, Smart-Watches, Auto-Entertainment-Systeme, Smart-Home, Kühlschränke, Smart-TVs, … die Welt der Internetseiten wird immer komplizierter. Dazu gibt es dann immer mindestens zwei verschiedene Browser in 3 oft genutzten Versionen, von denen sich wenigstens einer auch partout nicht an den Standard halten will.
Besonders exotische Devices: Seltsame Seitenverhältnisse, komische ungerade Auflösungen, seltsame Skalierungen und die verrücktesten Browser. Solche Geräte werden gefühlt am liebsten von den Geschäftsführern deutscher Unternehmen genutzt und zeigen alles ein kleines bisschen anders an als das iPhone, aktuelle Android-Geräte oder auch das Handy von der Stange (die machen meist die wenigsten Probleme).
Nervige Nutzer: Wie z.B. ich, die den Browser gerne kleiner als den Bildschirm haben, viel mit unterschiedlichen Devices rumspielen und auch mal das Handy an den 4k-Fernseher anschließen.
Eigentlich immer gibt es diese Bereiche, irgendwo zwischen der “normalen” Smartphone-Ansicht und dem Tablet, zwischen iPad und Desktop-Ansicht und auch auf richtig großen Bildschirmen, auf denen die Website echt komisch aussieht.
Woran liegts? Wir - alle Agenturen und fast alle (guten) Web-Entwickler - verwenden sogenannte Grid-Systeme, die die Darstellung und das Verhalten der Elemente innerhalb der Seite mit bestimmten Regeln definieren.
Das Grid kann auf die spezifischen Bedürfnisse der Geräte reagieren (sofern diese sich mitteilen) und ist einer der wichtigsten Punkte beim “responsive” Webdesign und damit unverzichtbar. Oder?
Das Grid entscheidet, anhand der definierten Umbruchpunkte (Breaktpoints), wann die Darstellung ein-, zwei-, drei- oder auch vierspaltig wird. Genau zwischen diesen Spalten-Wechseln finden sich die fehldarstellungen, wenn entweder die Inhalte nicht mehr in die schmaler werdenden Spalten passen oder die Spalten “lose” im, im Browser verfügbaren Platz herumschweben.
Mein Ansatz
Warum skalieren unsere Webseiten nicht dynamisch mit dem verfügbaren Platz?
Grundsätzlich tun sie das aktuell zwar auch, die dargestellten Spalten werden breiter oder schmaler, Bilder passen sich an. Aber etwas fehlt: der Text. Der Text skaliert nicht mit und verursacht immer wieder die Probleme. Er schiebt sich über Bilder, wird unlesbar, bricht furchtbar um, expandiert die Elemente in absurde Formen und so weiter.
Da ich früher selbst Webseiten entwickelt habe, will ich am MyInnovationDay einen Ansatz, der mir schon lange im Kopf herumgeht auch praktisch ausprobieren und mich damit auch gleichzeitig ein bisschen fit halten.
Frage 1 - Machbarkeit: Kann Text skalieren? Natürlich, aber es ist nicht ganz so trivial - weshalb es wahrscheinlich auch nicht oft gemacht wird. Die Textgröße muss in einem hierarchischen Zusammenspiel von Headlines, Texten und anderen Elementen wie Icons stehen und der Text darf weder zu groß noch zu klein werden, damit die Lesbarkeit erhalten bleibt.
Frage 2 - Medienbetrachtungen: Was sind die Probleme beim Skalieren? Beim Skalieren von Text muss immer auch bedacht werden: die Geräte sind unterschiedlich. Ein Smart-TV mag zwar die gleiche FullHD Auflösung haben wie ein normaler Monitor, ich sitze aber mehrere Meter entfernt anstatt direkt davor. Mein Handy hat sogar eine noch höhere QHD-Auflösung, ist aber nur 30cm von meinen Augen weg, genau wie mein Laptop mit beinahe gleicher Auflösung aber wesentlich größerem Display. Kommen Retina und 4k ins Spiel skalieren die Geräte meist zwar selbst, aber auch hier ist die Auge-Display-Entfernung ein wichtiges Kriterium.
Gleichzeitig gibt es mit Smartphones und Tablet mittlerweile viele Geräte die ein hochformatiges Display haben (bei manchen Monitoren geht das mit dem sog. Pivot-Modus ebenfalls, die habe ich aber erstmal ausgeklammert). In der Darstellung unterscheiden diese sich tatsächlich fundamental. Die meisten Webseiten kann man auf einem Handy im Landscape-Modus kaum noch lesen, die Schrift ist viel zu groß. Auch hierfür müssen entsprechende Regeln entwickelt werden, um eine perfekte Darstellung zu erhalten.
Umsetzung
Die angenehm temperierte Schriftgröße: Für die Textskalierung habe ich zwei Ansätze ausprobiert. Bei der einen Variante habe ich für alle Breakpoints eine eigene Basis-Schriftgröße (Base-Font-Size) gesetzt. Überschriften und Annotationen verhalten sich dazu in einem prozentualen Verhältnis - sie sind also z.B. 200% der Base-Font-Size für eine H1, 150% für eine H2, 75% für Anmerkungen, etc. Da dies eine ganze Menge Arbeit ist, hier gute Werte zu finden und sich auch nicht wirklich sauber anfühlt habe ich im zweiten Schritt versucht eine sinnvolle Formel zu finden, mit der anhand der Bildschirmgröße automatisch skaliert wird.
Mit CSS kann man zum Glück wunderbar rechnen. Dadurch fallen jede Menge Größendefinitionen weg. Als guten Wert habe ich folge Formel definiert: calc(14px + 6 * ((100vw - 300px) / (1300))).
Das Problem der Hierarchie löst sich theoretisch über die Base-Font Size automatisch. Damit das Skalieren nicht in Monster-Überschriften auf großen Screens oder auch Mini-Text auf kleinen resultiert, kann man theoretisch auch maximale und minimale größen definieren. Dabei habe ich mich aber nicht verzetteln wollen und nur einen den einfachen Weg über simples Setzen in den Breakpoints getestet.
Auge-Display-Entfernung: Über Media-Querys lässt sich zwar nicht ermitteln, aus welcher Entfernung der Nutzer guckt (wobei manche Handys das bereits machen). Eine Selektierung für Fernseher und Beamer - perspektivisch kann man auch nach Auto-Displays bzw. im Auto angeschlossenen Handys filtern - kann man aber einfach als Kettungen in die normalen Media-Querys aufnehmen. Hier habe ich es mir recht einfach gemacht und die Faustregel “einen Breakpoint unter der wirklichen Auflösung” gesetzt. Das heisst der Beamer geht trotz seiner 1280x768 Bildpunkte auf die Tablet-Darstellung (bis 1024px), der Fernseher mit 1920px Breite auf die 1280px Darstellung.
Eine Frage der Ausrichtung: Zur Problem Landscape- und Portrait-Problematik kann man sich auch recht einfach mit Media-Querys behelfen. Diese lassen sich anhand des Seitenverhältnisses (Aspect Ratio) ganz ähnlich zu TV und Projektor setzen. In meinem Test definiert sich dadurch - neben der Hintergrundfarbe als Kontrolle - vorerst nur die Darstellung der zwei Teaser. Perspektivisch kann hiermit auch noch ein wenig an der Schriftgröße gedreht werden und die Aufteilung der Elemente in das Grid bestimmt werden.
Ergebnis?
Es war schön, mit dem MyInnovationDay auch mal wieder technisch ein wenig arbeiten zu können und ich bin ganz zufrieden mit meinem Ergebnis. Allerdings ist der entstandene Code natürlich noch nicht spruchreif für echte Umsetzungen. Sobald man ein komplexeres Grid-System mit ins Spiel bringen möchte gibt es noch viele Herausforderungen und viel nötigen Feinschliff.
Trotzdem denke ich, dass die Skalierung von Schriften und das stärkere Eingehen auf die medienspezifischen Anforderungen wie die Auge-Display-Entfernungen und die Ausrichtung des Geräts viel Potential haben um noch bessere Webseiten zu machen.
Hier findet ihr meinen Beispiel-Code.