Jo Single, Irish & Scottish Folk

Ein weiterer Onepager, aber dafür zweisprachig. Dieses Projekt war der längst überfällige Relaunch einer Webseite, die ich schon vor über zehn Jahren erstellt hatte.

Neue Wege in der Gestaltung

Hier hatte ich die wunderbare Gelegenheit, gleich zwei neue Dinge auszuprobieren: zum einen eine Hell-auf-Dunkel-Gestaltung, und zum anderen eine variable Schriftart.

Hell auf dunkel: ein „dark theme“

Wie die meisten Leute, die programmieren (oder vielleicht nur generell viel Zeit am Bildschirm verbringen), bevorzuge ich helle Schrift auf dunklem Hintergrund. An all meinen diversen Geräten ist das als Standard eingestellt für alle Programme, die es unterstützen, das sind die allermeisten.

Bei Webseiten allerdings ist dunkel auf hell immer noch sehr viel weiter verbreitet – ein Stück weit ist es „freundlicher“, ich halte es aber für sehr wahrscheinlich, dass wir es einfach vom Papier so gewohnt sind. Webdesign und seine Konventionen sind nunmal aus der Printindustrie hervorgegangen, und neue Wege muss man ja immer erstmal gehen, bevor viele Leute wissen, dass es sie gibt.

Konventionen sind aber sehr veränderlich im Lauf der Jahre, und der dunkle Modus wird immer beliebter. Es spricht auch einiges dafür: es spart Strom und ist weniger anstrengend für die Augen, vor allem in dunklerer Umgebung. Die neueste Entwicklung, die ich mir noch nicht genauer angeschaut habe, ist dass das neueste Android anscheinend einen dunklen Modus für Webseiten erzwingt – erwartbar mit sehr mittelprächtigen Ergebnissen, wenn die Webseite darauf nicht ausgelegt ist.

Da ich ja oft nicht für die Gestaltung meiner Webseiten zuständig bin, hatte ich noch wenig Gelegenheit, so ein dunkles Design selbst zu gestalten, und mit Jos Konzertfotos fiel mir das geradezu in den Schoß. Ich bin rundum zufrieden mit dem Ergebnis, und der kleine Bühnenlichteffekt bei den Überschriften ergab sich da wie von selbst.

Variable Schriftart

Diese wunderbare technische Entwicklung verfolge ich schon länger, aber auch hier war die Anwendung mit einer gewissen Umstellung in der eigenen Arbeitsweise verbunden und brauchte daher ein geeignetes Projekt.

Um kurz zu erklären, was „variabel“ hier heißt: Bisher brauchte es für jede Schriftart auf einer Webseite eine Datei mit dem passenden Schriftschnitt. Wenn der Fließtext zum Beispiel als Schriftart Montserrat haben soll, brauche ich den Standard-Schriftschnitt und je nach Text und Formatierungen noch eine kursive und eine fette Version. Das gibt schonmal drei Dateien, die zusammen mit der Webseite heruntergeladen werden müssen, und falls die Überschriften eine andere Schrift verwenden, kommen noch mehr dazu. Viele oder große Schriftdateien können die Ladezeit einer Webseite deutlich verlängern, weswegen ich mit Schrift gerne sparsam und effektiv gestalte.

Variable Schriftarten sind nun welche, die quasi alle Schriftschnitte in einer Datei haben, so dass ich fließende Übergänge in der Schriftdicke zwischen dünn, normal, fett und sehr fett habe, oder auch in der Laufweite zwischen eng, normal und weit. Das heißt ich kann sehr viele verschiedene Varianten einer Schrift verwenden, muss aber nur eine Datei laden.

Der Nachteil ist natürlich, dass diese Datei deutlich größer ist als ein einzelner Schriftschnitt (durchaus um den Faktor zehn). Es muss sich also schon lohnen, und ich würde dann keine zusätzliche Schriftart laden wollen.

Bei Jos Seite habe ich also das Konzept in der Praxis mit der variablen Schriftart Anybody getestet. Ich verwende zwei variable Achsen, nämlich Schriftdicke (100–900) und Laufweite der Buchstaben (50–150). Wer genau hinschaut, wird auf der Seite mehrere Kombinationen entdecken: sehr fett und eher schmal, normal und weit, fett und eher weit… Ich hatte große Freude am Ausprobieren und bin sehr begeistert von den neuen Möglichkeiten, es erfordert aber schon ein gewisses Maß an Umdenken gegenüber meinen bisherigen Design-Prozessen.

Zweisprachigkeit, diesmal unkompliziert

Schließlich ist diese neue Version der Seite „ordentlich“ zweisprachig (die bisherige hatte deutsche und englische Texte auf der gleichen Seite). Und in diesem Fall war es auch unkompliziert umzusetzen, denn es gibt nur eine Domain und auch nur eine einzige Seite, so dass man nicht aufpassen muss, dass die englische URL „contact“ heißt und die deutsche „kontakt“… das kann ein ziemliches Gefummel sein.