Hromádka drobných doporučení pro webdesignéry

Tentokrát nebude řeč o nových postupech a ultramoderních technologiích, ale naopak o pravidlech, která vyznívají jakoby samozřejmě.

Myslím si, že i přesto neuškodí si je připomenout a zamyslet se nad nimi.

Nedávno jsem narazil na publikaci 1001 tipů a triků pro WWW stránky od kolektivu autorů, jejichž jména raději vypisovat nebudu. Díky svému názvu se kniha v době svého vydání (rok 2003) určitě dobře prodávala. Ještě dlouho po válce prohlížečů totiž webdesignéři obtížně překonávali rozdíly mezi prohlížeči v interpretaci HTML a CSS. 1001 tipů a triků by jim tudíž přišlo náramně vhod. Kniha ovšem nic zvláštního neobsahuje. Autoři patrně opisovali ze starších učebnic věci, které jim připadali zajímavé, ale jednalo se jen o rady pro začátečníky. Navíc desítky, možná stovky těchto rad byly v roce 2003 již dávno překonané. Zdá-li se to býti příkrým hodnocením, tak jeden „trik“ odcituji:

„Korektní jednobarevná dělící čára bez mezery před a za čárou s libovolnou šířkou třeba i v procentech se dělá pomocí tabulky a prázdného obrázku.“

Následuje kód:

<TABLE width=100% CELLSPACING=0 CELLPADDING=0 BORDER=0 BGCOLOR="black">
<TR><TD><IMG SRC="nic.gif" WIDTH=2 HEIGHT=2 BORDER=0></TD></TR>
</TABLE>

Připomenu, že skutečně korektní dělící čára se dělá pomocí tagu <HR> a formátuje se CSS styly! A to i přesto, že stylovat <HR> tehdy nebyla žádná HRačka.

Oč nižší byla odborná úroveň autorů, o to vyšší byla míra jejich ignorance. Existují prý i jiné OS než Windows a jiné prohlížeče než IE, dokonce snad existují i lidé, kteří je používají, nicméně vzhledem k jejich počtu není nutné brát je na zřetel. S úspěchem lze tedy používat obrázky a symboly písma Wingdings přítomného pouze ve Windows. Ještě více se vyplatí používat editor FrontPage, jemuž je věnována hned druhá kapitola (po kapitole Internet Explorer) a jenž generuje stránky, které se korektně zobrazují jen v IE. Pro programování stránek je důležitý VBScript (fungující jen v IE), proto je mu též vyhrazena kapitola – na rozdíl od CSS, které znalí autoři zařadili do HTML.

Kritika, kterou jsem napsal místo úvodu, nemá sloužit jen k mnoho místa zaplňujícímu uvedení starého zdroje mé čerstvé inspirace. Odkazuji na ni ve svém prvním doporučení, které zní:

Vybírejte pečlivě

Pokud zamýšlíte koupit si odbornou publikaci, kterou hodláte využít při své práci, nenechte se zlákat slibným názvem nebo vzletnou anotací. Autoři i nakladatelé si knížku rádi pochválí – tak jako i v inkriminovaném případě:

„Co jsme tedy pro vás vlastně napsali? Moderním slovem ‚vychytávky‘, ty největší ‚perličky‘ (…), které vám často ukáží mnohem efektivnější postupy a ušetří vám námahu i čas.“

Braku mezi odbornými publikacemi je možná víc, než byste čekali, proto nelitujte času, knihu si důkladně prolistujte a místy se začtěte. Ideální je, pokud vám knihu někdo doporučí. Můžete si také přečíst recenze.

Komunikujte s klientem

Vždy, když navrhujete web na zakázku pro klienta, dobře prodiskutujte zamýšlený účel daného webu. Nebojte se ani zeptat se klienta na jeho oblíbené stránky, které ovlivňují jeho názor na to, jak by měl jím požadovaný web vypadat a fungovat. Tímto způsobem zjistíte o záměrech klienta často víc, než dlouhým popisovaním.

Základní pravidlo webdesignu

Uživatelé tráví většinu svého internetového času na jiných stránkách, než jsou ty vaše. Své vlastní představy, jak má vypadat používání webu, si tak formují vůči velkému počtu stránek, kde ty vaše jsou jen jedněmi z mnoha. Není proto důležité být originální za každou cenu. Důležité je mít spokojené návštěvníky, kteří u vás najdou to, co hledají tam, kde to očekávají!

Nezahlťte návštěvníka informacemi

Návštěvník vašeho webu nemusí nutně vidět na vstupní stránce vše, co mu dokážete nabídnout. Na každé stránce by měl být adekvátní počet jasných záchytných prvků, které návštěvníka k hledaným informacím návodně povedou.

Nechte si návrh webu posoudit od jiných

Nerozpakujte se otestovat návrh webu na někom zvenčí, kdo se na něm nepodílel. Pokud přitom dotyčné osobě budete muset vysvětlovat, kde co najde a jak se k informacím dostane, je něco špatně a musíte návrh přepracovat. Pochopitelně totiž nemůžete každému návštěvníkovi vysvětlovat, jak se na vašem webu má vyznat.

Amatérští webdesignéři mohou využít možnost, nechat si web zhodnotit od účastníků nějakého diskusního fóra, např. diskuse.jakpsatweb.cz.

Ke kritice se stavte vlídně, i když s ní nesouhlasíte. Nepůsobí dobře, když s kritiky polemizujete. Místo toho jim poděkujte za zájem a ochotu.

Grafik není webdesignér!

Hledáte-li webdesignéra, nepleťte si ho s grafikem. Grafik nepochybně dokáže udělat velmi kvalitní grafický návrh webové stránky. O tom není sporu. Webdesign ovšem zdaleka není pouze a jen o estetickém cítění. Svou úlohu hraje i přístupnost, přizpůsobitelnost různým platformám atd. Grafik také nemusí být dokonale obeznámen s některými postupy, které umožňují efektivnější vytváření webových stránek a jejich snadou úpravu. Například určité grafické efekty (stíny, oblé rohy, gradienty apod.), které se dnes dají snadno a flexibilně udělat prostřednictvím CSS, může grafika napadnout udělat pomocí obrázků.

Nedělejte často radikální redesign

Po nějaké době je potřeba změnit tvář webu, aby návštěvníci neměli dojem, že se u vás zastavil čas. Nicméně je vhodné být umírněný. Nedělat příliš často radikální změny. Ani flegmatici zpravidla nejsou nadšeni, když, jen co si zvyknou na nový cool vzhled a nové rozvržení (layout), už aby se opět seznámili s novým designem v ještě modernějším střihu. Každá taková změna totiž vyžaduje, aby se uživatel na stránce znovu zorientoval, proto buďte raději konzervativní a velké změny nedělejte častěji než maximálně jednou za rok. Drobné změny (pokud možno k lepšímu) samozřejmě nejsou na škodu, naopak mohou zvýšit zájem uživatelů.

Neinspirujte se duhou

Nepoužívejte na svých stránkách příliš mnoho různých barev. K barvě písma a barvě podkladu, které musí být kontrastní, přidejte ještě jednu, maximálně dvě další barvy. Pro doladění barevné kompozice již používejte jen odstíny vybraných barev.

Animace používejte s rozvahou

Animace uživatele ruší a upoutávají jeho pozornost. Mnozí lidé je proto nesou dost nelibě. Nemají-li tedy nějaký praktický účel (reklama, vyplnění pauzy při načítání dat aj.), je lépe je na stránky vůbec neumísťovat.

Kontrast písma s pozadím raději větší než menší

Lidské oko je sice na rozdíl od fotoaparátu velmi adaptabilní orgán, přesto bychom však měli mít ke svým očím a očím svých čtenářů ohled, namáhání očí, ačkoliv si je ani moc neuvědomujeme, se totiž zákonitě projeví v budoucnu horším zrakem. Proto dbejte na co nejvýraznější kontrast textu a pozadí. Je to také ohleduplné vůči lidem s některými druhy oční vady.

Patkové, nebo bezpatkové?

Obecně se pro web doporučuje bezpatkové písmo. Patkové je určeno hlavně pro tištěné dokumenty, na obrazovce a zvláště v malé velikosti však není dobře čitelné, proto na webové stránky patří písmo bezpatkové.

Správné oddělování odstavců

Odstavce lze od sebe oddělovat buď mezerou mezi posledním řádkem předchozího a prvním řádkem následujícího odstavce, nebo odsazením prvního řádku každého následujícího odstavce. Občas se lze setkat s úpravou, kdy po nadpisu následuje mezera a po ní odstavec s odsazeným prvním řádkem, což je vlastně kombinace obou způsobů oddělování. Taková kombinace se ale považuje za typografickou chybu.

Všudypřítomná navigace

Navigace je jednou z klíčových věcí, které rozhodují o úspěšnosti vašeho webu. Kromě takových samozřejmostí jako, že by měla být přístupná, přehledná, srozumitelná, logicky členěná a případně ještě doplněná o možnost vyhledávání, by také měla být pokud možno vždy v dosahu, aby na ni uživatel mohl kdykoliv kliknout. To se sice u delších stránek obtížně provede, nicméně určité možnosti zde jsou.

Horizontální menu lze dát nejenom tradičně nahoru, ale zároveň i do patičky stránky. Díky tomu se uživatel po dočtení nebo prohlédnutí obsahu nemusí vracet nahoru, ale může použít totéž menu umístěné v patičce stránky. Další příležitost skýtají prázdné okraje webových stránek, kde mohou volně „plout“ fixně pozicované navigační prvky, aniž by překrývaly obsah.

Ve struktuře HTML kódu je vhodné navigaci vložit, je-li to v daném případě možno, až někde na konec. Hlasové čtečky nevidomých uživatelů díky tomu nebudou předčítat haldy odkazů a dostanou se hned k obsahu.

Vkládejte do zdrojového kódu komentáře

Ačkoli vás vlastně z technického hlediska nic nenutí přidávat do kódu komentáře, je to nedocenitelná pomůcka, která kolegům a často i vám samým pomůže rychleji se vyznat v kódu, který jste napsali. Pomocí komentářů můžete například vyznačit některé důležité úseky kódu.

Nejvíce se naučíte studováním cizích zdrojových kódů

Praktické postupy se nejlépe učí na praktických příkladech. Proto, když uvidíte někde nějaký zajímavý webdesignérský počin, nebuďte líní prozkoumat, jakým způsobem ho bylo dosaženo. Třeba přitom narazíte na nějaký fígl, který jste dosud neznali a který se dá šikovně uplatnit.

Odkazy a zdroje

• Další doporučené rady
  • Pravidla přístupnosti – zákon 81/2006 Sb., o informačních systémech veřejné správy
  • Webová grafika jako nástroj zkázy (článek, 2010) – Pavel Salvet
  • Nenuťte uživatele přemýšlet (kniha, 2010) – Steve Krug
• Antirady
  • Jak odehnat návštěvníky ze svých stránek
  • 1001 tipů a triků pro WWW stránky (kniha, 2003)