rosetree.de Design-Update

Das Design, das ich seit dem Hugo Relaunch verwendete, stammt noch aus der Zeit meines inzwischen deaktivierten Blogs Plasisent (2014–2020). Optisch hat es mir in den Grundzügen immer noch gefallen, aber es fühlte sich doch etwas veraltet an. Das ist mir besonders bei der Entwicklung meiner Hugo-Layouts aufgefallen. Seit dieser Woche verwende ich ein leicht-gewichtiges Boilerplate Stylesheet: cu.css von Harry Cresswell.

Ich war immer wieder auf der Suche nach einem soliden CSS-Framework, das gleichzeitig ohne große Javascript-Abhängigkeiten klarkommt. Die meisten, die ich gefunden habe, waren mir letztlich zu komplex. Da kam mir das Starter-Stylesheet von Harry gerade recht. Alles was ich brauche, ist eine CSS-Datei und ein paar Klassen in meinem HTML-Markup.

Das Farbschema habe ich aus dem vorherigen Design übernommen. Die Grüntöne im hellen Design stammen aus dem Logo für das WWW. Neben dem bisherigen hellen Design gibt es nun auch ein dunkles Design. Welches Design dir angezeigt wird, hängt davon ab, wie dein System eingestellt ist. Mir ist es am liebsten, wenn Websites meine System-Einstellung berücksichtigen, daher wollte ich es bei mir ebenfalls so einrichten.

Über die barrierefreie Gestaltung der Links habe ich mir Gedanken gemacht. Diese sollten für gute Barrierefreiheit nicht nur durch die Farbe gekennzeichnet sein. Daher sind sie unterstrichen. Doch die Unterstriche (underlines, wie übersetzt man denn das ins Deutsche?) habe ich bewusst gestaltet. Im Artikel style your underlines von Jeremy Keith habe ich gelernt, wie Unterstreichungen (underlines) gestyled werden können. Der Abstand zum Text, die Strichstärke (-Dicke), die Art des Strichs und die Farbe können alle angepasst werden.

Auch der Unterschied zwischen „der Mauszeiger ist über einem Link“ sollte nicht nur durch Farbe gekennzeichnet sein. Daher ändere ich den Stil der Unterstreichung, sofern der Browser das unterstützt. Firefox macht eine gestrichelte Linie und bei Safari verschwindet die Unterstreichung ganz. Allerdings finde ich die gestrichelte Linie je nach Bildschirm nur schwer als sichtbare Veränderung wahrzunehmen. Das werde ich mir vermutlich irgendwann genauer anschauen und optimieren.

Dank cu.css habe ich etwas Neues über Barrierefreiheit in HTML & CSS gelernt. HTML-Elemente, die mit display: none; gekennzeichnet sind, werden auch von Screenreadern nicht vorgelesen. Sie gelten als nicht vorhanden. Stattdessen sollte man Elemente für Screenreader lieber „visuell verstecken“. Das habe ich an einzelnen Stellen bereits eingebaut und weitere sollen nach und nach folgen, wo es sinnvoll sein könnte.

Alles in allem ein schlichtes Blog-Design, das mir gefällt. Wie bisher immer: nicht fertig. The only constant is change. Aber das macht die Freude an einem Blog aus.