oliverjessner.at: Neues News-Layout und Designsystem

Auf oliverjessner.at hat sich einiges verändert. Aus dem klassischen Blog wird eine kompaktere Nachrichtenseite. Eleventy (11ty) löst Jekyll als technische Grundlage ab, und ein gemeinsames Designsystem verbindet die Website mit meinen Softwareprojekten.

Warum ich oliverjessner.at überarbeitet habe

Websites entwickeln sich mit ihren Inhalten. Was vor einigen Jahren als persönlicher Blog begann, ist inzwischen eine Plattform für Technikjournalismus, Analysen, eigene Recherchen und Softwareprojekte.

Auf oliverjessner.at erscheinen mittlerweile regelmäßig Nachrichten und Hintergrundartikel zu Technologie, künstlicher Intelligenz, Wirtschaft und digitaler Gesellschaft. Dazu kommen eigene Softwareprojekte und Veröffentlichungen bei anderen Medien.

Mit diesem Wandel sind auch die Anforderungen an die Website gestiegen.

Das bisherige Layout war grundsätzlich funktional, aber für eine wachsende Anzahl von Artikeln zu großzügig gestaltet. Große Abstände, vergleichsweise wenige sichtbare Beiträge und eine klassische Kartenansicht machten es schwieriger, sich schnell einen Überblick zu verschaffen.

Deshalb habe ich mich entschieden, mehrere Bereiche grundlegend zu überarbeiten.

Neues News-Layout – vom persönlichen Blog zur Nachrichtenseite

Die sichtbarste Veränderung betrifft die Blog-Übersicht.

Bislang wurden aktuelle Artikel hauptsächlich in einem dreispaltigen Kartenlayout dargestellt. Große Vorschaubilder, großzügige Abstände und ein umfangreicher Kopfbereich bestimmten das Erscheinungsbild.

Das funktionierte für einen klassischen Blog mit gelegentlichen Veröffentlichungen. Für eine Website mit regelmäßig neuen Nachrichten und Analysen wollte ich allerdings eine andere Gewichtung.

So sah die bisherige Blog-Übersicht aus

Die bisherige Blog-Übersicht setzte auf große Artikelkarten und viel Abstand zwischen den einzelnen Bereichen.

Die neue Gestaltung orientiert sich stärker an klassischen Nachrichtenportalen. Nicht, weil ich aus meiner Website eine Kopie großer Medienhäuser machen möchte, sondern weil deren Layouts ein konkretes Problem lösen: Viele unterschiedliche Inhalte müssen schnell erfassbar bleiben.

Die neue Nachrichtenübersicht

Die neue Nachrichtenübersicht zeigt mehr redaktionelle Inhalte auf einer Bildschirmseite und hebt wichtige Beiträge stärker hervor.

Die neue Seite trägt die Überschrift "Nachrichten & Hintergründe". Damit wird auch die inhaltliche Ausrichtung deutlicher.

Mehrere Änderungen fallen unmittelbar auf:

• Kompaktere Gestaltung: Weniger Leerraum und eine höhere Informationsdichte sorgen dafür, dass mehr Artikel gleichzeitig sichtbar sind.
• Klare Hierarchie: Ein hervorgehobener Hauptartikel erhält mehr Platz, während weitere Meldungen kompakter dargestellt werden.
• Themennavigation: Kategorien wie KI, Technologie, Wirtschaft und Gaming ermöglichen einen schnelleren Einstieg.
• Eigene Recherchen: Eine separate Seitenleiste hebt investigative und datenjournalistische Veröffentlichungen hervor.
• Bessere Orientierung: Titel, Veröffentlichungsdatum, Kategorien und Vorschaubilder lassen sich schneller erfassen.

Gerade die zusätzliche Fläche für eigene Recherchen war mir wichtig.

Zwischen aktuellen Meldungen zu Technikprodukten oder Softwareupdates sollen aufwendigere Untersuchungen nicht untergehen. Die neue Seitenleiste schafft dafür einen eigenen Bereich.

Das Ergebnis ist keine klassische Nachrichtenseite mit großer Redaktion im Hintergrund. Es bleibt meine persönliche journalistische Plattform, allerdings mit einer Struktur, die besser zu den veröffentlichten Inhalten passt.

Ein eigenes Designsystem – eine gemeinsame Sprache für alle Projekte

Die zweite größere Veränderung betrifft nicht ausschließlich die Website.

In den vergangenen Jahren habe ich verschiedene Anwendungen entwickelt. Jede davon entstand zunächst mit einem eigenen Interface, eigenen Komponenten und teilweise unterschiedlichen gestalterischen Entscheidungen.

Das ist bei unabhängigen Softwareprojekten nicht ungewöhnlich. Langfristig führt es allerdings zu unnötiger Mehrarbeit und einem uneinheitlichen Erscheinungsbild.

Deshalb arbeite ich inzwischen an einem eigenen OJ Designsystem.

Das Designsystem dokumentiert wiederverwendbare Komponenten, Design-Tokens und interaktive Beispiele. Über Storybook lassen sich einzelne Elemente unabhängig von der eigentlichen Website betrachten und weiterentwickeln.

Dabei geht es nicht nur um Farben oder Schriftarten.

Ein gemeinsames Designsystem schafft Grundlagen für:

• Einheitliche Typografie, Abstände und Farbwerte
• Wiederverwendbare Buttons, Formulare und Navigationselemente
• Konsistente Zustände für Hover, Fokus und Interaktionen
• Gemeinsame Regeln für responsive Oberflächen
• Barrierearme und nachvollziehbare Bedienkonzepte

Vor allem bei der UX und der technischen Pflege ergeben sich Vorteile.

Wenn eine Komponente an mehreren Stellen verwendet wird, muss eine Verbesserung nicht jedes Mal neu konzipiert werden.

Mein langfristiges Ziel ist eine gemeinsame Designsprache, die sich auf oliverjessner.at und in meinen eigenen Anwendungen wiederfindet, ohne dass jede Software ihre individuelle Identität verliert.

Eigene Software – vom Einzelprojekt zum gemeinsamen Workflow

Neben der Website ist auch mein eigenes Software-Portfolio gewachsen.

Vier Projekte spielen dabei eine besondere Rolle.

PineFetch – Videos sichern und Inhalte analysieren

Mit PineFetch habe ich eine macOS-Anwendung entwickelt, um Videos und Audiodateien von unterstützten Plattformen zu speichern und deren Inhalte weiterzuverarbeiten.

Dazu gehören lokale Transkription, die Suche in gesprochenen Inhalten und Texterkennung mittels OCR.

Gerade für journalistische Recherchen und die Analyse von Social-Media-Inhalten ist das hilfreich. Statt Videos ausschließlich manuell durchzugehen, lassen sich relevante Textstellen gezielter finden und untersuchen.

BulkPixel – Bildverarbeitung für größere Mengen

BulkPixel beschäftigt sich mit einem anderen Teil meines Arbeitsalltags: der Bildverarbeitung.

Die macOS-Anwendung ermöglicht es, mehrere Bilder in einem Durchgang zu konvertieren, ihre Abmessungen anzupassen und wiederkehrende Verarbeitungsschritte über Presets zu speichern.

Für eine Website mit vielen Artikeln ist das besonders praktisch. Vorschaubilder und Headergrafiken müssen regelmäßig in unterschiedlichen Formaten und Größen vorliegen.

Anstatt jeden Arbeitsschritt einzeln durchzuführen, lassen sich solche Aufgaben standardisieren.

NO-BULLSHIT-RSS – Nachrichten ohne algorithmischen Feed

Mit NO-BULLSHIT-RSS habe ich einen eigenen RSS-Reader entwickelt.

Die Anwendung konzentriert sich auf chronologisch abrufbare Nachrichten, lokale Themenzuordnung und die Gruppierung verwandter Artikel.

Bei journalistischer Arbeit hilft mir ein solcher Ansatz, unterschiedliche Quellen im Blick zu behalten, ohne mich ausschließlich auf die Auswahl und Priorisierung großer Plattformen verlassen zu müssen.

Auch oliverjessner.at bietet einen eigenen RSS-Feed, über den neue Beiträge unabhängig von Social-Media-Plattformen abonniert werden können.

Pitchary – Kunden, Angebote und Finanzen verwalten

Pitchary ist mein lokales CRM für macOS.

Damit lassen sich Kundenkontakte, Angebote, Vertriebsprozesse und Finanzdaten verwalten. Auch die Erfassung und Auswertung von Rechnungen gehört zum Funktionsumfang.

Die Anwendung ist vor allem aus meinen eigenen Anforderungen als Selbstständiger entstanden.

Das verbindet Pitchary mit den anderen Projekten: Die Software soll konkrete Aufgaben lösen, die in meiner täglichen Arbeit tatsächlich auftreten.

Warum die Projekte zusammengehören

Auf den ersten Blick haben ein RSS-Reader, ein Bildkonverter, ein Videotool und eine CRM-Anwendung wenig miteinander zu tun.

In der Praxis bilden sie jedoch unterschiedliche Teile meiner Arbeitsabläufe ab.

Nachrichten werden recherchiert, Inhalte analysiert, Medien aufbereitet und Projekte organisatorisch abgewickelt.

Das gemeinsame Designsystem soll diesen Anwendungen künftig auch gestalterisch eine stärkere Verbindung geben.

Von Jekyll zu Eleventy (11ty)

Nicht alle Veränderungen sind auf Screenshots unmittelbar erkennbar.

Die Website wird inzwischen mit Eleventy, kurz 11ty, statt mit Jekyll gebaut. Eleventy ist ein statischer Website-Generator auf Basis von Node.js.

Die Artikel bleiben in Markdown geschrieben. Liquid-Vorlagen, Layouts und wiederverwendbare Includes bestimmen, wie die Inhalte auf den einzelnen Seiten erscheinen. Beim Build entstehen daraus fertige HTML-Dateien.

Für Leser bleibt die Website damit direkt als HTML erreichbar. Das Nachrichtenarchiv und die Artikel benötigen kein zusätzliches Frontend-Framework im Browser.

Für mich passt Eleventy gut zu den JavaScript-Werkzeugen, die ich bereits für die Website verwende. Der bestehende Build verbindet die Seitenerzeugung mit der Aufbereitung von CSS und Bildern, dem lokalen Suchindex und automatisierten Prüfungen.

Beim Umstieg waren mir vor allem diese Punkte wichtig:

• Bestehende Artikel und Veröffentlichungsdaten übernehmen
• Artikeladressen, Kategorien und den RSS-Feed erhalten
• Vorlagen und Komponenten weiterverwenden
• Das OJ Designsystem in die bestehende Website integrieren
• Seiten, interne Links und strukturierte Daten beim Build prüfen

Auch Tastaturbedienung, sichtbare Fokuszustände und verständliche Beschriftungen wurden überarbeitet. Diese Verbesserungen werden in den Vorlagen, Komponenten und Styles umgesetzt.

Was das neue Layout für die Auffindbarkeit bedeutet

Neben der Gestaltung spielt auch die technische Auffindbarkeit von Artikeln eine Rolle.

Suchmaschinen müssen Inhalte verstehen können. Leser müssen sie möglichst einfach finden.

Beides profitiert grundsätzlich von einer nachvollziehbaren Seitenstruktur, eindeutigen Überschriften, thematisch passenden internen Verlinkungen und aussagekräftigen Beschreibungen.

Deshalb ist die Überarbeitung für mich auch ein Thema der Webentwicklung.

Eine kompakte Nachrichtenübersicht kann dabei helfen, relevante Beiträge sichtbarer zu machen. Die zusätzliche Themennavigation bietet weitere Einstiege in das Archiv.

Ob sich daraus bessere Platzierungen bei Google oder anderen Suchmaschinen ergeben, wird sich erst anhand entsprechender Daten beurteilen lassen.

Das neue Design allein ist schließlich noch keine SEO-Maßnahme mit garantiertem Ergebnis.

Entscheidend bleiben der Inhalt, die technische Qualität und die tatsächliche Nutzbarkeit der Website.

Was sich nicht verändert hat

Trotz der Neugestaltung bleibt die inhaltliche Ausrichtung bestehen.

Auf oliverjessner.at veröffentliche ich weiterhin Nachrichten, Analysen, technische Erklärungen und eigene Recherchen. Dazu kommen Einblicke in meine Softwareprojekte und gelegentliche persönliche Einschätzungen.

Die neue Struktur soll diese unterschiedlichen Inhalte nicht vereinheitlichen, sondern besser voneinander unterscheidbar machen.

Kurze Nachrichten benötigen eine andere Darstellung als umfangreiche Untersuchungen. Tutorials wiederum haben andere Anforderungen als Kommentare.

Das neue Layout ist ein Versuch, diesen Unterschieden besser gerecht zu werden.

Wie es mit oliverjessner.at weitergeht

Der Umbau ist kein abgeschlossener Zustand.

Das Designsystem wird weiterentwickelt, zusätzliche Komponenten werden vereinheitlicht und die Bedienbarkeit soll schrittweise verbessert werden.

Auch die eigenen Softwareprojekte bleiben in Bewegung. Neue Funktionen entstehen häufig aus konkreten Problemen, die mir bei der journalistischen oder technischen Arbeit begegnen.

Für die Website gilt im Grunde dasselbe.

Das Ziel ist keine möglichst aufwendige Oberfläche, sondern eine Plattform, auf der Inhalte gut lesbar, verständlich strukturiert und einfach erreichbar sind.

Weniger Platz für das Layout, mehr Platz für die Inhalte.

Das beschreibt die Richtung der aktuellen Überarbeitung vermutlich am besten.