Home   D2rozcestník   Median 2008   Odkazy   Archiv blogu 

Chaos Sanctuary

Chaotický redesign, nyní i s Comic sans!

Pondělí, 12. leden 2009   Webovitosti

O parodii na redesign, která se udála v Chaos Sanctuary, o webových fontech a o tom, jak to někdy vypadá divně.

Nejdříve k těm fontům. Ačkoli jsem původně uvažovala o použití SIFR, změnila jsem názor, když jsem našla tento průzkum zastoupení fontů na počítačích a operačních systémech - font survey. Vypadá docela čerstvě, poslední aktualizace je z prosince 2008 a je zde vidět, že některé fonty, které se běžně pro použití na webu nedoporučují, mají v jednotlivých operačních systémech poměrně vysoké procento výskytu, a v CSS se z toho dají sestavit zajímavé kombinace. Např Impact je skoro jistota u Windows i Mac OS. Na Windows mě překvapil vysoký výskyt písma Franklin Gothic Medium, a třeba Sylfaen mi neříkalo nikdy nic, ačkoli prý ho má 95% počítačů s Windows.

Další zajímavý článek o fontech a CSS vyšel na sitepoint.com - 8 Definitive Web Font Stacks.

Ze statistik návštěvnosti posledních měsíců loňského roku jsem zjistila, že skoro 85-87% lidí má Windows, 10% to tutlá, 2% má Linux, 0.5% Mac. 45% používá Firefox, 30% IE, 12% Operu, 1% Safari, Mozillu a zbytek jsou různé podivnosti. Fonty pro Windows by tedy mohly uspokojit většinu návštěvníků ale podíl té lišky zrzavé by mohl dělat problémy, protože některé fonty zbrazuje divně.

Vyzbrojena všemi těmito podezřelými statistikami jsem se tedy na webu fontově rozmáchla. Ale doma to nezkoušejte, tohle totiž nelze považovat za seriozní webdesign, protože je zde použit Comic sans, počet použitých fontů je větší než malý, kolem validity to ani neběželo (to až někdy), a celý vzhled je chaotický mišmaš grafických stylů , jak se na správnou Svatyni Chaosu sluší :-)

K Comic sans v hlavičce nemám co říci, vážená poroto, jen že mi to připadlo jako dobrý nápad.

Texty článků a komentáře pod články jsou Helvetica, aby si to užili ti šťastlivci, co to mají, a Arial, to je pro ty chudé příbuzné.

V nadpisu článků je použité písmo Impact, následované Arial Black a podle browserhots.org, se opravdu nachází na kdejakém windows, a zřejmě i na Mac (povedl se mi jen jeden screenshot) ale na Linuxu nebylo ani v jednom případu. Ačkoli je nutné pro Impact nadefinovat font-weight:normal, nevypadá to ani na tom Linuxu, kde se zvolí nějaký systémový sans-serif, tak špatně (screenshot linux-opera), protože písmo je dost velké. Při menší velikosti Impactu se písmo špatně zobrazovalo ve Firefoxu, a když není zapnuté vyhlazování písma ve Windows, je to pořád škaredě hranaté, chjo :-(

V bočních sloupcích je použité písmo Franklin Gothic Medium, následované Helvetica Neue, protože mi připadalo stejně velké (tedy stejně menší než Arial), v některých případech (u komentářů v bočním sloupci ) následuje Arial Narrow. Firefox má problém s tučnou variantou Franklin Gothic, některá písmena jsou slitá. Calibri bylo ještě o něco menší a ve Firefoxu ten komentářový sloupec vypadal rozplizle, a tak jsem ho nakonec nepoužila. Ptáte-li se, proč tam vlastně je jiné písmo, mám matný pocit, že hlavně proto, že tam být může.

Hlavičky H3 až H5 v textu (moc se tam nevyskytují) a některé nadpisy jsou patkové, aby se odlišily od textu, je tam Palatino Linotype, Palatino a Georgia. Nejlíp je to asi vidět tady.

Ta nadefinovaná písma jsou obsažená hlavně ve Windows a MAC, Linux jsem moc neřešila, protože jednak počet návštěvníků je dost nízký, druhak o písmech v Linuxu nemám páru, a třeťak, lidem, kteří si zvolí operační systém proto, že „má příkazovou řádku“, se pěknýma písmenkama stejně nezavděčíte. A navíc, ono to i tak vypadá čitelně, i když trochu jinak než ve Windows.

Grafika. Hm, to máte tak: jsou blogeři, kteří mají co říct a mají ty MYŠLENKY, které sdělují světu, tak těm stačí bílé pozadí a zabarvené záhlaví blogu. My ostatní holt plácáme na bložínky obrázky. Střídmost patičky neznamená, že bych snad prozřela, ale že mi došla inspirace, protože jsem si v neděli odpoledne bystře přepsala ostrou šablonu zkušebním nedodělkem, a nějak jsem to ukončit musela. Ale něco by to chtělo ... jen co mě to napadne ...

P.S. Už je tu i slibovaný handheld.css, tak jestli máte mobillní prohlížeč, ozvěte se, jestli to pomohlo nebo uškodilo :-)

24 Komentáře

Zobrazit komentáře jako (Lineární | Vláknové)

#1 David Grudl http://www.latrine.cz v 12.01.2009 04:20
Vypadá to výborně!

A ten černej Impact v titulcích článků, ten ti jdu hned krást :-)
#2 helljovany v 12.01.2009 08:12
mooc pěkný:-)
#3 manik v 12.01.2009 09:21
taky se mi to líbí, jen pár námětů:
- nemá to být hell wantS you? nejsem si jistej, ale pride mi to tak spravnejsi
- proc se nezobrazuji ty sidepanely, kdyz cte clovek konkretni clanek? myslim, ze kdyz tam jsou, tak to vypada lepe, neni tolik volnyho sedyho prostoru...
- jeste u komentaru, prijdou mi takovy chudy oproti zbytku, napadlo me jestli nepouzit do nich nekde taky oraznovou (zahlavi) nebo jinak barevne ozivit (dalsi font uz raci ne xD )

jinak se mi to taky moc libi a s myslenkou pouzit tyhle majoritni pisma sem si taky uz pohraval, nikdy sem ale nakonec nemel dost odvahy (a podlkladu), treba to ted konecne vyzkousim :)
#3.1 SuE v 12.01.2009 09:48
asi by mělo být "wants" a možná se k tomu i dokopu, mám to snad uložené ve vrstvách, tak to předělám

u těch komentářů - tam dost váhám, protože by velký kontrast mohl vadit při čtení, podstatný by měl být obsah komentáře, ne to záhlaví. Vlastně jsem to původně měla navržené jako inverzní ale pak jsem si prohlédla tuhle galerii komentářů, a tam je vidět spíše snaha o "kompaktní" chlívek pro každý komentář:
http://www.smileycat.com/design_elements/blog_comments/
#3.1.1 manik v 12.01.2009 10:00
To je taky pravda, jen mi to pak přijde strašne takový "utopený" a myslim, že by to ty komentáře oživilo a zároveň i zpřehlednilo, mám to tak radši, ale to záleží asi na vkusu no... :)

co ohledne toho sidepanelu?
a jeste ted v rychlosti jsem si vsim toho vyhledavaciho policka, mozna by vypadalo peknejs, kdyby nebylo nalepeny hned na border stranky, alespon minimalni margin-top? ty odkazy, tam prece nejakej minimalni maj taky...pak to tlacitko Hledej nevypada pekne, nesmis zapomenout, ze u kazdyho muze vypadat totalne jinak, coz pak nalepeny na (taky u kazdyho ruznou) listu browseru zpusobuje divny kombinace :D
#3.1.1.1 Slanec v 12.01.2009 15:29
Přimlouvám se za nějaké zvýšení kontrastu, ta hlavička je taková nijaká, při rychlém scrollu přes dlouhý komentář (pravda, moc jich nebývá, ale stejně) se musím alespoň myšlenkou soustředit na to koukat se po světlejším místě, které není tolik vidět, abych viděl další comment.

Neuvažovala jsi o využití nějakého patkového písma i pro obyčejný text článků? Já tedy proti stávající formě vskutku nic nemám, ale přecijen se alespoň říká, že by pro delší texty mělo být občas použito, jelikož se snázeji čte.

Jinak samosebou skvělá práce, oslavím to založením Enchant sorcky. :)
#4 Jiří Bureš http://www.jiribures.cz/ v 12.01.2009 10:14
Test na Windows Mobile podle všeho 6.

Opera 8.65 for Windows Mobile:
+ Stránka je čitelná.
+ Obsah je (skoro) hned nahoře a nic mě nenutí skrolovat.
- Písmo je dost malé (ale ještě to docela jde).
- Při zobrazení "na výšku" v hlavičce překrývá vyhledávací form skoro celou hlavní navigaci. Když přepnu "na ležato", tak se to mírně zlepší, ale pořád je hodně položek menu zakryto.

Internet Explorer:
+ Hlavní navigace je vidět komplet.
+ Text je větší, líp se čte.
- Na obsah se doroluji až po dvou "PageDownech".
- Jméno webu v hlavičce je na dva řádky (text Sanctuary) zasahuje 2/3 do světlé části.
- Větší okraje textu v hlavní oblasti => úzká textová nudle (20-25 znaků).
#4.1 SuE v 12.01.2009 10:39
ono to zobrazuje ten background obrázek v IE? nebo proč je potřeba scrolovat?
text záhlaví zmenším :-)
#4.1.1 Jiří Bureš http://www.jiribures.cz/ v 12.01.2009 19:28
> ono to zobrazuje ten background obrázek v IE?
Obrázek není zobrazen. Vidím černý box vysoký asi 4/5 výšky displeje a na rozhraní černé a světlé je jméno webu (to je první obrazovka).

> nebo proč je potřeba scrolovat?
Druhou obrazovku zabírá světle okrová prázdná plocha, dole na ní vidím text "Chaotický". Třetí obrazovka už konečně obsahuje text ("redesign, nyní i s Comic Sans!"). Tato třetí obrazovka končí textem "...někdy vypadá divně".
#5 Peca v 12.01.2009 10:18
Tak jsem na to juknul přes PDA HTC Cruise (IE) a co se týká textu článků, docela dobré, dá se to číst. Nicméně bych u textu zrušil/změnšil levý margin/padding, zbytečně se ubírá už tak malé šířky displeje PDA. U komentářů bych to zrušil také, vč. odsazení odpovědí, postupně z toho vzniká třípísmenový sloupeček :-). A nechal je využít plnou šířku displeje (jsou nějaké upozaděné asi na 1/2)
#5.1 SuE v 12.01.2009 10:36
jestli to používá ten handheld.css, tak tam jsem to zapomněla zrušit opravím večer, a taky tam změním pevnou velikost písma, to by mohlo pomoct

komentáře se dají přepnout na lineární
bohužel to odsazení je pro vláknové zobrazení nutné, jinak je to děsný zmatek
#5.1.1 Peca v 12.01.2009 10:54
Přepnutí - díky, tady jsem zblýskl jak vypadá hlavička a prostor pod hlavičkou v PDA (Internet Explorer):
http://www.inspirujmese.cz/Screen37.png
http://www.inspirujmese.cz/Screen38.png
http://www.inspirujmese.cz/Screen39.png
#5.1.2 fudoshin v 12.01.2009 20:52
to záleží na vkusu.mě se spíš chce prosit o větší odražení z obou stran :-)
#6 Pavel Buben http://www.illusio.cz v 12.01.2009 13:43
Nudim se v cekarne u doktora a tak si ctu ;-) Na ajfounu v Safari je to v pohode ;-) Cist se to da takze dobry.
#7 Nagaloni v 12.01.2009 16:08
tak se mi zdá že vidím jen ty comicy a to písmo z nadpisů jednotlivých článků...
#7.1 SuE v 12.01.2009 16:36
huh? šok!
kde? v čem?
#8 hodnej bajat Alex v 12.01.2009 19:37
Diablo's not dead!!
#9 fudoshin v 12.01.2009 20:36
no na tyhle věci jsem lama. vždycky, když začneš mluvit o práci (tvojí :-) tak úprkem rychločtení.ještě tak ty fonty nejsou pro mě úplně španělská vesnice.jinak správnej chaos a opravdu výrazná změna.ty kresbičky jsou pěkný.a taky chaotický.jak se sluší :-D
#10 fudoshin v 12.01.2009 20:40
dodatek - jenom nevím proč je v poslední době všude móda dělat všechno, pro mě, dadaisticky velký a rozpláclý...přijde mi to krok zpět a každopádně na úkor přehlednosti.viz např. aktuální centrum.cz oproti předchozímu...
#11 fudoshin v 12.01.2009 20:46
sry fakt nespamuju, ale když na to koukám pořádně znovu a potřetí, tak se mi nějak vybavuje v mysli, že když má něco každej, neznamená to kvalitu...viz pro mě spodek stránky. to se bavím obecně a k tvýmu stylu to docela pasuje, ale jinak mi to přijde amatérský, jak napsaný na klasickým psacím stroji (kterýmu ještě navíc snad dochází páska) :-)
#12 SuE v 13.01.2009 20:53
tak komentáře jsem trochu předělala, snad to bude vyhovovat (dejte ctrl+f5, jestli to nevidíte)

side panel u článků - ten jsem vyhodila právě kvůli tom, aby přístup na článek, pokud jdete třeba z RSS čtečky nebo z odkazů na weblogy.cz, byl rychlejší a aby to nerušilo. Asi to tam vracet nebudu, pokud nebud silný tlak vážených návštěvníků :-)

margin u hledání přidán

patkové písmo prý je na obrazovku méně vhodné než na tisk, tvrdí některé autority. Osobně taky preferuju bezpatkové, takže tak :-)

Patička se bude předělávat, jen co se dostaví inspirace

Mobilní přístup .. já to asi vzdávám, ty mobily snad ten handheld.css ignorujou či co, že já se s tím hmoždila :-(
#12.1 fudoshin v 14.01.2009 16:31
ty rámečky v diskusi to hodně zpřehlední.i ta barvička a provedení vůbec se mi moc líbí :-)
#13 SuE v 14.01.2009 21:19
tak jsem to trochu vyžlutila, když je ta zimní depréze ... :-)
#14 Nev v 16.01.2009 12:54
teta, kdo ti dealuje ten matros? Vypada dost kvalitne :-)

Autor neumožnil přidávat komentáře

Dál už to nevede, ale můžete se vrátit nahoru nebo proslídit archiv blogu nebo nakouknout do ďábelského fora nebo na odkazy. Kontakt: sue@centrum.cz TOPlist