Eine aktuelle Version unseres Colophons findest du hier
Aggregata hat seit seinem Start im August 2022 zahlreiche Änderungen erfahren, um unsere Inhalte zuverlässiger und umfassender anbieten zu können. Von großen Änderungen wie der Mehrsprachigkeit bis hin zu kleinen Details wie den interaktiven Plots, der Inhaltsangabe und dem RSS-Feed.
Zugänglichkeit und Reichhaltigkeit der Inhalte stehen dabei immer im Vordergrund und beeinflussen nicht nur unsere Inhalte, sondern auch die Plattform, auf der wir sie präsentieren wollen.
Welche Entscheidungen, im Design und der technischen Umsetzung, wir getroffen haben, um diesem Anspruch gerecht zu werden, möchten wir in diesem Artikel mit euch teilen.
Entscheidungen zum Design
Typografie
Für alle Textinhalte wird die Schriftfamilie IBM Plex verwendet. Ihr technischer Charakter unterscheidet sie von herkömmlichen Schriftfamilien für Oberflächen, ohne jedoch die Lesbarkeit der Zeichen zu beeinträchtigen.
Um den WCAG 2.1 AA zu entsprechen, verwenden wir außerdem grundsätzlich ein Kontrastverhältnis von 4,5:1 für Schriften auf einem Hintergrund.
Überschriften, Mengentexte und allgemeine Texte werden in IBM Plex Sans gesetzt. Für Oberflächenelemente kann diese mit unserer bevorzugten Icon-Bibliothek kombiniert werden.
Inline Code, Codeblöcke und ausgewählte dekorative Elemente werden in IBM Plex Mono gesetzt.
Farben
Eine sortierte Farbpalette ermöglicht es uns, unsere Inhalte auf unterschiedliche Weise zu präsentieren, ohne dabei zu sehr vom Kern unserer Gestaltungsphilosophie abzuweichen. Zu diesem Zweck haben wir uns für die beiden Paletten Zinc und Indigo von Tailwind CSS entschieden.
Zinc: Nicht ganz grau, aber neutral genug, um einen flexibleren Einsatz von Farben zu ermöglichen, ist Zinc unsere primäre Farbpalette für die Oberfläche von Aggregata.
Indigo: Highlights respektive interaktive Elemente verwenden Indigo und heben sich so dezent von der neutralen Oberfläche ab.
Icons
Um ein einheitliches Erscheinungsbild zu erzielen, haben wir uns für eine Icon-Bibliothek entschieden, die sich in den Stil unserer Typografie einfügt.
Die IBM Design Language UI Icons wurden parallel zur Hausschrift von IBM entwickelt und ergänzen die Schriftfamilie pixelgenau mit einer umfassenden Auswahl an Icons.
Bilder
Das Bildmaterial für die Artikelvorschau - vorzugsweise 3D-Renderings - wird von Unsplash bezogen. Perspektivisch wird die Artikelvorschau dynamisch und inhaltsbasiert generiert, so dass hier auf abstrakte Bildinhalte verzichtet werden kann.
Technische Entscheidungen
Markdown
Mit Markdown können wir unsere Inhalte unabhängig von einem proprietären Format in verschiedensten Frameworks verwenden. In Kombination mit Frontmatter können wir wichtige Metadaten zu den Inhalten bereitstellen und über frameworkspezifische Funktionen darauf zugreifen.
Für die Darstellung von Formeln setzen wir auf rehype-katex und remark-math.
Seiten und Artikel mit interaktiven Inhalten verwenden MDX und @astrojs/mdx, um benutzerdefinierte Elemente darzustellen.
Astro
Astro unterstützt alle Funktionen, die wir benötigen, um unsere Inhalte performant und leicht zugänglich zu machen.
Wir verwenden Astro als statischen Seitengenerator und generieren alle Seiten als statisches HTML. Unsere Seiten werden über Astros eigenes Collection-Feature verwaltet, wobei jede Collection eine von uns unterstützte Sprache repräsentiert.
Tailwind CSS
Tailwind CSS bietet uns ein tokenbasiertes Design-System für CSS, mit dem wir unsere Seiten flexibel gestalten können.
In besonderen Fällen, in denen komplexe oder spezifische Effekte erzielt werden sollen, fallen wir auf die Components-Features von Astro zurück und ergänzen diese mit SCSS.
Alpine.js
Einen Großteil der Interaktivität im Client übernimmt für uns Alpine.js.
Über unsere positiven Erfahrungen mit Alpine.js haben wir bereits in der Vergangenheit berichtet, eine Einführung in Alpine.js findet sich in unserem ersten Artikel zu diesem Thema.
Cloudflare
Mit Cloudflare hosten wir unsere statischen Seiten in einem globalen Edge-Netzwerk.
Neben der reduzierten Reaktionszeit und der verbesserten Erreichbarkeit der Seite, schützt Cloudflare unsere Seite zudem vor ungebetenen Besucher:innen.