Schon länger habe ich überlegt, wie ich kaffeeringe.de umgestalten könnte. Ich hatte aber keine Idee, in welche Richtung ich damit gehen wollte. Dennis hat vor ein paar Tagen einen Artikel empfohlen, in dem es um einfaches, schlichtes Design ging. Und dann bin ich über einen Artikel zu Macrotypografie gestolpert, dessen Tipps ich einmal ausprobieren wollte. Daraus ist die Idee für das neue Layout entstanden: Schlicht, lesbar und dem Medium angemessen.

„Die CD Mit Dem Kaffeeringcover“ von Max Goldt hatte mich Anfang 2000 darauf gebracht, dass „Kaffeeringe“ ein toller Name für etwas mit Internet-Bezug ist: Kaffee ist meiner Meinung nach die treibende Kraft für Innovation im Internet (sorry, Google, Apple,…). Danach habe ich immer versucht, realistische Kaffeeringe auf einem realistischen Papierhintergrund zu präsentieren. Das hat mich von der Idee her in letzter Zeit gelangweilt. Zusätzlich fand ich meine Umsetzung optisch nicht besonders gelungen. Und technisch hat mich geärgert, dass das Layout auf einem fremden Theme basierte, dass selbst schon ein mehrere tausend Zeilen langes CSS mitbrachte. Etwas Neues musste her. Etwas Schlichteres.
Das Logo
Zunächst habe ich mir das Logo vorgenommen und aus den gescannten Kaffeeringen ein paar stilisierte Ringe gemacht. Ich finde, man erkennt die immer noch. Dann habe ich mir einen Ersatz für die verschnörkelten Schriftarten aus dem alten Logo gemacht. Die Schrift sollte schlicht und modern sein und etwas mit dem Inhalt von kaffeeringe.de zu tun haben. Ich habe mich dann für die Ubuntu-Schrift entschieden, weil sie frei verfügbar ist und für mich ein Stück freie Software repräsentiert – so wie Helvetica für Apple steht. Den Slogan „Internet & Kreativität“ habe ich weggelassen. Der hat keinerlei Funktion gehabt und ich überlege, ob ich auch den Schriftzug weglasse und die Kaffeeringe und die URL für sich sprechen zu lassen.
Das Layout
Ich habe dann angefangen, die Tipps von Smashing Magazine für lesbare Artikel umzusetzen. Das ist im Prinzip das, was die Artikelansicht jetzt ausmacht. Danach habe ich überlegt, wie ich diese Artikelansicht in ein Layout bekomme. Bisher habe ich immer gerne mit den YUI Grids gearbeitet. Ich hatte aber keine Lust auf den ganzen HTML- und CSS-Overhead, den ich dadurch mitschleppen würde. Ich wollte doch nur irgendwo das Logo platzieren und meine Adresse in den Footer schreiben. Ich habe mir dann nur ein kleines reset.css besorgt, um eine einheitliche Ausgangsbasis für die CSS-Arbeit zu haben.

Um mit HTML5 arbeiten zu können, gibt es JavaSkripte, die alten Internet-Explorern Beine machen und laut Cross-Browser-Test scheint das sogar bis runter zum Internet Explorer 5.5 zu funktionieren. Dort funktionieren nur die WebFonts nicht. Die Arbeit mit HTML5 war ansonsten sehr einfach. Die Artikelseiten bestehen jetzt ausschließlich aus <header>, <article>, <footer>. Ich habe mir aber auch von WordPress gar nicht diese ganzen IDs und Klassen aufdrängen lassen, mit denen die Themes sonst voll sind. Dadurch ist das CSS wesentlich knapper als mein altes.
Als die Seite soweit stand, wollte ich auch für die Inhalte die Ubuntu-Schrift einsetzen. Testweise hatte ich die Schrift aus den Google Webfonts eingebunden. Nachdem das gut aussah und weiterhin leserlich war, musste ich den Google-Aufruf wieder loswerden. Ich habe mir also die Ubuntu-Schrift heruntergeladen und in ein WebFont-Paket konvertieren lassen. Eingebunden habe ich aber nicht alle Schnitte, sondern nur den normalen, einen mittelfetten und den fetten. Die musste ich dann konkret im CSS an den richtigen Stellen aufrufen und alle Attribute zu font-weight rausschmeißen. Die Schriften sehen sonst nicht gut aus.
Weglassen
Die meisten Webseiten leiden darunter, dass sie zu viele Informationen bieten, die vom eigentlich Inhalt ablenken. Gerade bei Blogs schalten Hobby-Webmaster gerne jedes verfügbare Feature ein, weil die Technik Besucher unter Umständen davon ablenken kann, dass die Inhalte nicht so toll sind.
Schon mein altes Layout war nicht gerade mit Features überladen. Es gab keine Blogroll, keine Kategorienübersicht, keine Tag-Cloud, Kein Monatsarchiv. Trotzdem waren da Dinge, die ich jetzt loswerden will:
Dazu gehören vor allem die „Social-Media-Buttons“. Die hat fast nie jemand benutzt.Update: 6.8.2012: Es gibt jetzt doch wieder Social Media Buttons. Dabei ging es mir vor allem um die Links zu meinen verschiedenen Profilen, die man jetzt von der Startseite wieder erreichen kann. Sie drängen sich nicht auf, aber ob die bunten Streifen reichen, um die Links zu finden, muss ich mal sehen… Viel aufdringlicher wollte ich die nicht machen. In der Artikelansicht sind Links zu RSS, Twitter und Facebook zu finden. Damit kann man den Artikel teilen. Ich könnte mir vorstellen, dass Interessierte, die Farben erkennen. Mal sehen. Vielleicht fliegen die auch wieder raus… Gelöst ist das übrigens mit purem CSS – No JavaScript was harmed in the making of this effect.- Ich habe die Navigation rausgeschmissen. Die letztlich hat eigentlich sinnvollerweise nur auf bookmarks.kaffeeringe.de verwiesen. Die Bildergalerie habe ich nicht mehr. Den RSS-Reader kann ohnehin nur ich benutzen – kurz: Es blieb nichts übrigt. Wer auf die Startseite zurück will, benutzt in der Regel das Logo.
- Ohne die Navigation ist nur noch das Logo übrig geblieben. Alleine für das Logo muss ich keinen Platz oberhalb des Textes verschwenden. Im alten Layout hatte ich einen sehr großen Header, den ich dann immer schon automatisch übersprungen habe: Alle Links von der Startseite auf einen Artikel hatten immer einen Text-Anker, der direkt auf die Überschrift gescrollt hat. All das habe ich mir jetzt gespart. Das Logo sitzt neben dem Text. Es ergibt ohnehin keinen Sinn, den Text noch breiter zu machen. Die Zeilenbreite ist schon relativ lang.
- Ich muss zugeben, das mir die Bilder noch Probleme bereiten. Die haben in der Regel keinen Informationswert und sie machen den Anreißer-Absatz schwerer lesbar, weil sie die Spaltenbreite ungünstig verkleinern. Ich bin kurz davor sie komplett rauszuschmeißen.
- Auf allen Seite gibt es nur das Wichtigste zu sehen: Überschrift, Text, Autorenname und Datum der Veröffentlichung. In der Artikelübersicht finde ich den Namen und das Datum überflüssig. Auch die Anzahl der Kommentare ist egal.
- Ich habe letztlich auch noch die Artikel-Navigation weggelassen: Statt der „Ältere Artikel / Neuere Artikel“-Links am Ende der Artikel-Übersicht, laden einfach automatisch die nächsten Artikel.
- Eine Kontaktseite gibt es nicht mehr so direkt: Unter jedem Artikel steht meine Adresse. Und wer meinen Namen im Artikel anklickt, bekommt das noch einmal auf einer Seite angezeigt.
Das RSS-Logo habe ich weggelassen. Wer RSS kennt und verwenden will, hat meistens einen Reader, der die korrekte URL aus dem HTML-Header der Seite holen kann. Ich habe bei dieser Entscheidung länger hin und her überlegt und ich bin mir immer noch nicht ganz sicher.Update: 6.8.2012: Ich habe mich dafür entschieden, das RSS-Logo zusammen mit Social Media Buttons oben rechts halb zu verstecken.
Technische Neuerungen
Als letztes habe ich noch zugesehen, dass die Seite „Rich Snippets“ unterstützt. Bei Google zum Beispiel kann man dadurch die Artikel mit dem Google+ Account verknüpfen. In den Suchergebnislisten wird dann mein Profilfoto aus Google+ an meinen Artikel angezeigt. Außerdem liefert die Seite Facebook-Open-Graph Tags aus, mit denen meine Artikel bei alle Seiten, die das unterstützen, ordentlich verlinkt werden können.
Die Serverstats sind jetzt ausgeschaltet. Ich habe mir die ohnehin nie angeschaut. Auf dem Server lagen aber noch Daten aus dem Jahr 2004 – als ich zu all-inkl.com als Hoster gewechselt bin. Die Statistiken laufen über mein eigenes Piwik. Und das habe ich so eingestellt, dass die IPs anonymisiert werden. Mich interessiert nicht, wer auf der Seite ist. Mich interessiert ein wenig, wie viele Leute vorbeischauen, wonach sie suchen und woher sie kommen.
Das Ergebnis
Das Ergebnis ist mal wieder ein neues Zwischenergebnis. Kaffeeringe.de ist weiterhin die Seite, auf der ich Ideen ausprobiere. Ich freue mich darüber, dass ich alle wesentlichen Information in so einem minimalen Layout unterbringen konnte. Ich finde gut, dass die Seite ohne Einbindung externer Dienste auskommt, keine Daten an Dritte weitergibt und nicht einmal mehr per Social-Media-Logo-Einbindnung Werbung für irgendwen macht, ohne dass ich davon etwas habe. Ich bin ein wenig stolz, über mein erstes komplett selbst erstelltes WordPress-Theme, das gleichzeigt mein erstes komplettes HTML5-Projekt ist und mit ziemlich wenig CSS auskommt.
Mal sehen, wie lange die Begeisterung anhält. Ich freue mich auf Euer konstruktives Feedback.
Schreibe einen Kommentar