Hinweis: Dieser Artikel ist älter als 3 Jahre
Inhalte, Quelltexte oder Links können zwischenzeitlich überholt sein.

Freitag Nachmittag, ein langes Pfingstwochenende steht vor der Tür, Zeit zur Behebung ein paar Issues von diesem Blog. Im Grunde Kleinigkeiten und für die meisten Besucher möglicherweise komplett irrelevant. Für mich wichtige Details, die den Unterschied zu den Standard-Baukasten-Websites ausmachen.

Gelber Textmarker

Eines dieser unscheinbarern Details ist das Hervorheben mit einem “gelben Textmarker”. Ich habe mich mehr als nur einmal darüber geärgert wenn ein Hervorheben in den Standard-Systemfarben erfolgt. Für einen Betrachter passiert genau das Gegenteil: Die Hervorhebung verschlechtert die Lesbarkeit und den Kontrast wie das nachfolgende Bild zeigt:

Mit wenigen Zeilen CSS habe ich die Pseudoklasse ::selection hinzugefügt und freue mich auf das nächste Webinar, wo ich etwas deutlicher zeigen kann.

Mehr Dynamik

Ein mir wichtiges Qualitätsmerkmal dieser Seite: Sie ist dezent und frei von Javascripts, Cookies und sonstigen Abhängigkeiten. Besucher werden nicht mit Consent-Abfragen belästigt. Die Ladezeit ist genau dadurch für Google und andere Suchdienste optimal.

Dem steht entgegen, dass die Seite sehr statisch wirkt und ein wenig mehr “Action” vertragen kann. Mit Hilfe eines weiteren CSS-Hacks habe ich dem Titel einen Schreibmaschineneffekt beschert und lasse den Cursor in Schleife dauerhaft blinken.

Update-Tags

Ein weiteres Detail: Bei nachräglich aktualisierten Blogs konnte ich das nicht entsprechend anzeigen. Meist bleib es bei einem Suffix “Update” hinter der Überschrift. Doch ist das “lazy”, wirkt nachteilig auf spätere Suchen und geht optisch bei einem Blick auf die Seite verloren. Künftig markieren schöne Update-Tags aktualisierte Inhalte.

Tooltips

Last but not least fehlten für die minimalistischen Icons in der oberen Navigation ein paar Erklärungstexte. Künftig kommen noch weitere Icons hinzu. Automatisch erscheinende Tooltips helfen weiter ohne das Erscheinungsbild zu stören. Damit Hugo zwischen den deutschen und englischen Texten in den unterschiedlichen Sprachfassungen unterscheiden kann, sind die Texte als Partials in den zugehörigen i18n-Sprachdateien hinterlegt.

Für einen Freitag Nachmittag, eine gelungene Verbesserung. Alles pures CSS, kein armes Javascript musste sterben.

In diesem Sinne,
ein sonniges Wochenende!

Tomas Jakobs