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 mich schon erwähnst, dann will ich doch zumindest zu den Ersten gehören, die ein paar Worte zum Redesign verlieren:

Das neue, minimalistische Design gefällt mir richtig gut. Die Entscheidung, die Kaffeeringe zu überarbeiten und in das Logo zu integrieren, halte ich für richtig, zumal du mit der stilisierten Form jetzt auch ein bisschen mehr machen kannst (z.B. auf 6 Meter Banner drucken).

Dadurch, dass du die zusätzlichen Spalten entfernt hast, fällt der Fokus sofort auf das Wesentliche, den Artikel. Das war bei deinem letzten Design nicht unbedingt der Fall. Ich würde mir vielleicht noch mal die Laufweite des Textes und den Zeilenabstand etwas genauer anschauen, weil es auf kleinen Bildschirmen noch nicht ganz so einfach ist, in die nächste Zeile zu springen, aber sonst gefällt es mir.

Wird denn im nächsten Schritt noch eine Response-Version folgen? Dann würde es auf jeden Fall noch etwas leichter fallen, deine Artikel auf dem Smartphone zu lesen.

Steffen Voß

Danke für das Lob. 😉

Responsive-Design steht auf der Liste. Auch das ist sicherlich einfacher mit einem schlichten Layout und schlankem CSS.

Patrick Cornelißen

Mir gefällt das neue Design sehr gut. Es ist klar, sauber ohne viel Schnörkel!

Jan-Hendrik Oldag

Schick und konsequent durchgezogen — sehr gelungen!

Eine Frage zum „justify“: Musst du sämtliche soft hyphens selbst definieren?

Und zum Logo: Ohne Schriftzug wäre es natürlich erheblich cooler 😉

Steffen Voß

Danke!

Die Soft-Hyphen setzt WP-Typography. Das wiederum benutzt die Klasse PHP-Typography.

Das mit dem Logo ohne Schriftzug werde ich einfach mal testen, glaube ich 😀

Moritz Avenarius

Top! Minimalizm rulesz!

Axel Guckelsberger

Hallo Steffen,

das Redesign gefällt mir sehr gut. Der minimalistische Ansatz sorgt dafür, dass die verbleibenden Elemente ihren verdienten Stellenwert erhalten. Die Fotos würde ich jedoch nicht komplett rauswerfen, denn die Bildsprache halte ich bei den meisten Artikeln Deiner Seite für sehr gelungen.

Auf der Startseite gibt es ein kleines Problem: durch das automatische Nachladen der Artikel kommt man eigentlich nie dazu, den Footer dauerhaft zu sehen um sich die Telefonnummer abzutippen oder auf den E-Mail-Link zu klicken.

Martin

Hi Steffen,

technisch und auch zum Thema „weglassen“ beide Daumen nach oben. Merkwürdig aber, dass der Klick auf ein Bild erst einen Artikel aufruft, in dem man dann erneut klicken muss, um das Bild groß zu sehen.

In Sachen Design schließe ich mich an, dass weniger mehr sein kann, bin aber vom jetzigen Stand alles andere als geflasht. Der Schriftschnitt wirkt hier sehr mächtig, dazu wenig Durchschuss (Chrome 20.0). Vor allem die Headlines wirken sehr schwer. Dazu mag ich persönlich das Ocker gar nicht 🙁 Sobald das Logo beim Lesen oben raus gescrollt wurde, wirkt die Seite etwas „schief“, nämlich so „fast zentriert“, das gilt vor allem für höheren Auflösungen. Die Rahmen wirken sehr sehr leicht. Insgesamt wünsche ich mir auch mehr Farbe und mehr Flächen. Beim Footer fände ich es edler, wenn unterhalb der Infozeile noch etwas „Luft“ bliebe.

Also im Detail vielleicht noch Luft nach oben 🙂

Steffen Voß

Danke für das Feedback!

Ich habe ein paar von Euren Tipps umgesetzt und einfach mal ausprobiert, wie es mit dem Logo und ohne Schriftzug aussieht. Das gefällt mir ganz gut. Was meint ihr?

Axel Guckelsberger

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

Alex

Also mir persönlich gefiel das „alte“ Design recht gut. Anfangs dachte ich beim neuen Design, ich würde auf die mobile Seite weitergeleitet worden sein 😉
Ich finde dieses sehr minimalistische Design ziemlich mutig, kann mich allerdings gut damit anfreunden. So wird dem eigentlichen Content mehr Aufmerksamkeit geschenkt und die Usability ist nicht zu sehr eingschränkt – auch wenn mich die fehlende Navigation anfangs schon gestört hat – oder zumindest die Möglichkeit „weiterzublättern“.
Trotz alle dem finde ich das neue Design echt gelungen!

Dieter

Moin Steffen.

Jetzt bin ich hin und her gerissen. Auf der einen Seite gefällt mir die stringente Reduktion aufs Wesentliche und die dadurch erhöhte Lesbarkeit der Texte im neuen Design sehr gut. Auf der anderen Seite dachte ich vor ein paar Tagen noch so: »Die Seite vom Steffen sieht ja mal klasse aus, so mit den organischen Elementen (realistischer Tassenabdruck + Papiersimulation). Ich muss ihn unbedingt mal fragen, wie er das gemacht hat und ob ich davon abkupfern darf.« Das alte Design war einfach »nett«. Und ich fand es auch nicht zu überladen, sondern auf gemütliche Weise ansprechend. Verglichen mit dem neuen hier liegen natürlich Welten dazwischen. Mir fehlt die Papiersimulation. Das Redesign empfinde ich als ist sehr praktisch/funktional, aber leider auch als glatt/kalt.

Danke für Deinen ausführlichen Text zu Deinen Überlegungen. Dein Gedankengang wird nachvollziehbar dargestellt und dadurch sehr lehrreich bzw. wirkt anregend über die eigene Seite nochmal nachzudenken.

Viele Grüße,
Dieter

Erinaceus

An sich nicht schlecht, nur für kleine Bildschirme nicht geeignet. Um Blogeinträge lesen zu können muss ich erst nach rechts scrollen. Wenn ich das mache, überdeckt das „Kaffeeringe“-Logo den Text.

Thorsten Panknin

Hallo Steffen,

ich finde die Reduktion auf das Wesentliche sehr gut. Alle zumindest für mich interessanten Meta-Daten sind auch gut zu finden und die Lesbarkeit der Inhalte hat gewonnen. Artikel sind klar strukturiert und eine Schriftgröße von 16px finde ich sehr angenehm.

Die stilisierten Kaffeeflecken wollen mir nicht so recht gefallen, da sie auf mich nicht mehr so organisch wirken wie vorher; ohne den Kaffeeringe-Text hängen sie für mich zusätzlich eher „komisch“ oben links herum. Das als permanent sichtbaren Link zur Startseite zu nutzen, ist eine gute Idee. Als Toplink fände ich es noch besser.

Die dünne Umrisslinie um den Inhalt finde ich irgendwie wirklich „dünne“ und erfüllt für mich keinen sichtbaren Zweck. Im Gegenteil glaube ich, dass das Layout ohne die Kontur auch funktionieren oder sogar gewinnen würde … allein durch den Blocksatz werden klare Linien definiert, eine Abgrenzung nach außen erscheint mir unnötigt.

Lesbarkeit für den Gewinn 🙂

Dirk Lerche

Ein gelungenes Layout und ein interessanter Artikel.

Markus

Hallo,
schönes neues Design, gefällt mir gut! 🙂
Ich fände es jedoch gut, wenn es wieder den RSS-Feed-Button oder wenigstens einen Link zum RSS-Feed gibt. Wenn mich eine Website/ein Blog interessiert, dann schau‘ ich zuerst, ob es einen RSS-Feed oder einen Twitter-Account gibt. Das möchte ich direkt sehen und nicht erst meinen Reader starten 😉 .
Weiter so!
Grüße,
Markus

Steffen Voß

@Markus: Ich habs jetzt einfach mal versucht. Findest Du die Buttons? 😉

Kai Breker

Ich finde das neue Design auch sehr wertig und gefällig. Aber mir fehlt ein Suchfeld.

Würde sich so ein kleines unauffälliges Suchfeld unter den Kafferingen nicht gut machen? 😉

KChristoph

Schön.
Meine Kaffeeringe sind immer etwas klecksiger …

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?