aneb než dáte své stránky k hodnocení
Tento návod jsem rozdělil do třech kapitol:
- Na co myslet – převážně pozitivně laděná doporučení; budete-li je mít při své tvorbě na paměti, máte docela slušnou šanci, že se budou návštěvníci na vašich stránkách cítit dobře, že naleznou to, co hledali, jakož i to, co chcete, aby nalezli.
- Čeho se vyvarovat – zde se naopak dočtete o nejčastějších prohřešcích, kvůli kterým lidé ze stránek odcházejí.
Přestože jste možná řadu níže uvedených nectností na mnohých stránkách potkali, uvědomte si, že to, co je běžné, ještě nemusí být nutně normální, dobré, správné… Buďte lepší než ostatní (ani amatér nemusí být diletant a bastlíř). - Užitečné odkazy – to nejdůležitější, co vám při tvorbě stránek může pomoci.
Myloš
I. Na co myslet
Stránky nevytváříte proto, abyste je zarámovali a vystavili v Ermitáži; stránky slouží k tomu, aby na nich návštěvník snadno nalezl patřičné informace. Měl by se na nich cítit dobře; zmatený návštěvník brzy ztratí trpělivost, odejde a už se nikdy nevrátí. Jako doporučení vám tedy kladu na srdce následující body:
- Nenuťte uživatele přemýšlet (slogan jsem si vypůjčil z názvu knihy Steve Kruga). Pokud k tomu nemáte závažné důvody, snažte se zachovávat následující zvyklosti:
- Podtrhávejte odkazy (v menu to většinou není nutné).
- Nikdy naopak nepodtrhávejte to, co není odkaz.
- V běžném textu označujte navštívené odkazy (a:visited).
- Děláte-li menu nebo nadpisy pomocí obrázků, přinejmenším nezapomínejte na jejich alt="alternativní popisky".
- Obsah stránky logicky strukturujte (nadpisy, odstavce, seznamy…); k tomu vám budiž nápomocné správné „hygienické návyky“, totiž srozumitelná sémantika.
- Méně je více – čím je stránka rozsáhlejší, tím méně z ní návštěvník přečte, což platí začasté nikoli procentuálně, nýbrž absolutně. U příliš dlouhých stránek se totiž často stane, že je návštěvník vůbec nebude číst; takové stránky radši rozdělte na několik podstránek.
- Dostatečný barevný kontrast textu a pozadí. Pakliže jako pozadí používáte obrázek, neměl by znesnadňovat čitelnost:
Ani v případě obrázkového pozadí nezapomeňte definovat patřičně kontrastní barvu pozadí (hodí se v případě, když prohlížeč z jakéhokoli důvodu nenačte obrázky).
S čitelností také souvisí velikost textu; jistěže si mohou návštěvníci mikroskopická písmenka zvětšit, ale proč jim to neusnadnit?
- Datová velikost stránek – přestože je v současnosti (konec roku 2008) rychlý internet běžným standardem, není 100% platnou skutečností (někteří jedinci jsou například závislí na velmi pomalém GPRS). Snažte se proto stále ještě o to, aby byly vaše stránky datově co nejúspornější.
Jsou sice situace, kdy to jinak nejde (například fotogalerie), ale za normálních okolností se snažte, aby kompletní stránka (zejména včetně obrázků) nepřesáhla řekněme 100 kilobajtů. Pro obrázky proto používejte pouze formáty JPG (v náhledech bez EXIFů) a PNG (možno-li 8bitové, tedy v tzv. „indexovaných barvách“) případně GIF. Pro náhledy velkých fotek pak používejte vždy zmenšeniny (atributy width a height obrázek datově nezmenší). Konečně formátu BMP se varujte jak čert kříže.
- Mějte na paměti módy prohlížečů (vykreslovací režimy) – mnohdy nepochopitelná odlišnost chování prohlížečů je zapříčiněna prvním řádkem kódu: <!DOCTYPE HTML PUBLIC…
Informace o této problematice naleznete například na www.jakpsatweb.cz/css/mody-prohlizecu.html.
II. Čeho se vyvarovat
- Všeho, co na sebe strhává pozornost. Jsou to zejména:
- Zvuky (Poslouchám vlastní hudbu, v místnosti někdo spí, za zády mi sedí šéf… a do toho se najednou ozve obtěžující hudba o kterou nestojím.)
Když už opravdu nemůžete jinak a stránka ozvučená být skutečně musí, nechte zvuky defaultně vypnuté a na stránku umístěte „klikátko“ pro jejich zapnutí. Myslím si ovšem, že je stejně zapne málokdo. - Animace a jezdící texty – strhávají na sebe neustále pozornost a návštěvník se nemůže soustředit na to, kvůli čemu na stránkuj přišel.
Přesto lze za určitých okolností animaci použít – coby dočasný indikátor právě probíhající akce, jako je odesílání zprávy, načítání obrázku, průběh uploadu…
- Zvuky (Poslouchám vlastní hudbu, v místnosti někdo spí, za zády mi sedí šéf… a do toho se najednou ozve obtěžující hudba o kterou nestojím.)
- Přehnaného počtu barev a vůbec přemíry jakýchkoli zvýraznění, protože bude-li zvýrazněné všechno, v konečném důsledku nebude zvýrazněné nic a výsledkem bude přeplácaná nepřehlednost.
- Zbytečného (pro návštěvníka neužitečného) balastu (viz bod „Méně je více“ z předchozí kapitoly).
Sem patří především:- Počítadla návštěvnosti – to zajímá vás, ale málokterého příchozího. Ostatně návštěvnost se na řadě hostingů dá sledovat v administraci.
Nemůžete-li přeze všechno bez počítadla být, umístěte ho alespoň na nějaké odlehlé místo (třeba do patičky) a snažte se, aby na sebe příliš neupozorňovalo. - Kolik lidí (a kdo) je online – to je vhodné pro fórum a zejména pro chat, ale na běžných stránkách či blogu je to zcela zbytečné.
- Většina anket (mají beztak často mizivou vypovídací či informační hodnotu).
- Hodiny – chci-li vědět, kolik je, podívám se a) na svoje hodinky, b) na budík, c) na hodiny na stěně, d) do systémové lišty na monitoru.
Výjimkou může být nanejvýš stránka věnovaná srovnání časů v jednotlivých světových pásmech. - „Dnes má svátek Brünhilda“ – Chci-li vědět, kdo má svátek, stačí otevřít kalendář nebo noviny, případně prohlížeč se stránkou novin anebo nějakého portálu.
Jedině snad provozujete-li květinářství – pak návštěvník uvítá upozornění na to, že má koupit babičce kytku. - Samoúčelné kalendáře – například na stránce kapely má kalendář svoje místo, pakliže odkazuje na data koncertů, ale kalendáře, které na nic (důležitého) neupozorňují, jsou opravdu balast.
- Další zbytečné informace, které s daným webem nesouvisejí: ikonky validity (validní stránka může být velmi nepřístupná a nepoužitelná; a naopak – stránka, na které se cítíte dobře, může být nevalidní), zejména pak frajeřinky typu
váš prohlížeč je JESPR („jediný správný prohlížeč“) a vaše I. P. adresa je I. P. Pavlova…
- Počítadla návštěvnosti – to zajímá vás, ale málokterého příchozího. Ostatně návštěvnost se na řadě hostingů dá sledovat v administraci.
- Rámce (frameset) jsou zastaralou, dnes namnoze zbytečnou technologií – více viz www.jakpsatweb.cz/ramy-problemy.html. Výjimku může tvořit <iframe>, pokud do něho umístíte navigaci (menu) a nikoli vlastní obsah stránky (viz www.jakpsatweb.cz/include.html#iframe).
- Kapitolou pro sebe sama je flash. Je to mocná technologie, pomocí níž můžete vytvořit úžasné webové aplikace, které byste jako HTML/CSS/javascript těžko sestavovali; namátkou vynikající Adobe Kuler; taktéž pro online přehrávače je flash dobrou volbou. Pokud se však flashe chytí začátečník, vznikají často velmi špatně použitelné, nepřístupné weby. Nevytváříte-li tedy webové aplikace flash vyžadující (nebo nejste-li vynikajícími grafiky, kteří mají problematiku přístupnosti v malíčku), držte se radši tradičních prostředků (HTML/CSS a případně nějaký ten javascript).
- Posledním varováním budiž odstrašující formulace:
„Stránky jsou optimalizované pro prohlížeč XY ve verzi N při rozlišení a×b, zapnutém javascriptu, povolených cookies, přítomných fontech BCD a EFG a nainstalovaném pluginu Fň.“
Stránky nutně nemusejí ve všech prohlížečích stejně vypadat, ale musejí být ve všech běžných prohlížečích (ke konci roku 2008 to jsou IE 6, IE7, Firefox 3.x a Opera 9.x, případně Chrome, Konqueror a Safari) funkční do té míry, aby návštěvník dokázal přečíst všechny texty, zhlédnout fotky, stáhnout patřičné soubory a procházet stránky (menu, mapa webu…).
Návštěvníka totiž vůbec nezajímá, pro jakou technologii jste stránky odladili, ale to, jestli je může (plusminus komfortně) používat. Nikdo (výjimky potvrzující pravidlo nechť prominou) si nebude instalovat jiný operační systém, prohlížeč, fonty či pluginy, málokdo bude měnit rozlišení (a s LCD už tuplem ne). Jak už jsem napsal, návštěvníka zajímá pouze jediné: „Fungují stránky v mém prohlížeči? Jsou použitelné a přehledné?“ a v opačném případě je opustí a nikdy se nevrátí. Ruku na srdce – pro koho stránky děláte? Pro návštěvníky, nebo pro sebe?
Ona hrůzyplná formulace „optimalizováno pro…“ snad měla své ospravedlnění před léty, v době IE 4 a NN 4 (odpočívejž, ó strašný, v kuchyni) – ladit stránky pro oba zároveň bývalo v určitých ohledech opravdu utrpení.
V současnosti, kdy většina prohlížečů ctí většinu současných standardů, však výše uvedený „disclaimer“ shledávám pustou výmluvou diletantů, bastlířů a lemplů, kterým jejich stránky náhodou v některém prohlížeči fungují a oni tak „vznešenými slovy“ zastírají svoji lenost či neschopnost. K tomu se váže moje poslední rada (subjektivně odpozorované pravidlo):
Funguje-li stránka ve FF a Opeře, ale v IE (a to především v jeho 6. verzi; pozor však na vykreslovací režimy prohlížečů) jsou s ní problémy, bývá povětšinou slušně napsaná a chyba je na straně Microsoftu (takovou stránku lze ale dobře odladit například pomocí podmíněných komentářů).
Je-li stránka naopak primárně odladěná pro IE a ve Firefoxu či Opeře se chová problematicky, chyba bývá častěji mezi klávesnicí a židlí.
Konečně budete-li stránky v průběhu práce ladit ve více prohlížečích zároveň, neublíží vám to.
III. Užitečné odkazy
- Kód
- www.semantika.name/ – sémanticky srozumitelný kód je přehlednější, lépe se upravuje a lépe se styluje.
- Validátory: „oficiální“ http://validator.w3.org/" onclick="window.open(this.href);return false; (včetně validátoru CSS: http://jigsaw.w3.org/css-validator/) a český http://validator.webylon.info/. Validita by sice neměla být modlou, ale validátor pomůže odhalit zbytečné překlepy.
- Pro lidi posedlé validitou za každou cenu malý korektiv: www.webylon.info/K.
- Xenu's Link Sleuth je program, který zkontroluje (i offline) funkčnost (platnost) odkazů na vašich stránkách. Homepage tohoto programu je http://home.snafu.de/tilman/xenulink.html.
- PSPad je po mém soudu nejlepší free editor kódu na platformě Windows. Jeho domovská stránka je www.pspad.com/.
- Barvy
- Různá barevná schemata, aneb jak sladit barvy na stránce:
- Barevná míchátka (určování barev): http://knowhow.davidgrudl.com/javascript/color-mixer/ring/ring.html, http://knowhow.davidgrudl.com/javascript/color-mixer/stripe/stripe.html.
- www.sovavsiti.cz/kontrast/ – pomůcka ke správné volbě barev textu a pozadí (vinou nedostatečného kontrastu je mnoho stránek špatně čitelných).
- Různá barevná schemata, aneb jak sladit barvy na stránce:
- Přístupnost
- www.jakpsatweb.cz/pouzitelnost.html – co je to použitelnost a přístupnost stránek.
- http://pristupnost.nawebu.cz/texty/pravidla-standardy.php – Pravidla přístupnosti.
- http://pixy.cz/pixynergia/2008/vady-novych-pravidel-pristupnosti/ – kritika výše uvedených pravidel.
- Návody (aneb není chyba nevědět, vím-li, kde příslušnou informaci najdu)
- www.jakpsatweb.cz/ – fenomenální přehled Dušana Janovského aka Yuhů, jakož i diskusní fórum věnované tvorbě stránek http://diskuse.jakpsatweb.cz/.
- http://interval.cz/hotova-reseni/pro-css/ – „Knihovna CSS“ – mnoho praktických ukázek.
- Nezařaditelné
- http://css-galerie.tomcik.cz/, aneb nechte se inspirovat, jak se dnes dělají stránky. Inspirace není kopírování (jestliže například malujete, také asi neodmítáte chodit na výstavy, abyste nebyli ovlivněni a nechtěně nekopírovali).
- http://browsershots.org/ Chcete vědět, jak stránka vypadá v prohlížeči, který nemáte nainstalovaný? Browsershots je tu pro vás.
- www.jakpsatweb.cz/css/mody-prohlizecu.html – Co je to quirk, aneb jak <!DOCTYPE ovlivňuje vykreslování stránek.
- http://ie-brouci.dero.name/ – Chyby, kterých se dopouštějí prohlížeče z dílny Microsoftu.
- http://wellstyled.com/ – Dílna Dobrého Stylu Petra Staníčka (aka Pixy) – „vyšší dívčí“.
- www1.mraveniste.org/weblog/2006/03/16-msie-komentare.html – Podmíněné komentáře, aneb jak doladit stránky pro Explorer.
- Knihy
- CSS Kaskádové styly, Kompletní průvodce / Petr Staníček – Teorie. Přestože kniha vyšla v roce 2003, většina jejího obsahu je stále aktuální (konec roku 2008); sám jsem se z ní o stylech naučil (ve srovnání s jinými zdroji) asi nejvíc.
- CSS, Hotová řešení / Petr Staníček a kolektiv – Praktické návody. Vydáno 2006.
- CSS, Kapesní přehled / Jiří Kroužek, Martin Domes – kapesní přehled vlastností a hodnot CSS, vydáno 2006.
- Webdesign, Nenuťte uživatele přemýšlet! (2. aktualizované vydání) / Steve Krug – „Povinná četba“.
//Ltb: přidáno do PC-HELP rozcestníku