Tento článok je návod na to, kde sa čo mení. Je usporiadaný podľa toho, ako ďaleko zásah siaha — od zmien, ktoré ovplyvnia celý web, po zmeny jednej sekcie. Toto poradie je zároveň poradie, v akom sa vzhľad rozumne nastavuje.
Štyri úrovne, kde sa dá zasiahnuť
- Celý web — paleta farieb, písma, šírka obsahu, hlavička a pätička. Nastavuje sa v téme.
- Typ stránky — ako vyzerá výpis článkov, karta produktu, jednotlivý článok.
- Jedna stránka — jej vlastné rozloženie, či má bočný panel, či sa zobrazuje titulná oblasť.
- Jeden blok — farba, odsadenie, zaoblenie, veľkosť práve tejto sekcie.
Chyba, ktorá stojí najviac času: riešiť na úrovni bloku niečo, čo patrí na úroveň webu. Ak upravujete to isté v desiatej sekcii, ste na nesprávnej úrovni.
Krok 1 — paleta farieb
Paleta je zoznam farieb, z ktorých web čerpá. Bloky si z nej berú farby samy, takže zmena palety prefarbí web naraz — vrátane stránok postavených dávno.
Pri zostavovaní palety platí niekoľko vecí, ktoré sa ľahko podcenia:
- Hlavná farba nie je najkrajšia farba, ale najpoužiteľnejšia. Musí uniesť biely text na tlačidle.
- Kontrast je podmienka, nie odporúčanie. Svetlosivý text na bielej vyzerá na kvalitnom monitore elegantne a na notebooku v aute je nečitateľný.
- Farby textu a pozadia sa nastavujú v pároch. Zmeniť pozadie a zabudnúť na text je najčastejšia príčina neviditeľného nadpisu.
- Rátajte s tmavým režimom. Farba, ktorá funguje na bielej, môže na tmavom pozadí zaniknúť.
Krok 2 — písma
Dve písma stačia: jedno na nadpisy, jedno na text. Tri sú maximum a väčšinou znak, že sa rozhodovanie odložilo.
Pri písmach sledujte aj rýchlosť — každý ďalší rez, ktorý sa načítava, stojí čas. Bežne stačia dva až tri rezy (bežný, tučný a prípadne kurzíva). Písma z externých služieb sa navyše ťahajú z cudzieho servera; ak ich používate, nech ich je málo.
Krok 3 — hlavička a pätička
Toto sú prvky, ktoré vidí návštevník na každej stránke, a preto sa oplatí venovať im viac než päť minút:
- V hlavičke má byť to, čo ľudia hľadajú — nie všetko, čo máte. Sedem položiek menu je veľa.
- Na mobile sa hlavička správa inak. Skontrolujte, či sa logo a menu zmestia a či sa dá menu otvoriť palcom.
- Kontaktná akcia patrí navrch. Telefón, rezervácia alebo nákupný košík podľa toho, čo robíte.
- Pätička je miesto pre povinné odkazy — obchodné podmienky, ochrana údajov, reklamácie. Firemné údaje a otváracie hodiny sa dajú doťahovať z jedného miesta, takže ich netreba prepisovať ručne.
Krok 4 — rozloženie stránky
Pri každej stránke sa dá určiť, či má bočný panel, akú má šírku a či sa nad obsahom zobrazuje titulná oblasť. Pri predajných stránkach býva správna odpoveď „na celú šírku, bez bočného panela a bez titulnej oblasti“ — hero si urobíte blokom a vyzerá lepšie.
Šírku obsahu nastavujte s ohľadom na čitateľnosť. Riadok textu cez celú šírku veľkého monitora sa číta zle; pre bežný text je príjemné, keď má riadok zhruba osemdesiat znakov.
Krok 5 — jednotlivé bloky
Až teraz prichádzajú na rad sekcie. Každý blok má vlastné nastavenia — pozadie, odsadenie zhora a zdola, zaoblenie rohov, zarovnanie, správanie na mobile. Dve veci, ktoré tu urobia najväčší rozdiel:
- Odsadenia držte jednotné. Ak majú sekcie raz 40 a raz 96 pixelov, stránka pôsobí rozhádzane, aj keď každá sekcia zvlášť vyzerá dobre.
- Rad kariet zarovnajte na rovnakú výšku. Inak má každá karta výšku podľa dĺžky textu a rad vyzerá ako schodisko.
Keď vám nastavenie bloku sedí, uložte si ho ako predvoľbu. Na ďalšej stránke ho použijete jedným kliknutím a nemusíte si pamätať, aké číslo ste zadali minule.
Rýchla cesta: vzory namiesto stavania
Ak staviate novú stránku, nezačínajte prázdnym plátnom. V editore je knižnica 87 hotových sekcií v 21 kategóriách s náhľadom — hero, výhody, cenník, otázky a odpovede, referencie, štatistiky, tím, kontakt, galéria, časová os, logá, výpis článkov.
Vzor vložíte, prepíšete texty a vymeníte obrázky. Prídu aj s fotkami, takže stránka vyzerá hotovo od prvej chvíle a nemusíte sa dívať na sivé obdĺžniky.
Ikony
K dispozícii je 5 185 ikon a vyberajú sa z prehľadu s vyhľadávaním. Pri ikonách platí jedno: držte jeden štýl. Miešanie obrysových a plných ikon na jednej stránke je drobnosť, ktorú si nikto nevie pomenovať, ale každý ju vidí.
Keď treba vlastné CSS
Vlastné štýly sú posledná možnosť, nie prvá. Skôr než ich napíšete, overte si, či sa to isté nedá nastaviť v bloku alebo v téme — v deviatich prípadoch z desiatich dá.
Ak už vlastné CSS píšete, patrí do vlastného priestoru na štýly, nie do súborov témy. Zásah priamo do témy zmizne pri jej najbližšej aktualizácii.
A ešte jedno: keď pravidlo „nefunguje“, zvyčajne existuje, len ho prebíja iné, silnejšie. Nie je to dôvod pridávať ďalšie výnimky — je to dôvod pozrieť sa, čo ho prebíja.
Keď zmenu nevidno
- Obnovte stránku načisto — prehliadač si drží starú verziu štýlov.
- Skontrolujte, či ste v správnej téme. Na webe môže byť nainštalovaných viac tém a upravovať sa dá aj tá, ktorá nie je zapnutá.
- Pozrite sa na uložené globálne štýly. Nastavenia uložené v administrácii prebijú to, čo je napísané v téme — a to potom vyzerá, akoby sa zmena „nechytila“.
- Vyrovnávacia pamäť na serveri. Ak sa zmena neprejaví ani po chvíli, býva to ona.
Na čo si dať pozor
- Nastavujte zhora nadol. Paleta, písma, hlavička — až potom sekcie.
- Neopravujte to isté na dvadsiatich miestach. Je to signál, že zásah patrí o úroveň vyššie.
- Kontrolujte pri šírke mobilu. Väčšina návštev prichádza z telefónu.
- Ručne zadanú farbu používajte výnimočne. Web s desiatkami natvrdo zadaných odtieňov sa nedá prefarbiť.
- Po väčšej zmene sa pozrite na rýchlosť. Veľký obrázok v hlavičke dokáže pokaziť dojem viac než menej pekné písmo.
- Zálohu si spravte pred veľkým zásahom do vzhľadu, nie po ňom.