Barva HTML Šablony

Barevné HTML šablony postavené na jasném pořadí obsahu

V ukázce na počítači působí tři bloky služeb na třech různých pozadích zcela záměrně. Barvy jsou vedle sebe, kontrast je součástí kompozice a celý řádek je srozumitelný na první pohled. Otevřete stejnou šablonu v telefonu a tyto bloky se promění ve svislý sled zářivých obdélníků. Nezměnilo se nic kromě pořadí, v jakém obsah přichází, a právě toto pořadí nyní nese celou stránku.

Když se sloupce změní ve svislé vrstvy

Barevné pozadí vedle sebe nenápadně naznačuje, že tři položky patří k sobě. Po uspořádání nad sebe se toto sdělení vytrácí, protože čtenář položky nevidí současně. Barevná HTML šablona má buď pod sebou základ, který seskupení udrží, nebo musí celou práci odvést samotná paleta.

Před výběrem souboru se vyplatí provést tři kontroly:

1. Představte si, že pozadí zmizela, a sledujte, zda se sekce stále oddělují. Pokud existují pouze jako barva, neexistují ve skutečnosti vůbec.
2. Přečtěte si zobrazení v telefonu shora dolů a ověřte, že sled prvků vypráví požadovaný příběh i bez vazby na kompozici pro stolní počítače.
3. Hledejte cokoli, co je rozlišeno pouze barvou: kategorie, dostupnost nebo doporučené položky. Návštěvník by je měl být schopen rozpoznat i ze samotného textu.

Kód, který obstojí i při změně uspořádání

Nadpisy nesou logické seskupení i napříč změnami rozvržení. Začíná-li každá služba nebo případová studie vlastním nadpisem a srovnatelné položky opakují stejnou strukturu, seskupení zůstane zachováno. Čtenář pozná, kde jedna položka končí a druhá začíná, i na čistém neutrálním pozadí. Nicepage Grid Element umísťuje text, obrázky a tlačítka do buněk, které se na menších obrazovkách přeskupují, a Responsive Modes vám umožní zkontrolovat zobrazení pro telefon nezávisle na počítačové verzi.

V užším zobrazení stojí za pozornost tři věci:

1. Každý barevný blok stále začíná nadpisem, a to včetně těch umístěných hluboko pod sekcí hero.
2. Srovnatelné karty si zachovávají stejnou vnitřní strukturu, místo aby se proměnily ve tři odlišné varianty.
3. Text zůstává snadno čitelný na jakémkoli akcentu, na kterém se po vertikálním seřazení ocitne.

Myšlenkový experiment ve stupních šedi

Toto je nejrychlejší způsob, jak posoudit barevnou HTML šablonu: představte si stránku s každým pozadím v bílé barvě a každým akcentem v šedé. Poznáte i tak, jaké sekce se na ní nacházejí, které položky patří k sobě a co je na prvním místě? Pokud zní odpověď ano, barevná paleta může být tak výrazná, jak projekt vyžaduje. Pokud se stránka rozpadne, barva pouze držela pohromadě strukturu, kterou nikdo ve skutečnosti nevytvořil.