Časté formátovací chyby

Zde se pokusím zmínit některé chyby, jichž se internetoví autoři často dopouštějí. U některých položek se se mnou mnozí budou hádat, co je a co není špatně. Takže to berte jako můj názor.

Nevyzkoušené věci - Zvýrazňování - Příliš široké stránky - Hrátky s fonty - Nadpisy z obrázků - Flashová jáma

Nevyzkoušené věci

Existují různé verze prohlížečů, ve kterých se stejné stránky se zobrazují různě. Mnoho lidí tento fakt překvapí. Neuvědomují si, že když jejich stránky vypadají pěkně v jednom prohlížeči, v jiném mohou vypadat docela jinak. Pravidlem by tedy mělo být odzkoušení stránek na většině prohlížečů.

Zvýrazňování

Je dobré zvýrazňováním šetřit, ne plácat jedno přes druhé. To čtenáře akorát zmate, takže nebude vědět, co je důležitější a co ne.

Příliš široké stránky

Často vídám stránky, které obsahují nějaký široký element s nastavenou šířkou tak velkou, že se to nevejde do okna prohlížeče. Potom se šířka stránky přizpůsobuje tomuto nejširšímu elementu a volný text není čitelný bez posouvání horizontální lištou. Na takových stránkách se většinou objevuje text "optimalizováno pro rozlišení monitoru 1024x800", někdy ani to ne. Autoři takových stránek buďto nestojí o čtenáře s menšími monitory (na kterých se takové rozlišení vůbec nedá nastavit), nebo si neuvědomují, že v grafických systémech existují nějaká okna (která mají zpravidla menší šířku), nebo že v prohlížeči někdo může používat panel "historie" nebo "oblíbené".

Řešení tohoto problému je nepoužívat objekty s pevnou šířkou větší než asi tak 500 bodů. Ještě lepší je uvádět šířku elementů v procentech šířky okna (ale to někdy nejde). Jiným častým (ale pracným) řešením je uzavření celého těla stránky do tabulky s šířkou něco kolem 700 bodů. Ta už se ve většině dnešních oken zobrazuje celá. Ale zase se zobrazuje pomalu, (vizte design pomocí tabulek). Naštěstí se dá pevný design dělat i pomocí pozicování.

Hrátky s fonty

Když autor formátuje stránky, chce je oživit použitím různých fontů. Všichni asi víte, že by se v jednom textu měly vyskytnout maximálně dva fonty, jinak dojde k přeplácanosti. Ale na webových stránkách nastupuje další záludnost -- nikdy nevím, jaké nainstalované fonty bude mít počítač u klienta, který bude stránky číst. Můžu mít štěstí a trefím se, ale jistotu zobrazení nemám. Problémy, které mohou nastat:

1. Pokud nastavíte font, který klient nezná, klient zobrazí text svým základním fontem (většinou Times). To není taková katastrofa. Nesmíte ovšem spoléhat na grafický dojem zvláštního písma.
2. Pokud nastavíte fonty, které nejsou vždy české, zobrazí se klientovi čtverečky a čaj typu îÇË. Na vašem počítači máte náhodou nainstalovanou českou verzi tohoto fontu, ale klient má anglickou. Česká písma mívají na konci názvu CE nebo EE, ale nemusí tomu tak být vždy.

   Poznámka: Zobrazení českých fontů nemá nic společného s použitým kódováním textu (u nás windows-1250 a ISO 8859-2), o tom pojednávám v kapitole o češtině.

3. Zadáte-li nějaký netradiční font, který má navíc nějaké jednoduché jméno, může se stát, že se zobrazí úplné šílenosti. Příkladem je font jménem "Chaucer". Existují nejméně dva fonty tohoto jména, přičemž jedno z nich obsahuje obrázky :-). To je pak počteníčko! Například toto.
4. Některá skoro-česká písma se pokoušejí české znaky nedokonale nahrazovat. Výsledkem potom může být něco divného.
5. Je možné používání přibližných názvů písem serif (patkové písmo) a sans-serif (bezpatkový grotesk), monospace (psací stroj), fantasy (ozdobné písmo), cursive (psací). Prostě necháte na uživateli, jak bude vypadat váš ozdobný text. Je to nádherný a elegantní způsob. Není v jádru chybný. Ale výsledné zobrazení těchto fontů závisí na nastavení prohlížeče (a většinou se to nedá přenastavit), takže není zaručebno nic, jak možná vidíte. Vizte detailní příklad.

Řešení

1. Pokud to není nutné, neměňte defaultní (přednastavený) font. Prostě font nikde nedeklarujte.
2. Chcete-li si být jisti, že se jiný font zobrazí správně, používejte písma Times New Roman CE, Arial CE a Courier. Ty jsou ve všech českých instalacích Windows.
3. Používejte vrstvené deklarace. Uveďte prostě seznam písem oddělený čárkami -- když prohlížeč v systému nenajde první font, hledá ten druhý. V HTML 3.2 se to dělá tagem <font face="Arial CE, Arial"> (například), v CSS se píše {font-family: Arial CE, Helvetica, Arial, sans-serif}. Obzvláště se to hodí, když myslíte kromě Windows i na Linux, Win 3.1 či Mac.
4. Při deklaraci jiných fontů zásadně používejte takové, které mají na konci "CE" nebo "EE".
5. Za pár let, až se všude prosadí prohlížeče podporující CSS2, budeme moci ke stránce připojovat link na použitý font. To se sice dá dělat už dneska pomocí programu WEFT, ale je to docela pracné, a ne všechny prohlížeče to chápou.
6. Záleží-li vám na přesném grafickém dojmu, nezbývá, než použít obrázek s nápisem nebo dynamické fonty (pro pokročilé).

Nadpisy z obrázků

Aby nedošlo k mýlce, to je také formátovací chyba (alespoň podle mého názoru). Mám pro to tato vysvětlení:

1. Obrázek se dlouho stahuje (objem dat + nový http protokol), takže čtenář kouká mnoho sekund na neidentifikovatelnou stránku. Řešením je přidat alespoň atribut alt, nebo přidat pod obrázek textovou kopii. Alt je neestetický, textová kopie rušivá.
2. Pokud si čtenář stránku uloží a zapomene si uložit i obrázek nadpisu, má smůlu.
3. Spousta lidí si web prohlíží bez obrázků.
4. Zásadní problém je spojen s vyhledávacími roboty typu Google. Žádný robot zatím ale není tak geniální, aby si vzal obrázek a přečetl z něj text! (Hlavně mu to za to nestojí.)

Řešení problému je různé: Jednak obrázkové nadpisy nepoužívat (to je asi fakt nejlepší), nebo použít pod textem obrázkové pozadí.

Flashová jáma

Nespoléhejte se na to, že uživatelé mají nainstalovaný flash. Dělat stránky jenom ve flashi je dobrý způsob, jak z nich dostat uživatele. Kromě toho, že se jim to vůbec nemusí ukázat, je problém v tom, že se lidi bojí netradiřního a neznámého ovládání.

Vizte též: čeština na webu, rozdíly v prohlížečích, obsah/forma, uživatelská písma, načítaná písma, proč nepoužívat rámy, design pomocí tabulek
Odkaz mimo: Nejlepší řešení obrázkových nadpisů (Pixy)