kaffeeringe.de

Redesign: kaffeeringe.de im neuen Look

Kaffeeringe Logo
Kaffeeringe Logo 2012

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.

kaffeeringe.de Anno 2000
kaffeeringe.de Anno 2000

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.

kaffeeringe.de im Microsoft Internet Explorer 5.5
Internet Explorer 5.5

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.

Pingbacks

  1. Google PageSpeed Insights: Google Pagespeed: Die 100 Punkte Herausforderung
  2. Die 100 Punkte Herausforderung | World of WordPress

Kommentare

Dennis

Na, wenn du mi­ch schon er­wähn­st, dann will ich doch zu­min­dest zu den Ersten ge­hö­ren, die ein paar Worte zum Redesign ver­lie­ren:

Das neue, mi­ni­ma­lis­ti­sche Design ge­fällt mir rich­tig gut. Die Entscheidung, die Kaffeeringe zu über­ar­bei­ten und in das Logo zu in­te­grie­ren, hal­te ich für rich­tig, zu­mal du mit der sti­li­sier­ten Form jetzt auch ein biss­chen mehr ma­chen kann­st (z.B. auf 6 Meter Banner dru­cken).

Dadurch, dass du die zu­sätz­li­chen Spalten ent­fernt hast, fällt der Fokus so­fort auf das Wesentliche, den Artikel. Das war bei dei­nem letz­ten Design nicht un­be­dingt der Fall. Ich wür­de mir viel­leicht no­ch mal die Laufweite des Textes und den Zeilenabstand et­was ge­nau­er an­schau­en, weil es auf klei­nen Bildschirmen no­ch nicht ganz so ein­fach ist, in die nächs­te Zeile zu sprin­gen, aber son­st ge­fällt es mir.

Wird denn im nächs­ten Schritt no­ch ei­ne Response-Version fol­gen? Dann wür­de es auf je­den Fall no­ch et­was leich­ter fal­len, dei­ne Artikel auf dem Smartphone zu le­sen.

Steffen Voß

Danke für das Lob. 😉

Responsive-Design steht auf der Liste. Auch das ist si­cher­li­ch ein­fa­cher mit ei­nem schlich­ten Layout und schlan­kem CSS.

Patrick Cornelißen

Mir ge­fällt das neue Design sehr gut. Es ist klar, sau­ber oh­ne viel Schnörkel!

Jan-Hendrik Oldag

Schick und kon­se­quent durch­ge­zo­gen — sehr ge­lun­gen!

Eine Frage zum „ju­s­ti­fy“: Musst du sämt­li­che soft hy­phens selbst de­fi­nie­ren?

Und zum Logo: Ohne Schriftzug wä­re es na­tür­li­ch er­heb­li­ch coo­ler 😉

Steffen Voß

Danke!

Die Soft-Hyphen setzt WP-Typography. Das wie­der­um be­nutzt die Klasse PHP-Typography.

Das mit dem Logo oh­ne Schriftzug wer­de ich ein­fach mal tes­ten, glau­be ich 😀

Moritz Avenarius

Top! Minimalizm ru­lesz!

Axel Guckelsberger

Hallo Steffen,

das Redesign ge­fällt mir sehr gut. Der mi­ni­ma­lis­ti­sche Ansatz sorgt da­für, dass die ver­blei­ben­den Elemente ih­ren ver­dien­ten Stellenwert er­hal­ten. Die Fotos wür­de ich je­doch nicht kom­plett raus­wer­fen, denn die Bildsprache hal­te ich bei den meis­ten Artikeln Deiner Seite für sehr ge­lun­gen.

Auf der Startseite gibt es ein klei­nes Problem: durch das au­to­ma­ti­sche Nachladen der Artikel kommt man ei­gent­li­ch nie da­zu, den Footer dau­er­haft zu se­hen um si­ch die Telefonnummer ab­zu­tip­pen oder auf den E-Mail-Link zu kli­cken.

Martin

Hi Steffen,

tech­ni­sch und auch zum Thema „weg­las­sen“ bei­de Daumen nach oben. Merkwürdig aber, dass der Klick auf ein Bild er­st ei­nen Artikel auf­ruft, in dem man dann er­neut kli­cken muss, um das Bild groß zu se­hen.

In Sachen Design schlie­ße ich mi­ch an, dass we­ni­ger mehr sein kann, bin aber vom jet­zi­gen Stand al­les an­de­re als ge­flasht. Der Schriftschnitt wirkt hier sehr mäch­tig, da­zu we­nig Durchschuss (Chrome 20.0). Vor al­lem die Headlines wir­ken sehr schwer. Dazu mag ich per­sön­li­ch das Ocker gar nicht 🙁 Sobald das Logo beim Lesen oben raus ge­scrollt wur­de, wirkt die Seite et­was „schief“, näm­li­ch so „fast zen­triert“, das gilt vor al­lem für hö­he­ren Auflösungen. Die Rahmen wir­ken sehr sehr leicht. Insgesamt wün­sche ich mir auch mehr Farbe und mehr Flächen. Beim Footer fän­de ich es ed­ler, wenn un­ter­halb der Infozeile no­ch et­was „Luft“ blie­be.

Also im Detail viel­leicht no­ch Luft nach oben 🙂

Steffen Voß

Danke für das Feedback!

Ich ha­be ein paar von Euren Tipps um­ge­setzt und ein­fach mal aus­pro­biert, wie es mit dem Logo und oh­ne Schriftzug aus­sieht. Das ge­fällt mir ganz gut. Was meint ihr?

Axel Guckelsberger

Ich fand den Logo mit Schriftzug schö­ner, aber im Endeffekt ist es im­mer Geschmackssache 😉

Alex

Also mir per­sön­li­ch ge­fiel das „al­te“ Design recht gut. Anfangs dach­te ich beim neu­en Design, ich wür­de auf die mo­bi­le Seite wei­ter­ge­lei­tet wor­den sein 😉
Ich fin­de die­ses sehr mi­ni­ma­lis­ti­sche Design ziem­li­ch mu­tig, kann mi­ch al­ler­dings gut da­mit an­freun­den. So wird dem ei­gent­li­chen Content mehr Aufmerksamkeit ge­schenkt und die Usability ist nicht zu sehr eing­s­chränkt – auch wenn mi­ch die feh­len­de Navigation an­fangs schon ge­stört hat – oder zu­min­dest die Möglichkeit „wei­ter­zu­blät­tern“.
Trotz al­le dem fin­de ich das neue Design echt ge­lun­gen!

Dieter

Moin Steffen.

Jetzt bin ich hin und her ge­ris­sen. Auf der ei­nen Seite ge­fällt mir die strin­gen­te Reduktion aufs Wesentliche und die da­durch er­höh­te Lesbarkeit der Texte im neu­en Design sehr gut. Auf der an­de­ren Seite dach­te ich vor ein paar Tagen no­ch so: »Die Seite vom Steffen sieht ja mal klas­se aus, so mit den or­ga­ni­schen Elementen (rea­lis­ti­scher Tassenabdruck + Papiersimulation). Ich muss ihn un­be­dingt mal fra­gen, wie er das ge­macht hat und ob ich da­von ab­kup­fern darf.« Das al­te Design war ein­fach »nett«. Und ich fand es auch nicht zu über­la­den, son­dern auf ge­müt­li­che Weise an­spre­chend. Verglichen mit dem neu­en hier lie­gen na­tür­li­ch Welten da­zwi­schen. Mir fehlt die Papiersimulation. Das Redesign emp­fin­de ich als ist sehr praktisch/funktional, aber lei­der auch als glatt/kalt.

Danke für Deinen aus­führ­li­chen Text zu Deinen Überlegungen. Dein Gedankengang wird nach­voll­zieh­bar dar­ge­stellt und da­durch sehr lehr­reich bzw. wirkt an­re­gend über die ei­ge­ne Seite noch­mal nach­zu­den­ken.

Viele Grüße,
Dieter

Erinaceus

An si­ch nicht schlecht, nur für klei­ne Bildschirme nicht ge­eig­net. Um Blogeinträge le­sen zu kön­nen muss ich er­st nach rechts scrol­len. Wenn ich das ma­che, über­deckt das „Kaffeeringe“-Logo den Text.

Thorsten Panknin

Hallo Steffen,

ich fin­de die Reduktion auf das Wesentliche sehr gut. Alle zu­min­dest für mi­ch in­ter­es­san­ten Meta-Daten sind auch gut zu fin­den und die Lesbarkeit der Inhalte hat ge­won­nen. Artikel sind klar struk­tu­riert und ei­ne Schriftgröße von 16px fin­de ich sehr an­ge­nehm.

Die sti­li­sier­ten Kaffeeflecken wol­len mir nicht so recht ge­fal­len, da sie auf mi­ch nicht mehr so or­ga­ni­sch wir­ken wie vor­her; oh­ne den Kaffeeringe-Text hän­gen sie für mi­ch zu­sätz­li­ch eher „ko­mi­sch“ oben links her­um. Das als per­ma­nent sicht­ba­ren Link zur Startseite zu nut­zen, ist ei­ne gu­te Idee. Als Toplink fän­de ich es no­ch bes­ser.

Die dün­ne Umrisslinie um den Inhalt fin­de ich ir­gend­wie wirk­li­ch „dün­ne“ und er­füllt für mi­ch kei­nen sicht­ba­ren Zweck. Im Gegenteil glau­be ich, dass das Layout oh­ne die Kontur auch funk­tio­nie­ren oder so­gar ge­win­nen wür­de … al­lein durch den Blocksatz wer­den kla­re Linien de­fi­niert, ei­ne Abgrenzung nach au­ßen er­scheint mir un­nö­tigt.

Lesbarkeit für den Gewinn 🙂

Dirk Lerche

Ein ge­lun­ge­nes Layout und ein in­ter­es­san­ter Artikel.

Markus

Hallo,
schö­nes neu­es Design, ge­fällt mir gut! 🙂
Ich fän­de es je­doch gut, wenn es wie­der den RSS-Feed-Button oder we­nigs­tens ei­nen Link zum RSS-Feed gibt. Wenn mi­ch ei­ne Website/ein Blog in­ter­es­siert, dann schau‘ ich zu­er­st, ob es ei­nen RSS-Feed oder ei­nen Twitter-Account gibt. Das möch­te ich di­rekt se­hen und nicht er­st mei­nen Reader star­ten 😉 .
Weiter so!
Grüße,
Markus

Steffen Voß

@Markus: Ich habs jetzt ein­fach mal ver­sucht. Findest Du die Buttons? 😉

Kai Breker

Ich fin­de das neue Design auch sehr wer­tig und ge­fäl­lig. Aber mir fehlt ein Suchfeld.

Würde si­ch so ein klei­nes un­auf­fäl­li­ges Suchfeld un­ter den Kafferingen nicht gut ma­chen? 😉

KChristoph

Schön.
Meine Kaffeeringe sind im­mer et­was kleck­si­ger …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Möchtest Du benachrichtigt werden, wenn Dir hier jemand antwortet?