Steffen Voß - Technologie & Gesellschaft

Redesign : kaffeeringe.de im neuen Look

Kaffeeringe Logo
Kaffeeringe Logo 2012

Steffen Voß

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:

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
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.

25.7.2012 um 15:26
Steffen Voß
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.

25.7.2012 um 15:28
Patrick Cornelißen
Patrick Cornelißen:

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

25.7.2012 um 15:35
Jan-Hendrik Oldag
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 😉

25.7.2012 um 15:49
Steffen Voß
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 😀

25.7.2012 um 17:57
Moritz Avenarius
Moritz Avenarius:

Top! Minimalizm rulesz!

25.7.2012 um 18:08
Axel Guckelsberger
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.

25.7.2012 um 19:11
Martin
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 🙂

25.7.2012 um 20:17
Steffen Voß
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?

25.7.2012 um 22:24
Axel Guckelsberger
Axel Guckelsberger:

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

26.7.2012 um 00:04
Alex
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!

26.7.2012 um 10:37
Dieter
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

27.7.2012 um 08:34
Erinaceus
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.

27.7.2012 um 10:13
Thorsten Panknin
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 🙂

27.7.2012 um 11:11
Dirk Lerche
Dirk Lerche:

Ein gelungenes Layout und ein interessanter Artikel.

28.7.2012 um 12:59
Markus
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

30.7.2012 um 18:17
Steffen Voß
Steffen Voß:

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

31.7.2012 um 21:44
Kai Breker
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? 😉

31.7.2012 um 23:27
KChristoph
KChristoph:

Schön.
Meine Kaffeeringe sind immer etwas klecksiger …

6.8.2012 um 14:44

Schreibe einen Kommentar

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

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?