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 <i>, kdy₧ se jednß nap°φklad o zv²razn∞nφ? JednoduÜe m∙₧eme pou₧φt element <em>, 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² <font>, ₧ßdnΘ <b> ani <i>. 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.

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Üφ.

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 ...

... °φ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Üφ).

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 <font>. 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.