Buďte ještě lepším kodérem 1. díl

Webdesign dělám už několik let a vím, že ne vždy kodér odvede práci zcela podle představ webdesignéra. Proto jsem se rozhodl podělit se s kodéry o svoje znalosti a usnadnit jim práci.

Uvedu 7 věcí, které je grafik schopen vidět, ale pro kodéra už to nemusí být taková samozřejmost.

1. Placeholdery

Poměrně častěji jsem vídal, že grafik např. do hledacího pole udělal, jak bude vypadat tzv. “placeholder”, což je text, který po kliknutí zmizí a slouží jako popisek k poli. Pokud je text v inputu špatně čitelný, má podezřele nízký kontrast nebo má kurzívu, pak tam možná grafik nakreslil placeholder. V takovém případě se po kliknutí a psaní textu do pole změní styl. Obvykle je text kontrastnější a bez kurzívy.

Placeholder má malý kontrast. Po napsání textu uživatelem se text v poli změní na tmavší.

Placeholder má malý kontrast. Po napsání textu uživatelem se text v poli změní na tmavší. (czc.cz – to mají dobře)

Jednou jsem dokonce viděl zajímavou věc. Přihlašovací stránka do administrace měla světle šedý placeholder v poli pro login do administrace. Bylo to jediné textové pole, které mělo nakreslený text uvnitř. Grafik to zamýšlel jako placeholder. Kodér striktně dodržoval to, co viděl a považoval to za běžný styl textového pole. Takže všechna textová pole v administraci měla špatně čitelný světlý text, ať už to byl placeholder nebo uživatelem vepsaný text.

 

2. Světlé stíny

Grafik občas použije stín, který je světlý. Kdyby kodér použil černou barvu, tak by byl moc výrazný. Proto místo toho použije světle šedou barvu. Dokud je pozadí světlejší, tak je to v pořádku. Ale pokud je stín světlejší než pozadí, pak to vypadá jako ošklivá rozmazaná záře. Pokud jako barvu stínu použijete vždy černou a nastavíte tam alfa průhlednost, pak docílíte stejného efektu, jako grafik a stín nebude nikdy světlejší než pozadí.

stin

V tomto případě Google v době psaní článku používá tu horší variantu.

3. Seznamy

U seznamů často vídám špatně řádkový proklad. Text uvnitř položky seznamu má stejný řádkový proklad, jako položky mezi sebou. Nemusí pak být jasné co patří k sobě. Hlavně pokud nový řádek začíná třeba velkým písmenem.

Mohou to být seznamy v textu, ale může to být také menu kategorií u e-shopu. Pozor na to.

seznam

Horní varianta vypadá jako nová položka bez odrážky
U dolní varianty je je vidět, že oba řádky patří jednomu bodu.

4. Velikost klikatelné plochy

Objekty, které mají jasně vidět svoje obrysy a jsou klikatelné, by měli být klikatelné všude uvnitř obrysu. Viz příklad dole.

klikatelná_plocha

obchod.body-test.cz

Do poradny se dostanete kliknutím na kteroukoliv část tlačítka. Košík vypadá stejně jako tlačítko poradna, ale musíte se trefit přesně do oblasti vyznačené vpravo, která už ani nepřipomíná moc odkaz.

klikatelna_plocha2

ebrana.cz/reference

Tady se může zdát, že kliknutí kamkoliv na růžovou plochu způsobí akci. Omyl! Musíte se trefit přesně do oblasti vyznačené vpravo. Anebo přímo do zatrhávacího boxu.

5. Labely, checkboxy a radiobuttony

Radiobuttony a checkboxy jako takové jsou dost malé. U mě je to 12×12px. Do toho se má uživatel trefit. A váš uživatel může být třeba stará babička s rozklepanou rukou. Proto bývá slušnost, že klikatelný je i popisek vedle. To asi víte, pokud jste dobří kodéři. Pokud nevíte, tak si rychle vygooglete, jak se to dělá ;-) Ale i když to víte, občas na to kodér zapomene.

Ok, dali jste si práci s tím, aby popisek vedle byl klikatelný, ale lidi to možná nepoznají, nepoužijí a ani neocení. Jak jim to usnadnit? Možností je několik a dají se kombinovat.

  1. Nastavte na tagu “label” v CSS cursor: pointer;
    Uživatel místo místo kurzoru šipky uvidí kurzor ručky, která se objevuje obvykle v případech, kdy kliknutí provede akci.
  2. Nastavte labelu efekt po najetí myši… podtržení, změna barvy textu nebo pozadí apod. Viz předešlý obrázek nahoře.
  3. Po najetí na label se změní vzhled checkboxu nebo radiobuttonu.

 

airbank.cz

airbank.cz (zakládání běžného účtu)

Airbank kombinuje body 1 a 3. Tedy zvýraznění checkboxu/radiobuttonu po najetí myši na label a změnu kurzoru na ručku. (Mám ve Windows nastavené svoje vlastní kurzory, kdyby se vám zdály divné) Airbank má navíc zvýrazněný label u aktivního prvku.

cd.cz – homepage

cd.cz – homepage

Na webu Českých drah u vyhledávání spoje něco takového nenajdeme. Člověk, který bude spěchat na vlak to moc neocení, pokud se bude chtít rychle trefit na radiobutton.

6. Seznamy podruhé

A ještě jednou zopakuji viditelnou velikost objektu, velikost klikatelné plochy a seznamy.

topdesigner.cz

topdesigner.cz

Krom toho, že klikatelný je jen text odkazu viz vyznačená oblast napravo, tak tu je ještě jedna nepříjemnost. To se objevuje pokud je v seznamu několik různě dlouhých a klikatelných položek pod sebou.

Seznam na ukázce si otevřu najetím myši na “procházet projekty”, pak jedu myší přímo dolů. Avšak když chci kliknout na některou z kratších položek, musím se uhýbat myší doleva. Např. položka vizitky.

7. Chybějící řez pro kurzívu

Pokud na webu používáte webový font a potřebujete kurzívu, tak máte dvě možnosti, jak kurzívu udělat.

  1. Použijete normální řez a znásilníte ho na kurzívu resp. nějaký vestavěný algoritmus vezme normální řez a prostě ho jednoduše zešikmí. Nemusí to být hezké, ale kurzíva to je. Ušetříte tím nějaká data na síti. Ale pokud font nemá řez s kurzívou, tak vám stejně nic jiného nezbude. Leda byste použili jiný font.
  2. Použijete pro kurzívu řez s kurzívou. Řez, se kterým si někdo dal velkou práci, aby to bylo i v kurzívě hezké. Viz font Georgia dole. Anebo si s tím práci nedal a také prohnal nějakým algoritmem, který to jenom zešikmil a uložil jako další řez. To se může lišit font od fontu.

Co z toho vybrat, pokud chcete šetřit data? Záleží na tom jaký font používáte a kde na webu to bude použité. Vyzkoušejte obě možnosti a pokud bude vlastní řez (možnost č. 2) s kurzívou výrazně hezčí a čitelnější, zvažte možnost použít řez navíc. Nezapomeňte si font odebrat z vašeho PC, jinak to neuvidíte správně, protože se vám natáhne řez kurzívy z disku na PC místo z webu.

Horní ukázka je "znásilněný" Archivo Narrow. Dolní ukázka je Archivo Narrow s řezem pro kurzívu navíc.

Horní ukázka je “znásilněný” Archivo Narrow. Dolní ukázka je Archivo Narrow s řezem pro kurzívu navíc.

Dolní ukázka má menší náklon a je čitelnější. Krom toho písmena “af” vypadají hodně rozdílně.

Nahoře: "znásilněný" font Georgia Dole: Georigia s řezem kurzívy

Nahoře: “znásilněný” font Georgia
Dole: Georigia s řezem kurzívy

U fontu Georgia je rozdílů ještě více. Kromě dvou prvních písmen jsou vidět všude rozdíly. Náklon mají podobný. Nicméně Georgia je systémový font Windowsu a vybral jsem ho, protože u něj jsou rozdíly dobře vidět. Ale i webfont by mohl mít takové zásadní rozdíly.

 

Máte vlastní postřehy a tipy? Nesouhlasíte s něčím co jsem napsal? Chcete další další takový článek? Piště do komentářů. Líbil se vám článek? Sdílejte.

Přispějte svým komentářem

*

Komentáře používají avatary z Gravataru. E-mail se nezveřejní.