Google Reader Redesign – there i fixed it!

Ich bin ein großer Freund von Innovation und gutem Design. Den Anspruch das Erscheinungsbild verschiedener Softwareprodukte eines Herstellers zu vereinheitlichen finde ich ausgezeichnet. Allerdings kann dies auch nach hinten los gehen.

So hat Google versucht seinem Reader die Optik der anderen Lösungen anzugedeihen, was jedoch zur Folge hat, das niemand das geänderte Layout und Design mag: Die Schaltflächen sind zufällig positioniert, Platz – der bei einem Reader dringend nötig ist – wird durch enorme Weißräume verschwendet.

Glücklicherweise gibt es für alle gängigen Browser Tools, mit denen sich das CSS von Webseiten anpassen lässt. So ist es ein leichtes diese Fehler auszubügeln. Mit Hilfe von Personalized Web für Chrome und ein paar Zeilen Code kann man so aus dem neuen Reader einen besseren Reader machen.

Nachdem das Plugin installiert ist, muss definiert werden auf welche URL das neue CSS angewendet werden soll, in diesem Fall also: ^http://www.google.com/reader/view/

Das CSS sieht wie folgt aus. Entfernt ist die Suchleiste, die Leiste mit den Schaltflächen wurde gestaucht, die Schaltflächen neu angeordnet (und im Falle der Vor-Zurück-Buttons verbreitert) sowie die unschönen “Schatteneffekte” unter einem geöffneten Eintrag reduziert:

#viewer-refresh {
float: right;
}

#viewer-view-options, #stream-prefs-menu {
float:right;
}

#item-up-down-buttons, #chrome-view-links {
float: left;
}

#top-bar {
display:none;
}

#entries.list #current-entry .collapsed {
border-color: #fff;
background-color:whiteSmoke;
}

#entries.list .entry {
border-bottom: solid 1px white;
}

#entries.list #current-entry.expanded .entry-actions {
border-bottom-width: 1px;
}

#item-up-down-buttons div {
width:70px;
}

#viewer-header, #lhn-add-subscription-section {
height: 43px;
}

Aussehen sollte die fertige Regel dann wie folgt:

Speichert man die Einstellungen nun, wird beim nächsten Laden des Readers die reduzierte Oberfläche angezeigt. Huzzah!