# 103: Photoshopping Snippets Area - CSS-Tricks

Anonim

Czas zagłębić się w obszar Snippets! Oznacza to, że jest to rzeczywisty obszar zawartości. Mamy już nagłówek na miejscu. Obszar fragmentów jest dość popularny. Bez zagłębiania się w analitykę, z oglądania mediów społecznościowych i słuchania ludzi w prawdziwym życiu wiem, że znajdują wiele przydatnych rzeczy w tej dziedzinie.

W wersji 9 bardzo powszechną i uzasadnioną krytyką było to, że przeglądanie było trudne. Był to mocno pokolorowany akordeon, a każdy fragment był „łącznikiem bąbelkowym” (z braku lepszego deskryptora), który pasował do głównego koloru podsekcji tego fragmentu. Co gorsza, były wyrównane, co, jak sądziłem, byłoby dobrym sposobem, aby dać im trochę miejsca i podskoczyć trochę okiem, ale skończyło się na tym, że wyglądały dziwnie i niechlujnie.

Odkupmy się tutaj i ułatwmy przeglądanie obszaru Snippets. Chociaż ponownie większość tych treści znajduje się za pomocą wyszukiwania. Mimo to równie dobrze może sprawić, że przeglądanie będzie przyjemne.

Postanawiamy od razu nie umieszczać pola wyszukiwania bezpośrednio w obszarze treści. Tak było w przeszłości, ale to przeprojektowanie i podejmujemy decyzję o skonsolidowaniu wyszukiwania w jednym obszarze. Kiedy raz nauczysz się, jak korzystać z wyszukiwania, będziesz wiedział, jak to działa na zawsze.

Przy projektowaniu opieramy się na dwóch kolumnach. Po lewej stronie główne kategorie Snippet, każda z innym kolorem. Czas tęczy! W poszukiwaniu inspiracji przeglądamy naszą własną galerię.

Prawa kolumna będzie po prostu listą fragmentów z tej kategorii. Prosty, łatwy do przeglądania. Podobnie jak linki w stopce. Ludzie wiedzą, jak skanować i używać list linków. To najdoskonalszy z dostępnych wzorów projektowych.

Mimo to kłócimy się z niektórymi decyzjami projektowymi. Czy linki powinny pasować do koloru sekcji, czy po prostu być szare? Czy powinniśmy „pasować zebry” linki wyblakłą wersją głównego koloru? Czy powinniśmy podać datę publikacji lub zaktualizowaną datę, czy nie? Ciekawe i ważne rzeczy do przemyślenia, ale zawsze możemy podjąć tego rodzaju decyzje, gdy dotrzemy do przeglądarki i pracujemy z prawdziwymi danymi.