Anketa: Na co se ještě ohlížíte při designu web? (diskuse)

[carnero]

Svůj web testuji ve Firefoxu 3 pod Linuxem a Firefoxu 3 pod Windows (kvůli fontům). Dále pak v Opeře Mobile 8.65 nebo Opeře Mobile 9.5 pod Windows Mobile (to zase kvůli mobilní verzi). Web je primárně na displeje se šířkou tak 900 px a více, ale zobrazí se asi na všem, co má nějaký displej a nějaký (x)HTML prohlížeč. Ale je to osobní web, tam je důležité aby to fungovalo hlavně mě. U webů na kterých pracuji si takové jednoduché zkoumání nemůžu dovolit - tam testuji většinou na typickém zástupci daného prohlížeče (tj. obvyklé IE, obvyklý FF, obvyklá Opera, obvyklé Safari).

[Fluttershy, yay!]

Co jsou ty obvyklé verze, smím-li se ptát?

[carnero]

Těma obyvklýma verzema myslím to, s čím chodí nejvíc uživatelů na daný web. Tj. když 80% uživatelů FF má FF 2.0.0.14, tak za obvyklou beru verzi 2.0.0.14. Nicméně nejsem kodér, takže je to spíše informace jen pro mě s tím, že to po mě ještě překontroluje profesionál, který to umí.

[pavlix]

Já bych se spíš zeptal na ty XHTML prohlížeče a MIME-type.

A případně zneužívání text/html mimetype pro xhtml dokumenty.

[carnero]

Já zneužívám... jsem moc línej, než abych nezneužíval.

[Toh]

Já dělám vycentrovaný sloupec o šířce necelých 800 pixelů a to z následujících důvodů:

Znamená to to, že když mám fajnovější DPI (což mám a hodně), tak uvidím na svém zobrazovacím zařízení nějaký úzký proužek?

[Fluttershy, yay!]

Jo a víš jak to řešit? Zvětšením písma v prohlížeči!

[Toh]

Zvětšením písma docílíš toho, že se ti třeba slovo sotva vejde na řádek a máš třeba v každém řádku nejvýše jedno slovo. Zkus si jít třeba na idnes a zvětšovat písmo. Šířka zůstává stejná.

[Fluttershy, yay!]

Text si přečteš (můžeš případně vypnout stylopis) a to je to podstatné.

[Toh]

Tak o čem tenhle blog vlastně byl?

[Fluttershy, yay!]

Anketa.

[pasmen]

To není podstatné. Alespoň ne vždy. Pokud máš webovou aplikaci postavenou na zobrazení tabulek, ve kterých se musí filtrovat/rychle hledat údaje, pak to, že text tam sice je, ale je rozházený je úplně na dvě věci.

[Fluttershy, yay!]

Tabulky se zobrazí i bez stylů, ne? Jinak je někde chyba.

[pasmen]

Bez stylů se ti zobrazí vše, nebo ne? (pokud pominu věci typu tooltipy, popup blbosti typu MooTools apod.)

[Fluttershy, yay!]

Troufám si tvrdit, že tooltipy by měly být v atributu title a brát se z něj.

[Fluttershy, yay!]

Znáš nějaké řešení? mi-width a max-width zatím nejsou plně podporovány.

[Filip Jirsák]

MSIE 6 má 25 % a stále klesá. A navíc i v něm lze docílit toho, že se chová jako by měl zadáno max-width.

[12345]

min-width a max-width dnes nepodporuje snad jen IE 6 a starší, na které ty čirou náhodou kašleš . Navíc se tyhle prohlížeče dají přesvědčit pomocí expression hacku.

[pavlix]

expression hacku.

Nač to?

Internet Explorer má conditional comments, k čemu nějaké pochybné techniky?

[Vin]

Jak dosáhnout vlastností max-width bez expression?

[pavlix]

Tuším, že explorer používá width téměř jako jiné max-width. Zbytek viz komentář na který reaguješ.

[pavlix]

Webovky s pevnou šířkou jsou dobré v tom, že je zvládne navrhnout i v celku průměrný webový grafik v čechách (rozuměj, člověk, který si někde sehnal kopii photoshopu a dělá grafické návrhy v něm, programu víceméně spíš určeném na fotky).

Nic proti pevné šířce nemám, pokud se majiteli webu líbí design podobný letáku, a pokud se to udělá dobře.

[pavlix]

Znamená to to, že když mám fajnovější DPI

Záleží taky, jestli myslíš tečky typografický nebo obrazovkový :D.

Já třeba do webovek zadávám velikost prakticky vždy v obrazovkových (výjimečně nezadávám vůbec, pokud se jedá o jednoduchý dokument).

[Toh]

dlouhé řádky se blbě (fakt, že jo --- teď tu mám Ábíčko na mamčině širokoúhlé R61 a trpím jak pes) čtou (a na velkých monitorech si lze ve slušných prohlížečích nazvětšovat písmo navzdory tomu, že z pohodlnosti používám velikosti písma v pixelech)

Neexistuje nějaké šikovné rozšíření do Firefoxu, které by umělo změnit šířku stránky aniž by se měnila velikost okna?

[cezz]

Neexistuje nějaké šikovné rozšíření do Firefoxu, které by umělo změnit šířku stránky aniž by se měnila velikost okna?

Mozno zapnuty sidebar s niecim uzitocnym? :)

[freshmouse]

Šířka bezpodmínečně do 1000 pixelů, ideálně i do 900.

[freshmouse]

... ale samozřejmě záleží na konkrétním projektu.

[Daniel Kvasnička ml.]

Obcas delam i sirsi nez 800px... ale jak se ted zacaly rozmahat UMPC, tak to asi zas zkrouhnu. Plne souhlasim s tim, ze extremne siroky text je necitelny. I panove z IBM ted zmenili design developerWorks tak, aby mel pevnou sirku.

Jinak testuju ve Firefoxu 2/3, IE 6/7, Safari, Midori (ma nekdo zmapovane, jak se moc lisi od Konqueroru?) a Opere. Podivam se na to taky v Epiphany, ktere je mym defaultnim prohlizecem. Ale to se od FF prakticky nelisi.

[Heron]

Nesnáším weby s omezenou šířkou (a ještě takhle blbě na px, ne na em).

[Daniel Kvasnička ml.]

Nesnáším weby s omezenou šířkou

Proc? Nerikej mi, ze se ti dobre cte text, co ma napr. vice jak 100 znaku na radek...

(tu namitku s em beru)

[Heron]

Jedna z killer feature je pro mě zoom stránky (CTRL+kolečko). Dříve se zvětšoval pouze font a pokud nějaký web měl natvrdo 800px, tak při sloupcovém layoutu jsi dostal 10 pismen na řádek. Když už to designer není schopný udělat dynamicky pro libovolnou šířku, tak alespoň definovat pomocí em - pokud se chce držet typografie a max 40 znaků na řádek, tak mu stejně nic jiného nezbude.

[Filip Jirsák]

Nesnáším weby s omezenou šířkou

Proc? Nerikej mi, ze se ti dobre cte text, co ma napr. vice jak 100 znaku na radek...

(tu namitku s em beru)

Maximální počet znaků na řádek se dá snadno omezit, a není nutné kvůli tomu určovat pevnou šířku celé webové stránky. Stačí třeba kontejneru s obsahem nastavit max-width: 100ex a je to. Web má plovoucí šířku, ale řádky nebudou delší než zhruba 100 znaků.

[Daniel Kvasnička ml.]

No jasne, ale proc to delat, kdyz na te strance neni tolik obsahu, aby se musela rozsirovat? To pak uzivatel bude mit na sirokouhlem monitoru uzky text, kolem dlouho dlouho nic a pak zbytky stranek (viz. maily v Gmailu napr. na 1680x1050 -- leve menu, mail, kilometr bile barvy, reklamy a prave horni menu). U webu s mene strukturovanym obsahem stranky (typicky blogy) proste nedava zadny smysl, aby ten web byl gumovy. Opravdu neminim menit sirku okna u prohlizeni kazdeho webu tak, aby se na to dalo koukat.

[Filip Jirsák]

Když se nastaví maximální šířka textu pomocí ex nebo em, půjde text dobře přečíst i na širokém monitoru (nebude tam řádek dlouhý 200 znaků), a zároveň se přizpůsobí i úzkému zobrazovacímu zařízení (třeba displeji obilního telefonu) – a uživatel pak nemusí s každým řádkem jezdit doleva a doprava. Nevidím žádný důvod mít pevnou šířku – na širokém monitoru máte někde úzkou nudli, na PDA nebo mobilu zase musíte neustále rolovat sem tam. K čemu to je?

[Daniel Kvasnička ml.]

No pak bych ale nastavoval dynamickou sirku s hornim limitem pro cely web, ato to neni na velkych monitorech roztahane.

(V idealnim pripade by ale stranka mela pro mobilni zarizeni bud nastavit jiny styl, nebo ho uplne vypnout.)

[pavlix]

Já nevidím ve velkých monitorech žádný problém, nikdo nikoho nenutí mít browser na fullscreen.

[Daniel Kvasnička ml.]

To si jako menis sirku okna browseru pokazde, kdyz je web moc roztazeny? Web, ktery te nuti jakymkoliv smerem menit sirku browseru, aby byl citelny, je spatny web.

[pavlix]

Neměním, mám ji pořád stejnou... takovou, aby se mi na weby dobře koukalo :D.

[Filip Jirsák]

To uz pak zalezi na konkretnim designu webu - ale urcite by mel byt kompaktni, tj. pokud se mi zuzi sloupec s textem, mel by se k nemu pripadny sloupec vpravo od nej primknout. Vetsinou bude nesmyslne, aby bylo prazdne misto uvnitr stranky.

[pavlix]

Důvod je v jednoduchosti práce grafika, který místo aby musel umět navrhovat weby, tak stačí, když použije svoje vlastnosti z navrhování letáků :D.

[Luboš Doležel (Doli)]

Přidávám se, na širokoúhlém displeji mám z takového webu jen úzkou nudli uprostřed.

[Luk]

Ony totiž širokoúhlé displeje jsou na web naprosto nevhodné. Buď má člověk úzkou nudli uprostřed, nebo má řádky (s malým písmem) roztažené tak, že je jejich čtení velmi únavné, anebo se (s velkým písmem) na obrazovku vejde jen několik málo řádků a při čtení se musí pořád scrollovat. Když se to otočí na výšku, je to zase moc úzké.

[Käyttäjä 11133]

Někomu vyhovují..

[Luboš Doležel (Doli)]

Mně to na AbcLinuxu vyhovuje

[Heron]

Mě také, prohlížeč mám v okně dosti širokoúhlém, fullscreen už je to pravda moc roztažený.

[freshmouse]

Souhlasím. V práci mám na šířku rozlišení cca 1700 pixelů a číst v tom webové stránky (roztažené na celou šířku) je hotová katastrofa. Na web mi plně vyhovuje 1280 pixelů.

[Heron]

Tento problém jsem vyřešil na šířce 1920px jednoduše. Bočním panelem v Opeře. Mám po ruce poštu a RSS a stránka dostane (při fullscreen) poměr stran 4:3.

[pavlix]

Na px ještě v pohodě... ale nedej bože, aby tam bylo em, to je jednotka, kterou jsem se naučil na webu nikdy nepoužívat.

[b022d]

Přesně, pevnou šířku layoutu dělat na em? COŽE? Čeho se tím má docílit? Em je pěkná jednotka, to ano, ale tak když chci změnit výšku řádku, aby byl text čitelnější - třeba na 1,2em.

[Filip Jirsák]

Docílí se tím právě toho, že je šířka daná počtem znaků na řádek. Tedy přesně toho, čeho chcete obyčejně u textu dosáhnout – počet znaků na řádek rozhoduje o tom, zda je text dobře čitelný, s počtem bodů zobrazovacího zařízení to nemá nic společného.

[carnero]

Já zase naopak. Nesnáším čtení metr dlouhých řádků. Ostatně i v novinách jsou sloupce... protože se to tak výrazně lépe čte.

[pavlix]

Jak souvisí wifina a vypínání stylopisu?

dlouhé řádky se blbě (fakt, že jo --- teď tu mám Ábíčko na mamčině širokoúhlé R61 a trpím jak pes) čtou

Prakticky každej grafickej prohlížeč umožňuje nastavit šířku stránky, pokud není tím webem vynucená.

Abclinuxu šířku stránky nevynucuje, takže je to udělaný nejlíp, jak to u webu s článkama jde.

Stačí chytnout myší například pravý okraj okna a nastavit šířku :). Zkus to ;).

[carnero]

A nic. S tím maximalizovaným oknem ani nehnu... :D btw: AbcLinux má boční sloupec, jiné weby mají dva sloupce, jiné zase ani jeden. Přetahovat okno s každým načteným webem je trochu oser, ne?

btw: Beztak egoisticky čtu jen svůj web, který mám nastavený ideálně :)

[petr_p]

Existuje rozšíření CSS zavané media queries, které umí aplikovat stylopis na základě velikosti průhledu, rozlišení, počtu barev atd. Umí to Opera, Mozilla má zanesený požadavek na přidání funkce.

Nicméně ani to není ideální a chtělo by to jakési plovoucí bloky, u kterých by se určilo optimální rozložení a v případě potřeby by se samy přeuspořádaly tak, aby stránka zůstala použitelná.

[Fluttershy, yay!]

V Opeře si vzpomínám, že jde hýbat s velikostí panelu v okně.

[pavlix]

To zní hezky.

[Fluttershy, yay!]

Okno mám maximalizované a nehodlám jeho velikost měmit.

Ve škole je MSIE 7 a nic jiného, žádná možnost volby. Navíc se v něm styly nastavují, pokud vím, v nastavení a to máme ve škole, jak taky jinak, zablokováno. Ale letos bychom už měli mít ve škole wifinu, takže přišel čas udělat MSIE 7 pá pá.

[Kvakor]

Osobne bych pevnou sirku nepouzil, ale vzhledem k tomu, ze ja weby nenavrhuju (to delaji grafici dle prani zadavatele), delam temer jen weby s pevnou sirkou (driv pro 800px, dnes temer jen pro 1024px, dokonce jednou i pro 1280px). Pokud chce klient neco, co je preplacane (z principu neroztahovatelnou) grafikou, ono to bouhuzel jinak skoro nejde.

K testovani webu: osobne testuju ve vsem moznem - pod Windows v IE 5.0, 5.5, 6.0 a 7.0, Opere (posledni verze), Firefoxu (zatim dvojkova verze) a Safari (posledni verze), i kdyz ty prvni dva starobyle Explorery jsou jen na test typu "at se to tam alespon kompletne nerozsype".

Vyvyjim ve Firefoxu a vetsinou staci znat tech par pravidel jak nedrazit Explorery a prace na uprave pro ostatni prohlizece je pak snadna. Ovsem pokud narazim na nejaky z techj exotictejsich MS IE bugu (ktere jsou i v sedmicce), tak to obcas znamena i mohutne upravy celeho layoutu, protoze existuji chyby a situace, na ktere zadny workaround (mimo prekopani stranek) neexistuje (napr. znama chyba s interpretci z-indexu v relativner pozicovanych objektech, stale strasici i v IE 7)

Pokud chci mit opravdu jistotu, nebo delam neco pro technicteji orienotvane, kouknu na to i z Linuxu (Knopix Live CD) ve firefoxu a Konqueroru, pripadne i z domova (64bit Iceweasel a Opera). Funkcnost pro textove prohlizece kontroluju v Linksu, pakrat jsem dokonce pouzil i IE 3.0 (ten styly neumi vubec).

Jediny exoticky, ale vyskytujici se desktopovy prohlizxec, ktery nemam nijak podchyceny, je ponekud bizardni IE 5.5 z Macu (majici zcela jine podivnosti nez ostani IE), ale ten snad uz nema cenu dnes testovat ... Problematicke je i testovani v mobilnich zarizenich, tam mam v dispozici pouze mobilni Operu, ale zase navrhuju stranky tak, aby bez CSS chodili pokud mozno uplne na vsem.

Pokud bych mel vybrat jen minimalni sadu, tak je to Firefox 2.x, Opera (nejnovejsi) a MS IE 6.0 a 7, pokud to bude chodit v tehle, je to a) za vodou pro vice nez 95% lidi a b) ostatni prohlizece se chovaji budto temer standardne (Konquere, Safari, rozlicne mozilloidy), nebo jsou beznadejne zastarale (IE 5.5 a hosrsi) a nema cenu pro ne web separatne upravovat (tedy pokdu si to zakaznik vyslovene nepreje) nebo jejich uzivatel s omezenou funkcnosti tak nejak uz pocitaji (mobilni zarizen, textove browsery ...). I kdyz takovy Links ma porad smysl jako jednoduchy test prolezatelnosti webu roboty.

[Luk]

Pokud chce klient neco, co je preplacane (z principu neroztahovatelnou) grafikou, ono to bouhuzel jinak skoro nejde.

Jako největší problém vidím to, že je stále hodně lidí, kteří mají prohlížeč bez podpory SVG. Se SVG by nebyl problém udělat mnoho grafických prvků roztahovatelných - ale kvůli MSIE 6 to nejde.

[Kvakor]

Ano, teoreticky by sla pouzit vektorova grafika, bud SVG, nebo treba kresleni pres Canvas (pry to jde i v Explorerech, i kdyz jen pomoci nejake cerne magie). Bohuzel ani to nepomuze v okamziku, kdy je layout udelany z bitmapovych obrazku, typicky z fotek, ktere jsou prakticky nevektorizovatlne - to uz by se rovnou mohly roztahovat bitmapy pres Javascript (jednou jsem to videl v akci a des bes!).

U stranek, kde je to opravdu potreba, se to ted resi Flashem, ktery osobne povazuju za o rad vetsi zlo nez bitmapove obrazky v pevnem layoutu, ale je nutne uznat, ze stejne jako s videem, je to dnes (bohuzel) jediny zpusob, jak delat na webu vektorovou grafiku tak, aby to fungovalo skoro vsude.

[Luk]

Bohuzel ani to nepomuze v okamziku, kdy je layout udelany z bitmapovych obrazku, typicky z fotek, ktere jsou prakticky nevektorizovatlne - to uz by se rovnou mohly roztahovat bitmapy pres Javascript (jednou jsem to videl v akci a des bes!).

Těch metod je víc. Lze to řešit například tak, že se ty bitmapy škálují z velkého rozlišení na menší už na serveru (podle informací detekovaných JavaScriptem) přes GD nebo ImageMagick. Pak to vypadá na pohled docela rozumně, ale je to čuňárna.

U stranek, kde je to opravdu potreba, se to ted resi Flashem, ktery osobne povazuju za o rad vetsi zlo nez bitmapove obrazky v pevnem layoutu

Já též.

je nutne uznat, ze stejne jako s videem, je to dnes (bohuzel) jediny zpusob, jak delat na webu vektorovou grafiku tak, aby to fungovalo skoro vsude

Je to bohužel tak. Bojuji proti Flashi, jak mohu (na všech frontách), ale když ho vyhodím oknem, vrátí se dveřmi.

[petr_p]

Je třeba podotknout, že bitmapy jsou často výsledkem rasterizace počítačem generovaných vektorových obrazů. Skutečná fotografie tam obvykle figuruje jen jakýsi podkres nebo doplněk, u nějž deformace nebo obtížná čitelnost je přijatelná nebo dokonce záměrná.

Popravdě řečeno mám naprosto zbytečné a nesouvisející infografiky plné zuby. Všechny ty ilustrační obrázky, štastné a veselé mladé obličeje a náladově osvětlené zubní pasty mi přijdou trapné.

[Luk]

Všechny ty ilustrační obrázky, štastné a veselé mladé obličeje a náladově osvětlené zubní pasty mi přijdou trapné.

Jenže na většinu lidí to bohužel funguje. Strohý, ryze technicky působící web hned zavrhnou jako nudný, přestože je jeho obsah třeba i řádově kvalitnější než u webu plného pestrých barev a rozjuchaných obličejů.

[Kvakor]

Strohý, ryze technicky působící web hned zavrhnou jako nudný, přestože je jeho obsah třeba i řádově kvalitnější než u webu plného pestrých barev a rozjuchaných obličejů.

Jo, to znam, kdysi po mne jeden zakaznik chtel, at mu to navrhnu sam i grafiku (ja delal vse ostatni, mimo psani textu, ty uz mel) - mel puvodne vlasniho grafika, ale ten se mu nelibil (nechal si od nej jen logo). Kdyz potom stranky videl, tak prohlasil presne o same - ze je to sice po funkcni strance perfektni, ale ze tam chybi zive barvy(*), hezke obrazky a ze je to pry cele takove mrtve ...

*Premyslim, kde se tento termin vyskytuje - odhadl bych to na instalator WinXP. Stejne nevim, co si pod tim predstavuji, jedine zive barvy jsou prece Huluvu, superinteligenti odstin modre z Adamsova Stoparova pruvodce a pak ta blize nepojmenovana mimozemska obludnost z Lovecraftovy Barvy z vesmiru

[freshmouse]

Jestli mě něco sejří, je to slovo INFOGRAFIKA.

[Luk]

Infografika je grafika, která nese informaci. A je v pořádku. Co v pořádku není, je když někdo říká "infografika" něčemu, co žádnou informaci nenese a má to za cíl pouze působit na emoce.

[freshmouse]

Mně vadí čistě to slovo. Když nějakým nešťastným způsobem zavítám na Aktuálně.cz, kde mají nadpis a pod tím (místo popisu článku) jen nápis INFOGRAFIKA (s Caps Lock), tak se vždy začnu významně poohlížet po provazu a vysoké větvi...

Nejvíc mě ale se svou "infografikou" dostal iDnes, kde byl k článku přiložen rozsáhlý obrázek (diagram) popisující vztahy mezi lidmi v případu Barbora Škrlová...

[Miloslav Ponkrác]

Já hlavně mírně ignoruji puntičkářská webová dogmata, z nichž 90% nemá jiné opodstatnění, než to, že "stokrát opakovaná lež se stala pravdou".

Pokud dělám web, tak se především soustředím na UŽIVATELE webu, a na CÍL webu. Cokoli jiného je druhořadé, aneb maximálně prostředek pro realizaci tohoto cíle.

Pokud budu dělat komerční web, bude to jiné, než nekomerční. Pokud budu dělat web, který má vyniknout grafikou, zvolím spíše pevnou šířku, pokud textem, třeba proměnnou. I šířku, na kterou se web dělá je od toho, že nejsou jenom monitory, ale spousta lidí čte stránky na mobilech, a také je třeba vzít do úvahy, že šířka obrazovky v pixelech se nikdy nerovná šířce okna, ve které se zobrazuje Vaše stránka. A čím větší rozlišení má monitor, tím větší pravděpodobnost, že nebude mít část browseru s obsahem roztaženou na celou šířku.

Je hloupost dát obecný návod, jak něco dělat. Nebo snad Vy neočekáváte od každého webu něco jiného? Web o hackování v terminálovém stylu s černým pozadím a zeleným písmem je zcela v souladu s tím, co lidé čekají. Takový web je snadné udělat roztažitelný. Ovšem kdybyste stejný web viděli u grafického studia, kterému chcete dát zakázku, na 99,999% jim jí nedáte. Atd.. A taky to je.

V zásadě platí, že web, jehož obsah stojí za spláchnutí do WC (tedy nic na něm není, či je obsah naprosto neužitečný) je k ničemu, i kdybyste ho graficky vyšperkovali do podoby jaké chcete.

A také nepřidělávejte si práci, kde nemusíte. Spousta věcí, které by se "měly" používat špatně fungují, či vůbec. Jinak testuji v IE6 a FF3 a no problem.