Uniformita je přežitek

Mnozí lidé si webovou stránku pletou s vytištěným plakátem a domnívají se, že má vypadat za všech okolností stejně. Jenže webová stránka je prostě interpretovaný kód a záleží na vlastnostech a schopnostech interpreta, jak se s ním vypořádá. Tento aspekt trápí spoustu webdesignérů. A možná zbytečně. Kdyby mu vyšli vstříc …

Jak známo, k webovému obsahu získává přístup stále víc zařízení nejrozmanitějšího charakteru. Vzhledem ke své povaze mají různá zařízení svá omezení přímo či nepřímo vyplývající z podstaty svého účelu. Ba dokonce i zařízení stejného typu mohou vykazovat zásadní odlišnosti v závislosti na dispozicích svých hardwarových komponent nebo softwaru, důsledkem čehož se idea uniformity (jednotný obsah, jednotný vzhled – však jsme si s webem dali práci, jak bychom k tomu přišli, kdyby si jej každý prohlížel, jak chce) proměňuje v pouhou chiméru. Nastal čas uvažovat o změně přístupu. Místo hacků, skriptů a obskurních triků přizpůsobivá řešení, která respektují a zohledňují možnosti interpretů a nároky uživatelů. Místo rigidity flexibilita, pružnost a různorodost. Pojďme si představit techniky a postupy, které to všechno umožní.

Diverzifikace (různění) obsahu

Text vs. grafika

Všechna zařízení se bez potíží vypořádají s textem. Informace na webových stránkách však jsou prezentovány také grafickou nebo audiovizuální formou. Bohužel řada zařízení není schopna takovéto informace zpracovat. Co s tím? Řešením je nabízet textovou alternativu. Tu zužitkují např. textové prohlížeče, hlasové syntetizátory, indexovací roboti a za určitých okolností i vizuální interpreti.

Alternativní text se k obrázkům přiřazuje atributem alt.

<img src="kyklop.png" alt="Kyklop – jednooký obr" />

Pro video, flash a další externí data se dá použít prvek object. Alternativní text se v něm umísťuje mezi počáteční a koncový tag.

Optimalizace pro tisk

Pokud budeme optimalizovat pro tisk, bylo by moudré pamatovat na zásadu, že méně je někdy více. Mnohé HTML prvky jsou založeny na interakci s uživatelem, typicky třeba webové formuláře nebo odkazy. Kdo ví, jestli se v blízké budoucnosti neobjeví nějaké inteligentní papíry, nicméně v současnosti vytištěné dokumenty možnost interakce nenabízejí, a proto je tištění bloků odkazů, webových formulářů a podobných věcí kontraproduktivní. Kontraproduktivní v tom smyslu, že uživatel zbytečně plýtvá barvami a papírem.

Pokud jde o odkazy v textu, tak by bylo užitečné připojit k těm opravdu důležitým webovou adresu, aby bylo i z vytištěné stránky možné zjistit, kde najít další informace nebo z jakých zdrojů se čerpalo.

Nejlepší asi bude vše názorně předvést na ukázce kódu:

@media print {
/* bloky odkazů a formuláře pryč */
.navig, form {display: none}
/* nezvýrazňovat odkazy v textu */
#content a {text-decoration: none; color: inherit}
/* přidat za odkaz adresu */
#content a[href=“http://w3.org“]:after {content: “ (http://w3.org)“}
}

CSS rovněž umožňují řídit zalomení stránky, což se výborně hodí, když chceme zajistit např. to, aby nějaký nadpis nebyl vytištěný na jedné stránce a text pod ním nepokračoval na druhé, nebo aby se tabulka vytiskla vcelku a ne rozpůlená mezi dvě stránky.

Možná nejlepším způsobem optimalizace pro tisk je dělat zvláštní „tiskové“ stránky, které by byly speciálně uzpůsobené pro tisk. Uživatele by na ně navedl odkaz s textem „verze pro tisk“ s ikonkou tiskárny.

Nejelegantnějším způsobem je řešit optimalizaci pro tisk pomocí selektoru média, jak bylo naznačeno v předchozí ukázce CSS kódu, má to však tři zásadní nevýhody:

• je zapotřebí kvalitní podpora CSS v prohlížečích, bez té lze některé věci udělat jen velmi obtížně
• uživatel předpokládá, že se mu stránka vytiskne tak, jak ji vidí na monitoru – s postranními boxy, reklamou apod. – a tak si obsah článku raději ručně zkopíruje do textového editoru a z něho pak vytiskne
• CSS 2.1 neumožňují ideální optimalizaci pro tisk, teprve CSS 3 dovolují taková kouzla jako třeba oříznutí obrázku od nadbytečných grafických efektů (např. stínu), jeho přetočení o 90 ° (když se nevleze na šířku), vyjmutí z toku dokumentu a vytištění na samostatné stránce. Jenže CSS 3 tu budou kdy?

Střední a tak trochu kombinační cestou mezi oběma popsanými způsoby je využití alternativních stylů. Kliknutím na odkaz „verze pro tisk“ uživatel přepne stránku do „tiskové“ podoby.

Pružná šířka

Zobrazovací zařízení mají různá rozlišení, což webdesignéry staví před zapeklitý problém, pro jaké rozlišení mají sakra weby optimalizovat. S výškou stránky většinou potíže nejsou, zato nevyhovující šířka stránky představuje docela výraznou komplikaci. Při malé šířce se musí obsah pěchovat do úzkých sloupců (když se nastaví malé písmo, tak už sloupce opticky nevypadají úzké) a na velkém monitoru stránka vypadá jako dlouhá úzká nudle. Když je šířka stránky pro změnu příliš velká, větší než zobrazovací prostor, je uživatel nucený k horizontálnímu scrollování, které jistě není úplně user friendly. Zároveň při tisku dojde k tomu, že se webová stránka trochu zmenší, aby se vlezla na šířku papíru, což může způsobit mírnou deformaci obrázků na stránce. Východisko zdánlivě nabízejí Media Queries, jejichž prostřednictvím můžeme v závislosti na šířce výstupního zařízení nebo okna prohlížeče použít adekvátní nastavení šířky stránky, eventuálně jiný layout.

#l_column {float: left}
#r_column {float: right}
@media all and (width < 600px) {
#l_column, #r_column {float: none}
#page {width: 100%; padding: 0; border: 0}
…
}
@media all and (width > 599px) {
#r_column {float: left}
#page {width: 99%}
…
}
@media all and (width > 770px) {
#page {width: 760px}
…
}
@media all and (width > 1000px) {
#page {width: 950px}
…
}

Takové řešení má však k dokonalosti hodně daleko. Jednak podpora Media Queries je poměrně sporadická a nelze na ni spoléhat a jednak je toto řešení poněkud složité a ne zcela efektivní. Daleko lepší je uplatnit princip elastických rozměrů – to znamená nedimenzovat pevně stanovenými mírami, nýbrž tak, aby se stránka vždy pružně přizpůsobila preferencím uživatele: jím zvolené velikosti písma a velikosti okna prohlížeče. Takové weby nemají problém se zobrazením téměř v žádném zařízení, nekladou uživateli překážky, je jen potřeba ošetřit případy extrémně malé nebo velké disponibilní šířky. To se provede nastavením maximální a minimální šířky. Takhle:

#page {min-width: 500px; max-width: 70em}

Tím se zabrání vzniku nestvůrně dlouhých řádků, a zároveň také případnému zhroucení layoutu, jenž by hrozil kvůli malé šířce.

Pozn.: Pokud je shodou okolností zadaná minimální šířka reálně větší než zadaná maximální šířka, dostane přednost minimální šířka.

Poněvadž IE 6, který používá nezanedbatelná část uživatelů, min-width ani max-width nezná (analogické je to s min/max-height), je zapotřebí deklarovat také width.

#page {min-width: 500px; width: 760px; max-width: 70em}
body>#page {width: auto} /* nebude platit pro IE6, protože nezná selektor následníka */

Proměnlivý vzhled

Konkurence na trhu s webovými prohlížeči je značná a to nutí jejich vývojáře, aby stále přicházeli s novými verzemi. Zběsilým vývojem procházejí především renderovací jádra. Rychlý, nepřetržitý pokrok je na první pohled něco nesporně pozitivního a žádoucího, přináší však i nevítaný jev zvaný inkompatibilita. Ta pramení jednak z toho, že vývoj neprobíhá u každého prohlížeče stejně rychle (momentálně má největší ztrátu IE kvůli SVG, XHTML, CSS…), a jednak z toho, že nelze donutit uživatele, aby každého půl roku povinně upgradovali své prohlížeče, takže zde existuje poměrně velký segment starších prohlížečů. Výsledkem je to, že některých nových technologií, technik, funkcí, vlastností, kterých bychom rádi využili, se musíme s ohledem na zpětnou kompatibilitu a interoperabilitu prozatím vzdát.

Opravdu musíme? Samozřejmě, byl by špatným webmasterem ten, který by se dokázal smířit s tím, že významné části uživatelů něco nebude fungovat, nicméně pokud jde o vzhled, daly by se některé efekty a estetické libůstky v některých, povětšinou starších prohlížečích oželet. Zvlášť když odměnou je kratší a přehlednější kód.

Když nějaký prohlížeč nepodporuje např. border-radius nebo stahovatelné fonty, není přece nezbytné jej kvůli oblým rohům a elegantnějšímu písmu znásilňovat. Jistě postačí i klasické rohy a implicitní font. Nutno poctivě přiznat, že výhody takového postupu jsou čistě subjektivního rázu:

• není potřeba řešit nedostatky různých prohlížečů -> méně rozčilování
• kratší kód -> méně práce
• pocit progresivity a koncepčnosti -> větší uspokojení z díla

Neosobní zhodnocení však vypadá takto:

• zadavatel chce, aby web vypadal co nejlíp ve všech prohlížečích
• diametrální odlišnosti by nepřijali ani uživatelé
• existují frameworky, s nimiž lze řadu věcí (např. kulaté rohy) rychle a účinně udělat

Z toho všeho ale nevyplývá, že bychom měli předložený postup rázně zavrhnout, jde jen o to, najít rozumnou míru jeho uplatnění!

Slovo autora

Bystří čtenáři jistě postřehli, s jakým subjektivním zaujetím jsem neuniformní principy a postupy popisoval. Skutečně se domnívám, že se vyplatí investovat tvůrčí energii do multiplatformity a přizpůsobivosti místo do ladění uniformity designu. Rozhodně si však nemyslím, že existuje jediný univerzálně správný webdesignérský názor na to, jak mají být webové stránky koncipovány a utvářeny, a že by to byl zrovna ten můj. Existuje spousta pojetí webdesignu, jimiž se lze inspirovat a z nichž se dá čerpat. Přál bych si, kdyby i mé pojetí alespoň zaujalo.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.