kaffeeringe.de

Redesign: kaffeeringe.de im neuen Look

Kaffeeringe Logo
Kaffeeringe Logo 2012

Schon län­ger ha­be ich über­legt, wie ich kaffeeringe.de um­ge­stal­ten könn­te. Ich hat­te aber kei­ne Idee, in wel­che Richtung ich da­mit ge­hen woll­te. Dennis hat vor ein paar Tagen ei­nen Artikel emp­foh­len, in dem es um ein­fa­ches, schlich­tes Design ging. Und dann bin ich über ei­nen Artikel zu Macrotypografie ge­stol­pert, des­sen Tipps ich ein­mal aus­pro­bie­ren woll­te. Daraus ist die Idee für das neue Layout ent­stan­den: Schlicht, les­bar und dem Medium an­ge­mes­sen.

kaffeeringe.de Anno 2000
kaffeeringe.de Anno 2000

Die CD Mit Dem Kaffeeringcover“ von Max Goldt hat­te mi­ch Anfang 2000 dar­auf ge­bracht, dass „Kaffeeringe“ ein tol­ler Name für et­was mit Internet-Bezug ist: Kaffee ist mei­ner Meinung nach die trei­ben­de Kraft für Innovation im Internet (sor­ry, Google, Apple,…). Danach ha­be ich im­mer ver­sucht, rea­lis­ti­sche Kaffeeringe auf ei­nem rea­lis­ti­schen Papierhintergrund zu prä­sen­tie­ren. Das hat mi­ch von der Idee her in letz­ter Zeit ge­lang­weilt. Zusätzlich fand ich mei­ne Umsetzung op­ti­sch nicht be­son­ders ge­lun­gen. Und tech­ni­sch hat mi­ch ge­är­gert, dass das Layout auf ei­nem frem­den Theme ba­sier­te, dass selbst schon ein meh­re­re tau­send Zeilen lan­ges CSS mit­brach­te. Etwas Neues mus­s­te her. Etwas Schlichteres.

Das Logo

Zunächst ha­be ich mir das Logo vor­ge­nom­men und aus den ge­scann­ten Kaffeeringen ein paar sti­li­sier­te Ringe ge­macht. Ich fin­de, man er­kennt die im­mer no­ch. Dann ha­be ich mir ei­nen Ersatz für die ver­schnör­kel­ten Schriftarten aus dem al­ten Logo ge­macht.  Die Schrift soll­te schlicht und mo­dern sein und et­was mit dem Inhalt von kaffeeringe.de zu tun ha­ben. Ich ha­be mi­ch dann für die Ubuntu-Schrift ent­schie­den, weil sie frei ver­füg­bar ist und für mi­ch ein Stück freie Software re­prä­sen­tiert – so wie Helvetica für Apple steht. Den Slogan „Internet & Kreativität“ ha­be ich weg­ge­las­sen. Der hat kei­ner­lei Funktion ge­habt und ich über­le­ge, ob ich auch den Schriftzug weg­las­se und die Kaffeeringe und die URL für si­ch spre­chen zu las­sen.

Das Layout

Ich ha­be dann an­ge­fan­gen, die Tipps von Smashing Magazine für les­ba­re Artikel um­zu­set­zen. Das ist im Prinzip das, was die Artikelansicht jetzt aus­macht. Danach ha­be ich über­legt, wie ich die­se Artikelansicht in ein Layout be­kom­me. Bisher ha­be ich im­mer ger­ne mit den YUI Grids ge­ar­bei­tet. Ich hat­te aber kei­ne Lust auf den gan­zen HTML- und CSS-Overhead, den ich da­durch mit­schlep­pen wür­de. Ich woll­te doch nur ir­gend­wo das Logo plat­zie­ren und mei­ne Adresse in den Footer schrei­ben. Ich ha­be mir dann nur ein klei­nes reset.css be­sorgt, um ei­ne ein­heit­li­che Ausgangsbasis für die CSS-Arbeit zu ha­ben.

kaffeeringe.de im Microsoft Internet Explorer 5.5
Internet Explorer 5.5

Um mit HTML5 ar­bei­ten zu kön­nen, gibt es JavaSkripte, die al­ten Internet-Explorern Beine ma­chen und laut Cross-Browser-Test scheint das so­gar bis run­ter zum Internet Explorer 5.5 zu funk­tio­nie­ren. Dort funk­tio­nie­ren nur die WebFonts nicht. Die Arbeit mit HTML5 war an­sons­ten sehr ein­fach. Die Artikelseiten be­stehen jetzt aus­schließ­li­ch aus <hea­der>, <ar­ti­cle>, <foo­ter>. Ich ha­be mir aber auch von WordPress gar nicht die­se gan­zen IDs und Klassen auf­drän­gen las­sen, mit de­nen die Themes son­st voll sind. Dadurch ist das CSS we­sent­li­ch knap­per als mein al­tes.

Als die Seite so­weit stand, woll­te ich auch für die Inhalte die Ubuntu-Schrift ein­set­zen. Testweise hat­te ich die Schrift aus den Google Webfonts ein­ge­bun­den. Nachdem das gut aus­sah und wei­ter­hin le­ser­li­ch war, mus­s­te ich den Google-Aufruf wie­der los­wer­den. Ich ha­be mir al­so die Ubuntu-Schrift her­un­ter­ge­la­den und in ein WebFont-Paket kon­ver­tie­ren las­sen. Eingebunden ha­be ich aber nicht al­le Schnitte, son­dern nur den nor­ma­len, ei­nen mit­tel­fet­ten und den fet­ten. Die mus­s­te ich dann kon­kret im CSS an den rich­ti­gen Stellen auf­ru­fen und al­le Attribute zu font-weight raus­schmei­ßen. Die Schriften se­hen son­st nicht gut aus.

Weglassen

Die meis­ten Webseiten lei­den dar­un­ter, dass sie zu vie­le Informationen bie­ten, die vom ei­gent­li­ch Inhalt ab­len­ken. Gerade bei Blogs schal­ten Hobby-Webmaster ger­ne je­des ver­füg­ba­re Feature ein, weil die Technik Besucher un­ter Umständen da­von ab­len­ken kann, dass die Inhalte nicht so toll sind.

Schon mein al­tes Layout war nicht ge­ra­de mit Features über­la­den. Es gab kei­ne Blogroll, kei­ne Kategorienübersicht, kei­ne Tag-Cloud, Kein Monatsarchiv. Trotzdem wa­ren da Dinge, die ich jetzt los­wer­den will:

  • Dazu ge­hö­ren vor al­lem die „Social-Media-Buttons„.  Die hat fast nie je­mand be­nutzt. Update: 6.8.2012: Es gibt jetzt doch wie­der Social Media Buttons. Dabei ging es mir vor al­lem um die Links zu mei­nen ver­schie­de­nen Profilen, die man jetzt von der Startseite wie­der er­rei­chen kann. Sie drän­gen si­ch nicht auf, aber ob die bun­ten Streifen rei­chen, um die Links zu fin­den, muss ich mal se­hen… Viel auf­dring­li­cher woll­te ich die nicht ma­chen. In der Artikelansicht sind Links zu RSS, Twitter und Facebook zu fin­den. Damit kann man den Artikel tei­len. Ich könn­te mir vor­stel­len, dass Interessierte, die Farben er­ken­nen. Mal se­hen. Vielleicht flie­gen die auch wie­der raus… Gelöst ist das üb­ri­gens mit pu­rem CSS – No JavaScript was har­med in the ma­king of this ef­fect.
  • Ich ha­be die Navigation raus­ge­schmis­sen. Die letzt­li­ch hat ei­gent­li­ch sinn­vol­ler­wei­se nur auf bookmarks.kaffeeringe.de ver­wie­sen. Die Bildergalerie ha­be ich nicht mehr. Den RSS-Reader kann oh­ne­hin nur ich be­nut­zen – kurz: Es blieb nichts üb­rigt. Wer auf die Startseite zu­rück will, be­nutzt in der Regel das Logo.
  • Ohne die Navigation ist nur no­ch das Logo üb­rig ge­blie­ben. Alleine für das Logo muss ich kei­nen Platz ober­halb des Textes ver­schwen­den. Im al­ten Layout hat­te ich ei­nen sehr gro­ßen Header, den ich dann im­mer schon au­to­ma­ti­sch über­sprun­gen ha­be: Alle Links von der Startseite auf ei­nen Artikel hat­ten im­mer ei­nen Text-Anker, der di­rekt auf die Überschrift ge­scrollt hat. All das ha­be ich mir jetzt ge­spart. Das Logo sitzt ne­ben dem Text. Es er­gibt oh­ne­hin kei­nen Sinn, den Text no­ch brei­ter zu ma­chen. Die Zeilenbreite ist schon re­la­tiv lang.
  • Ich muss zu­ge­ben, das mir die Bilder no­ch Probleme be­rei­ten. Die ha­ben in der Regel kei­nen Informationswert und sie ma­chen den Anreißer-Absatz schwe­rer les­bar, weil sie die Spaltenbreite un­güns­tig ver­klei­nern. Ich bin kurz da­vor sie kom­plett raus­zu­schmei­ßen.
  • Auf al­len Seite gibt es nur das Wichtigste zu se­hen: Überschrift, Text, Autorenname und Datum der Veröffentlichung. In der Artikelübersicht fin­de ich den Namen und das Datum über­flüs­sig. Auch die Anzahl der Kommentare ist egal.
  • Ich ha­be letzt­li­ch auch no­ch die Artikel-Navigation weg­ge­las­sen: Statt der „Ältere Artikel / Neuere Artikel“-Links am Ende der Artikel-Übersicht, la­den ein­fach au­to­ma­ti­sch die nächs­ten Artikel.
  • Eine Kontaktseite gibt es nicht mehr so di­rekt: Unter je­dem Artikel steht mei­ne Adresse. Und wer mei­nen Namen im Artikel an­klickt, be­kommt das no­ch ein­mal auf ei­ner Seite an­ge­zeigt.
  • Das RSS-Logo ha­be ich weg­ge­las­sen. Wer RSS kennt und ver­wen­den will, hat meis­tens ei­nen Reader, der die kor­rek­te URL aus dem HTML-Header der Seite ho­len kann. Ich ha­be bei die­ser Entscheidung län­ger hin und her über­legt und ich bin mir im­mer no­ch nicht ganz si­cher. Update: 6.8.2012: Ich ha­be mi­ch da­für ent­schie­den, das RSS-Logo zu­sam­men mit Social Media Buttons oben rechts halb zu ver­ste­cken.

Technische Neuerungen

Als letz­tes ha­be ich no­ch zu­ge­se­hen, dass die Seite „Rich Snippets“ un­ter­stützt. Bei Google zum Beispiel kann man da­durch die Artikel mit dem Google+ Account ver­knüp­fen. In den Suchergebnislisten wird dann mein Profilfoto aus Google+ an mei­nen Artikel an­ge­zeigt. Außerdem lie­fert die Seite Facebook-Open-Graph Tags aus, mit de­nen mei­ne Artikel bei al­le Seiten, die das un­ter­stüt­zen, or­dent­li­ch ver­linkt wer­den kön­nen.

Die Serverstats sind jetzt aus­ge­schal­tet. Ich ha­be mir die oh­ne­hin nie an­ge­schaut. Auf dem Server la­gen aber no­ch Daten aus dem Jahr 2004 – als ich zu all-inkl.com als Hoster ge­wech­selt bin. Die Statistiken lau­fen über mein ei­ge­nes Piwik. Und das ha­be ich so ein­ge­stellt, dass die IPs an­ony­mi­siert wer­den. Mich in­ter­es­siert nicht, wer auf der Seite ist. Mich in­ter­es­siert ein we­nig, wie vie­le Leute vor­bei­schau­en, wo­nach sie su­chen und wo­her sie kom­men.

Das Ergebnis

Das Ergebnis ist mal wie­der ein neu­es Zwischenergebnis. Kaffeeringe.de ist wei­ter­hin die Seite, auf der ich Ideen aus­pro­bie­re. Ich freue mi­ch dar­über, dass ich al­le we­sent­li­chen Information in so ei­nem mi­ni­ma­len Layout un­ter­brin­gen konn­te. Ich fin­de gut, dass die Seite oh­ne Einbindung ex­ter­ner Dienste aus­kommt, kei­ne Daten an Dritte wei­ter­gibt und nicht ein­mal mehr per Social-Media-Logo-Einbindnung Werbung für ir­gend­wen macht, oh­ne dass ich da­von et­was ha­be. Ich bin ein we­nig stolz, über mein ers­tes kom­plett selbst er­stell­tes WordPress-Theme, das gleich­zeigt mein ers­tes kom­plet­tes HTML5-Projekt ist und mit ziem­li­ch we­nig CSS aus­kommt.

Mal se­hen, wie lan­ge die Begeisterung an­hält. Ich freue mi­ch auf Euer kon­struk­ti­ves Feedback.

Pingbacks

  1. Google PageSpeed Insights: Google Pagespeed: Die 100 Punkte Herausforderung

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?