Nielsen: 10 chyb webdesignu 2005

Odkaz na článek Jakoba Nielsena Top Ten Web Design Mistakes of 2005 jsem sušil od pondělka. A sušil jsem ho tak dlouho, až jsem ho úplně přesušil. Respektive jiní nesušili a psali. Abych nelitoval, že jsem zaváhal, tak přidám aspoň pár odkazů:

Nielsen: Top ten chýb webdizajnu v roku 2005
Ľuboš Kmeťko
Stručný překlad a shrnutí Nielsena.
10 největších chyb webdesignu za rok 2005
Petr Václavek
Rozsáhlejší shrnutí.
Opravdu 10 největších chyb webdesignu?
Jan Brašna
Jan polemizuje na téma: je těch deset největších chyb webdesignu opravdu těch deset největších?
Nielsenových desať najväčších chýb webdesignu v roku 2005
Robert Madaj přidává svůj pohled na deset chyb webdesignu podle Nielsena.

Určitě nebudu sám, kterému se zdá, že se každý rok ty chyby pořád opakují. Je to proto, že jsou webdesignéři tak špatní? Nebo je snad malá osvěta? Nebo to, nedej bože, návštěvníci takto chtějí? Možná jenom lidé jdou nejsnazší cestou. Abych vysvětlil pojem nejsnažší cesta – myslím tím první nalezený použitelný způsob práce, který v konečném důsledku není nejlepší.

Na závěr bych rád, aby nechyběla explicitní pointa. Mé odpovědi na řečnické otázky z předchozího odstavce jsou:

  • Někteří, nevím, někteří, asi ano – pokud jsem v normální náladě.
  • Ano, ne, ne, ano – když mám rezolutní náladu.
  • A není to jedno (po láhvi dobrého Merlotu)?

Pozor na komentáře v HTML

Jak komentovat části kódu v (X)HTML ví snad každý webdesigner. Jestli to ale dělá každý bez chyb, je otázkou. I sebejednodušší činnosti mohou způsobit problémy. A právě remování mě nachytalo na hruškách nedávno.

Doporučení HTML 4.01 říká o komentářích zhruba toto: Mezi znaky a znaky -- nesmí být žádné whitespace znaky (mj. žádné mezery), ale tyto whitespace znaky jsou povoleny mezi ukončovacími znaky -- a ukončovacím znakem >. Častou chybou je vložení dvou a více znaků - uvnitř komentáře.

Prohlížeče

Můj obvyklý způsob zapisování kódu zahrnuje i poměrně časté psaní poznámek (viz testovací stránka). Věřte mi, je to užitečné. Často mám poznámku na začátku i konci poznámkou označeného bloku. A tady začíná můj problém, který mě potkal tento týden. Firefox mi na jedné stránce odkryl komentářem skrytou část stránky včetně části komentáře. Asi je Vám jasné, kde byl zakopaný pes.

Abych si ušetřil práci (zrovna jsem machroval a ukazoval, jak rychle můžu skrýt část stránky), tak jsem na konci úvodního komentáře smazal ony dvě pomlčky. Editor poslušně přebarvil blok do zelena a Internet Explorer 6 zamýšlenou část stránky skryl. Vymalováno. Ovšem jen do doby, než jsem si stránku prohlédl ve Firefoxu. Firefox se snaží ctít doporučení a zobrazí text, který následuje za uvodními znaky poznámky - tj. za a to včetně textu poznámky.

Opera se chová stejně jako IE - nebere v úvahu špatně napsanou poznámku a vše skryje.

Editory

Zajímavé taky je, jak se ke špatně zapsanému kódu poznámky staví editory:

Adobe GoLive 6
Kód označí jako celý zaremovaný. Chová se tak, jak IE zobrazuje.
Macromedia Dreamweaver
Kód označí jako celý zaremovaný. Chová se tak, jak IE zobrazuje.
Macromedia Homesite 5
Text označí jako zaremovaný až do výskytu ukončovacího sekvence -->. V uvedeném příkladu to bylo až do konce HTML dokumentu.
Microsoft FrontPage 2003
Kód označí jako celý zaremovaný. Chová se tak, jak IE zobrazuje.
NVU 0.3
Celkem pochopitelně zobrazuje jako Firefox a do zdrojového kódu doplní(!) za začátek první poznámky dvě pomlčky (znaky mínus).

Vyzkoušel jsem ještě další editory. A všechny se chovaly tak, jak IE a Opera zobrazovaly a stejně jako FrontPage a spol. zobrazovaly. Testem prošel ještě editor 1st Page 2000, PSPad a TopStyle Pro 3.10.

CSS galerie

Když jsem včera odkazoval na stránku věnovanou stylování tabulek pomocí CSS, tak proč bych dnes v nakousnutém tématu nepokračoval? Znalci v seznamu asi nenajdou nic nového, ale jako stručný sumář pro zbytek čtenářů by tento spot mohl být užitečný.

A ještě na vysvětlenou. CSS galerie jsou stránky, na kterých jsou prezentovány ty nejlepší stránky vytvářené pomocí kaskádových stylů. Autoři většinou dodržují moderní postupy tvorby webu a také jejich výtvory je možné označit za moderní díla (bez urážky).

Známé CSS galerie

Galerie tabulek

Příkladů není nikdy dost a příklady táhnou. Tak tahle dvě ustálená slovní spojení mě napadla při procházení stránky CSS Table Gallery (via WaSP).

Princip podobných CSS galerií je prostý. Jedna standardní stránka, ke které se připojují různé CSS soubory měnící vzhled stránky k nepoznání. Nechejte se insipovat metamorfujícími tabulkami také.

Vývojáři a uživatelé

Právě teď ve firmě, kde pracuji, implementujeme nový informační systém. Přál bych Vám poslouchat ty debaty nad nepodstatnými náměty (přeloženo: připomínkujte si co chcete, bude to tak, jak to je, a basta) o uživatelském rozhraní nebo logických lapsech návrhu. Nedělám to často, ale uvedu rozsáhlejší citaci Petra Staníčka (Vogonská akvizice), protože něco podobného se snažím říkat taky:

…je vidět, že nikdo z velkých provozovatelů portálů apod. nezná skutečné BFU. Pro ty profíky, co ty weby připravují, jsou takoví lidé zcela nepředstavitelní. Kdyby své BFU znali, všechno – registrací počínaje, reklamami konče – by na těch portálech vypadalo úplně jinak.

Každý vývojář webů pro širokou veřejnost by si měl povinně projít čtrnáctidenní praxí, kdy by musel obcházet chaloupky na českém venkově a místní babičky a Pepiky učit používat nějaký český portál. A jestli by po těch 14 dnech neměl nutkavou potřebu udělat půlku věcí úplně jinak, měl by to rovnou zapíchnout.

To, co napsal Petr, platí pro vývojáře obecně. A nejen pro ně. Stačí si přečíst třeba nějaký zákon nebo ministerskou vyhlášku.

Čtou si vůbec v menu?

Tak mě napadlo, když jsem si četl komentáře pod spotem Co mělo býti řečeno u Vaška Štrupla, jestli vůbec návštěvníci webů přikládají valnou pozornost místům na stránce mimo hlavní oblast. Myslím tím různá menu, patičky, seznamy aktuálních odkazů a podobně. Návštěvníka přece zajímá hlavní obsah. Až potom, co se rozkouká, hledá dál. Pokud ale dřív neklikne na tlačítko zpět.

Ve zmíněném komentáři upozorňuje halogan na zajímavý blog Jana Brašny HereBeDragons a zvlášť na aktuální odkazy na spoty z jiných blogů. Vašek reaguje: Díky za tip, Honzův blog sleduji, ale těhle odkazů jsem si nevšiml. A já vlastně taky.