Nejčastější chyby tvůrců webových stránek

Chcete vědět, jaké www stránky jsou nejhorší? Jsou to se železnou pravidelnosti ty, co jsou umístněny na webu den poté, co se jejich autoři naučili syntaxi jazyka HTML. U všem těchto stránek nalézáme stejné chyby a tyto chyby v tomto článku vypíšeme…

Barva pozadí

Mnoho tvůrců webových stránek zapomíná definovat barvu pozadí parametrem BGCOLOR=“barva“. Výsledek je ten, ze pozadí stránky není bílé, jak by mělo být, ale u každého uživatele je jiné, převážně šedé. Pokud totiž není definována barva pozadí, operační systém si zde dosadí svoji vlastní barvu a ta může být klidně červená, zelená atd. Jak to dopadne s umístněných černým textem na této stránce si domyslete sami. Tímto neduhem trpí i světoznámé Yahoo!. Ovšem pozor – dejte si pozor na prohlížeč Internet Explorer 5.0 či Netscape Navigator. Ten totiž do webové stránky v případě, že není definována barva pozadí, dosadí bílou barvu, bez ohledu na barvy systému, což je jistě přínosné řešení, které ale ovšem nefunguje v IE 4.0 a nižších verzích a tak doporučuji barvu pozadí pokaždé definovat.

Sladění barvy pozadí a písma.

Při definici barvy pozadí berte ohled na napsaný text. V převážné většině se používá bílé pozadí s černým textem, nebo černé pozadí s bílým textem – toto druhé řešení je ovšem nevhodné pro stránky, kde je spousta textu, text se totiž stává trochu špatně čitelným. Rozhodně nekombinujte zelený text, červené pozadí, či bílé pozadí, žlutý text atd. Musíte dbát na to, aby byl text především čitelný a ne příliš kontrastní.

Obrázek na pozadí

Před několika málo lety bylo velmi módní dávat na pozadí nějaký obrázek, dnes se od této praxe již ustupuje. Obrázek daný na pozadí stránky pomocí tagu BACKGROUND=“obrázek“ totiž prodlužuje výslednou dobu načtení stránky a navíc zatěžuje grafický subsystém počítače. Daný obrázek se totiž musí poskládat na celou viditelnou plochu monitoru. Viděl jsem již stránku, kde byly na pozadí šedé čtverečky orámované černou barvou a text zobrazený žlutou barvou – čitelnost napsaného textu tedy naprosto žádná. Pokud už musíte mít obrázek na pozadí, udělejte jej bezešvý, tzn. že horní a spodní část a levá a pravá část musí na sebe navazovat.

Písma ve stránce

Vyvarujte se používání nestandartních písem – u čtenáře, který toto písmo nemá se obvykle text zobrazí bez diakritiky, což je hrubá chyba. Vyvarujte se rovněž používání písma Verdana – to lze třeba zahlédnou i na internetovém obchodu Vltava nebo u firemních stránek firmy AutoCont – výsledek u mě je ten, že místo českých znaků mám jenom prázdné čtverečky atd. Pokud se rozhodnete používat bezpatkové písmo, tak pouze ve tvaru <FONT FACE="HELVETICA CE, ARIAL CE, ARIAL, HELVETICA, SANS-SERIF">. V případě neproporciálního písma je syntaxe následující <FONt FACE="COURIER NEW CE, COURIER CE, COURIER NEW, COURIER, MONOSPACED"> a v případě patkového písma je syntaxe <FONT FACE="TIMES NEW ROMAN CE, TIMES CE, TIMES NEW ROMAN, TIMES, SERIF">. Pouze touto definicí tagů, na kterých se shodli účastníci konference o webdesignu zajistíte správné zobrazování češtiny na převážné většině platforem.

Klikací mapy

Platí o nich totéž, co u obrázku na pozadí – dnes se již moc nepoužívají, ale v některých případech jsou nenahraditelné, třeba u tlačítek, urychlí to totiž načtení stránky, je rozdíl, pokud musí prohlížeč serveru posílat jenom jeden požadavek nebo požadavků několik. Každopádně, nepřípustným řešením je vložení jednoho velkého obrázku na celou stránku, třeba ve stylu pokoje, kde každá věc – klika, skříň atd. vyvolá určitý odkaz. Návštěvník takové stránky totiž rozhodně nepočká, až se mu obrázek celý načte a rozhodně pak nebude hledat tyto skryté odkazy.

Počet obrázků

Každá webová stránka má obrázky, buď je to logo serveru, reklamní banner, ikona atd. Nezapomínejte ovšem, že všeho moc škodí, takových 20 hýbajících a mrkajících ikon v pravém sloupečku není ta dobrá cesta k webové stránce. Optimální velikost stránky – včetně textu a obrázků – by se měla pohybovat kolem 40-60 Kb, zkuste se tohoto čísla držet.

ALT text

Ke každému obrázku nezapomeňte doplnit jeho popisek tagem &ltALT=“popisek“> Popisek slouží k tomu, aby se čtenář dozvěděl více o daném obrázku, pokud je obrázek současně jako odkaz, tak i o tomto odkazu (kam vede atd.). Někteří čtenáři navíc ještě prohlížejí stránky s vypnutou grafiku a v případě, že u obrázku není popis, nezjistí vůbec co je to vůbec za obrázek.

Definice rozměrů obrázku

Nezapomeňte u obrázku definovat jeho výšku a šířku – urychlíte tak celkové načtení stránky. Pozor – skutečné rozměry obrázku musí odpovídat tomu, co uvedete v HTML kódu. Je zbytečné uvádět rozměry menší než je skutečná velikost obrázku a naopak. Obrázek bude v takovém případě samozřejmě zobrazen v nižší kvalitě.

Orámování obrázku a tabulek

Pokud jste zvyklý nedefinovat u obrázků a tabulek orámování, změňte své návyky – v případě Netscape Navigatoru je to totiž potřeba – ten totiž implicitně, pokud není orámování definováno, obrázek nebo tabulku orámuje (byť neviditelně) a pak vám nevycházejí rozměry, čímž se stránka se může v NN jednoduše nekorektně zobrazit.

Rozlišení stránky

Stránky navrhujte pro rozlišení 800×600 bodů – podle posledních známých údajů toto rozlišení používá asi polovina uživatelů Internetu, zbytek má rozlišení 1024×768. Stručně řečeno – rolování do stran není moc oblíbené.

Pohybující se text

Pohybující text doporučuji nepoužívat – nejenom, že nefunguje v Netscape Navigatoru, ale poutá se sebe příliš mnoho pozornosti. Opět uvedu jeden extrém – tři odlišné rolující velké texty na jedné stránce pod sebou. Zkuste se zamyslet – který text má čtenář v takovém případě číst, ten horní nebo ten prostřední nebo ten, co je úplně dole? Pokud jej použít musíte – třeba pro aktuální informace, použijte úzký Java Aplet, který funguje i v NN.

Úvodní stránka

Vzhled prodává – a platí to i na Internetu, hlavně u první stránky webu. Mělo by zde být to nejlepší, co lze na vašich stránkách najít a neměla by chybět i taková drobnost, jako je datum aktualizace stránek. Navíc, aktualizace serveru by se měla projevit na úvodní stránce, pokud totiž změníte pouze podstránku, návštěvník pak nemusí ani zjistit, že na webu něco přibylo…

IE versus NN

Stránky musí být vytvořeny tak, aby jejich vzhled byl přinejmenším podobný v Internet Exploreru 4.0 a současně v Netscape Navigatoru 4.0. Často se totiž setkáváme s faktem, že některé webové stránky fungují pouze v jednom prohlížeči (obvykle to je IE) a v NN se stránky ani nezobrazí. Proto pečlivě stránky ověřujte. Pokud nevíte, pro jaké verze prohlížečů stránky optimalizovat, stačí čtvrtá generace prohlížečů.

Rámce (frame)

Rámce jsou zajímavým zpestřením webové stránky, příliš se ovšem nevidí, ale v některých případech je jejich použití dokonce nenahraditelné, zásady jsou následující: rozhodně nepoužívejte iframe (plovoucí rám) už jenom z toho důvodu, že NN jej nepodporuje, u svislých frame dbejte na to, aby čtenář nemusel rolovat do strany, rolování nahoru a dolů je v celku přijatelné, rámců by nemělo být na stránce příliš mnoho, ideální počet jsou tak dva, tři, nejlépe ani jeden:o) a to z toho důvodu, že každý rámec je vlastně samostatná HTML stránka, což se samozřejmě nepříznivě projevuje na délce načtení stránky.

Kódování stránky

Každá stránka musí mít uvedeno, v jakém kódování je napsána, prohlížeč pak ví, v jakém kódování ji zobrazit. Pokud neuvedete v META tagu kódování, Internet Explorer se s tímto faktem vyrovná v celku dobře, což ale rozhodně neplatí o Netscape Navigatoru, který vám ji jednoduše předhodí bez češtiny. Nejčastější kódování stránek je ISO-8859-2, které korektně zobrazí většina platforem a kódování windows-1250, použitelné pouze pro Windows.

V tomto článku jsem se snažil vypsat nejčastější chyby tvůrců webových stránek. Snad to někomu pomůže se těchto chyb vyvarovat. Pokud s některým názorem nesouhlasíte a máte jiný názor, či vám zde něco chybělo, nestyďte se a napište mi na níže uvedený email.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.