# 103: Photoshopping-Snippets-Bereich - CSS-Tricks

Anonim

Zeit, in den Snippets-Bereich einzutauchen! Das heißt, der eigentliche Inhaltsbereich davon. Wir haben den Header bereits installiert. Der Snippets-Bereich ist sehr beliebt. Ohne tief in die Analytik einzutauchen, weiß ich aus dem Anschauen von sozialen Medien und dem Hören von Menschen im wirklichen Leben, dass sie in diesem Bereich viele nützliche Dinge finden.

In Version 9 war eine sehr verbreitete und legitime Kritik, dass das Durchsuchen schwierig war. Es war ein stark gefärbtes Akkordeon und jedes Snippet war ein "Bubble Link" (mangels eines besseren Deskriptors), das der Hauptfarbe dieses Snippet-Unterabschnitts entsprach. Schlimmer noch, sie waren gerechtfertigt ausgerichtet, was ich für eine gute Möglichkeit hielt, ihnen etwas Platz zu geben und ein wenig ins Auge zu springen, aber am Ende sahen sie nur seltsam und schlampig aus.

Lassen Sie uns hier einlösen und den Snippets-Bereich schöner zum Stöbern machen. Auch wenn der größte Teil dieses Inhalts über die Suche gefunden wird. Trotzdem könnte es genauso gut schön sein, zu stöbern.

Wir beschließen sofort, kein Suchfeld direkt im Inhaltsbereich zu platzieren. Es gab in der Vergangenheit, aber dies ist eine Neugestaltung und wir treffen die Entscheidung, die Suche in einem Bereich zu konsolidieren. Sobald Sie einmal gelernt haben, wie man die Suche verwendet, wissen Sie, wie sie für immer funktioniert.

Für das Design gehen wir mit einer zweispaltigen Sache. Links die wichtigsten Snippet-Kategorien mit jeweils einer eindeutigen Farbe. Regenbogenzeit! Wir stöbern in unserer eigenen Galerie nach Inspiration.

Die rechte Spalte enthält lediglich eine Liste der Snippets in dieser Kategorie. Einfach, leicht zu durchsuchen. Ähnlich wie die Fußzeilenlinks. Die Leute wissen, wie man Linklisten scannt und verwendet. Es ist das einfachste Designmuster, das es gibt.

Wir spielen jedoch mit einigen Designentscheidungen herum. Sollten die Links mit der Farbe des Abschnitts übereinstimmen oder nur grau sein? Sollten wir die Links mit einer verblassten Version der Hauptfarbe „zebrastreifen“? Sollten wir ein Veröffentlichungsdatum oder ein Aktualisierungsdatum angeben oder keines? Spaß und wichtige Dinge zum Nachdenken, aber wir können diese Art von Entscheidungen immer treffen, wenn wir zum Browser gelangen und mit echten Daten arbeiten.