Typographie, grafika, čeština et cetera


Archiv pro ‘web design’ kategorii

Optický střed poslouží i při návrhu webu

2. 2. 2006 | 19 komentářů

Zákonitosti matematické a geometrické se v mnoha ohledech neslučují se zákonitostmi optickými. Ne vše, co jsme schopni vyjádřit čísly a poměry, je aplikovatelné i při návrhu písma, loga, letáku či webové stránky. Člověk je tvor učenlivý a do svého vnímání nevědomky promítá většinu zkušeností ze svého života. A lidské oko někdy dokáže až neskutečně lhát.

Jestliže je možné říci, že matematika nám (navzdory logice) v kompozici poslouží jen zřídkakdy, sluší se zároveň dodat, že mnohdy platnější jsou nám principy známé z fyziky — především gravitace, se kterou máme co do činění prakticky při jakémkoliv svém konání.

Gravitační síla působí na kterékoliv dva předměty v prostoru. Oba jsou k sobě vzájemně přitahovány a síla je tím větší, čím větší jsou ony předměty a čím blíže k sobě se nacházejí. Velký předmět (Země) přitahuje k sobě předmět malý (člověk) mnohem větší silou, než je tomu naopak. Tato skutečnost se stala natolik součástí našeho uvažování, že se projevuje při posuzování kompozice více, než bychom si byli ochotni bez tohoto vysvětlení připustit. Dokazuje to, jako jeden z mnoha příkladů, právě zákon optického středu, ale je velmi dobře možné vysledovat jej i při „náhodném“ umisťování bodu do pevně vymezené plochy, v mém příkladu obdélníka orientovaného na výšku

optický střed a jiné zákonitosti bodu v ploše

Bod umístěný do horní poloviny plochy (A) působí dojmem vznášení, je lehký, celá kompozice je vzdušná a klidová. Bod bude tento dojem vyvolávat až do takové výšky, kdy vytvoří u pozorovatele pocit, že je na něm plocha zavěšena. Umístíme-li jej výše, bude přitahován horní hranou obdélníka. Tím více, čím blíže k hraně se ocitne (B), a napětí se uvolní až při setkání bodu a hrany.

Každá strana našeho obdélníka působí na bod odlišnou silou. Levá strana přitahuje méně než pravá, protože odporuje způsobu našeho čtení — zleva doprava — který považujeme za přirozený a plynulý (C, D). Spodní strana reprezentuje zemi působící gravitační silou, proto je bod umístěný do spodní poloviny obdélníka přitahován nejsilněji. Zdá se, že padá, vytváří dokonce nepříjemný neklid (E). Bod umístěný na spodní hraně je zcela klidný, leží na ní (F).

Tím se tedy pomalu dostávám k osvětlení termínu optický střed. Protože je přitažlivost ke spodní hraně plochy větší než k hraně horní, opticky se nám jeví bod nebo tvar položený do přesného geometrického středu nikoliv vprostřed, ale až pod ním (G). Je proto nutné posunout jej o něco málo výše, aby se působení sil vyrovnalo a bod se ocitl ve středu optickém — z tohoto hlediska jediném správném (H).

Na optický střed, základní a léty praxe ověřený kompoziční poznatek, se sice relativně hodně zapomíná, ale zároveň je pravdou, že s ním mnohdy lidé pracují, aniž si to vlastně uvědomují — řídí se při komponování grafiky citem. Ne každý se však na svůj cit může spolehnout, proto umisťujeme-li do hlavičky webu logo, zkusme se na chvíli zamyslet a posoudit, zda nebude lepší posunout jej o několik pixelů výše.

A příkladů lze najít samozřejmě nespočet: představím-li si na webu zvýrazněný odstavec textu uprostřed ohraničené plochy, kdy vdálenost textu od okraje (padding) je 15 pixelů na každé straně, bude takový odstavec vždy působit umístěný blíže spodní hraně. Když však zmenším horní odsazení od okraje na 12 pixelů, působení sil se jako mávnutím kouzelného proutku vyrovná. Pět vteřin práce navíc v zájmu zlepšení grafického účinku. Maličkost, dá se namítnout … ale nejsou to právě maličkosti, které vždy odlišují amatéra od profesionála?

Plně obrázková tlačítka bez preloadu

24. 1. 2006 | 9 komentářů

Tento postup je z velké části založen na pixyho článcích Rychlé rollovery bez načítáníNáhrada textu obrázkem a rozšiřuje možnosti jejich užití. V čem tyto dva způsoby vlastně spočívají?

Rollovery bez načítání fungují na principu obrázku na pozadí, který obsahuje stav pro neaktivní odkaz, :hover stav, případně ještě třetí pro aktivní odkaz. Podle momentálního stavu mění pozadí svou pozici (více v pixyho článku).

Náhrada textu obrázkem opět využívá obrázku na pozadí, jenž při zapnutých stylech a obrázcích zakrývá text a sám sděluje textovou informaci. Není-li obrázek dostupný nebo je-li vypnutý styl, text je viditelný (detailní popis v pixyho článku).

Doporučuji obojí nastudovat, protože v opačném případě následujícím kódům pravděpodobně nebudete moc rozumět.

Mým záměrem bylo vytvořit plně obrázková tlačítka bez preloadu a se skrytým textem. Zároveň taková tlačítka, aby při nedostupném obrázku nebo vypnutém stylu stále fungovala jako odkazy. Třeba se můj způsob bude někomu hodit.

Pro pozadí jsem si vytvořil obrázek široký 200 a vysoký 100 pixelů, který obsahuje dva stavy; vypadá takhle. Samotné tlačítko bude mít rozměr 200 × 50 px.

Teoretické řešení:

HTML
<a class="button" href="#">Button<span></span></a>

CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button:hover span {
background-position: 0 -50px;
}

Bohužel nefunguje v Internet Exploreru 5.x, ve verzi 6 chybuje. Takže jsem chvíli experimentoval a upravil styl do podoby funkční i v IE. Změna je vyznačena tučně.

Funkční řešení

CSS
a.button {
display: block;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}
a.button span {
display: block;
position: absolute; left: 0; top: 0; z-index: 1;
margin: 0; padding: 0;
width: 200px; height: 50px;
background: url('button.gif') left top no-repeat;
}
a.button:hover, a.button:hover span {
background-position: 0 -50px;
}

Viz příklad 1. Funguje bezpečně v IE 5+, Firefoxu i Opeře na PC (jinde jsem netestoval).

Více tlačítek

V praxi je většinou potřeba udělat speciální tlačítko pro každý jednotlivý odkaz. Úprava stylu je pak velmi snadná, spočívá ve vytvoření nové třídy a přepsání předchozího pravidla o adrese obrázku na pozadí.

HTML
<a class="button" href="#">Button<span></span></a>
<a class="button button2" href="#">Button 2<span></span></a>
<a class="button button3" href="#">Button 3<span></span></a>

CSS

a.button2, a.button2 span {
background: url('button2.gif') left top no-repeat;
}
a.button3, a.button3 span {
background: url('button3.gif') left top no-repeat;
}

a.button:hover, a.button:hover span {
background-position: 0 -50px;
}

Aby styl pracoval správně i v Exploreru, je nutné, aby byla definice pro „button2“ a „button3“ ještě před stylem pro „:hover“ stav. Podívejte se na příklad 2.

Aktivní odkaz

Teď už není problém přidat do stylu styl pro aktivní odkaz, třeba takto.

HTML

<a class="button button3 current" href="#">Button 3<span></span></a>

CSS

a.button:hover, a.button:hover span, a.current, a.current span {
background-position: 0 -50px;

Viz příklad 3.

Vertikální menu

Kvůli tomu, že byl odkaz s třídou „button“ formátován jako blokový prvek, řadí se tlačítka automaticky pod sebe. Vertikální menu lze vytvořit velmi snadno, postačí nastavit odkaz jako plovoucí.

CSS
a.button {
display: block;
float: left;
position: relative;
margin: 0; padding: 0;
width: 200px; height: 50px;
cursor: hand;
overflow: hidden;
}

Viz příklad 4.

Stylopisy jsou až na jednu výjimku validní. Tou je definice „cursor: hand“ opravující nepříjemnost Exploreru 5.x, který odmítá zobrazit u tlačítka „pacičku“ a zároveň nerozumí standardní vlastnosti „cursor“ s hodnotou „pointer“. Notoričtí vyznavači validního webu nechť tuto část stylu smažou a smíří se s textovým kurzorem u tlačítka ve starých Explorerech.

Jestliže máte nějaký návrh na zlepšení, podělte se o něj prosím v komentářích. Pokud mi chcete jen vynadat nebo oznámit, že něco podobného znáte už dávno, nedělejte to. Praktický výsledek použití tohoto postupu je k vidění třeba na mém webu.

Automatické webové nástroje jsou k ničemu

1. 12. 2005 | 18 komentářů

Docela mne zaráží, kolik lidí spoléhá na různé validátory a automatická udělátka pro web, která vyhodnotí správnost zdrojového kódu, vytvoří barevné schéma nebo změří kontrast zvolených barev. V internetových diskusích se stále objevují názory, které hodnotí kvalitu webu podle výsledku kontroly validátorem či podle dobrozdání nějakého on-line nástroje. Slovo nástroj jsem zvolil záměrně, protože poměrně přesně vystihuje účel těchto aplikací — jsou jen jedním z nástrojů, jak docílit nějakého efektu, splnit daný účel.

Osobně tyto aplikace moc v lásce nemám a k jejich použití se uchyluji jen ve zcela ojedinělých případech. Což o to, v případě validace zdrojového kódu se automatická kontrola vyplatí, ovšem například u zmíněných barev to už pravda být nemusí. Barvy nejsou matematika.

Vhodné složení barev může vytvořit určitou atmosféru, jejich vzájemné působení vytváří napětí nebo klid, kontrastní nebo monochromatický obraz, působí chladným nebo teplým dojmem… zkrátka složení barev určuje do značné míry výsledné působení grafického obrazu na diváka. Podle mého názoru se nejedná o věc, kterou by bylo možno dlouhodobě úspěšně automatizovat. V případě monochromatické grafiky snad ano, ale tady minimálně stejně dobře poslouží kterýkoliv kvalitní grafický editor. Kromě toho každý výtvarník může mít odlišný vkus a přistupovat k výběru barev odlišně. Proto nepřikládám názorům založeným na výsledku dosaženém v podobných nástrojích valného významu. Dobře vím, že se tato udělátka dají poměrně snadno oblafnout.

Poměrně oblíbeným nástrojem je Colour Contrast Check, který měří kontrast barev textu a pozadí. Funguje to jednoduše: do připravených políček vložíte hexadecimální kódy obou barev, nebo barvu namícháte pomocí připravených jezdců, a okamžitě vidíte výsledek. Ten může nabývat tří hodnot: NO!, Sort of a YES! (ne, více méně, ano). Udělal jsem si tedy malý test.

1. Vybral jsem extrémně hnusnou kombinaci barev (#E1FF00 a #D100FF), nastavil průměrnou webovou velikost písma (12 bodů) a nejpoužívanější font (Arial). Řádkový proklad jsem ponechal na výchozí hodnotě (cca 14 bodů). Výsledek je tristní. Z takového webu bych okamžitě odešel, protože delší text se absolutně nedá číst. Nicméně Colour Contrast Check nadšeně vykřikuje YES!, protože barvy podle něj mají dostatečný barevný a tonální kontrast. Podívejte se na výsledek.

Kontrast písma a pozadí

2. V experimentu mohu jít samozřejmě dál — použít web designery oblíbený font Georgia a vybrat nakloněný řez. Ještě lepší!

Kontrast písma a pozadí

Co z mého drobného experimentu vyplývá? Že se nevyplácí na tyto nástroje spoléhat a ohánět se jimi. Jsou jen a pouze pomocníky, kteří za určitých okolností mohou prospět našemu záměru. Každý tento nástroj vytvořil člověk. U zmiňované kontroly barevného a tonálního kontrastu tentýž člověk určil, od jaké hranice bude považovat barvy za dostatečně kontrastní. Kdybych uměl programovat a napsal si něco podobného sám, mohl bych tuto hranici samozřejmě libovolně změnit.

Kontrast je jen jednou z několika hodnot či vlastností písma, které je třeba brát při každé práci v potaz. Vinu nese i drobné písmo a těsné řádkování. V případě, že bych zvětšil velikost textu a řádkový proklad, stal by se text jistě mnohem čitelnějším. Ale to už je na jiné povídání.

A co vy a podobné nástroje? Rád si poslechu váš názor.

Autor

Martin T. Pecina, biblioman, bibliofil. V roce 2004 jsem zprovoznil typografickou příručku typomil.com (léta neaktulizováno), portfolio mám na adrese book-design.eu. Píšu o dýmkách na blogísek dýmkař.cz.

Typo 365

Typo 365 je v pořadí druhá ročenka „nejlepších“ textů o typografii, do které jsem přispěl dvěma články. Najděte v ní ale i příspěvky od osob mnohem povolanějších (namátkou Reza Abedini, Erik van Blokland, Veronika Burian, Matthew Carter, Tobias Frere-Jones a další).

Doporučuji

Radkovi Sidunovi se povedlo zrevitalizovat a zmodernizovat písmo Jiřího Rathouského, které milovníci typografie znají z knižní edice Gema z Odeonu. Alphapipe nabízí Briefcase Type Foundry.

Správa webu