Lieblings-Mikrofeatures in Blogs und auf persönlichen Websites

• Eine Einführung in Mikrofeatures, die die User Experience von Blogs verbessern

Sidenotes

• Eine Funktion, die zusätzliche Informationen bereitstellt, ohne den Haupttext zu stören
• Ermöglicht Leserinnen und Lesern, zusätzliche Details oder Quellen leicht nachzuschlagen
• Besonders beeindruckend ist die Nutzung von Sidenotes bei Gwern. Seine Texte verwenden sehr viele Sidenotes und liefern zusätzliche Informationen, ohne den Fluss des Hauptinhalts zu unterbrechen.
• Mit Sidenotes lassen sich Anmerkungen leicht referenzieren, ohne bis ans Seitenende zu scrollen.
• Verschiedene Ansätze, inspiriert von Tufte CSS, sind zu sehen.

Inhaltsverzeichnis

• Ein Inhaltsverzeichnis zeigt die Hauptthemen eines Artikels auf einen Blick und ermöglicht es, leicht zum gewünschten Abschnitt zu springen.
• Statische Site-Generatoren (z. B. Hugo) können Inhaltsverzeichnisse automatisch erzeugen.
• Lars Hupels Website bietet ein Inhaltsverzeichnis innerhalb einer Serie und erleichtert so die Navigation.

Bonus: Anzeige des Seitenfortschritts

• Eine Fortschrittsleiste zeigt visuell, an welcher Stelle der Seite sich die Lesenden befinden.
• Bei Quanta Magazine ist eine solche Funktion zu sehen.
• Über das Tutorial von CSS Tricks lässt sich lernen, wie man sie umsetzt.

Einfach verlinkbare Überschriften

• Mithilfe der IDs von HTML-Elementen lassen sich bestimmte Abschnitte einer Seite verlinken.
• Da sie für Nutzerinnen und Nutzer nicht sichtbar sind, kann jedes Element in einen Link verwandelt werden, um es leicht referenzierbar zu machen.
• In der Hugo-Dokumentation ist eine solche Funktion zu sehen.

Gruppierung von Beiträgen in Serien

• Wenn man ausführlich über mehrere Themen schreiben möchte, lassen sich Beiträge in Serien aufteilen, um sie für Leserinnen und Leser leichter zugänglich zu machen.
• Man kann automatisch „Weiter“- und „Zurück“-Buttons hinzufügen oder einen Navigations-Hub erzeugen.
• Im Blog der Programmiersprache Chapel ist eine solche Funktion zu sehen.

Dialogische Artikel

• Artikel in Dialogform machen Texte interessanter und leichter verständlich, indem sie aus Sicht der Lesenden Fragen stellen und Bedenken aus einer weniger erfahrenen Perspektive ausdrücken.
• Auf Xe Iasos Website und bei Faster than Lime werden dialogische Artikel häufig eingesetzt.

Kennzeichnung der Herkunft von Codeblöcken

• Beim Schreiben von Code können Dateiname und Zeilennummern am Codeblock angezeigt werden, damit Leserinnen und Leser ihn leichter verstehen.
• Beispiel: Crafting Interpreters

Bonus: Codeblöcke mit anklickbaren Links

• Die Programmiersprache Agda erzeugt HTML-Codeblöcke und verlinkt jedes Symbol mit der Stelle, an der es definiert ist.
• In Programming Languages Foundations in Agda ist eine solche Funktion zu sehen.

Kennzeichnung externer Links

• Links zu externen Domains werden mit einem kleinen Symbol gekennzeichnet.
• Bei James’ Coffee Blog ☕ ist eine solche Funktion zu sehen.

Bonus: Unterschiedliche Marker für verschiedene Ziele

• Gwerns Website ändert die Symbole je nach Ziel des Links.
• Beispiel: Wikipedia-Links erhalten ein „W“, Links zu Haskell.org ein Lambda-Symbol.

Bonus: Linkvorschau

• Wenn beim Überfahren eines Links mit der Maus eine Vorschau der Seite angezeigt wird, kann man den Inhalt schon vor dem Anklicken ansehen.
• Auf Gwerns Website ist eine solche Funktion zu sehen.

RSS-Feed

• RSS ist ein Feed-Standard, mit dem Websites Updates veröffentlichen können.
• Er ermöglicht es Leserinnen und Lesern, Aktualisierungen zu erhalten, ohne die Website direkt besuchen zu müssen.

Links zu anderen Websites

• Durch das Einfügen von Links zu Beiträgen aus anderen Blogs oder Websites lässt sich verwandter Inhalt hervorheben.
• In Drew DeVaults Blog ist eine solche Funktion zu sehen.

Fazit

• Solche Mikrofeatures können eine Website nützlicher und attraktiver machen
• Es scheint eine gute Idee zu sein, solche Funktionen in die eigene Website zu integrieren.

[tsboard]

Ich war gerade dabei, meinen eigenen Blog zu erstellen, daher sind solche nützlichen Neuigkeiten genau richtig, danke haha

[GN⁺]

Hacker-News-Kommentare

• Einige Vorschläge sind gut, aber der Fortschrittsbalken ist zu ablenkend und unnötig. Es gibt bereits eine Scrollleiste, daher braucht es keine zusätzliche.
• Link-Dekorationen sind nicht nötig. Der Browser zeigt bereits gut an, wohin ein Link führt. Auch Preview-Pop-ups sind unnötige Störelemente.
• Es ist gut, im Blog einen einseitigen Index aller Beiträge zu implementieren. So kann man die Titel auf einen Blick sehen, und die Suche wird einfacher.
• Es freut mich, dass das Thema Bloggen es auf Hacker News geschafft hat. Der Blogging-Dienst, an dem ich arbeite, konzentriert sich auf Minimalismus. Ich möchte das Problem lösen, dass ASCII-Art auf Android nicht korrekt dargestellt wird.
• Mir gefallen mehrere dieser „Mikro-Features“. Ich bevorzuge Funktionen, die kein JavaScript erfordern. Ich implementiere verschiedene Mikro-Features in meinem Blog.
• Ich bevorzuge es, bei Beiträgen das vollständige Datum anzugeben. Bei technischen Inhalten ist es wichtig zu wissen, wann sie geschrieben wurden.
• Ich mag Erklärungen im Dialogformat nicht. Es ist besser, sie in separaten Absätzen darzustellen.
• Ich stimme der Link-Vorschau-Funktion nicht zu. Aus Datenschutzgründen prüfe ich die URL lieber, bevor ich auf einen Link klicke.
• RSS sollte kein „Mikro“-Feature sein, sondern ein Kern-Feature.
• Gwerns Website versucht zu viele Funktionen auf einmal und macht dadurch den Browser langsam. Besonders auf Mobilgeräten ist das Problem gravierend.
• Ein Inhaltsverzeichnis sollte im Webbrowser implementiert werden. Seitenfortschritt, verlinkbare Überschriften, Link-Vorschauen und Ähnliches sollten ebenfalls vom Browser übernommen werden. Der Autor eines Dokuments muss weder Schriftarten noch Farben festlegen.