tl;dr
Es gibt jetzt einen Dark Mode sowie die Info, mit welcher TYPO3-Version ein Tutorial kompatibel ist. Außerdem hat es der Designer in mir übertrieben.
Einleitung
Das erste Layout meines Blogs passte irgendwann nicht mehr zu den immer ausführlicher werdenden Tutorials. Daher hatte ich Anfang 2018 eine neue Version erstellt, bei der vor allem Lesbarkeit und Semantik im Vordergrund standen. Gestalterisch war die Website eher langweilig schlicht gehalten. Ich hatte lange geplant, dies zu ändern.
Das neue Design sollte einen deutlichen Wiedererkennungswert besitzen. Dabei gerne etwas verspielt und mit kleinen Gimmicks. Schließlich ist und bleibt diese Website ja mein persönlicher Experimentierkasten.
Ich denke diese Ziele habe ich erreicht, auch wenn ich einige Dinge natürlich noch verbessern muss. Die Vogel-Animation sollte z. B. nicht so abrupt beendet werden (und die Flügelposition im Safari wieder zurückgesetzt werden).
Aktuell ist dies also die Beta-Version der neuen Website.
Dabei habe ich verschiedene Zeichenmedien ausprobiert. Erst dann habe ich zu Adobe Illustrator gewechselt.
Was ich gelernt und getan habe
Kenne deine Zielgruppe
Da ihr als Webentwickler ausschließlich moderne Browser verwendet, konnte ich beim jetzigen Redesign alle heißen Frontend-Technologien einsetzen, mit denen die coolen Kids im Internet spielen!
In meinem Arbeitsalltag betreue ich vorrangig B2B-Seiten aus dem Mittelstand, wo der Internet Explorer 11 immer noch eine relevante Rolle spielt. Auf dieser Website brauche ich hingegen nur wenige Browser-Prefixes, um die korrekte Darstellung für alle zu gewährleisten. Kein unnötiger Ballast, hurra!
Außerdem besucht ihr die Website fast ausschließlich mit sehr hohen Bildschirmauflösungen. Nachvollziehbar – üblicherweise seid ihr hier, um eine technische Frage während der Arbeitszeit zu klären, das macht ihr nicht vom Smartphone aus. Daher habe ich versucht, den vorhandenen Raum besser zu nutzen. Die Satzbreite des Fließtextes ist weiterhin begrenzt, was für die Leserlichkeit vorteilhaft ist.
Angabe der TYPO3-Kompatibilität
usetypo3.com hat es, Daniel Siepmann auch, die offizielle TYPO3-Dokumentation sowieso: eine klare Angabe, für welche TYPO3-Version(en) eine Anleitung gültig ist. Sehr praktisch, damit man nicht erst nach Stunden feststellt, dass eine Lösung inkompatibel mit dem eigenen Projekt ist.
Im neuen Design konnte ich die Meta-Angaben der Tutorials besser strukturieren, wodurch die TYPO3-Kompatibilität dort dann ebenfalls Platz fand. Um die TYPO3-Versionen zuzuweisen, habe ich eine neue Datenbanktabelle für diese Art von Tags sowie ein Multiselect-Feld für Blog-Seiten ergänzt.
Zuletzt hatte ich schon das Datum der letzten Änderung ergänzt. Auch das ein Hinweis, der euch die Aktualität eines Artikels anzeigen soll.
Auswahl des Farbschemas (a.k.a. "Dark Mode")
Ich bevorzuge es, längere Texte lieber Schwarz auf Weiß zu lesen. Aber je mehr Zeit ich im Dark Mode meiner Website verbracht habe, desto mehr gefällt er mir. Und: In meinen Texteditoren habe ich immer ein dunkles Theme aktiviert. Daher auch die generell dunklen Codeblöcke in den Tutorials.
Die Einrichtung des Dark Mode war eine tolle Gelegenheit, die CSS Variablen (offiziell Custom Properties) auszuprobieren.
Standardmäßig wird mit dem prefers-color-scheme Media Query die Einstellung des Betriebssystems ausgelesen und verwendet. Wenn ihr das Farbschema der Seite manuell ändert, wird ein JavaScript eure Auswahl im Local Storage des Browsers speichern.
Während der Umsetzung des Farbwechsels habe ich festgestellt, dass mein ursprünglicher Entwurf etwas zu variabel war. Die Zahl der Custom Properties wäre zu groß geworden. Mit der Reduzierung habe ich gleichzeitig die Gestaltung etwas vereinfacht. Bei einigen Elementen, etwa den Hinweiskästen, habe ich mit Transparenzen gearbeitet, um sie für beide Farbschemata fit zu machen.
Die CSS Variablen erleichtern mir auch an anderen Stellen die Arbeit:
- In der News-Listenansicht kann ich die Farben der Ecken einfach überschreiben, ohne alle Werte der Verläufe wiederholen zu müssen.
- Bei der Animation der Vogelfedern setze ich den jeweiligen Grad der Rotation über eine Variable, so dass eine einzelne @keyframes-Regel für alle genügt.
Variable Website-Templates und Themes
Der Umstieg auf die Blog-Extension im April erlaubt es mir, meinen Artikeln über BackendLayouts unterschiedliche Templates zuzuweisen. Diese Templates können wiederum großen Einfluss auf die Gestaltung der Seite nehmen.
Meine Stylesheets habe ich aufgeteilt:
- Zuerst wird ein kleines Theme-Stylesheet mit den Custom Properties geladen.
- Dann folgt das große Stylesheet mit allen Gestaltungsangaben, in dem die Custom Properties verwendet werden.
Über die Zuweisung eines BackendLayouts kann ich das erste Stylesheet mit dem Standard-Theme überschreiben. Dadurch erhalte ich die Möglichkeit, alternative Themes zuzuweisen. Die Themes können Farbangaben der Seite ändern und bei Bedarf neue Styles für das Template ergänzen. Jedes Theme berücksichtigt natürlich die beiden Farbschemata (Light und Dark).
Damit ich die Klassen im Header und Footer der Website ebenfalls steuern kann, lade ich die entsprechenden Partials im jeweiligen Fluid-Template. Hier übergebe ich die gewünschten Klassen als zusätzliche Argumente an die Partials.
<!-- Im Template 'NewsDefault.html' -->
<f:alias map="{footerClassList: 'c-site-footer c-site-footer--halftone c-site-footer--skew'}">
<f:render partial="Site/Footer" arguments="{_all}"/>
</f:alias>
<!-- Im Partial 'Footer.html' -->
<footer class="{footerClassList}">
<!-- Footer content -->
</footer>Auf diese Weise habe ich ein alternatives Blueprint-Theme erstellt, das ich für Newsartikel über meine OSS-Projekte verwende. Die Seite über meine Person besitzt ein Theme in Schwarz und Weiß. Ein weiteres Theme für TYPO3-bezogene Newsbeiträge erstelle ich bei Gelegenheit.
Erfolge freigeschaltet: Wissen++
Die letzten Jahre habe ich mich berufsbedingt auf TYPO3 und einige andere Themengebiete fokussiert. Zwischenzeitliche Neuerungen in CSS kamen dabei etwas kurz – auch, weil der IE 11 das meiste davon nicht unterstützt. Durch diesen Relaunch konnte ich einiges nachholen.
Neben den CSS Custom Properties habe ich mich vor allem mit den erweiterten Möglichkeiten von Gradients beschäftigt. Im März war ich bei einem Vortrag von Ana Tudor über Gradient Blobs and Halftone Effects, der mein Interesse geweckt hatte. Dies war der Grundstein für den Raster-Effekt im Header.
Komplexere Gradients habe ich außerdem verwendet für die farbigen Ecken in der News-Liste sowie dem Millimeterpapier-Hintergrund des Blueprint-Themes. Auch der hover-Effekt bei Links ist ein animierter Verlauf. Ein vielseitiges Werkzeug also!
Weitere Themen, die ich schon länger angehen oder vertiefen wollte:
- SVG. Einige meiner Grafiken habe ich jetzt als SVG Sprite ausgelagert und binde sie im Template mit dem <use> Element ein. Darüber hinaus habe ich gelernt, dass SVG eine eigene Syntax für Animationen besitzt: SMIL (Synchronized Multimedia Integration Language).
- Animationen. Der Vogel ist eine SVG-Grafik, dessen Auge mit SMIL regelmäßig blinzelt. Für die Flug-Animation bei hover/focus greife ich auf CSS Animationen zurück.
- CSS Grid. Dies verwende ich hier aktuell nur im kleinen: die Meta-Angaben der Tutorials werden mit einem Grid sortiert. Fehlt eine Angabe (etwa das Datum der letzten Aktualisierung oder die TYPO3-Kompatibilität), bleiben die anderen Angaben an ihrem festen Platz im Layout.
Feinheiten: Dinge, die Zeit kosten
Viele der Arbeiten sind auf den ersten Blick gar nicht sichtbar. So habe ich auch die Scrollbalken des Browser angepasst. Nicht weil ich das unbedingt machen wollte, sondern weil die Default-Gestaltung im Dark Mode wie ein Fremdkörper wirkte (etwa die horizontalen Scrollbalken bei breiten Code-Blöcken).
Allein für die Erstellung des Scrollbar-Sass-Mixins habe ich mir zwei Stunden Zeit genommen. Darin stecken allerdings auch meine Kommentare zur Verwendung des Mixins sowie die anfängliche Recherche zur Browserkompatibilität.
Snippet-Wiki
Das Dokuwiki mit Snippets und anderen Informationen existiert bereits seit Ende 2013 und ist somit älter als die eigentliche Website. Als zweites CMS ist hier immer zusätzlicher Aufwand notwendig, wenn man ein einheitliches Design erreichen möchte. Es war aber letztlich weniger Arbeit als ich erwartet hatte.
Dokuwiki unterstützt die Installation von Templates zur Anpassung der Gestaltung. Das CMS bringt auch einen eigenen Less-Compiler mit. Die meisten Templates lassen es zu, bestimmte Eigenschaften des Themes über Less-Variablen anzupassen.
Für das Dokuwiki habe ich ein reduziertes Basis-Stylesheet aus meinem gulp-Workflow exportiert. Mein angepasstes Wiki-Theme basiert auf dem Default-Template von Dokuwiki. Hier habe ich das Markup erweitert und einige der Basis-Styles entfernt.
Durch die Less-Variablen ließ sich das gesamte Theme relativ leicht an den Dark Mode anpassen. Einzelne Module benötigen noch etwas Aufmerksamkeit, aber das kann später folgen.
Ausblick
Es bleibt viel zu tun. Aktuell binde ich immer noch jQuery ein, was ich aber nur für die Lightbox magnific-popup benötige. Ich bin noch auf der Suche nach einer neuen Lightbox, die alle meine Anforderungen abdeckt. Das Vorhaben gehe ich als nächstes an.
Die Barrierefreiheit kann sicherlich weiter verbessert werden. Dazu werde ich mich demnächst näher mit Apple's VoiceOver befassen.