kaffeeringe.de - Internet & Kreativität

Redesign: kaffeeringe.de im neuen Look

Kaffeeringe Logo 2012

Schon länger habe ich über­legt, wie ich kaffeeringe.de umgestal­ten kön­nte. Ich hatte aber keine Idee, in welche Rich­tung ich damit gehen wollte. Den­nis hat vor ein paar Tagen einen Artikel emp­fohlen, in dem es um ein­faches, schlichtes Design ging. Und dann bin ich über einen Artikel zu Macroty­pografie gestolpert, dessen Tipps ich ein­mal aus­pro­bieren wollte. Daraus ist die Idee für das neue Lay­out ent­standen: Schlicht, les­bar und dem Medium angemessen.

kaffeeringe.de Anno 2000

“Die CD Mit Dem Kaf­feer­ing­cover” von Max Goldt hatte mich Anfang 2000 darauf gebracht, dass “Kaf­feeringe” ein toller Name für etwas mit Internet-Bezug ist: Kaf­fee ist meiner Mei­n­ung nach die treibende Kraft für Inno­va­tion im Inter­net (sorry, Google, Apple,…). Danach habe ich immer ver­sucht, real­is­tis­che Kaf­feeringe auf einem real­is­tis­chen Papier­hin­ter­grund zu präsen­tieren. Das hat mich von der Idee her in let­zter Zeit gelang­weilt. Zusät­zlich fand ich meine Umset­zung optisch nicht beson­ders gelun­gen. Und tech­nisch hat mich geärg­ert, dass das Lay­out auf einem frem­den Theme basierte, dass selbst schon ein mehrere tausend Zeilen langes CSS mit­brachte. Etwas Neues musste her. Etwas Schlichteres.

Das Logo

Zunächst habe ich mir das Logo vorgenom­men und aus den ges­can­nten Kaf­feerin­gen ein paar stil­isierte Ringe gemacht. Ich finde, man erkennt die immer noch. Dann habe ich mir einen Ersatz für die ver­schnörkel­ten Schrif­tarten aus dem alten Logo gemacht.  Die Schrift sollte schlicht und mod­ern sein und etwas mit dem Inhalt von kaffeeringe.de zu tun haben. Ich habe mich dann für die Ubuntu-Schrift entsch­ieden, weil sie frei ver­füg­bar ist und für mich ein Stück freie Soft­ware repräsen­tiert — so wie Hel­vetica für Apple steht. Den Slo­gan “Inter­net & Kreativ­ität” habe ich wegge­lassen. Der hat kein­er­lei Funk­tion gehabt und ich über­lege, ob ich auch den Schriftzug weglasse und die Kaf­feeringe und die URL für sich sprechen zu lassen.

Das Lay­out

Ich habe dann ange­fan­gen, die Tipps von Smash­ing Mag­a­zine für les­bare Artikel umzuset­zen. Das ist im Prinzip das, was die Artike­lan­sicht jetzt aus­macht. Danach habe ich über­legt, wie ich diese Artike­lan­sicht in ein Lay­out bekomme. Bisher habe ich immer gerne mit den YUI Grids gear­beitet. Ich hatte aber keine Lust auf den ganzen HTML- und CSS–Over­head, den ich dadurch mitschlep­pen 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 ein­heitliche Aus­gangs­ba­sis für die CSS–Arbeit zu haben.

Inter­net Explorer 5.5

Um mit HTML5 arbeiten zu kön­nen, gibt es JavaSkripte, die alten Internet-Explorern Beine machen und laut Cross-Browser-Test scheint das sogar bis runter zum Inter­net Explorer 5.5 zu funk­tion­ieren. Dort funk­tion­ieren nur die Web­Fonts nicht. Die Arbeit mit HTML5 war anson­sten sehr ein­fach. Die Artikel­seiten beste­hen jetzt auss­chließlich aus <header>, <arti­cle>, <footer>. Ich habe mir aber auch von Word­Press gar nicht diese ganzen IDs und Klassen auf­drän­gen lassen, mit denen die Themes sonst voll sind. Dadurch ist das CSS wesentlich knap­per als mein altes.

Als die Seite soweit stand, wollte ich auch für die Inhalte die Ubuntu-Schrift ein­set­zen. Test­weise hatte ich die Schrift aus den Google Web­fonts einge­bun­den. Nach­dem das gut aus­sah und weit­er­hin leser­lich war, musste ich den Google-Aufruf wieder loswer­den. Ich habe mir also die Ubuntu-Schrift herun­terge­laden und in ein WebFont-Paket kon­vertieren lassen. Einge­bun­den habe ich aber nicht alle Schnitte, son­dern nur den nor­malen, einen mit­telfet­ten und den fet­ten. Die musste ich dann konkret im CSS an den richti­gen Stellen aufrufen und alle Attribute zu font-weight rauss­chmeißen. Die Schriften sehen sonst nicht gut aus.

Weglassen

Die meis­ten Web­seiten lei­den darunter, dass sie zu viele Infor­ma­tio­nen bieten, die vom eigentlich Inhalt ablenken. Ger­ade bei Blogs schal­ten Hobby-Webmaster gerne jedes ver­füg­bare Fea­ture ein, weil die Tech­nik Besucher unter Umstän­den davon ablenken kann, dass die Inhalte nicht so toll sind.

Schon mein altes Lay­out war nicht ger­ade mit Fea­tures über­laden. Es gab keine Blogroll, keine Kat­e­gorienüber­sicht, keine Tag-Cloud, Kein Monat­sarchiv. Trotz­dem waren da Dinge, die ich jetzt loswer­den 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 But­tons. Dabei ging es mir vor allem um die Links zu meinen ver­schiede­nen Pro­filen, die man jetzt von der Start­seite wieder erre­ichen kann. Sie drän­gen sich nicht auf, aber ob die bun­ten Streifen reichen, um die Links zu finden, muss ich mal sehen… Viel auf­dringlicher wollte ich die nicht machen. In der Artike­lan­sicht sind Links zu RSS, Twit­ter und Face­book zu finden. Damit kann man den Artikel teilen. Ich kön­nte mir vorstellen, dass Inter­essierte, die Far­ben erken­nen. Mal sehen. Vielle­icht fliegen die auch wieder raus… Gelöst ist das übri­gens mit purem CSS — No JavaScript was harmed in the mak­ing of this effect.
• Ich habe die Nav­i­ga­tion raus­geschmis­sen. Die let­ztlich hat eigentlich sin­nvoller­weise nur auf bookmarks.kaffeeringe.de ver­wiesen. Die Bilder­ga­lerie habe ich nicht mehr. Den RSS–Reader kann ohne­hin nur ich benutzen — kurz: Es blieb nichts übrigt. Wer auf die Start­seite zurück will, benutzt in der Regel das Logo.
• Ohne die Nav­i­ga­tion ist nur noch das Logo übrig geblieben. Alleine für das Logo muss ich keinen Platz ober­halb des Textes ver­schwen­den. Im alten Lay­out hatte ich einen sehr großen Header, den ich dann immer schon automa­tisch über­sprun­gen habe: Alle Links von der Start­seite auf einen Artikel hat­ten immer einen Text-Anker, der direkt auf die Über­schrift gescrollt hat. All das habe ich mir jetzt ges­part. Das Logo sitzt neben dem Text. Es ergibt ohne­hin keinen Sinn, den Text noch bre­iter zu machen. Die Zeilen­bre­ite ist schon rel­a­tiv lang.
• Ich muss zugeben, das mir die Bilder noch Prob­leme bere­iten. Die haben in der Regel keinen Infor­ma­tion­swert und sie machen den Anreißer-Absatz schw­erer les­bar, weil sie die Spal­tenbre­ite ungün­stig verklein­ern. Ich bin kurz davor sie kom­plett rauszuschmeißen.
• Auf allen Seite gibt es nur das Wichtig­ste zu sehen: Über­schrift, Text, Autoren­name und Datum der Veröf­fentlichung. In der Artikelüber­sicht finde ich den Namen und das Datum über­flüs­sig. Auch die Anzahl der Kom­mentare ist egal.
• Ich habe let­ztlich auch noch die Artikel-Navigation wegge­lassen: Statt der “Ältere Artikel / Neuere Artikel”-Links am Ende der Artikel-Übersicht, laden ein­fach automa­tisch die näch­sten Artikel.
• Eine Kon­tak­t­seite gibt es nicht mehr so direkt: Unter jedem Artikel steht meine Adresse. Und wer meinen Namen im Artikel anklickt, bekommt das noch ein­mal auf einer Seite angezeigt.
• Das RSS–Logo habe ich wegge­lassen. Wer RSS kennt und ver­wen­den will, hat meis­tens einen Reader, der die kor­rekte URL aus dem HTML–Header der Seite holen kann. Ich habe bei dieser Entschei­dung länger hin und her über­legt und ich bin mir immer noch nicht ganz sicher. Update: 6.8.2012: Ich habe mich dafür entsch­ieden, das RSS–Logo zusam­men mit Social Media But­tons oben rechts halb zu verstecken.

Tech­nis­che Neuerungen

Als let­ztes habe ich noch zuge­se­hen, dass die Seite “Rich Snip­pets” unter­stützt. Bei Google zum Beispiel kann man dadurch die Artikel mit dem Google+ Account verknüpfen. In den Suchergeb­nis­lis­ten wird dann mein Pro­fil­foto aus Google+ an meinen Artikel angezeigt. Außer­dem liefert die Seite Facebook-Open-Graph Tags aus, mit denen meine Artikel bei alle Seiten, die das unter­stützen, ordentlich ver­linkt wer­den können.

Die Server­stats sind jetzt aus­geschal­tet. Ich habe mir die ohne­hin nie angeschaut. Auf dem Server lagen aber noch Daten aus dem Jahr 2004 — als ich zu all-inkl.com als Hoster gewech­selt bin. Die Sta­tis­tiken laufen über mein eigenes Piwik. Und das habe ich so eingestellt, dass die IPs anonymisiert wer­den. Mich inter­essiert nicht, wer auf der Seite ist. Mich inter­essiert ein wenig, wie viele Leute vor­beis­chauen, wonach sie suchen und woher sie kommen.

Das Ergeb­nis

Das Ergeb­nis ist mal wieder ein neues Zwis­ch­en­ergeb­nis. Kaffeeringe.de ist weit­er­hin die Seite, auf der ich Ideen aus­pro­biere. Ich freue mich darüber, dass ich alle wesentlichen Infor­ma­tion in so einem min­i­malen Lay­out unter­brin­gen kon­nte. Ich finde gut, dass die Seite ohne Ein­bindung externer Dien­ste auskommt, keine Daten an Dritte weit­ergibt und nicht ein­mal mehr per Social-Media-Logo-Einbindnung Wer­bung für irgendwen macht, ohne dass ich davon etwas habe. Ich bin ein wenig stolz, über mein erstes kom­plett selbst erstelltes WordPress-Theme, das gle­ichzeigt mein erstes kom­plettes HTML5–Pro­jekt ist und mit ziem­lich wenig CSS auskommt.

Mal sehen, wie lange die Begeis­terung anhält. Ich freue mich auf Euer kon­struk­tives Feedback.

Tags: CSS, Dennis Erdmann, Design, Facebook, Google, HTML, JavaScript, Open Graph, Relaunch, Rich Snippets, Smashing Magazine, Typografie, Webdesign