Wie ich diesen Blog gestaltet habe
Einen Blog zu bauen, der gut aussieht, war leicht. Für einen Blog, der auch gelesen wird, habe ich mir zuerst angeschaut, wie wir am Bildschirm lesen.
Anfang Oktober. Ich versuche gerade, meine Videos fertigzustellen, und überlege gleichzeitig noch einmal von vorn, wie ich in den sozialen Medien auftreten will. Mitten in diesem Trubel ist auch dieser Blog entstanden.
Mein Portfolio will ich wie ein Schaufenster halten. Wenige Arbeiten, gute Arbeiten, keine langen Erklärungen. Nur recherchiere ich bei der Arbeit ständig, probiere herum und gebe manchmal auf halber Strecke auf. Dieser Teil hatte bisher nirgends einen Platz. Stelle ich ihn ins Schaufenster, ist das Schaufenster dahin; lasse ich es, geht er verloren. Kurz und gut, ich habe beschlossen, die beiden zu trennen.
Wie sieht also ein Blog aus, der gelesen wird? Was mir als Erstes einfällt, liegt auf der Hand. Kartenraster… große Titelbilder… Texte, die beim Scrollen eingeblendet werden… Was davon beim Lesen hilft, wusste ich ehrlich gesagt nicht. Genau dort habe ich angefangen.
Menschen lesen nicht, sie überfliegen
Die Nielsen Norman Group macht seit Jahren Eyetracking-Studien, und das Ergebnis ändert sich kaum: Wer am Bildschirm Wort für Wort liest, ist in der Minderheit, die meisten von uns überfliegen.1 (Ich mache es genauso, das gebe ich zu.) Die effizienteste Art des Überfliegens nennen sie das „Schichttorten-Muster“. Das Auge springt von Überschrift zu Überschrift und steigt in einen Abschnitt ein, wenn er interessant wirkt.2
Was mir das sagt, ist einfach: Auch wer nur die Überschriften liest, soll verstehen, worum es im Text geht. Deshalb steht am Anfang jedes Artikels eine Zusammenfassung in einem Satz. Auf der Startseite gibt es nur Datum, Titel und eine Zeile. Ich wollte, dass man auch ohne einen einzigen Artikel zu öffnen sieht, womit ich mich beschäftige und wie ich denke.
Noch eine Entscheidung, die manchen gegen den Strich gehen könnte. Hier gibt es keine Etiketten wie „Entwurf“ oder „Idee“. Selbst wenn ich über eine halbfertige Recherche schreibe, schreibe ich sie als fertigen Text. Ich sehe einfach keinen Sinn darin, etwas zu veröffentlichen, das auf Lesende nicht ernsthaft wirkt.
Wie lang eine Zeile sein sollte
Laut den Studien, die Baymard zusammengetragen hat, liest sich eine Zeile mit 50 bis 75 Zeichen angenehm.3 Der Barrierefreiheitsstandard WCAG setzt die Obergrenze bei 80 Zeichen.4
Ich wollte die Zahlen mit eigenen Augen sehen. Also habe ich 14 Blogs geöffnet, die für ihr Leseerlebnis bekannt sind, und bei jedem Schriftgröße, Zeilenabstand und Breite der Textspalte gemessen. Die angenehm lesbaren lagen alle im selben Bereich. Bei Craig Mod ist die Schrift 20 Pixel groß und die Spalte 746 breit. Bei Medium 20 zu 680. Bei Every 20 zu 736.
Die Website von Dan Luu ist dagegen ein abschreckendes Beispiel. Auf einem breiten Bildschirm wird eine Zeile bis zu 224 Zeichen lang, und auf dem Weg vom Zeilenende zum Anfang der nächsten verliert das Auge die Spur. Deutlicher kann man meiner Meinung nach nicht sehen, wie ein guter Text auf einer schlechten Seite verschenkt wird.
Hier ist die Schrift auf dem Desktop 20 und auf dem Handy 17 Pixel groß. Der Zeilenabstand beträgt das 1,55-Fache der Schriftgröße, die Textspalte ist 680 Pixel breit. Gemessen am türkischen Text, für den ich das ausgelegt habe, kommen so 65 bis 70 Zeichen auf eine Zeile. Türkische Wörter sind bekanntlich lang, die Zeilen brechen etwas früher um als bei einem englischen Text. Im Rahmen bleibt es trotzdem.
Liste statt Karten
Auf Blog-Startseiten sehe ich am häufigsten ein Kartenraster. Für jeden Artikel eine Box, in jeder Box ein Bild. Laut NN/g eignen sich Karten gut, um unterschiedliche Inhalte nebeneinanderzustellen. Ähnliche Dinge wie Blogartikel lassen sich damit aber schwerer überfliegen als in einer Liste, und sie brauchen mehr Platz.5 Dazu kommt die Sache mit den Bildern. Wenn du für jeden Artikel ein Bild finden musst, nimmst du irgendwann Bilder, die mit dem Text nichts zu tun haben.
Ich habe mich für die Liste entschieden. Nach Jahren gruppiert, in jeder Zeile Datum, Titel und ein Satz.
Das Schaufenster ist dunkel, hier ist es hell
Mein Portfolio ist dunkel, hier ist es hell. Der Grund ist ein Befund von NN/g: Bei normalem Sehvermögen schneidet ein heller Hintergrund beim Lesen besser ab, und der Unterschied wächst, je kleiner die Schrift ist.6 Für einen Ort, an dem lange Texte gelesen werden, hat mir das gereicht. Wenn dein Handy oder Computer im Dunkelmodus ist, öffnet sich auch die Seite dunkel, und mit dem Schalter oben rechts kannst du jederzeit wechseln.
Was fehlt, und eine Tür, die ich offen lasse
Keine Pop-ups, kein Newsletter-Kasten, keine Kommentare, keine Werbung. Auch keine Cookies, also auch kein Cookie-Banner. Selbst die Schriften kommen nicht von einem fremden Server.
Auf den Seiten, die ich gemessen habe, habe ich deutlich gesehen, wie sehr all das ermüdet. Auf einer Artikelseite von Every lagen gleichzeitig fünf fixierte Ebenen übereinander: Kopfleiste, Cookie-Banner, Anmeldefenster und zwei Boxen in den Ecken. In einem Artikel auf Substack wurde ich viermal gebeten, ein Abo abzuschließen. Die Seite von Linear lud 217 einzelne Skripte. Und nichts davon macht einen Text besser lesbar.
Dafür gibt es eine Tür, die ich offen lasse: KI-Bots. Bots, die für Suchanfragen unterwegs sind, dürfen hier genauso rein wie die, die Websites durchkämmen, um Modelle zu trainieren. Wenn es mir nützt, dass meine Texte in das Training eines Modells einfließen, hat es keinen Sinn, diese Tür zu schließen.
Warum eine eigene Adresse
Zuerst dachte ich an eine komplett eigene Domain wie burakreis.blog. Die kostet 20 Dollar im Jahr, und die wollte ich vorerst nicht ausgeben. Dann habe ich erfahren, dass man bei Google auch für eine Subdomain einen eigenen Websitenamen angeben kann.7 Der Blog liegt jetzt unter blog.designedbyburak.com. Im Menü des Portfolios gibt es keinen Link hierher, damit das Schaufenster schlicht bleibt. Aber wer hier schreibt, steht auf jeder Seite, und die beiden Websites wissen voneinander.
Wenn dir etwas ins Auge sticht, eine zu lange Zeile oder eine zu kleine Schrift, schreib mir: hello@designedbyburak.com
Nachtrag: Während ich diesen Text schrieb, habe ich den Blog noch auf einem sehr schmalen Bildschirm geöffnet, und das Menü oben ragte über die Seite hinaus. Ich habe es behoben. Ein bisschen komisch ist es trotzdem, dass der erste Fehler ausgerechnet beim Schreiben dieses Textes auftauchte.