Erkenntnisse aus meinem 2014er-Relaunch

Ende 2014 wollte ich das Design von benedikt.io weiter vereinfachen und vor allem auf den Artikelseiten das Hauptaugenmerk sofort auf den Text lenken. Sprich, keine aufwändig gestaltete Navigation, keine Seitenleisten etc. mehr. Ich glaube, dass mir das prinzipiell gelungen ist, im Detail ergaben sich aber dennoch ein paar Probleme:

Webfonts

Die ursprünglich eingesetzten Webfonts (Open Sans und Graublau) wollte ich lokal hosten, allerdings wiesen sowohl das Paket von Font Squirrel als auch das von Typografie.info arge Hinting-Probleme unter Windows auf:

Open Sans (Font Squirrel) in Windows 7/Chrome – z.B. i-, ö-Punkte sowie Glättung allgemein problematisch

Wer z.B. Open Sans direkt über die Adobe Edge Webfonts einbindet, hat das Problem nicht:

Das wesentlich bessere Ergebnis mit Open Sans von den Adobe Edge Webfonts

Statt Graublau verwende ich nun die ähnliche PT Sans Narrow für Überschriften. Denn erstere hatte unter Windows extreme Probleme mit der vertikalen Ausrichtung zur Baseline:

Graublau – viele Buchstaben (z.B. »a«, »c«, »d« etc.) rutschen in Windows unter die Baseline

PT Sans Narrow – astreines Schriftbild

Eine der mir selbst auferlegten Einschränkungen für ein vereinfachtes Design war der Verzicht auf Grafiken – zumindest auf Elemente, die als JPG oder PNG geladen werden müssen. Da Icons und Symbole aber hilfreich sein können (z.B. Suche, Retweet) wollte ich das über Schriftsymbole lösen. Erfahrungsgemäß funktioniert das über Standardschriften wie Open Sans nicht optimal, weil einige Symbole oft nicht gut aussehen oder gar nicht vorhanden sind. Die Lösung fand ich in der sogenannten Awesome Font, die nicht nur jedes erdenkliche Icon beinhaltet, sondern auch wirklich schön gemacht und von der Downloadgröße her kompakt ist.

Farben

Eine weitere Einschränkung meinerseits war der Einsatz nur einer Farbe. Sobald man das tut, bekommt man allerdings schnell Probleme mit der Darstellung von Links. Denn wenn man die Farbe auch für nicht klickbare Elemente verwendet (Überschriften), entsteht schnell Verwirrung. Meine erste Lösung war, Links nur farblich zu unterstreichen, was aber auf der Startseite zu einem extrem unruhigen Schriftbild geführt hat. Die Navigationspunkte wollte ich zudem schlicht gestalten, also ohne Unterstreichung, worunter wiederum die Konsistenz litt. Die farbigen Überschriften wollte ich zunächst für ein aufgelockertes Schriftbild beibehalten, habe mich aber nach langem Herumprobieren dafür entschieden, Text ganz in Schwarz zu halten und Links farblich und halbfett zu gestalten. Dabei kam mir die Idee für den nächsten Vereinfachungsschritt und habe auch gleich sämtliche zuvor in Grau gehaltenen Elemente (Input-Rahmen, Input-Beispieltext) durchgängig auf Schwarz und Blau geändert. Es gibt nun tatsächlich nur mehr diese beiden Farben auf benedikt.io. Da ich mich zwischenzeitlich auch ein bisschen mit Farb-Accessibility (Rot-Grün-Sehschwäche) auseinandergesetzt habe, habe ich zudem das anfängliche Grün durch Blau ersetzt.

404

Auf eine brauchbare 404-Seite habe ich bisher immer vergessen – hiermit nachgeholt.

Plug-ins

Eigentlich wollte ich so wenige Plug-ins wie möglich verwenden, aufgrund meiner Anforderungen an die neue Startseite habe ich mich aber doch auf die Suche begeben und einige wirklich exzellente Erweiterungen gefunden.

Latest Tweets Widget und Flickr Justified Gallery zeigen meinen letzten Tweet bzw. mein letztes Flickr-Foto auf der Startseite an, ohne auf die Iframe-Methode der jeweiligen Portale angewiesen zu sein oder gar manuell WordPress-Posts dafür anlegen zu müssen (was im 1. Release noch der Fall war).

Die Standardsuche in WordPress ließ immer etwas zu wünschen übrig – anscheinend hat sich da auch in den letzten Jahren nicht viel getan. Etwaige Plug-in-Alternativen funktionierten zwar besser (z.B. Search Everything), beherrschten aber zum Beispiel nicht die Anzeige der relevanten Textpassage mit dem Suchbegriff auf der Ergebnisseite, sondern zeigten lediglich den Teaser an. Relevanssi ist in der Hinsicht eine echte Offenbarung kann alles, was man von einer modernen Suche erwartet.

Und noch mehr

Experimentiert habe ich dieses Mal bezüglich Entwicklungsumgebung und größere Teile gleich in Diet Coda am iPad erstellt und geändert. Eine physikalische Tastatur braucht man dafür zwar unbedingt, dann klappt es aber ganz gut (abgesehen von einigen Diet-Coda-Bugs, die einem erst bei der regelmäßigen Nutzung auffallen). Bezüglich Layout wählte ich beim neuen Design einen direkteren Ansatz und begann ohne zeitaufwändige Entwürfe in z.B. Sketch gleich direkt in den Templates und im Stylesheet zu arbeiten. Vorteil: Man erhält schnell Ergebnisse und bedenkt immer den Responsive-Faktor mit. Nachteil: Experimentieren bei Bereichen, für die man noch keine Idee hat (Archivlisten, Suchbox etc.), ist viel mühsamer, da allein für einen Versuch Template- und CSS-Code geschrieben werden muss. Lange herumgespielt habe ich mich in Folge dessen seit Dezember auch mit Zeilenabständen und Schriftgrößen und glaube diese jetzt halbwegs hinbekommen zu haben. Baustellen gibt es zwar nach wie vor im Bereich Übersicht und bei den Suchergebnissen, im Großen und Ganzen bin ich mit dem Ergebnis der Nacharbeiten sehr zufrieden.