Seit dieser Woche sorgt 20min.ch mit einem Redesign für frischen Wind in den eigenen Reihen. Das Newsportal kommt übersichtlicher und zeitgemässer daher. Ein gelungener Relaunch! Ich habe das neue Layout kritisch unter die Lupe genommen und zeige auch gerade wo ich noch Verbesserungspotential sehe. Ich habe das Schwergewicht meiner Analyse auf folgende Punkte gelegt:

• Layout
• Navigation
• Typografie

Das gelungene Redesign des Newsportals...

Layout

Das neue Design wirkt übersichtlich und aufgeräumt. Sofort fällt auf dass das neue Layout stark die Printausgabe von 20Minuten imitiert: Das neue Spaltenkonzept, die gestrichelten horizontalen Trennlinien und vor allem die erstmals eingesetzte Serifenschrift «Georgia» sorgen für einen Boulevardpresse-Look ohne die Anforderung an gutes Webdesign zu vernachlässigen.
Meine Kritikpunkte:

• Dadurch dass die beiden Seitenspalten nur durch optische Trennlinien von der Hauptspalte getrennt werden, fällt der Sidebareffekt fast gänzlich weg, was sich negativ auf die Übersichtlichkeit auswirkt. Mein Tipp: Klare Trennung von Haupt- und Seitenspalten durch einen abgeschwächte Hintergrundfarbe der Seitenspalten
• Die Werbebanner welche über beide Seitenspalten laufen verwirren das Auge. – Ein- oder Zweispaltig? Mein Tipp: Banner nur über eine Spalte laufen lassen
• Die Zugehörigkeit der verwandten Artikel eines Beitrags ist nicht klar: Die vertikal Abtrennung durch die gestrichelte Linie lässt den Betrachter meinen, die verwandten Artikel würden zum nächst unteren Artikel gehören. Mein Tipp: Klare Abtrennung der Artikel durch horizontale Balken, wie es auch bei der Printausgabe der Fall ist. Diese Trennlinien können farblich sogar dem Farbkonzept der Navigation angepasst werden.

Navigation

Das neue Design punktet bei mir vor allem durch die komplett umgestaltete Navigation, welche neuerdings horizontal angeordnet ist. Sogar die Unternavigationspunkte trifft man nun auch in horizontaler Ausrichtung an. Sie werden geschickt mitttels bestehendem Farbkonzept mit dem jeweiligen übergeordneten Navigationspunkt verbunden.
Passend zum heutigen Social-Media-Zeitalter ist Twitter, Facebook und Co. prominent in der Navigation anzutreffen.
Auch die Lokalnachrichtenfunktion gefällt mir gut: Einfach Wohnort eingeben und sich Nachrichten aus der Region anzeigen lassen. – Leider funktioniert diese Funktion (noch) nicht immer wunschgemäss.

Die kursive Navigationspunkte sind übrigens auf ein Schriftenproblem meines Macs zurückzuführen (sollten nur fett und nicht fett/kursiv sein)…;-)

• Mal abgesehen davon, dass die Lokalnachrichtenfunktion nicht wirklich funktioniert, kann ich hier nur Kritik auf sehr hohem Niveau anbringen: Die Gesamterscheinung der Navigation wirkt uns auf unseren Mac-Displays etwas zu glossy, aber da diese sicherlich für Standard-Displays ausgerichtet wurde, halte ich lieber den Mund.

Typografie

Die neuerdings verwendete Serifenschrift für den Lauftext fällt sofort auf und trägt einen grossen Teil zum neuen Print-Look bei. Die Serifen haben grundsätzlich den Zweck das Auge beim Lesen zu führen und somit dem Leser das Lesen zu vereinfachen. Ich bin aber der Ansicht, dass sich in diesem Falle die Serifen eher als schwerfällig als hilfreich herausstellen. Als positiv empfinde ich, dass die Lauftexte nicht mehr ganz schwarz sind sondern dunkelgrau – der schwächere Kontrast wirkt sich angenehm auf das Lesefeeling aus, könnte aber einen Tick dunkler sein.
Interessant ist der Umgang mit den Headlines: Da es sich bei der gewählten Schrift nicht um eine Systemschrift handelt, wird die Schrift als Bild-Datei dargestellt. Dies hat den Nachteil das durch das Rendern die Schrift nicht gestochen scharf ist. Im Gegensatz zu blick.ch, wo das selbe Problem mittels Flash gelöst wird, ist die Bildvariante von 20min.ch aber iPad-tauglich…

• Die Headlines sind mir zu schwerfällig: Die verwendete Schriftart «Aachen» ist onehin  schon ziemlich klobig. Wohl aus Platzgründen wurde sogar noch die Laufweite der Schrift zusammengestaucht, was die Headline definitiv zu «bulky» wirken lässt. – Mein Tipp: Warum für die Headlines nicht eine groteske Schrift wie in der Printausgabe verwenden? – Dies wäre aus meiner Sicht ästhetisch ein Gewinn und das technische Problem wäre somit auch gleich gelöst.

...und hier das leicht optimierte Design meinerseits!

Wie ich bereits in einem früheren Blogbeitrag erwähnt hatte, durfte ich für Li Baumgartner und ihr frisch gebackenes Geschäft mit dem Namen ausser-gewöhnli.ch das Logo entwerfen und die Briefschaften gestalten. Nun durfte ich in enger Zusammenarbeit mit Li auch noch ihren Webauftritt realisieren!

Et voilà:

Da Umlaute noch nicht von allen Browsern unterstützt werden, ist die Seite selbstverständlich auch unter www.ausser-gewoehnli.ch zu finden.

Heute haben wir wiedermal was ganz nettes herausgefunden: Mein Chef wollte für ein Webdesign im Photoshop eine Tabelle erstellen und musste bald konsterniert feststellen, dass dies nicht möglich ist. Er machte seinen Unmut sogleich auf Twitter laut. Und siehe da, es dauerte keine 5 Minuten und schon wartete ein Adobemitarbeiter mit der Lösung auf: Tabellen in Photoshop geht nicht, aber du kannst die Tabelle im Indesign aufziehen und über die Zwischenablage in das Photoshop-File einfügen. Und nun der Clou: Wenn du im Indesign Punkte als Masseinheit gewählt hast, übernimmt der Photoshop das entsprechende Mass in Pixel! Also wenn du im Photoshop eine 200px breite Tabelle brauchst machst du die Tabelle im Indesign einfach auf 200 Punkte und fügst diese per copy/past in den Photoshop. – Cool nicht?

Tja, dass sauberer Code bei einer Website ein Muss ist, ist allgemein bekannt. Doch gestern hat mir das www eindrücklich erklärt warum das so ist… Weil ich bei einem Link in einem Artikel ein Anführungszeichen vergessen hatte und somit target=”blank an Stelle von target=”blank” geschrieben hatte, sah schtift.ch gestern so aus:

Du kannst die Sauberkeit deiner Website auf  validator.w3.org testen. Es gibt auch jede Menge andere Validator-Seiten.

Erst vor wenigen Wochen hat mir mein Chef einen sehr praktischen CSS-Trick für Hovereffekte mit Bildern verraten!

Problem: Hover-Effekte mit Bildern haben oft mit langsamen Server-Verbindungen zu kämpfen. Sprich wenn der User mit der Maus über den Link fährt verschwindet das Bild für eine Sekunde (oder auch mehr…) bevor dann dass zweite Bild erscheint. Sehr schlimm kann es z.B. bei einer Toolbar werden wenn  mehrere Links nebeneinander aufgelistet werden: Da jeder Link aus zwei Bildern besteht (Azeigebild und Hooverbild) muss der Browser jedes mal die Bilder beim Server abfragen gehen: Browser:”Hey Server, ist Hoverbild da?”, Server:”Moment… ja ist da!”, Browser:”Wärst du wohl so freundlich es mir zu geben?”, Server:”Hier hast es!”. Ungefähr so läuft dies bei jedem einzelnen Link ab. Das ganze Prozedere bei jedem Bild braucht enorm viel Zeit.

Lösung: Die Metanavi im Footer dieser Seite ist ein geeignetes Beispiel: Es sind 7 Navigationspunkte. Noch vor wenigen Wochen hätte ich dafür 14 einzelne Bilder benötigt ( je ein Anzeige- und Hooverbild).Der Trick ist nun nicht 14 einzelne Bilder zu machen, sondern ein einziges in welchem alle Navigationspunkte beinhaltet:

Man schreibt den CSS-Code so, dass beim hovern kein neues Bild geladen wird, sonder das einzelne grosse Bild nur verschoben wird. Dies hat den grossen Vorteil dass für die ganze Navi nur ein Bild und nicht 14 Bilder geladen werden müssen. Cool nicht?

Bisheriger CSS-Code für einen einzelnen Navigationspunkt.Über #flickr: hover wird ein zweites Bild geladen.

Optimierter CSS-Code: Durch #flickr:hover wird ein und das selbe Bild nur verschoben.

… und so sieht nun das einizige Bild (icons-contact.png) aus. Das coole daran ist dass es auch mit pngs’ funktioniert!