Web – nové staré médium?

6. ledna 2003

•

Stále si nedokážete představit tvoření webu bez tabulkových, na pixel přesných layoutů či bez pevné velikosti písma? Martin Snížek volně přeložil článek „A Dao of Web Design“, poprvé uveřejněný na slavném webdesignerském serveru A List Apart. Řekneme si, proč není na webu vhodné kontrolovat vzhled stránky za všech okolností, jak je to zvykem v DTP, a také se budeme věnovat několika praktickým postupům k tvorbě „lepšího webu“.

A Dao of Web Design

Po několik posledních let se můj život točil převážně okolo CSS (Kaskádových stylů). Zabývám se vývojem software pro práci s nimi a píši o nich tutoriály a články. Přes e-mail a různé diskusní skupiny jsem zodpověděl obrovské množství otázek, které se CSS týkají, prosazoval jsem je v iniciativě Webstandards Project. A pomalu jsem díky nim začal web chápat naprosto jinak než dříve.

Tímto jiným chápáním webu mám na mysli především vztah mezi tím, jaký web je a jaký by mohl být. Jedná se o vztah mezi již existujícím médiem, světem tisku, a jeho dítětem, webem. Je nepochybné, že web se již musí od této závislosti odpoutat a jít svou vlastní cestou.

Stejné staro-nové médium?

Analogii pro tisk a web můžeme najít u jiného relativně mladého média, televize. Ta byla ve svých počátcích považována doslova za „rádio s obrázky“ – většina televizního programu byla ve formátu, v jakém ho lidé byli zvyklí přijímat z rádia. S jistými programy z této éry se dodnes můžeme setkat, jedná se například o noční show, které jsou v různých obdobách k nalezení téměř ve všech televizních stanicích světa (obvykle zde narazíme na hudební skupinu, sedící hosty), nebo o zprávy, s dobře oblečenými, střídmými zpravodaji.

Pokud si nové médium bere určité zažité postupy a konvence z již existujícího média, některé z nich mívají význam, ale mnohé jsou pro něj naopak nevhodné a často i omezující. Za nějaký čas si nové médium vyvine své vlastní postupy a konvence a odhodí omezení, která nedávají smysl.

Nádherný příklad takovýchto omezujících konvencí najdete například v raných televizních filmech. Protože rádio vyžadovalo nezvykle podrobné popisování toho, co posluchači nemohli vidět, mohli jste podobnou popisnost nalézt také u těchto raných filmů, i když zde popisované věci mohl divák sám vidět. Jedná se o jednoduchý ale názorný příklad toho, co se stává, když se nové médium vyvine z nějakého již existujícího.

Web je nové médium, ačkoliv se vyvinul ze světa tisku, jehož postupy, způsoby návrhu i grafické konvence ho velmi silně ovlivňují. Stále ještě je až přespříliš formován tím, z čeho vyšel. Často se setkáváme s webovými stránkami, které se pokouší zkrotit web omezeními, jaká jsou běžná u stránek tištěných. Toto konzervativní chování je přirozené – člověk se těžko zbavuje myšlenek, které považuje za základní („closely held beliefs are not easily released“). Ale již nastal čas postoupit dál a pojmout web jako samostatné médium – odhodit konvence a rituály spojené s tištěnou stránkou a začít brát web jako médium se svými specifickými vlastnostmi.

To samozřejmě neznamená, že bychom najednou měli zahodit všechny znalosti nastřádané za mnoho let tisku a tisíce let psaní. Ale potřebujeme pochopit, jaké z těchto znalostí jsou vhodné pro web a jaké pouhé rituály nebo konvence.

Kontrolování stránek

Pokud jste členy nějakých diskusních fór o webdesignu, jistě si všímáte určitých obvyklých slov a myšlenek, které se čas od času opakují. Obvyklá otázka je samozřejmě „Jak udělám … ?“, ale hned za ní následují „Jak donutím mé stránky, aby vypadaly stejně ve všech prohlížečích, na všech platformách?“, „Jak definovat písmo, aby vypadalo stejně na Windows i Macintoshi?“ nebo „Jak mohu kontrolovat uživatelův prohlížeč?“ Slova „kontrola“ a „kontrolovat“ se objevují s až překvapující frekvencí.

Všeobecně se totiž má za to, že webdesigner = kontrolor/krotitel webu. Webdesigneři se snaží potlačit volby uživatelů ohledně toho, jak si přejí stránky vidět (např. nastavením pevné velikosti písma). Webdesigneři chtějí odhadovat plaformní rozdíly způsobené jiným rozlišením (např. Mac používá 72 ppi (pixels per inch, tedy pixelů na palec), zatímco Windows standardně předepsaných 96 ppi – z toho důvodu je na Macu 1 palec roven 72 pixelům a 1 typografický bod 1 pixelu (v moderní typografii se palec skládá ze 72 bodů), zatímco na Windows je 1 palec roven 96 pixelům a 1 typografický bod tím pádem přibližně 1.33 pixelu – z toho vyplývá, že písmo definované pomocí typografických bodů nebo palců je na Macu menší než na Windows). Webdesigneři si asi myslí, že jsou vševědoucí, a proto nebudou tolerovat nic jiného než na pixel přesné zobrazení – v každém prohlížeči, na každé platformě.

Teď samozřejmě nadsazuji, ale ne zase tolik. Velmi dobrým příkladem tohoto jevu je leckdy vyjadřované zklamání některých webdesignerů, když zjistí, že CSS nejsou DTP pro web. A pokud používáte Mac, potom si toho budete silně vědomi v momentě, kdy zjistíte, kolik známých webů zneužívá CSS, aby udělalo své stránky nečitelné. Je to zaviněno používáním pixelů nebo bodů k udávání velikosti písma a potažmo i domněnkou, že webdesigner = kontrolor.

Odkud tato domněnka pochází? Domnívám se, že ze světa tisku. Zde je designer bohem – toto médium plně funguje na principech WYSIWYG (What You See Is What You Get, tedy „co vidíš, to dostaneš“) a mnoho webdesignerů vyrostlo právě na rituálech tohoto média.

V čem je problém?

Možná je neschopnost „kontrolovat“ stránku omezením, chybou webu. Pokud přicházíme ze světa WYSIWYG, instinkt nám radí si to myslet. Připouštím, že to byla i moje první reakce a že jsem se jí dlouhý čas držel. Ale nyní ji již nepociťuji jako omezení, ale jako sílu nového média.

Podívejme se na to z druhé strany. Fakt, že můžeme přesně kontrolovat papírovou stránku je vlastně velkým omezením tohoto média. Můžeme to brát tak, že „je možné nastavit písmu pevnou velikost“ nebo tak, že „velikost textu se nedá změnit“. Tak, že „rozměry a míry stránky mohou být přesně kontrolovány“ nebo že „rozměry a míry stránky nemohou být změněny“. Jedná se prostě o fakta spojená s tímto médiem.

A tato fakta nemusí být nutně pozitivní, obzvláště pro čtenáře. Pokud se čtenář neřadí mezi lidi s nejlepším zrakem, je zde možnost, že designer zvolil příliš malé písmo, než aby ho tento člověk mohl pohodlně číst bez určitého zvětšení. Také pokud je čtenář v omezeném prostoru, např. ve vlaku do práce, v letadle, jsou pro něj noviny ve svém standardním formátu příliš velké. A čtenář má velmi málo možností s tím něco udělat.

Kontrola, kterou mají v rukou designéři u tištěného média, a po které často touží i webdesignéři, je jednoduše omezením tištěné stránky. Měli bychom být rádi, že web nemá stejná omezení, a dělat stránky, které této pružnosti webu využívají. Napřed ale musíme akceptovat, jak se věci v současnosti mají.

Možnost přizpůsobení = přístupnost

Pružností webu, o které jsem až do teď mluvil, jsem ve skutečnosti myslel jeho možnost přizpůsobení. Všechno, co jsem se vám až do teď snažil říct, by se dalo shrnout do jediné věty: „Dělejte stránky, které jsou přizpůsobivé“. Dělejte stránky, které jsou přístupné, bez ohledu na prohlížeč, platformu nebo obrazovku, které váš uživatel používá nebo je nucen používat k přistupování na vaše stránky. To znamená stránky, které jsou čitelné bez ohledu na rozlišení, velikost nebo barevnost obrazovky – a pamatujte také, že stránky mohou být tisknuty, čteny různými čtečkami obrazovky nebo pomocí braillovského prohlížeče. Dělejte stránky, které se přizpůsobí svému čtenáři, jehož zrak nemusí být z nejlepších a který proto potřebuje používat větší velikost písma než je obvyklé.

Pokud tvoříte přizpůsobivé stránky, tvoříte přístupné stránky. A snad právě přístupnost informací, bez ohledu na omezení, kterými je člověk spoután, je jedním z příslibů webu (i když jeho naplnění je dosud v nedohlednu). Přístupnost webu je jednou z priorit World Wide Web Konsorcia a stává se z ní také jedna z klíčových disciplín webdesignu, protože zákony budou po webech přístupnost požadovat (u webů v USA se státní účastí tato povinnost již dnes existuje, u nás se jí snad také dočkáme – pozn. překl.), stejně jako dnes zákony o stavebnictví vyžadují bezbariérový přístup k budovám.

Vytvořit univerzální stránku zní tak nemožně. V současné době to stále zůstává pouhou touhou, s prohlížeči plnými chyb a mnoha moderními zařízeními k přístupu na web, které jsou teprve v počátečním stádiu vývoje. I tak je zde ale mnoho věcí, kterými můžeme položit základy ke stránkám, které se přizpůsobují potřebám a přáním uživatele a jsou proto přístupné.

Možnosti

Tak co můžeme udělat, abychom navrhovali přízpůsobivé, a tím pádem přístupné, stránky? Především je zde několik způsobů myšlení, které vám mohou pomoci. A mám také několik praktických pouček, jejichž používáním se vyvarujete tvoření nepřístupného webu.

Za prvé, zamyslete se nad tím, co vaše stránky dělají, ne jak vypadají. Nechte vzhled vyplynout ze služeb, které budou vaše stránky poskytovat – ne z toho, jak si myslíte, že by vaše stránky měly vypadat. Forma musí vyplynout z funkce, ne opačně.

Základním kamenem této myšlenky je oddělení obsahu od vzhledu. Pravděpodobně jste to slyšeli už tisíckrát, ale je to asi nejdůležitější postup, který si musíte osvojit. Podívejme se na jednoduchý příklad. Představte si stránku s určitým úsekem textu vykresleném v kurzívě. Proč je tento text kurzívou? Může to být zvýraznění. Může to být citace. Může to být cizí slovo. Výhodou publikování na webu ale je, že můžeme oddělit funkci od vzhledu. Takže proč uzavírat text do , když se jedná například o zvýraznění? Jednoduše můžeme použít element , aby roli tohoto textu mohl vytušit i uživatel s prohlížečem, který kurzívu neumí.

Pokud to vezmeme obecně – nepoužívejte (X)HTML k definování vzhledu. Žádný , žádné  ani . Tam, kde (X)HTML nabízí příslušný sémantický či strukturální element, používejte ho. A kde takový element není, používejte třídy. A samozřejmě, používejte styly k definici vzhledu vašich informací. Je čas dívat se do budoucnosti, ne lpět na minulosti.

Pokud používáte styly správně, tedy k návrhu vzhledu stránky, ne k jeho kontrole, a vaše styly nemají za úkol přenášet nějakou informaci, potom budou vaše stránky použitelné v jakémkoliv prohlížeči – minulém nebo budoucím. Prohlížeče bez podpory stylů zobrazí stránky s jednoduchým vzhledem. V současnosti jsou naší největší starostí prohlížeče s chybnou podporou CSS. Jedná se ale pouze o dočasný problém. Prozatím se můžete omezit na určitou podmnožinu CSS, která je dostatečně podporována. Tomuto tématu jsem se již věnoval v jiných článcích, proto se tu nebudu opakovat.

V praxi je několik věcí, které byste měli dělat, a několik věcí, které byste dělat neměli, když navrhujete styly, které budou mít vliv na přizpůsobivost vašich stránek. Především, nikdy nenechte na stylech žádný aspekt stránky, který je důležitý pro její přístupnost. Absolutních jednotek, jako jsou pixely (specifikace CSS definuje pixely jako relativní jednotky, ovšem pokud je uvažujeme pouze v kontextu počítačové obrazovky, jedná se de facto o jednotky absolutní – pozn. překl.) a typografické body, byste se měli vyvarovat (pokud je to pro vás překvapení, pokračujte ve čtení); stejně tak barvy musejí být používány opatrně, a nikdy se na ně nesmíte spoléhat.

Fonty

Obvykle mají Windows, Macintosh a ostatní systémy nainstalovány jenom pár fontů. A ještě méně je fontů, které můžeme najít na většině systémů současně. Pomocí CSS můžete navrhnout libovolné množství fontů a pokrýt tak tolik platforem, kolik je potřeba. Ale nespoléhejte se na to, že font bude dostupný – bez ohledu na to, jak je běžný nebo rozšířený.

Ještě důležitější je velikost písma. Jak již víte, písmo s definovanou velikostí v typografických bodech vypadá na Macintoshi menší než ve Windows. Důsledky tohoto jevu jsou jasné. Především to znamená, že je takřka nemožné, aby text na vašich stránkách vypadal identicky na platformách Macintosh a Windows. Pokud ale pojmete za svou „filozofii přizpůsobivosti“, pak to nevadí.

Pokud vám jde o to, jak přesně stránka vypadá, je to znamení, že stále nepřemýšlíte o přizpůsobivých stránkách. Jedna z nejvýznamnějších otázek přístupnosti je velikost písma. Malé velikosti se obtížně čtou. Pro ty z nás, kdo máme zrak v pořádku, může být šokem, že poměrně velké procento populace má problém přečíst cokoliv menšího než 14-bodové písmo na papíře. K tomu ještě musíme přičíst, že text na obrazovce se čte obtížněji než na papíře (kvůli jejímu menšímu logickému rozlišení).

Znamená to snad, že minimální velikost písma, jakou bychom měli používat, je 14 pt? To ale nepomůže těm, jejichž zrak je na tom ještě hůř. Takže jakou minimální velikost bychom měli používat? Žádnou. Nepoužívejte typografické body ani jiné absolutní jednotky. Tím umožníte uživateli zvolit si velikost, která mu vyhovuje.

I bez absolutních jednotek můžete samozřejmě navrhnout větší velikosti písma pro nadpisy a další elementy. CSS nabízí mnoho možností, jak navrhnout velikost textu tak, aby byla podpořena přizpůsobivost. Na jednom z nich si budeme tuto myšlenku demonstrovat.

V CSS můžete specifikovat velikost písma jako procento z velikosti písma rodičovského elementu. Například nadpisy se nacházejí uvnitř elementu body. Pokud nenastavíte velikost písma pro tento element, potom bude použita velikost, kterou si uživatel ve svém prohlížeči sám nastavil. A už zlepšujeme přizpůsobivost stránky, aniž bychom cokoliv dělali!

Mohli byste říct „ale ten text přece vypadá příliš velký, pokud ho nechám jen tak“. Potom ho zmenšete. Ale ve svém prohlížeči. A vaši uživatelé potom budou mít také volbu udělat ho větší nebo menší ve svých prohlížečích – podle své chuti, podle svých potřeb.

Nadpisy a ostatní elementy můžeme zvýraznit pomocí velikosti písma tak, že specifikujeme, že nadpis první úrovně bude řekněme o 30 % větší než běžný text (text elementu body), nadpis druhé úrovně bude o 25 % větší, a tak dále. Nyní, bez ohledu na velikost písma, kterou si uživatel vybere pro běžný text, nadpisy budou vždy vykresleny větším písmem než tento text. Podobně může být text v určitých elementech nastaven jako menší než běžný text, avšak toto řešení může vyvolat situace, kdy je text nečitelný, takže byste ho měli používat opatrně.

Zatím jsme udělali velmi málo, pouze se vyvarovali absolutních velikostí písma, a už jsou naše stránky mnohem přizpůsobivější a přístupnější.

Layouty

Okraje, šířky a odsazení prvního řádku (zoubkování) jsou všechno aspekty stránky, které mnohou zlepšit čitelnost. Na webu se ovšem u těchto aspektů setkáme s některými obtížemi. Uživatel může měnit velikost okna prohlížeče, čímž mění i velikost stránky. Různá zařízení (Web TV, monitory s vysokým rozlišením, PDA) mají různé minimální a maximální velikosti okna. Stejně jako pevné velikosti písma, i pevný layout (vzhled) stránky může vést k problémům s přístupností.

Stejně jako u fontů, aspekty layoutu mohou být navrženy pomocí procent, aby bylo dosaženo přizpůsobivých stránek. Okraje mohou být specifikovány jako procentuální část šířky elementu, který ho obsahuje.

Používáním procent (či jiných relativních hodnot) ke specifikaci layoutu stránky v CSS automaticky tvoříte přizpůsobivé stránky. Jakkoliv se okno prohlížeče rozšiřuje a zužuje, layout každého elementu se přizpůsobí, aby udržoval stejné proporce, a tak se layout celé stránky přizpůsobuje.

Okraje, zoubkování a ostatní aspekty layoutu mohou také být nastaveny ve vztahu k velikosti textu, který element obsahuje, a to používáním jednotky em pro specifikování okrajů, zoubkování a ostatní aspekty layoutu. Pokud do CSS definice zahrnete pravidlo …

p {
margin-left: 1.5em;
}

… říkáte tím, že levý okraj odstavců by měl být 1.5 × velikost písma, které je v daném odstavci obsaženo. Takže až uživatel upraví velikost písma ve svém prohlížeči, aby se mu stránka lépe četla, okraj se adekvátně přizpůsobí (zmenší či zvětší).

Barvy

Web je daleko barevnějším médiem než tisk. Barva je na webu levnější. Barva může být ozdobná, může pomoct ke stanovení vizuální identity a může mít také praktický význam (např. červená může upoutat pozornost k důležitým informacím). Barva ale klade další překážky přístupnosti.

Věděli jste, že v mnoha zemích (pokud ne ve všech) lidé s červenou a zelenou slepotou nejsou schopni získat osvědčení pro pilotování letadla? Je tomu tak bez ohledu na jakoukoliv další způsobilost, protože varovné zprávy v letadle jsou téměř vždy zobrazovány pomocí červené pro nebezpečí a zelené pro bezpečí. Je to hanba, že výstražná světla nejsou jednoduše přizpůsobitelná.

Nevylučují vaše webové stránky uživatele podobně? Byla by to škoda, i když v blízké budoucnosti bude většina prohlížečů uživatelům poskytovat jednoduché možnosti k úpravě barev různých elementů webové stránky, a to pomocí uživatelských stylů, které mohou potlačit vaše styly. (Dnes tuto možnost nabízí již všechny hlavní prohlížeče – pozn. překl.)

Jak se vyvarovat těmto problémům? Používejte styly, raději než element . A nikdy nenechávejte přenášení informace pouze na barvě.

Cesta

Změna způsobu myšlení a jednání není jednoduchá. Pomalu jsem si ale uvědomil, že mnoho z toho, co jsem bral za nezlomnou pravdu, musím přehodnotit. Pokud soudím podle toho, co vidím a čtu, a rozhovorů, kterých jsem se účastnil, e-mailů, které jsem četl v posledních letech, mnoho lidí se drží těchto domněnek velmi pevně, a potřebují je také přehodnotit.

Nyní nastává čas pro nové médium webu, aby se definitivně vyčlenilo ze svých kořenů v tisku. Nemělo by opustit moudrost a zkušenosti tisku, ale vypravit se svou vlastní cestou tam, kde je to vhodné.

Největší síla webu, podle mého názoru, je často viděna jako omezení, jako nedostatek. Je to přirozeností webu, být přizpůsobivý, a měla by to být naše role jako návrhářů a vývojařů, abychom tuto přizpůsobivost přijali a adekvátním způsobem využívali – abychom vytvářeli stránky, které jsou díky své přizpůsobivosti přístupné všem.

Za svolení publikovat přeloženou a upravenou verzi článku „A Dao of Web Design“ děkuji jeho autorovi Johnu Allsoppovi. Jeho současným projektem je The House of Style (v angličtině) – web, kde naleznete spoustu informací, návodů a triků týkajících se CSS (kaskádových stylů).

Komentář překladatele

I přesto, že článek je již staršího data, rozhodl jsem se ho přeložit, protože si myslím, že se jedná o článek nadčasový. Navíc v době svého vydání významně ovlivnil i mé nahlížení na webdesign a myslím, že může být takto užitečný i pro ostatní lidi.

Co se týče myšlenek článku – těžko o nich může být pochyb, já ale přesto vidím malý zádrhel. Podle mého názoru musí nejdříve začít brát web jako nové médium samotní uživatelé. Ti především chápou web jako jakousi odnož světa tisku a nejsou si vědomi jeho výhod.

Pokud to vezmu konkrétně, například s tou v článku zmiňovanou velikostí písma – kolik uživatelů si je vědomo, že v prohlížeči mohou jeho standardní velikost nastavit? Jsem přesvědčen (hlavně díky vlastním zkušenostem), že velmi málo, a z tohoto mála to ještě jistě spoustu lidí nepoužívá, protože to někdy funguje (když není velikost písma absolutní) a někdy ne (nyní vycházím z možností majoritního Internet Exploreru pro Windows, ostatní moderní prohlížeče již umožňují manipulovat i s absolutní velikostí). Proto když takový uživatel přijde na stránku s relativně definovanou velikostí písma, a kvůli špatnému nastavení v prohlížeči nebude moct přečíst ani řádku, řekne si, že tvůrce stránky je nejspíš pěkný amatér, a dál se s ní nebude zabývat.

Možná teď budete argumentovat, že když uživatel neví, jak nastavit velikost písma, bude mít tedy nastavenou základní velikost, která je tam již od instalace prohlížeče. Bohužel, ne každý uživatel webu používá svůj prohlížeč – někdo surfuje v práci, někdo v internetové kavárně, v knihovně, ve škole… Proto může přijít již ke špatně nastavenému prohlížeči a těžko ho napadne, že to malé (nebo velké) písmo není vina autora stránky.

Vedle neznalých webdesignerů jsou tak dalším problémem webu neznalí uživatelé. Dá se říct, že jsme si tento stav zavinili zčásti sami svými na-pixel-přesnými layouty, jejichž podobu nemá uživatel šanci změnit. Proto musíme uživatele učit výhodám webu a oprostit se od přesného kontrolování stránky.

Informace o překladu

Původní článek: A Dao of Web Design (A List Apart, 7. 4. 2000)
Překlad: Snížek, Martin.
Odborná a jazyková spolupráce: Piper, Eric, Šalanda, Marek.
Přeloženo se svolením autora a magazínu A List Apart (další překlady).

About translation

Original article: A Dao of Web Design (A List Apart, 7. 4. 2000)
Translation: Snížek, Martin.
Language and expert collaboration: Piper, Eric, Šalanda, Marek.
Language of translation: Czech (for readers from Czech and Slovak republics)
Translated with the permission of A List Apart Magazine and the author (other translations).