Oddelovace Kategorii: Cary, Bily Prostor nebo Barevne Bloky?

Meze restaurace s 26 stoly v Cesme, Izmir, nahradila tenke delici cary mezi kategoriemi menu 24 pixely bileho prostoru — doba straveni na strance vzrostla o 22% a chovani pri scrollovani se vyrazne zlepsilo. Rozebirame, kdy ktery styl funguje.

Tri Typy Oddelovacu

Menu pouzivaji tri techniky: cary (1-2px solid), bily prostor (16-32px) a barevne bloky. Cara je nejlehci, ale unavuje oko nejrychleji. Bily prostor pusobi nejprirozeneji. Blok vytvari nejsilnejsi hierarchii.

Material Design 3 je jasny: bily prostor je nejmocnejsi oddelovac. Cary patri do tabulkoveho obsahu (alergenova mrizka). Barevne bloky pro ukotveni pozornosti special sefkuchare, omezena akce.

Proc Vyhrava Bily

V Cesme byla cara 1px #E5E7EB nahrazena 24px vertikalniho odstupu. Uzivatele vnimali kazdou kategorii jako samostatny blok, pohled sledoval prirozeny F-vzor, scroll-heatmapy ukazovaly rovnomerne pauzy. Cary uzivatele vnimali jako prekazky.

Bily prostor dava vzduch typografii: kontrast mezi nadpisem a textem roste sam. Na mobilu jeste kritictejsi mala obrazovka, kazdy pixel pocita.

Kdy Pouzit Barevne Bloky

Tri scenare: (1) propagacni kategorie (Tydenni Akce), (2) silne brandovany layout s tonovanym pasem za nadpisem, (3) velmi dlouhe menu (50+ polozek) s hlavnimi sekcemi.

• Kontrastni pomer min 4.5:1 pro WCAG AA.
• Sytost 15-25%, plne barvy unavuji.
• Max dva ruzne barevne bloky na strance.

FAQ

Jsou cary k nicemu? Ne v nutricnich nebo alergenovych tabulkach cara 1px zlepsuje citelnost. Vyhybat se jen mezi kategoriemi.

Kolik bileho prostoru na mobilu? 16-24px idealne. Nad 32px se stranka prilis natahuje, pod 16px se zlom necite.

Skodi bloky SEO? Ne Lighthouse meri kontrast a pouzitelnost, ne pozadi. CSS nemeni semantiku HTML.

Bylo to užitečné? Sdílejte to.