Základní průvodce

• Překlad druhého vydání amerického bestselleru Web Style Guide – prodáno přes 100 000 výtisků!

• Základní principy návrhu pro tvorbu webových stránek.

• Design uživatelského rozhraní.

• Základy typografie a její uplatnění při návrhu webových stránek.

• Příprava grafiky a multimédií pro web.

• Postupy od návrhu webu až po grafické ztvárnění stránek.

• Množství barevných ukázek a praktických postupů.

Zákl

adní

prů

vodc

eW

EBDE

SIG

NEM

Lync

hH

orto

nová

E N C Y K L O P E D I E W E B D E S I G N E R A

Patrick J. Lynch, Sarah Hortonová

ENCYKLOPEDIE WEBDESIGNERA

Patrick J. Lynch, Sarah Hortonová

Základní průvodceWEBDESIGNEM

Zoner Press tel.: 543 257 244 fax: 543 257 245e-mail: knihy@zonerpress.czhttp://www.zonerpress.cz

ZONER software, s.r.o., Koželužská 7, 602 00 Brno

Tato plnobarevná kniha, která je nepostradatelným zdrojem infor-mací pro všechny webové designery, přináší množství praktických, zhuštěných a přitom výstižných a přesných rad a doporučení, které jsou nezbytné pro tvorbu dobře vypadajíích a současně efektivně použitelných webových stránek. Kniha se mimo jiné zaměřuje také na principy grafického designu a tvorbu návrhu uživatelského roz-hraní.

Kniha má své kořeny v hodně navštěvovaném a vysoce hodnoce-ném webu o designu stránek vytvořeném v rámci Centra pro po-kročilá vzdělávací média na universitě v Yale.

Kniha Základní průvodce webdesignem (původní anglický název je Web Style Guide – Basic Design Principles for Creating Web Sites) je v USA natolik populární, že se záhy dočkala svého druhého vydá-ní (jeho překlad právě držíte v ruce), přičemž bylo prodáno již více než 100 tisíc výtisků knihy. Pro informace o anglickém vydání knihy nebo získání dalších podkladů navštivte i původní anglické stránky www.webstyleguide.com.

Z obsahu• Postup návrhu stránek

• Design uživatelského rozhraní

• Design webu

• Design stránky

• Typografie na webu

• Textové styly

• Webová grafika

• Multimédia

E N C Y K L O P E D I E W E B D E S I G N E R A

Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje web-designér při každodenní práci. Na slevy, které můžete získat, a vy-davatelský plán, v němž vedle knih domácích odborníků najdete celou řadu titulů světově uznávaných autorů, se informujte na ad-rese vydavatelství. Věrným čtenářům je určen výhodný PRÉMIOVÝ PRÉMIOVÝ PLUSPLUS PROGRAM PROGRAM.

www.zonerpress.cz

CYAN MAGENTA YELOW BLACK CYAN MAGENTA YELOW BLACK

CYAN MAGENTA YELOW BLACKCYAN MAGENTA YELOW BLACK

WEBDESIGNEM

YALE UNIVERSITY PRESS

ZONER software, s.r.o. významný producent software v oblasti digitální fotografie,

počítačové grafiky a multimédií, poskytovatel internetových

služeb, souvisejících s prezentací na internetu a e-komercí,

a nakladatelství odborné literatury.

www.zoner.cz© Foto: Jiří Heller, www.heller.cz

Fotografie z nabídky fotobanky HELLER.CZ

9 7 8 8 0 8 6 8 1 5 0 5 3

ISBN 80-86815-05-6KATALOGOVÉ ČÍSLO: ZR406

© Foto: Jiří Heller

obal_webstzle_4.indd 1obal_webstzle_4.indd 1 1.6.2004 10:52:131.6.2004 10:52:13

Základní průvodcewebdesignem

(druhé anglické vydání,v českém jazyce vydání první)

Základní průvodcewebdesignem

Obecné principy tvorby webových stránek

Patrik J. LynchYale University for Advanced Instructional Media

Sarah HortonDarmouth College

Yale University PressNew Haven and London

Authorized translation from the English language edition, entitled WEB STYLE GUIDE: basic design principles for creating web sites, Second Edition, ISBN 0-300-08898-1 by LYNCH, Patrick J., HORTON, Sarah, published by YALE UNIVERSITY PRESS, Copyright © 2001 by Yale University, Yale University for Advanced Instructional Media.

All rights reserved. This book may not be reproduced in whole or in part, including illustrations, in any form (beyond that copying permited by Section 107 and 108 of the U.S. Copyright Law and except by reviewers for the public press), without written permission from the publishers. CZECH language edition published by ZONER software s.r.o., Copyright © 2004 ZONER software s.r.o.

Autorizovaný překlad anglického vydání nazvaného WEB STYLE GUIDE: basic design principles for creating web sites, Second Edition, ISBN 0-300-08898-1, autor LYNCH, Patrick J., HORTON, Sarah, vydal YALE UNIVERSITY PRESS, Copyright © 2001 Yale University, Yale University for Advanced Instructional Media.

Všechna práva vyhrazena. Tato kniha nesmí být reprodukována ani celá ani její část, včetně ilustrací, žádným způsobem (mimo svolení ke kopírování dle sekce 107 a 108 US Copyright Law a s výjimkou pro recenze v tisku) bez písemného svolení vydavatele. České vydání vydal ZONER software s.r.o., Copyright © 2004.

Základní průvodce webdesignemAutor: Patrick J. Lynch, Sarah Horton

Copyright © ZONER software s.r.o. Vydání první v roce 2004. Všechna práva vyhrazena.

KATALOGOVÉ ČÍSLO: ZR406

Zoner PressZONER software s.r.o.Koželužská 7, 602 00 Brno

Překlad: Jan Gregor, Tomáš ZnamenáčekOdpovědný redaktor: Miroslav Kučera

© Foto: Jiří Heller, HELLER.CZ s.r.o., www.heller.cz© Cover: Ing. Pavel KristiánDTP: Petr Autrata

Informace, které jsou v této knize zveřejněny, mohou být chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb.

Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na:

Zoner PressZONER software s.r.o.Koželužská 7, 602 00 Brno

tel.: 532 190 883, fax: 543 257 245e-mail: knihy@zoner.czhttp://www.zonerpress.cz

ISBN 80-86815-05-6

For Cheryl and Devorah— PL

For my son (sun), Nico— SH

Obsah

Předmluva ix

Předmluva ke druhému vydání xi

Předmluva k prvnímu vydání xiii

1 Proces 1

2 Návrh uživatelského rozhraní 17

3 Návrh webu 37

4 Design stránky 81

5 Typografie 117

6 Psaní pro web 145

7 Webová grafika 155

8 Multimédia 191

Rejstřík 209

Pramen 219

ixPředlmluva

Předmluva

Už jste někdy slyšeli o WWW? Pokud ano, váš názor na toto nové vzrušující médium se za posledních pár let určitě trochu změnil. Obvykle to probíhá zhruba takto:

1. Co je vlastně zač, tenhle web?2. Je to jen bouře ve sklenici vody.3. Ne, vlastně je to docela zajímavé.4. Možná bychom na tom mohli vydělat.5. Web je základem Nové ekonomiky.6. Nová ekonomika je jen bouře ve sklenici vody.7. Co je vlastně zač, tenhle web?

Když se věci mění příliš rychle, lidé těžko drží krok a někdy je pro ně nesnadné mít byť jenom nejasnou představu o tom, co se děje. Na WWW mění lidé názor tak často právě proto, že mu jen málokdo dostatečně rozu-mí. Ve skutečnosti, většina z nás se ani nenamáhala zamyslet nad tím, jak by mohla být prezentace na WWW skutečně užitečná; jak moc potřebujeme nějaká rozumná pravidla pro jejich návrh.

Svíráni divokou úzkostí jsme se vrhli na zástupy „expertů“, kteří nás drželi v šachu svým „jedinečným pohledem do samého jádra věci“. Pomocí nesro-zumitelných výrazů a velmi tvořivých obchodních postupů nás udrželi tam, kde nás chtěli mít: na samém začátku.

Pokud se vrátíme zpátky k tabuli a ještě jednou důkladně rozvážíme, co vlastně od WWW chceme, jasně se ukáže, co vlastně teď potřebujeme nej-více: pochopit principy a dostat pár základních rad, zorientovat se – začít v klidu myslet za sebe a na své uživatele.

K tomu je určena právě tato krásná kniha. Patrick Lynch a Sára Horto-nová vás nevyděsí klubkem odborných výrazů. Můžete zpomalit, v klidu se nadechnout a začít přemýšlet vlastní hlavou. Naučí vás jak základní principy návrhu, tak i různé profesní triky; dozvíte se o všem od návrhu rozhraní až po typografii. Budete tak moci navrhnout vlastní WWW prezentaci, nebo si budete moci lépe promluvit s lidmi, kteří pro vás tuhle práci dělají. Tím nejdůležitějším ovšem bude solidní základ, na kterém už budete moci postavit svou – tentokrát již trvalejší – představu o WWW. I když třeba nebudete souhlasit se všemi jejich radami, rozhodně získáte startovní bod, ze kterého můžete začít rozvíjet své vlastní nápady a postupy.

Pokud jste na webu noví, tohle je kniha pro vás. Podává široký přehled o velmi složité věci, kterou WWW bezesporu je, a nasměruje vás tím správ-

x

ným směrem. Pokud ji přečtete, výborně zapadnete do libovolného týmu, který má na starosti WWW.

A jestli jste zjizvený a unavený webový vlk, který se znovu chystá do boje, tohle je také kniha pro vás. Pomůže vám dát si dohromady znalosti získané za těch pár uběhlých let a srovná váš pohled do realističtější perspektivy. Pokud ji přečtete, také výborně zapadnete do libovolného týmu, který má na starosti WWW.

Do toho!—Louis Rosenfeld

Předmluva

xiPředlmluva

Předmluva ke druhému vydání

Jak už to tak s převratnými inovacemi bývá, web prošel řadou extrémů. Na začátku byly jeho podstatou informace, grafický návrh byl řídkou výjimkou. WWW stránky byly nahrubo splácány dohromady a celá webová prezentace nebyla nic víc než shlukem vzájemně propojených dokumentů bez silnější struktury a smyslu. Pak se slova ujali návrháři a vytvořili stránky přitažlivé, výstřední a přímo ohromující. Z webu se stal pohledný pán, ovšem příliš mnoho uživatelů narazilo na zeď poskládanou z objemných obrázků, složitých rozvržení a nestandardního kódu. Každá prezentace byla jiná a každá po uži-vatelích vyžadovala, aby se poddali jejímu podání WWW – skutečný designér se přece nenechá svazovat standardy nebo konvencemi. HTML se tedy vzdalo nátlaku návrhářů, přičemž se vyrojila celá řada triků, záplat a fíglů, které taková tvorba na hranici možností nutně vyžadovala.

Dnes se návrh webových stránek považuje více za řemeslo než za umění, převažuje funkčnost a nad grafikou kraluje obsah. Neotřelé a nestandardní ovládání webové stránky je dnes chápáno spíš jako překážka mezi uživatelem a tím, co chce. Objemné obrázky pro potěchu oka jsou jednoduše považovány za plýtvání kapacitou připojení. Je to stejné jako s architekturou šedesátých let: hodně návrhů, které ještě včera oslňovaly, jsou dnes něčím téměř grotesk-ním. Dnešní webdesignéři jsou zároveň informačními architekty a odborníky na použitelnost; úspěšná WWW stránka je definována jako stránka, která co nejméně vzdoruje svým uživatelům. Místo toho, aby se každá stránka snažila najít něco nového a netradičního, snaží se všechny vypadat pokud možno podobně a používat ta samá přirovnání a konvence. Z webu se stala věc každodenního použití, jejíž návrh by neměl uživatele nutit do zbytečného přemýšlení.

Vodítko, které poskytuje tato kniha, bylo vždy založeno na funkčním pří-stupu k návrhu. V druhém vydání se tento důraz ještě zvyšuje přidáním kapitol o přístupnosti webových stránek, kaskádových stylech a návrhu fle-xibilních stránek. Přibyly odstavce o informacích a zacházení s nimi, o údrž-bě webových stránek a o práci s multimédii. Dále přibyly některé ilustrace a pochopitelně byla aktualizována webová stránka o této knize, aby odrážela současné nejlepší postupy.

K těm, kteří přispěli k prvnímu vydání, a kterým děkujeme na konci před-mluvy k prvnímu vydání, přibyli další, kterým bychom rádi poděkovali: Jean Thomson Black, Laura Jones Dooley, Joyce Ippolito, Maureen Noonan, Nancy Ovedovitz, Deborah Patton a Amy Steffen z nakladatelství univerzity v Yale – za množství kvalitní práce odvedené na tomto druhém vydání. Zvláště děkujeme Lou Rosenfeldovi za tak výstižnou a živou předmluvu.

xii

K těmto společným díkům bych rád přidal své přátele a spolupracovníky z Yaleského Centra pro pokročilá vzdělávací média a tým, který se staral o vývoj webové prezentace Lékařské fakulty; jmenovitě to jsou: Carl Jaffe, Phillip Simon, Sean Jackson, Kimberly Pasko, Jim Soha, Janet Miller, Vic-tor Velt, Crystal Gooding, Michael Flynt, Kathryn Latimer, Venkat Reddy a Russel Shaddox. Člověk, kterému bych chtěl poděkovat zvlášť, je Carl Jaffe: děkuji za patnáct let přátelství, za dobré rady a praktické informace, z nichž velká část se objevuje na stránkách této knihy. Rád bych také poděkoval spo-luautorce této knihy a mé drahé přítelkyni, Sáře Hortonové, za její přátelství, za její spolupráci a za to, že mě přesvědčila o tom, jak dobrý nápad je převést naši stránku o návrhu WWW stránek do knižní formy.

Za rady, komentáře a podporu při vzniku této knihy a doprovodné WWW stránky bych velmi rád poděkoval následujícím lidem: Anne Altemus, Am-mett Barkley, Richard Beebe, David Bolinsky, Stephen Cohen, Frank Gallo, Scott Hines, Peter Kindlmann, Howard Newstadt, John Paton, Noble Proctor, Stacy Ruwe, Virginia Simon, William Stewart, Lynna Stone-Infeld, Jan Tay-lor, Frans Wackers a Cheryl Warfield.

—PL

Děkuji svým drahým spolupracovníkům ze Střediska pro výpočetní techniku na univerzitě v Darmouth: Jeffrey Bohrer, Malcolm Brown, Barbara Knauff, Mark O’Neil, Susan Simon. Též děkuji Darmouthské univerzitě, jejíž stránky používáme jako příklad: Joan Campbell, Sheila Culbert, Eva Fodor, Karen Gocsik, Sally Hair, Julie Kalish, Allen Koop, Thomas Luxon a Gerard Ruso. Jsem velmi zavázána Andrewovi Kirkpatrickovi z CPB/WGBH Národního centra pro přístupná média (ncam.wgbh.org) za to, že svými zkušenostmi přispěl ke kvalitě části o přístupnosti WWW stránek.

—SH

Předmluva k druhému vydání

xiiiPředlmluva

Předmluva k prvnímu vydání

Tato kniha je pro všechny, kteří by chtěli na webu publikovat způsobem, který vydrží. Trendy se mění často, na dobrý obsah a dobrý grafický návrh ovšem vliv nemají. Úspěch na webu znamená víc než jenom technologii a mó-du, to podstatné je umět srozumitelným způsobem sdělovat své myšlenky čtenářům.

Web – i když stále ještě mladý – prošel za dobu své existence několika změnami. První osadníci neobydleného území byli vědci, jejich cílem byl na platformě nezávislý způsob výměny informací. Navrhli HTML (HyperText Markup Language, hypertextový značkovací jazyk), pomocí kterého lze vyzna-čit strukturu v dokumentech, které je pak možné jednoduše šířit a porovná-vat. Zaměřovali se především na logickou strukturu dokumentu, nikoliv na grafický návrh.

Ale z WWW se rychle stalo standardní médium pro zveřejňování informa-cí – s tím rozdílem, že žádné jiné médium není tak obrovské a zároveň tak levné. Proti klasickým médiím měl web ze začátku jistou nevýhodu – HTML. Zakladatelé webu se soustředili na strukturu dokumentů a prakticky igno-rovali vizuální stránku publikování, která je pro efektivní sdělení myšlenky velmi důležitá. Když se z webu stal publikační nástroj, všechna tato omezení velmi rychle vyplula na povrch. Stránky, které se řídily standardem HTML, nevypadaly příliš dobře – jako by si ani nevšimly několika posledních století ve vývoji typografie. Věci vzali do rukou grafici a začali tehdejší velmi pri-mitivní technologie používat k něčemu, k čemu se naprosto nehodily: ke grafickému designu.

Změnili se i návštěvníci webu. První pionýři, kteří byli spokojení s pou-hým letmým pohledem na stránky, byli rychle vytlačeni. Noví uživatelé webu chtějí informace, informace s hloubkou, šířkou a úplností.

Tato kniha byla napsána proto, aby nabídla základní pravidla návrhu. Tato pravidla pak můžete využít k tomu, aby informace vámi publikované byly tak srozumitelné, jak jen to půjde. Vysvětlujeme zde, jak použít design jako ná-stroj, nikoliv jako cíl; návrh webových stránek by měl být pro uživatele takřka neviditelný. Ukážeme vám, jak navrhnout uživatelské rozhraní, které umožní vašim čtenářům používat vaše stránky s lehkostí. Nabízíme rady, jak správ-ně psát pro web, protože to je nový žánr s vlastními pravidly. Dostaneme se hluboko pod kůži obrázkům, budeme mluvit o barvě, rozlišení, kompresi a formátech, probereme také výhody a úskalí publikování obrázků na webu. Pokrýváme i stylistické a technické obtíže plynoucí z publikování dynamické-ho obsahu. Všechno to se ale podřizuje jedinému cíli: udělat stránku, která bude rychle, jasně a srozumitelně předávat informace čtenářům.

xiv

Tato kniha není referenční příručka o HTML, není to ani kniha o grafickém návrhu. Je to praktická příručka, která vám pomůže navrhovat webové strán-ky, které vydrží.

Hodně lidí se s námi podělilo o svůj čas a své rady při psaní této knihy i při vytváření webových stránek, které knižní podobě předcházely. Naše vřelé díky si zaslouží zejména tito lidé z Nakladatelství univerzity v Yale: Jean Thomson Black, Laura Jones Dooley a James J. Johnson, dále pak Craig Locatis, Donald Norman a Edward Tufte za své neocenitelné příspěvky k naší práci.

Tyto díky bych rád rozšířil o své kamarády a spolupracovníky z Yaleského Centra pro pokročilá vzdělávací média, jsou to: Carl Jaffe, Phillip Simon, Sean Jackson, Kimberly Pasko, Marsha Vaquez a Jeff Colket. Člověk, kte-rému bych chtěl poděkovat zvlášť, je Carl Jaffe: děkuji za patnáct let přátel-ství, za dobré rady a praktické informace, z nichž velká část se objevuje na stránkách této knihy. Rád bych také poděkoval spoluautorce této knihy a mé drahé přítelkyni, Sáře Hortonové, za její přátelství, za její spolupráci a za to, že mě přesvědčila o tom, jak dobrý nápad je převést naši stránku o návrhu WWW stránek do knižní formy.

Za rady, komentáře a podporu při vzniku této knihy a doprovodné WWW stránky bych velmi rád poděkoval následujícím lidem: Anne Altemus, Am-mett Barkley, Richard Beebe, David Bolinsky, Stephen Cohen, Frank Gallo, Scott Hines, Peter Kindlmann, Howard Newstadt, John Paton, Noble Proctor, Stacy Ruwe, Virginia Simon, William Stewart, Lynna Stone-Infeld, Jan Tay-lor, Frans Wackers a Cheryl Warfield.

—PL

Děkuji svému spoluautorovi, Patricku Lynchovi, za to, že mě přizval k práci na druhém vydání této knihy. Nejspíš netušil, k čemu všemu jeho pozvání povede, a jsem mu vděčná za přátelství a dobrou náladu, kterou provázel celý vývoj této knihy. Jsem velikým dlužníkem Patricka a jeho spolupracovníků z Yaleského Centra pro pokročilá vzdělávací média za to, že mě vzali o něko-lik let zpátky a otevřeli mi oči.

Děkuji mnoha svým kolegům a přátelům z Darmouthské univerzity za jejich podporu, připomínky a dobré rady, jmenovitě to jsou: John Hawkins, Sheila Culbert, D. Randall Spydell, Ned Holbrook a Robert M. Murray. Děkuji také lidem, jejichž stránky jsou použité v této knize jako ukázky: Joan Camp bell, Eva Fodor, Sally Hair, Allen Koop, Thomas Luxon a Gerard Russo.

Děkuji Malcolmu Brownovi za jeho neúnavnou podporu.—SH

Předmluva k prvnímu vydání

81Design stránky

4 Design stránky

Pokud se zeptáte, proč něco funguje a budete mít dostatečně velký

odstup, najednou se vám začne zdát, že je všechno založeno na pro-

tikladu: schopnosti odlišovat jednu věc od druhé. Kompozice, pořadí

a dokonce čitelnost, to vše záleží na prostředcích, které ovlivňují

protiklad mezi věcmi.

—Chris Pulman, Vzdělávání grafického designéra.

U informačních zdrojů, ať už tradičních papírových dokumentů nebo webo-vých stránek, hledáme srozumitelnost, řád a důvěryhodnost. Tuto důvěru může vytvořit vnést efektivní design stránky. Rozmístění grafiky a textu na webové stránce může zaujmout čtenáře, nasměrovat jejich pozornost, určit prioritu informací, které vidí a může také učinit jejich interakci s vaším we-bem více zábavnější a efektivnější.

Vizuální logika Grafický návrh vytváří vizuální logiku a hledá optimální rovnováhu mezi vizuálním vnímáním a grafickou informací. Bez vizuálního účinku tvaru, barvy a kontrastu, jsou stránky graficky nezajímavé a nebudou diváka k ničemu motivovat. Obsáhlé textové dokumenty postrádající kontrast a vizuální odlehčení se obtížně čtou, zejména na obrazovkách osobních počí-tačů s poměrně nízkým rozlišením. Ale stránky bez hloubky a komplexnosti textu a s přemírou grafiky zase riskují, že uživatele zklamou, protože nena-bízejí vyváženost mezi vizuálním vnímáním a textovou informací. Při hledání této ideální vyváženosti narazíme u primárního návrhu na omezené schop-nosti HTML a rychlosti připojení uživatele, které má rozsah od pomalého modemového připojení až po vysokorychlostní spojení jako třeba Ethernet nebo DSL.

Vizuální a funkční kontinuita uspořádání vašeho webu, grafického návrhu a typografie jsou důležité pro přesvědčení vašich návštěvníků o tom, že váš web jim nabízí aktuální, přesné a také užitečné informace. Pečlivý systema-tický přístup k návrhu stránky může usnadnit čtenářům navigaci na vašem webu, snížit chyby uživatele a usnadnit čtenářům využití informací, které web nabízí.

Vizuální hierarchie

Primární úlohou grafického návrhu je vytvořit silnou a konzistentní vizuální hierarchii, ve které je kladen důraz na důležité elementy, přičemž obsah je organizován logickým a předvídatelným způsobem.

82 Design stránky

Grafický návrh je řízení vizuální informace s pomocí nástrojů jako je roz-vržení stránky, typografie a obrázky, které vedou oko čtenáře skrze celou stránku. Čtenáři nejprve vidí stránky jako velké a barevné útvary, kde prv-ky v popředí kontrastují s pozadím. Postupně začínají rozeznávat jednotlivé informace, nejprve grafiku – pokud tam existuje – a pak začínají procházet text a číst individuální slova a věty:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna

aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat. Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla facilisis at vero eros et accumsan et iusto odio

dignissim qui blandit praesent luptatum zzril delenit augue duis

dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut laoreet dolore magna aliquam erat volutpat.

Amet orem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore

magna aliquam erat volutpat. Duis autem vel eum iriure dolor in

hendrerit in vulputate velit esse molestie consequat, vel illum

dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto

odio dignissim qui blandit praesent luptatum zzril delenit augue

duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi

enim ad minim veniam, quis nostrud exerci tation ullamcorper

suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem

ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna

aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla facilisis at vero eros et accumsan et iusto odio

dignissim qui blandit praesent luptatum zzril delenit augue duis

dolore te feugait nulla facilisi.

Ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

Headline words

Hrubé vizuální zkoumání Jemnější zkoumání Začátek čtení záhlaví

Vizuální zkoumání struktury stránky v čase

Kontrast je nezbytný Celkové grafické vyvážení a organizace stránky jsou podstatné pro vtažení čtenáře do obsahu. Monotónní stránka s jednolitým textem odpuzuje oko jako masa splynuté šedi, bez zřejmých náznaků struktu-ry informace. Uživatele, který hledá skutečný obsah, také ruší nebo rovnou odrazuje stránka, které vévodí uboze navržená a přehnaně okatá grafika nebo typografie. Vy jako designér musíte najít vhodnou rovnováhu mezi vi-zuálním kontrastem příjemným pro oko a citem pro uspořádání:

Monotónní; žádné záchytné body, žádná grafická struktura

Silná vizuální struktura; lepší kontrast

83Design stránky

Vizuální rovnováha a přiměřenost pro zamýšlenou skupinu čtenářů jsou klíčem k úspěšnému rozhodování při návrhu. Pro všeobecnou internetovou veřejnost je nejvíce efektivní design s rovnováhou mezi textem a odkazy s re-lativně malou grafikou. Takové stránky se do prohlížeče načítají rychle i na pomalých modemech, přičemž dosahují značného grafického dojmu:

Pokud vytváříte design stránky pro svůj web, posuďte celkový účel, podstatu obsahu a co je nejdůležitější – očekávání vašich čtenářů.

Konzistence

Vytvořte předlohu a stanovte pravidla pro práci s textem a grafikou. Potom tuto předlohu konzistentně používejte při tvorbě ostatních stránek vašeho webu, abyste dosáhli jednotného vzhledu stránek v rámci celého vašeho webu. Toto opakování není nudné – dodává vašemu webu konzistentní grafickou

identitu, která vytváří a také upevňuje cit návštěvníka pro umístění jednotli-vých prvků. Činí váš web také více zapamatovatelným. Konzistentní přístup k layoutu a navigaci dovoluje čtenářům, aby se rychle přizpůsobili vašemu návrhu a spolehlivě předvídali umístění informací a navigačních prvků na stránkách vašeho webu.

Pokud si zvolíte pro stránky nějaké grafické téma, používejte jej na celém webu. Domovská stránka webu Bridgeman Art Library, zobrazená níže, pou-žívá pro celý web jednotné grafické téma a zavádí charakteristickou typogra-fii a sadu navigačních tlačítek:

Níže je zobrazen pruh z horní části vnitřní stránky webu Bridgeman Art Library. Všimněte si charakterické typografie a navigačních tlačítek. Rozhod-ně zde není pochyb o tom, po jakém webu se pohybujete:

Rozměry stránky

Ačkoliv webové stránky sdílejí s klasickými tištěnými dokumenty mnoho grafických, funkčních a také redakčních podobností, primárním místem pro zobrazení informací z webu je obrazovka monitoru, a nikoliv tištěná stránka. A obrazovka monitoru se od tištěné stránky velmi liší. Obrazovky monito-rů jsou typicky menší než většina otevřených knih nebo časopisů. Běžnou chybou při návrhu webu je, že layout webu je širší než viditelná plocha sedmnácti nebo devatenácti palcových monitorů. Uživatel tak musí rolovat prohlížečem do stran.

Plocha o rozměrech 800x600

Graficky bezpečné oblasti Bezpečná oblast pro design webové stránky je určena dvěma faktory: mini-mální velikostí obrazovky při běžném používání a šířkou papíru, který se používá pro tisk webových stránek.

86 Design stránky

Většina monitorů, které se používají na univerzitách a ve firmách, má velikost obrazovky sedmnáct až devatenáct palců (43 až 48 centimetrů). Tyto monitory pak mají nastaveno rozlišení obrazovky, které neklesá pod 800x600 pixelů – ve většině případů je však rozlišení vyšší (1024x768). Design webo-vé stránky, která překročí šířku většiny běžně používaných obrazovek bude vypadat amatérsky a bude obtěžovat mnoho čtenářů tím, že budou muset rolovat ve vodorovném směru, aby si prohlédli celou stránku. Rolování ve vertikálním směru je přípustné, rolování v horizontálním směru (do stran) je absolutně nepřípustné.

Příliš široká stránka se nevejde na obrazovku s rozlišením 800x600

Stránka se vejde na jednu obrazovku

Dokonce i na monitorech s malým rozlišením je možné zobrazit grafiku, která je příliš široká na to, aby ji bylo možné dobře vytisknout na papír o běž-né velikosti A4. Současné prohlížeče se pokoušejí vyřešit problém s tiskem tím, že poskytují volbu přizpůsobit měřítko stránky takovým způsobem, aby

87Design stránky

se vešla na papír. Avšak mnoho uživatelů tuto volbu nezná. Dalším problé-mem je to, že široké stránky, které jsou takto při tisku upraveny, jsou často nečitelné, protože díky změně velikosti se stane text příliš malým. U mnoha webových stránek je však tisk až na druhém místě. Buďte si však vědomi toho, že vaši čtenáři při tisku buď ztratí pravý okraj stránky nebo budou tisknout stránky zmenšené. Stránky s větším množstvím textu by měly být vždy navrženy pro správný tisk, protože určitá skupinka čtenářů si bude tyto stránky vždy tisknout, aby je bylo možné přečíst v pohodlí. Pokud je stránka příliš široká, čtenáři ztratí několik slov na pravé straně každém řádku nebo se budou muset potýkat s malým písmem (při zmenšení stránky při tisku).

Níže jsou uvedeny rozměry graficky bezpečné oblasti pro tisk a pro zobra-zení na obrazovce s rozlišením 800x600:

Rozměry graficky bezpečné oblasti pro tisk:Maximální šířka = 560 pixelů.Maximální výška = 410 pixelů (oblast viditelná bez rolování).

Rozměry graficky bezpečné oblasti pro zobrazení na obrazovce 800x600:Maximální šířka = 760 pixelů.Maximální výška = 410 pixelů (oblast viditelná bez rolování).

Graficky bezpečná oblast pro obrazovku 800x600.Uvedené rozměry zahrnují jak Netscape Navigator, tak i Internet Explorer, a to jak ve verzích pro Windows/NT, tak i pro Macintosh. Všimněte si, že pokud si zvolíte maximální šířku stránky, pak nebudou při tisku stránky zobrazeny asi dva centimetry z pravého okraje stránky

Rozměry pro správný tisk, maximální šířka = 560 pixelů 560

760Rozměry pro maximální využití obrazovky, max. šířka = 760 pixelů

Vzdálenost odsazení od okraje u prohlížeče = 8 pixelů Maximální bezpečná výška pro zaru-

čenou viditelnost = 410 pixelů

410

88 Design stránky

Délka stránky

Určit vhodnou délku pro jakoukoliv webovou stránku vyžaduje zvážit násle-dující čtyři faktory:

1. Poměr mezi velikostí stránky a obrazovky.2. Obsah vašich dokumentů.3. Zdali se od čtenáře očekává, že si bude obsah prohlížet online nebo že si

jej bude tisknout nebo stahovat pro pozdější čtení.4. Rychlost připojení k internetu u vašich čtenářů.

Výzkumníci u návštěvníku webu zjistili určitou dezorientaci, která prame-ní z rolování stránky na obrazovce monitoru. Ztráta kontextu u čtenáře je obzvláště problémem, pokud během rolování zmizí mimo obrazovku takové základní navigační prvky jako třeba nadpis dokumentů, logo webu nebo odka-zy na další stránky. Tento dezorientační efekt hovoří pro vytvoření takových webových stránek (týká se to zejména domovských stránek), které nebudou obsahovat nic víc než jednu, maximálně dvě obrazovky informací, které bu-dou zahrnovat místní navigační odkazy na začátku a konci stránky. Dlouhé webové stránky vyžadují po uživateli, aby si zapamatoval příliš mnoho infor-mací, které se odrolují mimo obrazovku – uživatelé snadno ztratí kontext, pokud navigační tlačítka nebo hlavní odkazy náhle nebudou viditelné:

89Design stránky

Rolování U dlouhých webových stránek je uživatel závislý na svislém po-suvníku (malý obdélník na pravém okraji prohlížeče). U některých webu je velikost jezdce posuvníku konstantní a tudíž nesděluje žádnou informaci o délce dokumentu ve vztahu k tomu, co je vidět na obrazovce. Čtenář tak nemá vizuální informaci o délce stránky. U velmi dlouhých stránek mohou velmi malé posuny jezdcem posuvníku kompletně změnit vizuální obsah obra-zovky – čtenář je zanechán v neznámém prostředí bez orientačních bodů. To nedává uživateli jinou volbu než rolovat nahoru dolů pomocí šipek posuvníku nebo prostě riskovat vynechání nějakých úseků stránky.

Avšak dlouhé webové stránky mají i své výhody. Z pohledu tvůrce webu se snadněji udržují. Z pohledu uživatele se snadněji stahují. Správce webu totiž nemusí spravovat tolik odkazů a stránek. Na druhé straně, uživatelé zase nemusejí stahovat a prohlížet velké množství souborů, aby sesbírali informa-ce o daném tématu. Dlouhé stránky jsou obzvláště užitečné pro publikování informací, u nichž předpokládáte, že je uživatelé nebudou číst online (to znamená dokumenty, které jsou delší než dvě tištěné stránky). Delší stránky můžete učinit příjemnější tím, že na nich v pravidelných intervalech umístíte tlačítka nebo odkazy, které povedou zpět na začátek dokumentu. Uživatelé tak nikdy nebudou muset rolovat příliš daleko, aby nalezli navigační tlačítko nebo odkaz, které je nasměruje zpět na začátek stránky.

90 Design stránky

Všechny webové stránky, které jsou delší než dvě obrazovky by měly mít na konci stránky odkaz, který povede zpět na začátek stránky:

Odkaz vedoucí na začátek

stránky

Problém s dlouhou stránkou je někde jinde. Pokud je totiž webová stránka příliš dlouhá, nebo pokud obsahuje příliš velké množství grafiky, bude se velmi dlouho načítat uživatelům s pomalým připojením k internetu. Velmi velké webové stránky s mnoha obrázky mohou také zahltit paměť počítače a zapříčinit zhroucení webového prohlížeče nebo vést ke špatnému zobrazení stránky v prohlížeči nebo při vytištění stránky.

Obsah a délka stránkyÚzce související informace má smysl udržovat v rámci jedné webové stránky, zejména tehdy, pokud očekáváte, že uživatel bude text tisknout nebo uklá-dat na disk. Udržování obsahu na jednom místě činí tisk dokumentu a jeho ukládání snazší. Ale více jak čtyři obrazovky informací nutí uživatele příliš rolovat – výhoda online verze dokumentu se tak začíná pomalu vytrácet. Dlouhé stránky také ztrácejí výhodu zapojení odkazů, které poskytuje dané webové médium.

Pokud chcete poskytnout návštěvníkům nejenom dobré online rozhraní pro dlouhý dokument, ale nabídnout i snadný tisk nebo ukládání obsahu stránky, pak:• Rozdělte dokument na části velké jeden až dvě tištěné stránky, včetně

vložené grafiky nebo obrázků. Využijte síly hypertextových odkazů, které poskytuje web.

• Nabídněte odkaz na samostatný soubor, který obsahuje plnou verzi textu, aby si uživatel mohl vytisknout nebo uložit všechny související informace v jednom jediném kroku. Nezapomeňte do textu stránky vložit URL adresu této online verze dokumentu takovým způsobem, aby uživa-telé mohli nalézt aktuální verzi a správně citovat zdroj.

Všeobecně byste měli upřednostňovat použití kratších webových stránek pro:• Domovské stránky nebo pro navigační stránky jinde na vašem webu.• Dokumenty, které budou procházeny a čteny online.• Stránky s velmi náročnou grafikou (kvůli celkové délce načítání stránky).

Delší dokumenty jsou všeobecně:• Snadněji udržovatelné (obsah stránek není rozdělen).

91Design stránky

• Podobnější svým papírovým protějškům (nejsou rozsekané na jednotlivé části).

• Vhodnější pro uživatele, kteří je chtějí vytisknout nebo stáhnout na disk.

Předloha pro webové stránky

Konzistence a předvídatelnost jsou základními atributy pro jakýkoli dobře navržený informační systém. Předlohy, které jsou základem většiny dobře navržených papírových publikací, jsou stejně tak nutné při návrhu elektronic-kých dokumentů a online publikací, kde se prostorové uspořádání prvků na obrazovce neustále mění v odpovědi na vstupy uživatele a aktivitu systému.

Předloha přináší řád na stránku Současná implementace jazyka HTML nenabízí flexibilitu a možnosti ovládání, které běžně očekávají grafičtí návr-háři od software nebo od multimediálních nástrojů určených pro tvorbu we-bových stránek. Přesto však může být HTML použito pro vytváření komplex-ních a vysoce funkčních informačních systémů – pokud je ovšem používáno s rozmyslem. Pokud jsou typografické řídící prvky a vložená grafika webo-vých stránek používány nevhodným nebo nekonzistentním způsobem, snadno může vzniknout vizuální chaos bez zřetelné hierarchie důležitosti. Nahodile smíchaná grafika a text snižují použitelnost a čitelnost, stejně jako u klasic-kých papírových stránek. Vyvážené a konzistentně implementované schéma designu naopak zvyšuje důvěru čtenářů ve váš web.

Ubohý návrh stránky, žádná vizuální hierarchie Lepší a vyváženější návrh stránky

Neexistuje systém předlohy, který by byl vhodný pro všechny webové strán-ky. Vaším prvním krokem při tvorbě stránek by mělo být vytvoření určité

92 Design stránky

základní předlohy. S pomocí této grafické páteře pak můžete určit, kde se budou ve vašich stránkách pravidelně objevovat hlavní části textu a ilustrací, můžete si zvolit umístění a styly pro hlavní nadpisy, podnadpisy nebo pro na-vigační odkazy a tlačítka. Abyste mohli začít, shromážděte typické příklady vašich textů společně s nějakou grafikou, fotografiemi nebo jiným ilustrativ-ním materiálem a experimentujte s různým uspořádáním jednotlivých prvků na stránce. U větších projektů sice nebude možné přesně předvídat, jak bude která kombinace textu a grafiky na sebe vzájemně působit, ale zkuste vzájem-ně porovnat návrhy nejvíce a nejméně komplexních stránek.

Vašim cílem je vytvořit konzistentní a logický návrh stránky. Takový, který bude umožňovat vkládat text a grafiku bez nutnosti zastavit se a znovu pro-mýšlet základní návrh při vytváření další stránky. Bez pevného základu před-lohy bude vaše práce na stránkách webu neustále komplikována občasnými problémy, přičemž celkový návrh vašeho webu bude nejednotný a zmatený.

Vertikální rozložení webových stránek Webová stránka může mít prak-ticky libovolnou délku, nicméně, pro prvotní upoutání čtenáře máte k dispo-zici plochu o rozsahu čtyřiceti pěti čtverečních palců od horní části stránky. Je to část, kterou čtenář uvidí po načtení stránky bez toho, aniž by musel rolovat. Jedním ze základních rozdílů při návrhu webové stránky oproti návr-hu tištěné stránky je to, že pokud čtenář knihy nebo časopisu otočí list, uvidí nejenom celou následující stránku, ale rovnou celou dvojstránku. U tiskového návrhu je proto dvojstránka základní grafickou jednotkou návrhu.

1–26 1–27

THRESHERS, HAMMERHEAD SHARKS

SHA

RKS

THRESHERS, HAMMERHEAD SHARKS

The extraordinary length of the upper caudalfin is diagnostic of threshers and separatesthese large sharks from all others. Brownish togray-brown. Normal eye size. Range: Gulf of St.Lawrence to Florida. Occurs off the NorthAtlantic coast mainly in the summer.Size: to 20 ft (6 m).

THRESHER SHARK Alopias vulpinus

Appearance like the Thresher, however, notevery large eyes, positioned high on head toallow the shark to view upward. Back ishumped and dorsal fin is set far back. Range:north to New York. Size: to 18 ft (5.5 m).

BIGEYE THRESHER Alopias superciliosus

BONNETHEAD SHARK

Grayish shark with a flattened head in the form of shovel with eyes atedge of expanded portion. Abundant in bays and shallows on intoestuaries. Range: north to Cape Cod. Size: to 6 ft (1.8 m).

SMOOTH HAMMERHEAD

Features: Almost identical to Scalloped Hammerhead, but lacksindentation to forehead and no black tip to pectoral fin. Range: northto Nova Scotia in summer. Size: to 13 ft (4 m).

Sphyrna zygaena

SCALLOPED HAMMERHEAD Sphyrna leweini

Light brown or gray above-pale below. Note the convex forehead withthe distinct indentation in the front. Pectorals black on the inside tips.Enters bays and shallow waters. Range: to Nova Scotia.Size: to 10 ft (3 m).

GREAT HAMMERHEAD Sphyrna mokarran

Largest and most pelagic and tropical of thehammerheads. Front edge of head with slightindentation, giving head very squareappearance. Back edge of pelvic fin verycurved. Range: North Carolina to Brazil;worldwide in tropical waters.Size: to 20 ft (6.1 m).

Sphyrna tiburo

THRESHER SHARK

BIGEYE THRESHER

BONNETHEADSHARK

SMOOTHHAMMERHEAD

SCALLOPEDHAMMERHEAD

GREATHAMMERHEAD

Stránky v knize Webová stránka na 17palcovém monitoru (rozlišení 1024x768 pixelů)

Na knižní dvojstránky je nahlíženo jako na jednotky o velikosti dvou stránek; webové stránky jsou vždy samostatné jednotky, bez ohledu na velikost monitoru

Tiskový návrh tak může dosáhnout jednoty designu a hustoty informací, kterou návrh webové stránky rozhodně nemůže napodobit. Bez ohledu na

93Design stránky

to, jak velká obrazovka vlastně je, čtenář může najednou vidět pouze jednu stránku, a dokonce i na velkém, jedenadvacet palců širokém monitoru se zobrazí pouze tolik informací, které přibližně odpovídají dvojstránce malého časopisu (viz předchozí obrázek)

Viditelná část stránky Většina návrhů webových stránek je rozdělena svisle na části s různými funkcemi a proměnlivými úrovněmi složitosti textu a grafiky. Jak svislé rolování postupně odhaluje stránku, objevuje se nový obsah, přičemž obsah nahoře pomalu mizí. Nový grafický kontext vznikne po-každé, když čtenář posune rolováním stránku. Návrh webové stránky by pro-to neměl být posuzován podle shlédnutí celé stránky jako jednoho jediného celku, ale stránka by měla být rozdělena na vizuální a funkční části a měla by se posuzovat vhodnost každé jednotlivé obrazovky. Všimněte si vertikální struktury domovské stránky zobrazené níže. Horní obrazovka je hustě pokry-ta odkazy, neboť je to jediná oblast, kterou určitě uvidí všichni čtenáři:

První obrazovka● Položky s nejvyšší prioritou● Většina grafiky● Nejvyšší hustota odkazů

Druhá obrazovka● Položky s nízkou prioritou● Menší množství grafiky● Hustota odkazů je mnohem

menší

(Hustota: 25 odkazů)

Nad dolním okrajem

Pod dolním okrajem

94 Design stránky

Záhlaví a zápatí stránky

Mnoha tvůrcům webu se točí hlava nadšením nad obrovskou grafikou na do-movské stránce a zapomínají přitom, že webová stránka nemá být jen vizuál-ním zážitkem – musí také působit efektivním způsobem, aby si udržela zájem čtenáře. Zapamatujte si, že stránka buduje svůj grafický dojem postupným způsobem, tak, jak je načítána uživatelem. Nejlepším měřítkem efektivity návrhu stránky je množství voleb, které jsou čtenáři k dispozici ve čtyřech palcích od horní části stránky. Velká a výrazná grafika sice může ohromit příležitostné čtenáře, ale jestliže trvá stažení začátku stránky průměrnému čtenáři třicet sekund, přičemž neuvidí bez odrolování větší množství navigač-ních odkazů, pak můžete ztratit velkou část vašich návštěvníků ještě dříve, než jim stačíte nabídnout odkazy na další části vašeho webu.

Záhlaví stránky: webová identitaPečlivý grafický návrh dodá vašemu webu jedinečnou vizuální identitu. Grafi-ka a návrh stránky tvoří podpis celého webu; dovolují čtenáři ihned pochopit smysl dokumentu a jeho vztah k ostatním stránkám. Grafika použitá v zá-hlaví rovněž informuje o vzájemné souvislosti většího množství webových stránek. Narozdíl od designérů tištěných dokumentů si designéři webových stránek nemohou být nikdy jisti, jaké stránky již čtenář viděl předtím, než se dostal na aktuální stránku. Mnoho webových stránek firmy Sun Microsystem má v záhlaví jednotnou grafiku obsahující základní navigační odkazy:

Dokonce i tehdy, když se rozhodnete, že nebudete na vašich stránkách používat grafiku, oblast záhlaví každé webové stránky by měla obsahovat význačný titulek umístěný v horní části záhlaví nebo blízko u něj. Grafika umístěná nad řádkem s titulkem by neměla být tak veliká, aby na stan-dardních obrazovkách kancelářských monitorů vytlačila titulek a úvodní text mimo stránku. V souvislé řadě dokumentů tam mohou být také umístěny také podtituly, názvy částí nebo jiné textové elementy, které vyjadřují vztah mezi aktuálně zobrazeným dokumentem a dalšími dokumenty v řadě. Aby to mělo nějaký smysl, musí být tyto prvky nesoucí název standardizovány na všech stránkách vašeho webu.

Zápatí stránky: původ a stáří stránky Každá webová stránka by měla obsahovat základní údaje o původu a stáří stránky, nicméně, tato opakující se a všední informace nemusí být umístěna v horní části stránky. Zapamatuj-te si také, že jakmile čtenář odroluje na konec vaší webové stránky, navigační

95Design stránky

odkazy, které jste umístili v horní části stránky, už nemusí být viditelné. Dob-ře navržené zápatí stránky nabízí uživateli – kromě základních údajů o webu – také skupinu navigačních odkazů vedoucích na jiné stránky.

Všechny stránky společnosti IBM mají v zápatí charakteristickou grafiku zajišťující konzistentní, vizuální a funkční identitu:

Rozvržení stránky

Navrhování vzhledu webových stránek má v sobě určitý kus magie. HTML bylo navrženo inženýry a vědci, kteří ho nikdy nezamýšleli použít jako nástroj