Základní průvodce webdesignem

CYAN

MAGENTA

YELOW

CYAN

BLACK

MAGENTA

E N C Y K L O P E D I E

Tato plnobarevná kniha, která je nepostradatelným zdrojem informací 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 rozhraní.

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.

Kniha má své kořeny v hodně navštěvovaném a vysoce hodnoceném webu o designu stránek vytvořeném v rámci Centra pro pokroč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

• Typografie na webu • Textové styly • Webová grafika • Multimédia

E N C Y K LO 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 webdesignér při každodenní práci. Na slevy, které můžete získat, a vydavatelský 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 adrese vydavatelství.

Věrným čtenářům je určen výhodný PRÉMIOVÝ PLUS PROGRAM.

www.zoner.cz © Foto: Jiří Heller, www.heller.cz Fotografie z nabídky fotobanky HELLER.CZ

KATALOGOVÉ ČÍSLO: ZR406

ISBN 80-86815-05-6

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

WEBDESIGNEM • 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ů.

© Foto: Jiří Heller

BLACK

Patrick J. Lynch, Sarah Hortonová

YALE UNIVERSITY PRESS 9 7 8 8 0 8 6

obal_webstzle_4.indd 1

Základní průvodce

www.zonerpress.cz

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

YELOW

Základní průvodce WEBDESIGNEM

Patrick J. Lynch, Sarah Hortonová

MAGENTA

W E B D E S I G N E R A

Lynch Hortonová

WEBDESIGNEM

CYAN

BLACK

ENCYKLOPEDIE WEBDESIGNERA

Základní průvodce

• Postup návrhu stránek • Design uživatelského rozhraní • Design webu • Design stránky

YELOW

8 1 5 0 5 3

CYAN

MAGENTA

YELOW

BLACK 1.6.2004 10:52:13

Základní průvodce webdesignem (druhé anglické vydání, v českém jazyce vydání první)

Základní průvodce webdesignem Obecné principy tvorby webových stránek

Patrik J. Lynch Yale University for Advanced Instructional Media Sarah Horton Darmouth College

Yale University Press New 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 webdesignem Autor: 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 Press ZONER software s.r.o.

Koželužská 7, 602 00 Brno Překlad: Jan Gregor, Tomáš Znamenáček Odpovědný redaktor: Miroslav Kučera © Foto: Jiří Heller, HELLER.CZ s.r.o., www.heller.cz © Cover: Ing. Pavel Kristián DTP: 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 Press ZONER software s.r.o.

Koželužská 7, 602 00 Brno tel.: 532 190 883, fax: 543 257 245 e-mail: knihy@zoner.cz http://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í 1 Proces

xiii 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

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ě rozumí. 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í nesrozumitelný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 nejví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 Hortonová 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-

Předlmluva ix

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

x Předmluva

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živatelí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ěř groteskní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 flexibilní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ředmluvy 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.

Předlmluva xi

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, Victor 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 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, Ammett 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 Taylor, 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

xii Předmluva k druhému vydání

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í informací – 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 ignorovali 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 primitivní 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 pouhý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ávně 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.

Předlmluva xiii

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ánky, 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, 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 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, Ammett 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 Taylor, 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ěkolik 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 Campbell, Eva Fodor, Sally Hair, Allen Koop, Thomas Luxon a Gerard Russo.

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

—SH

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

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 protikladu: 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 webový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 webem 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 nenabí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é schopnosti 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ý systematický 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.

Design stránky 81

Grafický návrh je řízení vizuální informace s pomocí nástrojů jako je rozvrž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 prvky 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: Vizuální zkoumání struktury stránky v čase Hrubé vizuální zkoumání

Jemnější zkoumání

Začátek čtení záhlaví

Headline words 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

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ů struktury 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 vizuálním kontrastem příjemným pro oko a citem pro uspořádání: Monotónní; žádné záchytné body, žádná grafická struktura

82 Design stránky

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

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 relativně 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

Design stránky 83

identitu, která vytváří a také upevňuje cit návštěvníka pro umístění jednotlivý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 typografii 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. Rozhodně 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 monitorů 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: minimá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.

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 webové 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

86 Design 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 zobrazení 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í).

560

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

760

Rozmě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

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

Design stránky 87

Délka stránky Určit vhodnou délku pro jakoukoliv webovou stránku vyžaduje zvážit následují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á pramení 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 odkazy 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é budou 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 informací, které se odrolují mimo obrazovku – uživatelé snadno ztratí kontext, pokud navigační tlačítka nebo hlavní odkazy náhle nebudou viditelné:

88 Design stránky

Rolování U dlouhých webových stránek je uživatel závislý na svislém posuvní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 obrazovky – č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 informace 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.

Design stránky 89

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živatelé 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).

90 Design 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 elektronický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ávrháři od software nebo od multimediálních nástrojů určených pro tvorbu webových stránek. Přesto však může být HTML použito pro vytváření komplexní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 webový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 klasický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ánky. Vaším prvním krokem při tvorbě stránek by mělo být vytvoření určité

Design stránky 91

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 navigač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 ilustrativní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ájemně 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 promýšlet základní návrh při vytváření další stránky. Bez pevného základu předlohy 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 prakticky libovolnou délku, nicméně, pro prvotní upoutání čtenáře máte k dispozici 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ávrhu 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.

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

Stránky v knize THRESHERS, HAMMERHEAD SHARKS THRESHER SHARK

THRESHERS, HAMMERHEAD SHARKS Alopias vulpinus

The extraordinary length of the upper caudal fin is diagnostic of threshers and separates these large sharks from all others. Brownish to gray-brown. Normal eye size. Range: Gulf of St. Lawrence to Florida. Occurs off the North Atlantic coast mainly in the summer.

Size: to 20 ft (6 m).

BIGEYE THRESHER

THRESHER SHARK

BIGEYE THRESHER

Alopias superciliosus

BONNETHEAD SHARK

SHARKS

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

BONNETHEAD SHARK

Sphyrna tiburo

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

SMOOTH HAMMERHEAD

Sphyrna zygaena

SMOOTH HAMMERHEAD

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

SCALLOPED HAMMERHEAD

Sphyrna leweini

SCALLOPED HAMMERHEAD

Light brown or gray above-pale below. Note the convex forehead with the 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 the hammerheads. Front edge of head with slight indentation, giving head very square appearance. Back edge of pelvic fin very curved. Range: North Carolina to Brazil; worldwide in tropical waters.

Size: to 20 ft (6.1 m).

1–26

GREAT HAMMERHEAD

1–27

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

92 Design 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 pokaždé, když čtenář posune rolováním stránku. Návrh webové stránky by proto 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ě pokryta 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ů

(Hustota: 25 odkazů)

Nad dolním okrajem Pod dolním okrajem

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

Design stránky 93

Záhlaví a zápatí stránky Mnoha tvůrcům webu se točí hlava nadšením nad obrovskou grafikou na domovské stránce a zapomínají přitom, že webová stránka nemá být jen vizuální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á identita Pečlivý grafický návrh dodá vašemu webu jedinečnou vizuální identitu. Grafika 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 standardní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. Zapamatujte si také, že jakmile čtenář odroluje na konec vaší webové stránky, navigační

94 Design 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

Design stránky 95