Je tady nový A List Apart 189: Invasion of the Body Switchers. Podívejte se, jak pomocí JavaScriptu a CSS přepínat styly (mj. pro zlepšení přístupnosti a změnu vzhledu tiskového výstupu).

Na stránce TTW WYSIWYG Editors najdete rozsáhlý seznam WYSIWYG HTML editorů, které se spouští ve webovém prohlížeči (via Webapper Blog). Seznam komerčních i nekomerčních aplikací je doplněn základními charakteristikami každého projektu.

Vetsina pocitacu je dnes bezne vybavena mysi. To neni prekvapujici zjisteni. Prekvapujici zkusenost muze byt, pokud na pocitaci mys neni, nebo kdyz mys neni funkcni. Pohyb po mnoha webovych strankach se pak stava opravdovym mucenim. A to i pro zkuseneho uzivatele.

Na tomto miste bych chtel omluvit nepouzivani nabodenicek v tomto spotu. Stojim totiz na chodbe Slovenskej poľnohospodárskej univerzity v Nitre, kde ma zena prave sklada zkousku. Divili byste se, ale na slovenske klavesnici chyby nektere ceske znaky (ahoj Rony). A ja se zase divim, jak se vylepsil pristup k pocitacum od dob mych studii.

Abych dokoncil uvodni myslenku. Mnoho zkusenych uzivatelu internetu vi, ze se po odkazech na webove strance da pohybovat pomoci klavesy Tab respektive Shift+Tab (pohyb tak rikajic v protismeru). Vetsina uzivatelu to podle me ale urcite nevi. A ti jsou bez mysi browse-invalidni. Hodne uzivatelu taky treba pracuje na notebooku a ten je bez externi mysi taky dost spatne pouzitelny – ne kazdy je zvykly na ty ruzne simraci tabulky a ty male postevacky uprostred klavesnice.

Mnoho webovych stranek ale neni na bezmysi ovladani pripraveno. Temer zadna (kdyz tak me opravte) neni na ovladani z klavesnice testovana.

Nez se uzivatel bez mysi dostane na pozadovany odkaz trva to casto i nekolik desitek klepnuti na klavesu Tab. A to je dost otravne.

Hodne pomuze, kdyz je stranka optimalizovana, tak rikajic, mimochodem. Vhodnou strukturou kodu (tady pomaha pouziti beztabulkoveho CSS layoutu) nebo ocesanim stranky o zbytecny balast (nadbytecna nebo slozita navigace apod.).

A jedna poznamka na zaver. Vyzkousejte si pouziti vlastnich stranek s mysi v zasuvce. Mozna vas tato tortura primeje si priznat pravdu (treba o prebujele navigaci). Pekny pozdrav ze Slovenska.

Pohádka o zlaté rybce vypráví příběh o starém rybáři, který ulovil zlatou rybku. Za navrácení svobody postupně plnila zlatá rybka rybáři tři přání. Chamtivá rybářova žena použila první dvě přání tak špatně, že posledním přáním vrátila škodolibá zlatá rybka věci do původního stavu. Tolik pohádka o zlaté rybce.

Tvorba webu je někdy jako rybolov. Autor postupně tvoří stránky, na které chce ulovit návštěvníky. Jeho sítí jsou vyhledávače. Každá nová stránka zvětšuje velikost sítě. S každou stránkou přichází o něco víc návštěvníků (počet návštěvníků je daný taky počtem rybek v moři). Čas od času se podaří ulovit zlatou rybku.

Bingo!

Zlatá rybka je stránka, která po zveřejnění začne přivádět najednou velký počet návštěvníků. Poznáte to zčista jasna na návštěvnosti. Návštěvníci víc reagují a posílají více emailů. V nejlepším případě se návštěvníci změní v solventní zákazníky, věrné čtenáře nebo obdivovatele.

Zlatou rybku můžete chytnout nejen do sítě, ale někdy stačí prut, na který napíchnete vhodnou návnadu. Před pár dny byl používán červ rodu Esterus Ladus. Rybáři totiž často ví jakou návnadu použít. Ví co rybkám chutná, po čem doslova šílí. Někdy ale uvízne zlatá rybka v docela obyčejné síti. Prostě na web přidáváte novou stránku a najednou začnou chodit emaily na jediné téma. Na téma dané stránky. Čert ví, která stránka je ta pravá.

Nedělejte plastiky nosu

Autor by si měl uvědomit, že není dobré se zlatou rybkou příliš laškovat. Návštěvníci nejsou rádi, když je někdo tahá za nos. Chtějí získat takové informace, aby byli spokojení. Očekávají, že když pošlou email, tak rychle dostanou uspokojivou odpověď. A to si vyžaduje autorovu zodpovědnost.

Když napíšu stránku, na které slibuji holky a místo toho nabídnu vdolky, nemusím se setkat s uznáním. Zlatá rybka se mi může pomstít.

Čísla v nadpisu stručně charakterizují mou webdesignerskou cestu. Vztahují se k počtu sloupců layoutu stránek tak, jak jsem je preferoval. A myslím, že docela dobře vystihují i můj názor, že v jednoduchosti je síla. A platí to i pro tvorbu webových stránek.

Nejsem demagog

Samozřejmě že nejsem zaslepený demagog, který by teď chtěl začít hlásat, že pro všechny webové stránky stačí jeden sloupec. Layout je nejen věcí skutečných potřeb, ale v reálném světě především záležitost identifikace s dalšími podobně zaměřenými weby. Málokomu se totiž při návrhu webu podaří překročit vlastní stín (natož aby překročil evoluční stín ostatních webdesignérů).

Dovolím si ale tvrdit, že je možné každou stránku zjednodušit. Ořezat zbytečnosti, ubrat na grafice a tím bez zdůrazňování zdůraznit hlavní obsah.

Tři sloupce a více

Když jsem začínal s tvorbou stránek, tak jsem podvědomě toužil dostat na stránku co nejvíc informací. Chtěl jsem, aby každá informace byla vidět bez nutnosti rolovat stránkou dolů. Vědomí mi pak velelo, abych přidával další odkazy na byť jen okrajově související stránky. Logicky mi pak vyšla stránka se třemi sloupci (někdy i více). Taková klasika. Vlevo navigace, uprostřed obsah (nejlépe s několika obtékanými rámečky uvnitř) a vpravo pak další sloupec např. pro související odkazy. Výsledkem byl silný informační šum. Informační smog dusící uživatele.

Dva sloupce stačí

Když jsem připustil, že uživatel po příchodu na stránku (většinou přes vyhledávače) hledá obsah, který co nejvíc odpovídá zadanému dotazu (případně textu odkazu), tak mi bylo jasné, že ten obsah musí především vidět. Souvislosti (navigace, související odkazy apod.) jej začnou zajímat až potom, co rychle rozpozná cíl svého pátrání. Pak teprve na stránce zůstane. Pak si přečte její obsah a až potom bude hledat souvislosti.

Z tohoto poznání mi vyšlo, že jeden sloupec můžu klidně oželet. Jeho obsah můžu vhodně rozmístit po zbytku stránky (souvislosti z vlastního webu třeba do kontextového menu doleva, externí odkazy na konec hlavního obsahu nebo do textu stránky atd.).

Jedna a půl nebo i méně

Docela dobře je často možné ušetřit místo na stránce i nervy uživatelů zmenšením plochy kontextové navigace. Místo sloupce s několika málo položkami poslouží obtékaný navigační box. Pokud je dostatečně odlišený od okolního textu (nejen barvou, ale třeba i orámováním a vhodným okrajem), ušetří se místo, které by jinak zůstalo pod kontextovou navigací prázdné.

Z toho všeho mi vychází jednosloupcová stránka s globální navigací nahoře, s obsahem přes celou šířku jediného sloupce. Stránka s obtékanou kontextovou navigací a se souvisejícími odkazy v textu stránky nebo (a) na konci obsahu. Dole je místo pro servisní odkazy (kontakt na autora, copyright, mapa webu, prohlášení o přístupnosti apod.).

Není typických uživatelů

Tohle všechno co jsem psal, nikomu nenutím. Jenom se svěřuji. Každý na to může mít svůj názor. Lidé nejsou stejní. A neexistuje žádný typický uživatel. Neexistuje žádný pan Průměrný, žádná slečna Běžná nebo paní Obyčejná. Hodně lidí má ale jedno společné. Jsou líní. Nechtějí hledat jehly v kupkách sena.

Čím víc se ale internet dostává mezi lidi, tak tím se víc snižuje zastoupení mladých lidí, kteří jsou schopní vstřebat informační šoky linoucí se z prohlížečů. Zjednodušme jim život.

Víťa Dlouhý včera zveřejnil odkaz na (jak sám píše volný) překlad článku Webové standardy – více než jen beztabulkový web (autor Russ Weakley). Spolu s ním se na překladu podíleli Lukáš Mačí a David Špinar.

Článek je důležitý pro všechny, kteří chtějí mít svůj web co nejvíce odpovídající standardům. Anglický originál Web standards – more than just \’table-free sites\‘ přece jen byl pro mnohé domácí autory těžce stravitelný. Proto je namístě poděkovat autorům českého překladu.

Stačí být pár hodin unplugged (Invex 2004) a už se něco semele. Jiří Kosek napsal pro Interval kontroverzní úvahu Proč nepoužívám XHTML.

Takovou komentářovou smršť (někdo říká sociologickou studii) na Intervalu hned tak neuvidíte. Není se čemu divit. Když někdo jako J. Kosek napíše, že používá HTML místo XHTML, tak to spoustu lidí nadzvedne – v této souvislosti mě napadá rčení poturčenec horší Turka.

Nechci rozebírat svou stranickou příslušnost (tzn. jestli s článkem souhlasím nebo jsem proti). Jenom chci poukázat na jednu věc. Když se podíváte na biblické desatero, nebo když si přeříkáte pár přísloví, tak vždycky na nich (co by znalci dané problematiky) najdete nějaké výjimky. Detaily, které tyto obecné pravdy popírají. Myslím si, že vznikaly tak, aby měl prostý člověk (kterých je většina) snadné vodítko a nemusel nad každou situací hodiny dumat. Lepší bylo šestinedělce říct, že nemá chodit dojit krávy, než ji složitě vysvětlovat, co by všechno musela udělat, aby neublížila krávě nebo sobě.

V každém oboru lidské činnosti jsou lidé, kteří nové věci zavádí a lidé, kteří je praktikují. Praktik většinou nemá čas se věnovat vymýšlení. Je pro něj výhodnější ověřené postupy užívat (tím neříkám, že jsou jedni lepší a druzí horší).

V článku J. Koska vidím jedno nebezpečí. V běžných lidech vyvolá pocit, že HTML je to jediné správné a XHTML je na nic. A to kvůli nynějším okrajovým nedostatkům v implementaci XHTML, které jde řešit mj. za cenu ustoupení od normativního purismu. Takový pocit totiž běžný čtenář, neznalý všech detailů získá. Jak běžnému zmatenému tvůrci vkládá do úst Petr Staníček:

Kosek taky říká, že to XHTML je blbost a sám taky používá HTML a tabulkovej layout, na tom něco bude, že jo mámo…

Je vhodné správně používat platné normy. Která norma je ale v dané situaci nejvýhodnější? Možná bych se taky zamyslel, jestli je lepší udělat krok stranou nebo krok zpět.

Souvislosti

Souvislosti dnes převážně ve stylu XHTML x HTML, kde x ∈ {a, místo, nebo, v}.

• Proč nepoužívám výtah – Petr Staníček
• XHTML a HTML – Dušan Janovský
• Bohové jsou šílení: Jiří Kosek nerad XHTML – David Grudl
• Jiří Kosek popraven revolučním XHTML výborem – Marek Prokop
• Jirka Kosek o XHTML – Jan Bien
• Xmeni versus hatmatílci – Robert Madaj
• HTML nebo XHTML, toť otázka – Miloslav Lešetický
• Hlavně pište čitelně – Tomáš Hodboď
• XHTML místo HTML – Petr Weida
• XHTML v HTML – Jan Řezáč
• Webdesignerské mozky divo bijú – Honza Hučín

PS

Poradíte mi, kde na W3C najdu kompletní specifikaci XHTML 1.0 (ne ten spíš rozdílový dokument XHTML 1.0 The Extensible HyperText Markup Language)?

Ke komentáři Pavla Kouta u Pixyho spotu Můj první příspěvek do Zenové zahrádky bych měl malý přípodotek.

Každý kdo vytváří webové stránky by měl vědět, že prakticky nemůže ovlivnit, na jakém zařízení bude stránka prohlížena. Veškeré texty stylu optimalizováno pro IE 6 a rozlišení 1600 × 1200 jsou k ničemu. Pavel Kout správně připomíná, že Windows XP mají širší posuvníky než starší Windows. A já dodávám, že uživatel může mít třeba nastavený jiný motiv (schéma) a nebo si může nastavit svou vlastní velikost posuvníku. Spoléhat se na to, že něco je obvyklé se nemusí obejít bez následků.

Protože předpokládám, že čtenáři tohoto blogu ví, že stránky se navrhují tak, aby byly bez (zásadních) problémů čitelné v libovolném prohlížeči webových stránek, tak se omlouvám za nošení sov do Atén a dříví do lesa.