Vor etwa vier Wochen habe ich einen Artikel der Washington Post gelesen und war von dem Artikellayout und der Headline, die über allem steht, begeistert. In der Bahn habe ich also angefangen, dieses Layout zunächst in Codepen nachzubauen und so den Grundstein für dieses neue Blog-Design gelegt.

Dies ist das erste grundlegende Design-Update für den Blog, der seit relativ genau zwei Jahren existiert. Zwar habe ich immer wieder neue Elemente hineingebracht, diese konnten jedoch auch nicht wirklich zum Design beitragen. Was hat mich zu diesem Blog-Design verleitet?

Features

Unter dem Codenamen postoni vereinigt sind diese Features:

  1. Der Titel überstreckt die gesamte Breite des Browsers. ✅
  2. Es gibt eine Autorenkarte neben jedem Artikel, die mich kurz vorstellt und auf die wichtigsten Social Media-Links verweist. ✅
  3. Eine Liste auf der rechten Seite zeigt die fünf letzten Blog-Posts. Dadurch soll der Cross-Traffic erhöht werden, denn wer einen Artikel liest, ist vielleicht auch an einem anderen meiner letzten Posts interessiert. ✅
  4. Die Breitennutzung durch Content wurde optimiert, im Desktop-Modus gibt es neben dem Artikel-Text noch die Autorenkarte und die letzten Artikel; Tablets schieben diese Elemente unter den Post-Text; bei Handys benutzt die Autorenkarte die gesamte Breite und die letzten Artikel werden ausgeblendet. ✅ Probier es doch mal aus, indem du das Browserfenster größer und kleiner machst!
  5. Die Kommentar-Sektion beruht weiter auf Disqus, diesmal gibt es jedoch einen kleinen Erklärungstext dazu. ✅ Vielleicht schreibe ich hierzu auch noch einen Blogpost.
  6. Sämtliche Links, die früher verbreitet wurden, bleiben erhalten und der RSS-Feed 🔊 ist auch noch, wo er ist. Das liegt daran, dass ich den Static Site Generator Jekyll benutze und das neue Design eigentlich nur eine Neuinterpretierung der alten Engine ist. ✅

Fonts

Nachdem der Matteo zu einer Vorversion monierte, dass ich zu viele Fonts einsetze, habe ich diese Zahl ein wenig reduziert. Momentan wird verwendet:

  • postoniWide: Die originale Washington Post-Schrift Cardo: Die schöne Serifen-Schrift erkennt man in der Überschrift, dem Post-Content, der Navigation und überall sonst auf der Seite.
  • Consolas: Die Code-Font habe ich überall dort eingesetzt, wo Informationen über mich stehen (z.B. in der Autorenkarte), sowie für Seitennamen ganz oben und ganz unten. Dadurch soll meine Persönlichkeit als Geek und Programmierer verdeutlicht und das generelle Thema des Blogs erkennbar werden. Natürlich ist Consolas auch die Schrift für alle Code-Schnipsel, die in den Posts vorkommen.
  • Helvetica Neue, Arial: Die Standardschrift so vieler Webseiten kommt leider auch auf diese noch vereinzelt vor: Es ist zum Beispiel nicht möglich, die Reddit- oder Twitter-Einbindungen zu verändern; oder die ChartJS-Torte bei meinem Artikel zum E-Perso hat von PostoniWide auch noch nichts gehört. Zuletzt ist das Disqus-Embed auch nicht kontrollierbar und mit Helvetica Neue, Arial eigentlich ganz hübsch. Den Button, um das Embed zu laden, habe ich dann auch gleich mit der serifenlosen Schrift gestaltet, abgesehen davon, dass ich den Button in PostoniWide einfach hässlich finde 🙄 Ach ja: Wenn ein Artikel Unterkapitel hat, werden diese auch serifenlos angezeigt, um die Überschrift vom Rest des Textes abzutrennen.

Genutzte Bibliotheken

Für dieses Design habe ich verschiedene Dienste benutzt:

  • Bootstrap is love, Bootstrap is life. Und regelt auf diesem Blog die Media-Queries, das Grid System und vieles mehr.
  • highlight.js nimmt mir das Syntax-Highlighting der Code-Listings ab und erkennt die Sprachen, die verwendet werden.
  • Ich nutze Disqus als Kommentarsystem.
  • Für das Unterstreichen der Links habe ich mich an dieses Tutorial gehalten.
  • Dieser jsFiddle brachte mich zu den Schriftarten und wie ich sie implementieren kann.

Wie findest Du das neue Blog-Design? Klick dich doch mal durch und schreib mir deine Meinung in die Kommentare! Wenn du Fehler findest, möchte ich mich auch gerne darum kümmern. :)

Avatar

Veröffentlicht am von Jannik

19 | der blasse, dünne Junge aus der Nachbarschaft | Macht Web Design, Theatertechnik und Pfadfinder | Ist #Wö‑Leiter | Studiert was mit Medien