Na této stránce jsem chtěl napsat různé tipy o tom, jak by měly ideální webové stránky vypadat a co by měly či neměly obsahovat. Informace jsem čerpal z různých knížek, článků či videí na internetu. Seznam samozřejmě není úplný, plánuju postupně doplňovat a rozšiřovat. 🙂
Webdesign
- na stránku s požadovanou informací bychom se měli dostat pomocí více bezmyšlenkových klepnutí myší nebo méně klepnutí s více přemýšlením (většinou 3-5 klepnutí)
- zachovávat webové zvyklosti (snazší orientace)
- vynechávat zbytečná slova (stručnost)
- důležitost navigace (kde jsme, co najdeme)
- každá stránka by měla obsahovat
- logo stránek (vlevo nahoře)
- odkaz na domovskou stránku (často spojeno s logem stránek, na který je umístěný hypertextový odkaz)
- vyhledávání (co nejvíce zjednodušit, bez voleb)
- další možnosti stránek (nejsou součástí hierarchie): Nápověda, Mapa stránek, Košík, Pomůcky, O webu, Kontakt, Služby, Novinky, Často kladené otázky, Pokročilé vyhledávání
- sekce (primární navigace + drobečková navigace s tučně označeným textem, kde se právě nacházíme)
- úvodní stránka může být vzhledově i funkčně mírně odlišná
Texty
- na nadpisy používat patkové fonty (serif), na obsahové texty bezpatkové fonty (sans-serif), vzájemně v jednom druhu textu je nekombinovat
- na webu mít maximálně dva fonty písma (tj. jeden patkový a jeden bezpatkový)
- doporučuje se používat známější typy písma, aby se web každému správně zobrazil a byl čitelný (případně použít Google fonty, ale ty se zase musí načíst z webu)
- sans-serif: Verdana, Arial, Arial Black, Trebuchet MS, (Tahoma)
- serif: Georgia, Times New Roman, (Palatino)
- monospace: Courier New
- nezdůrazňovat VELKÝMI PÍSMENY (vypadá to, jako když křičíme) či podtržením (plete se to s odkazy), ale kurzívou (tag <em> pro zdůraznění) nebo tučným písmem (tag <strong> pro silné zdůraznění)
- důležité pro internetové vyhledávače
- odklon od používání klasických tagů pro kurzívu (<i>) a tučné písmo (<b>)
- kvůli různé velikosti displejů (mobily, tablety, notebooky, monitory) se doporučuje velikost textu neudávat absolutně (jednotka px), ale relativně (jednotka rem)
- psát stručné texty (krátké a jednoduché věty, nikoliv dlouhá souvětí), dělat krátké bloky/odstavce (zhruba 3-6 řádků), druhotné a detailní informace lze rozepsat na odkazovaných dalších stránkách
- používat odrážky (nečíslované, číslované), několik úrovní
- nadpisy dělat stručné (2-6 slov), 2-3 úrovně (i když je možné užít až 6 úrovní nadpisů – tagy <h1> až <h6>)
- šířku textu nastavit na 600-700 px, aby délka řádku byla od 45 do 75 znaků (dlouhé řádky se špatně čtou, komplikuje to pokračování čtení dalšího řádku)
- nastavit větší odsazení řádků (řádkování 1,5)
- na odkazy nepoužívat „klepněte sem“
Barvy
- text – (skoro) černá, tmavě šedá
- pozadí – bílá, světlé odstíny
- používat dvě barvy (hlavní × doplňková)
- na výrazném (tmavém) pozadí nedávat barvu textu bílou nebo šedou, ale velmi světlý odstín stejné barvy
- používat tzv. bezpečné barvy (hexadecimální číslo barvy #rrggbb obsahuje pouze z těchto dvojic: 00, 33, 66, 99, cc, ff)
- o zjištění čísla barvy píšu na samostatné stránce
Obrázky
- nemají být moc velké datově (desítky až stovky kB – kvůli rychlosti načítání webových stránek), a tím pádem ani rozměrově (většinou stačí mít delší stranu obrázku velikosti max. 1600 px)
- používat vhodné formáty (na fotky jpg/webp, na grafiku png/svg) a komprimovat je ještě před nahráním na web
- s alternativními texty (parametr „alt“ – kvůli přístupnosti – např. pro slabozraké či nevidomé)
- o velikosti obrázků a jejich zmenšení píšu na samostatné stránce
Různé
- používat boxy a stíny
- nepoužívat čáry a orámování
Mohlo by Vás také zajímat
Naposledy aktualizováno: 6. 10. 2024