kaffeeringe.de im neuen Look

Schon län­ger habe ich über­legt, wie ich kaffeeringe.de umge­stal­ten könn­te. Ich hat­te aber kei­ne Idee, in wel­che Rich­tung ich damit gehen woll­te. Den­nis hat vor ein paar Tagen einen Arti­kel emp­foh­len, in dem es um ein­fa­ches, schlich­tes Design ging. Und dann bin ich über einen Arti­kel zu Macro­ty­po­gra­fie gestol­pert, des­sen Tipps ich ein­mal aus­pro­bie­ren woll­te. Dar­aus ist die Idee für das neue Lay­out ent­stan­den: Schlicht, les­bar und dem Medi­um angemessen.

„Die CD Mit Dem Kaf­fee­ring­co­ver“ von Max Goldt hat­te mich Anfang 2000 dar­auf gebracht, dass „Kaf­fee­rin­ge“ ein tol­ler Name für etwas mit Inter­net-Bezug ist: Kaf­fee ist mei­ner Mei­nung nach die trei­ben­de Kraft für Inno­va­ti­on im Inter­net (sor­ry, Goog­le, Apple,…). Danach habe ich immer ver­sucht, rea­lis­ti­sche Kaf­fee­rin­ge auf einem rea­lis­ti­schen Papier­hin­ter­grund zu prä­sen­tie­ren. Das hat mich von der Idee her in letz­ter Zeit gelang­weilt. Zusätz­lich fand ich mei­ne Umset­zung optisch nicht beson­ders gelun­gen. Und tech­nisch hat mich geär­gert, dass das Lay­out auf einem frem­den The­me basier­te, dass selbst schon ein meh­re­re tau­send Zei­len lan­ges CSS mit­brach­te. Etwas Neu­es muss­te her. Etwas Schlichteres.

Das Logo

Zunächst habe ich mir das Logo vor­ge­nom­men und aus den gescann­ten Kaf­fee­rin­gen ein paar sti­li­sier­te Rin­ge gemacht. Ich fin­de, man erkennt die immer noch. Dann habe ich mir einen Ersatz für die ver­schnör­kel­ten Schrift­ar­ten aus dem alten Logo gemacht.  Die Schrift soll­te schlicht und modern sein und etwas mit dem Inhalt von kaffeeringe.de zu tun haben. Ich habe mich dann für die Ubun­tu-Schrift ent­schie­den, weil sie frei ver­füg­bar ist und für mich ein Stück freie Soft­ware reprä­sen­tiert – so wie Hel­ve­ti­ca für Apple steht. Den Slo­gan „Inter­net & Krea­ti­vi­tät“ habe ich weg­ge­las­sen. Der hat kei­ner­lei Funk­ti­on gehabt und ich über­le­ge, ob ich auch den Schrift­zug weg­las­se und die Kaf­fee­rin­ge und die URL für sich spre­chen zu lassen.

Das Layout

Ich habe dann ange­fan­gen, die Tipps von Smas­hing Maga­zi­ne für les­ba­re Arti­kel umzu­set­zen. Das ist im Prin­zip das, was die Arti­kel­an­sicht jetzt aus­macht. Danach habe ich über­legt, wie ich die­se Arti­kel­an­sicht in ein Lay­out bekom­me. Bis­her habe ich immer ger­ne mit den YUI Grids gear­bei­tet. Ich hat­te aber kei­ne Lust auf den gan­zen HTML- und CSS-Over­head, den ich dadurch mit­schlep­pen wür­de. Ich woll­te doch nur irgend­wo das Logo plat­zie­ren und mei­ne Adres­se in den Foo­ter schrei­ben. Ich habe mir dann nur ein klei­nes reset.css besorgt, um eine ein­heit­li­che Aus­gangs­ba­sis für die CSS-Arbeit zu haben.

Um mit HTML5 arbei­ten zu kön­nen, gibt es JavaSkrip­te, die alten Inter­net-Explo­rern Bei­ne machen und laut Cross-Brow­ser-Test scheint das sogar bis run­ter zum Inter­net Explo­rer 5.5 zu funk­tio­nie­ren. Dort funk­tio­nie­ren nur die Web­Fonts nicht. Die Arbeit mit HTML5 war ansons­ten sehr ein­fach. Die Arti­kel­sei­ten bestehen jetzt aus­schließ­lich aus <hea­der>, <artic­le>, <foo­ter>. Ich habe mir aber auch von Word­Press gar nicht die­se gan­zen IDs und Klas­sen auf­drän­gen las­sen, mit denen die The­mes sonst voll sind. Dadurch ist das CSS wesent­lich knap­per als mein altes.

Als die Sei­te soweit stand, woll­te ich auch für die Inhal­te die Ubun­tu-Schrift ein­set­zen. Test­wei­se hat­te ich die Schrift aus den Goog­le Web­fonts ein­ge­bun­den. Nach­dem das gut aus­sah und wei­ter­hin leser­lich war, muss­te ich den Goog­le-Auf­ruf wie­der los­wer­den. Ich habe mir also die Ubun­tu-Schrift her­un­ter­ge­la­den und in ein Web­Font-Paket kon­ver­tie­ren las­sen. Ein­ge­bun­den habe ich aber nicht alle Schnit­te, son­dern nur den nor­ma­len, einen mit­tel­fet­ten und den fet­ten. Die muss­te ich dann kon­kret im CSS an den rich­ti­gen Stel­len auf­ru­fen und alle Attri­bu­te zu font-weight raus­schmei­ßen. Die Schrif­ten sehen sonst nicht gut aus.

Weglassen

Die meis­ten Web­sei­ten lei­den dar­un­ter, dass sie zu vie­le Infor­ma­tio­nen bie­ten, die vom eigent­lich Inhalt ablen­ken. Gera­de bei Blogs schal­ten Hob­by-Web­mas­ter ger­ne jedes ver­füg­ba­re Fea­ture ein, weil die Tech­nik Besu­cher unter Umstän­den davon ablen­ken kann, dass die Inhal­te nicht so toll sind.

Schon mein altes Lay­out war nicht gera­de mit Fea­tures über­la­den. Es gab kei­ne Blogroll, kei­ne Kate­go­rien­über­sicht, kei­ne Tag-Cloud, Kein Monats­ar­chiv. Trotz­dem waren da Din­ge, die ich jetzt los­wer­den will:

• Dazu gehö­ren vor allem die „Social-Media-But­tons“.  Die hat fast nie jemand benutzt. Update: 6.8.2012: Es gibt jetzt doch wie­der Social Media But­tons. Dabei ging es mir vor allem um die Links zu mei­nen ver­schie­de­nen Pro­fi­len, die man jetzt von der Start­sei­te wie­der errei­chen kann. Sie drän­gen sich nicht auf, aber ob die bun­ten Strei­fen rei­chen, um die Links zu fin­den, muss ich mal sehen… Viel auf­dring­li­cher woll­te ich die nicht machen. In der Arti­kel­an­sicht sind Links zu RSS, Twit­ter und Face­book zu fin­den. Damit kann man den Arti­kel tei­len. Ich könn­te mir vor­stel­len, dass Inter­es­sier­te, die Far­ben erken­nen. Mal sehen. Viel­leicht flie­gen die auch wie­der raus… Gelöst ist das übri­gens mit purem CSS – No Java­Script was har­med in the making of this effect.
• Ich habe die Navi­ga­ti­on raus­ge­schmis­sen. Die letzt­lich hat eigent­lich sinn­vol­ler­wei­se nur auf bookmarks.kaffeeringe.de ver­wie­sen. Die Bil­der­ga­le­rie habe ich nicht mehr. Den RSS-Rea­der kann ohne­hin nur ich benut­zen – kurz: Es blieb nichts übrigt. Wer auf die Start­sei­te zurück will, benutzt in der Regel das Logo.
• Ohne die Navi­ga­ti­on ist nur noch das Logo übrig geblie­ben. Allei­ne für das Logo muss ich kei­nen Platz ober­halb des Tex­tes ver­schwen­den. Im alten Lay­out hat­te ich einen sehr gro­ßen Hea­der, den ich dann immer schon auto­ma­tisch über­sprun­gen habe: Alle Links von der Start­sei­te auf einen Arti­kel hat­ten immer einen Text-Anker, der direkt auf die Über­schrift gescrollt hat. All das habe ich mir jetzt gespart. Das Logo sitzt neben dem Text. Es ergibt ohne­hin kei­nen Sinn, den Text noch brei­ter zu machen. Die Zei­len­brei­te ist schon rela­tiv lang.
• Ich muss zuge­ben, das mir die Bil­der noch Pro­ble­me berei­ten. Die haben in der Regel kei­nen Infor­ma­ti­ons­wert und sie machen den Anrei­ßer-Absatz schwe­rer les­bar, weil sie die Spal­ten­brei­te ungüns­tig ver­klei­nern. Ich bin kurz davor sie kom­plett rauszuschmeißen.
• Auf allen Sei­te gibt es nur das Wich­tigs­te zu sehen: Über­schrift, Text, Autoren­na­me und Datum der Ver­öf­fent­li­chung. In der Arti­kel­über­sicht fin­de ich den Namen und das Datum über­flüs­sig. Auch die Anzahl der Kom­men­ta­re ist egal.
• Ich habe letzt­lich auch noch die Arti­kel-Navi­ga­ti­on weg­ge­las­sen: Statt der „Älte­re Arti­kel /​ Neue­re Artikel“-Links am Ende der Arti­kel-Über­sicht, laden ein­fach auto­ma­tisch die nächs­ten Artikel.
• Eine Kon­takt­sei­te gibt es nicht mehr so direkt: Unter jedem Arti­kel steht mei­ne Adres­se. Und wer mei­nen Namen im Arti­kel anklickt, bekommt das noch ein­mal auf einer Sei­te angezeigt.
• Das RSS-Logo habe ich weg­ge­las­sen. Wer RSS kennt und ver­wen­den will, hat meis­tens einen Rea­der, der die kor­rek­te URL aus dem HTML-Hea­der der Sei­te holen kann. Ich habe bei die­ser Ent­schei­dung län­ger hin und her über­legt und ich bin mir immer noch nicht ganz sicher. Update: 6.8.2012: Ich habe mich dafür ent­schie­den, das RSS-Logo zusam­men mit Social Media But­tons oben rechts halb zu verstecken.

Technische Neuerungen

Als letz­tes habe ich noch zuge­se­hen, dass die Sei­te „Rich Snip­pets“ unter­stützt. Bei Goog­le zum Bei­spiel kann man dadurch die Arti­kel mit dem Goog­le+ Account ver­knüp­fen. In den Such­ergeb­nis­lis­ten wird dann mein Pro­fil­fo­to aus Goog­le+ an mei­nen Arti­kel ange­zeigt. Außer­dem lie­fert die Sei­te Face­book-Open-Graph Tags aus, mit denen mei­ne Arti­kel bei alle Sei­ten, die das unter­stüt­zen, ordent­lich ver­linkt wer­den können.

Die Ser­ver­stats sind jetzt aus­ge­schal­tet. Ich habe mir die ohne­hin nie ange­schaut. Auf dem Ser­ver lagen aber noch Daten aus dem Jahr 2004 – als ich zu all-inkl.com als Hos­ter gewech­selt bin. Die Sta­tis­ti­ken lau­fen über mein eige­nes Piwik. Und das habe ich so ein­ge­stellt, dass die IPs anony­mi­siert wer­den. Mich inter­es­siert nicht, wer auf der Sei­te ist. Mich inter­es­siert ein wenig, wie vie­le Leu­te vor­bei­schau­en, wonach sie suchen und woher sie kommen.

Das Ergebnis

Das Ergeb­nis ist mal wie­der ein neu­es Zwi­schen­er­geb­nis. Kaffeeringe.de ist wei­ter­hin die Sei­te, auf der ich Ideen aus­pro­bie­re. Ich freue mich dar­über, dass ich alle wesent­li­chen Infor­ma­ti­on in so einem mini­ma­len Lay­out unter­brin­gen konn­te. Ich fin­de gut, dass die Sei­te ohne Ein­bin­dung exter­ner Diens­te aus­kommt, kei­ne Daten an Drit­te wei­ter­gibt und nicht ein­mal mehr per Social-Media-Logo-Ein­bind­nung Wer­bung für irgend­wen macht, ohne dass ich davon etwas habe. Ich bin ein wenig stolz, über mein ers­tes kom­plett selbst erstell­tes Word­Press-The­me, das gleich­zeigt mein ers­tes kom­plet­tes HTM­L5-Pro­jekt ist und mit ziem­lich wenig CSS auskommt.

Mal sehen, wie lan­ge die Begeis­te­rung anhält. Ich freue mich auf Euer kon­struk­ti­ves Feedback.