Nový design webu (diskuse)

[Lukas]

nápadité, leč nudné

[Filip Jirsák]

Ano, uhádl jste, tohle je přesně ten důvod, proč si pořizuji velké monitory – když si prohlížím nějakou webovou stránku, zajímá mne hlavně ta velká bílá plocha okolo. Vlastní obsah ať se klidně krčí někde v rohu, vždyť je nepodstatný… A dalo by se pokračovat dál a dál, ve výsledku bych před to "použitelný" určitě doplnil "ne-". Bohužel

[Fluttershy, yay!]

Při 800 na 600 je to přes celé . Ne, vážně: šlo mi o vzhled, rád dělám pružný layout přes celé, ale on je pak takový "nudný" (zlí jazykové mi to řekli i do očí).

Ohledně použitelnosti jsem zkoumal, jestli uživatel najde menu. Našel.

Bez Javascriptu to funguje, bez Flashe taky.

A vůbec, když ti to vadí, vypni si CSS.

[Käyttäjä 11133]

Ty máš nápady, to se musí nechat!

[Robert Krátký]

pružný layout přes celé, ale on je pak takový "nudný" (zlí jazykové mi to řekli i do očí).

Zlí jazykové mají patrně pocit, že nejlepší je jejich layout, který začíná

<table width="800">

Takže se na zlé jazyky vyprdni.

Btw, nápad je to zajímavý, ale dost matoucí. Menu sice člověk nakonec najde, ale až po té, co chvilku myší šmejdil a klikal na File Edit atd.

[Fluttershy, yay!]

Zlí jazykové takoví: viz [redacted].

Já je naučil CSS a PHP a oni na mě takhle! Teda Radim a toho jsem nic neučil.

[Luk]

Nikdy se nezavděčíš. Buď je pevná šířka a je to při určitém rozlišení vzhledem k monitoru příliš malé, případně velké. Nebo je šířka pružná, ale pak pokud je písmo stále stejné, na velkých monitorech vycházejí únavně dlouhé řádky. Nebo se mění i velikost písma, ale pak to koliduje s rastrovými grafickými elementy a obrázky (působí to divně). Když budeš tyto obrázky škálovat, bude to bída. Pak ještě můžeš udělat grafiku jen v SVG (a fotky nechat být nebo škálovat) - pak to sice vypadá dobře, ale některé prohlížeče to nezobrazí. Vyber si

[Filip Jirsák]

Proč by vycházely únavně dlouhé řádky? Když řeknu, že chci na řádku maximálně zhruba 60 znaků, tak můžu stránku zobrazovat třeba na roli papíru, a řádek delší nebude. Kouzelná slůvka: CSS a max-width.

[Fluttershy, yay!]

Která neplatí v MSIE 6, (druhém) nejrozšířenějším prohlížeči.

[Filip Jirsák]

Ale dá se tam úspěšně emulovat přes expressions.

[Fluttershy, yay!]

Hackování je také skvělé, ale co formality á la validita?

[Honza Jaroš]

To si holt musí autor vybrat.

Pokud vás to trápí, ukryjte odkaz na separátní stylopis pro MSIE do podmíněného komentáře. Ostatní prohlížeče a validátory to budou ignorovat (neboť to bude podle standardů pouhý komentář v kódu), ale MSIE dostane, co bude třeba.

[Filip Jirsák]

Formality jsou formality. Důležité je, aby stránku pokud možno správně zpracovalo co největší množství současných i budoucích prohlížečů. Formální validita je pomůcka, jak toho dosáhnout, nikoli posvátná kráva. V tomto konkrétním případě se bavíme o CSS, který je možné naservírovat pouze pro MSIE. Takže HTML i CSS pro normální prohlížeče může být plně validní, a k CSS pro MSIE se dostane pouze MSIE. Navíc expressions jsou v CSS taky plně validní, pouze nesplňují žádný z levelů, které dnešní prohlížeče umí, ale nějaký vyšší (dosud, a asi nikdy, nevydaný). A s tím musí umět prohlížeče zacházet. CSS je totiž od začátku stavěno jako plně dopředu kompatibilní, takže pokud má CSS správnou syntaxy, musí si s ním prohlížeč poradit, i když bude obsahovat pro něj neznámé atributy nebo hodnoty.

[andree]

koho trapi IE...

[Fluttershy, yay!]

I mě občas.

[happy barney]

tak ho nepoužívajte, keď trápi

[Fluttershy, yay!]

Já ho nepoužívám (byť ve škole je jen MSIE 7, Firefox jsem tam stejně narval). Ale půl populace jej používá.

[andree]

to je ale chyba tej populacie...

[Luk]

Tak nebudou řádky únavně dlouhé, ale bude vpravo/vlevo/po stranách volné místo. Není to tedy řešení, je to převedení na svého druhu první variantu.

[Filip Jirsák]

Je trochu rozdíl mezi prázdným místem okolo úzkého sloupce textu, který se špatně čte a kterým musím posouvat, a prázdným místem okolo textu, který se dobře čte – a místo je prázdné prostě proto, že tam není co zobrazit.

[Luk]

Tomu nerozumím - jaký je rozdíl mezi tím, když se celý design udělá na fixní šířku (třeba 770 px) a text se zobrazuje uvnitř, anebo když se udělá design pružný (čímž se šířka roztáhne třeba na 1570 px) a u textu v něm se omezí šířka tak, že je řádek široký oněch 770 px?

Podle mě je to stále tentýž problém - liší se to maximálně v tom, že v prvním případě bude volné místo kolem celého, kdežto ve druhém případě jen kolem textu, což je esteticky jednoznačně horší.

[Filip Jirsák]

Rozdíl je v tom, jestli se design udělá na fixní šířku 770 px, nebo se udělá design pružná s šířkou textu třeba 70 ex (70 znaků). To první se bude špatně číst komukoli, kdo nemá nastaven stejný poměr velikost fontu / DPI stejný, jako autor webu. To druhé se bude číst dobře většině populace, která je na čtení textu o určitém počtu znaků zvyklá.

[Luk]

To sice ano, ale nic to nemění na tom, že je to jen jedno špatné řešení z řady špatných.

[Filip Jirsák]

Já tedy vidím výrazný rozdíl v tom, zda čtu text, který má 60 znaků na řádku a čte se dobře, nebo text, který má 6 nebo 600 znaků na řádek a čte se špatně. V tom prvním případě můžu sice zlepšovat ještě třeba tvar písma nebo vyhlazení, ale to už s tvorbou webu nemá mnoho společného. V tom druhém případě je co zlepšovat, aby se text stal vůbec použitelným. Tedy to první sice není ideální, ale je výrazně lepší, než to druhé.

[Luk]

Jenže ono to, že ten text bude striktně 60 znaků na řádku, může v důsledku znamenat také to, že se (třeba při třísloupcovém designu) část stránky dostane mimo viewport a bude se muset horizontálně scrollovat, což je také špatně. Pokud to nebude striktní, tak bude zase při menším rozlišení znaků méně, a to třeba i dost podstatně.

[Filip Jirsák]

Pokud bude těch znaků méně při nízkém rozlišení, znamená to, že se jich víc na šířku obrazovky nevejde. A to není problém, se kterým by mohl webdesigner něco udělat (a už vůbec to nespraví fixním layoutem). Tedy pokud nechce dát na web nabídku, že každému, kdo si řekne, koupí lepší monitor

[Luk]

Jenže o to tady celou dobu jde. Při návrhu webdesigner musí brát v úvahu šířku monitoru (resp. rozlišení) u cílové skupiny. Pak se teprve může rozhodnout, kolik sloupců může použít, aniž by to mělo nepříjemné dopady na čitelnost. Když se rozhodne udělat sloupec jen jeden, pak to může znamenat, že na velkém monitoru bude úzký, aby řádky nebyly příliš dlouhé. Když naopak zvolí třeba tři sloupce, při malém rozlišení se tam příliš znaků nevejde.

[Filip Jirsák]

Jenže ve zde diskutovaném případě rozhodně není problém v tom, že by na webu bylo tolik informací, že by byl problém vtěsnat je na malý monitor. Pořád je velký rozdíl v tom, pokud se mi při velkém rozlišení zobrazí sloupec široký 70 znaků a vedle prázdné místo, protože by se víc znaků na řádek špatně četlo – a mezi tím, když se mi na velkém rozlišení zobrazí sloupec široký 10 znaků a vedle prázdné místo, protože autor nastavil šířku v bodech a nepočítal s tím, že můžu mít nastavené velké písmo. Navíc dnes se stále nepoužívají na webu 2 nebo 3 plnohodnotné sloupce textu (protože to prohlížeče neumí buď vůbec, nebo špatně), ale jeden sloupec textu plus jeden nebo více sloupců doplňkových (navigace apod.) Se šířkou (případně pozicí) těchto sloupců se dá zpravidla manipulovat, a tyto sloupce tedy mohou buď využít nevyužité místo okolo hlavního textu, nebo hlavnímu textu naopak udělat místo. V prvním případě (při vysokém rozlišení) tedy mám vše na jedné obrazovce a nemusím skrolovat, ve druhém případě (nízké rozlišení) mám na první obrazovce to nejdůležitější a text má dostatečný prostor.

Webdesigner navíc moc nemůže brát do úvahy šířku monitoru, protože jeho web se může zobrazovat na displeji mobilu i na širokoúhlém LCD panelu. Použitelný by měl být pokud možno na obojím. Se současným CSS to není zrovna jednoduché dosáhnout, ale rozhodně lepší výsledky dostane použitím proměnné šířky layoutu omezené minimem a maximální délkou řádku, než jedním obrázkem na pozadí, do kterého se musí všechno vejít.

[Luk]

Webdesigner navíc moc nemůže brát do úvahy šířku monitoru, protože jeho web se může zobrazovat na displeji mobilu i na širokoúhlém LCD panelu.

Mobily, které jsou schopny zobrazit např. jen 20 znaků na řádek, bych příliš v úvahu nebral. Lepší je pro ně vytvořit vlastní šablonu pro médium handheld (což má i další výhody) - i když nevím, do jaké míry to umí prohlížeče v mobilech správně použít.

rozhodně lepší výsledky dostane použitím proměnné šířky layoutu omezené minimem a maximální délkou řádku, než jedním obrázkem na pozadí, do kterého se musí všechno vejít

Jde o to, co je cílem. Pokud je cílem, aby se to vešlo do obrázku, musí se to tam vejít (když si to zákazník přeje a nechce ustoupit). Není to samozřejmě dobré, ale často se opravdu vybírá jen ze skutečně špatných řešení to nejméně špatné.

[freshmouse]

Samá pozitiva a soc. jistoty...

[Algi]

tak přesně s tímhle taky souhlasím. proč je to tak malé? protože autor neumí udělat layout stránky tak, aby se rozšiřoval podle rozlišení. typický problém: "Optimalizováno pro ..."

btw, jestli chceš používat Mac-like dekorace, tak si prosím tě přehoď pořadí tlačítek v rámu okna. tohle vypadá s prominutím trapně...

[Fluttershy, yay!]

proč je to tak malé? protože autor neumí udělat layout stránky tak, aby se rozšiřoval podle rozlišení. typický problém: "Optimalizováno pro ..."

To chceš udělat několik pozadí a měnit je Javascriptem? Díky, nechci.

btw, jestli chceš používat Mac-like dekorace, tak si prosím tě přehoď pořadí tlačítek v rámu okna. tohle vypadá s prominutím trapně...

To v Gnome není tak snadné.

[Filip Jirsák]

To chceš udělat několik pozadí a měnit je Javascriptem? Díky, nechci.

Ne. Jediné rozumné řešení je žádné takové pozadí nepoužívat. Ostatně dělat vnější rámeček kolem celé webové stránky je nesmysl, ten rámeček už vám udělá webový prohlížeč. Takže jakýkoli další rámeček je jen plýtváním místa. Bohužel udělat web "rámeček v rámečku" je stále oblíbené, na první pohled to vypadá líbivě. Do té doby, než máte web začít používat, nebo než web opustí grafikův editor a je nutné do něj dostat skutečné texty. Pak se ukáže, že design webu, který by se náramně vyjímal vytištěný a pověšený na zdi, se pro praktické použití moc nehodí.

[Fluttershy, yay!]

Tenhle web není určen k tomu, aby nesl velké myšlenky. Je to moje stručná prezentace a řekl bych, že to plní.

Wikipedii, nebo nějaký webzin bych do takového layoutu ani náhodou necpal.

[Algi]

To chceš udělat několik pozadí a měnit je Javascriptem? Díky, nechci.

No, asi máš pravdu. já bych se s tím taky moc nemazal:)

To v Gnome není tak snadné.

stačí upravit v gconf-editoru: /apps/metacity/general/button_layout

[Fluttershy, yay!]

Díky.

[Lu-Tze]

No originální je to v tom, že to narozdíl od těch otravných reklamních popupů nenapodobuje windows.

[Lukas]

No originální je to v tom, že to narozdíl od těch otravných reklamních popupů nenapodobuje windows.

+1. Ale jako nápad to není špatný. Ale když už, tak bych možná místo screenu okna, hodil rovnou screen celé pracovní plochy GNOME/KDE nebo co používáte.. Aspoň by tam nebylo tolik bílého místa.. Teď mě tak napadá.. NIC sem neřek! Zapomeňte na to. Du to vyzkoušet

[Fluttershy, yay!]

Problémem je rozlišení klienta ve vztahu k rozlišení pozadí.

[andree]

+a vobec nemam rad weby, ktore sa snazia tvarit ako "aplikacie"... u freemailov a pod. to pochopim, ale homesite v tvare okna... aspon ze ten obsah nie je v frame :o))

[David Heidelberg]

Vypadá to pěkně ale praktický to moc neni

0K!AS

[freshmouse]

Já myslím, že samotného tě to omrzí.

[eXces]

No nevím, prvně jsem kliknul na ty tlačítka v pravém horním rohu, potom klasicky na to menu (File, Edit, View, ...), když to nic neudělalo, zkusil jsem tu navigaci, kterou jsem předtím ignoroval, protože měla natolik odlišnou barvu (a nehodící se) od zbytku webu, že jsem myslel, že je to nějaká reklama. No nic. Je to bída, ale nějak se začít musí.

Minule si mi nevysvětlil co je ona záhadná chyba s float v IE, tak mě vlastně napadá, proč to sem píšu... Zkus to menu předělat na seznam. Jestli to taky není chyba v IE teda.

Jinak bych nedělal pevnou výšku, ten scrollbar uvnitř nevypadá dobře.

[Fluttershy, yay!]

No nevím, prvně jsem kliknul na ty tlačítka v pravém horním rohu, potom klasicky na to menu (File, Edit, View, ...), když to nic neudělalo, zkusil jsem tu navigaci, kterou jsem předtím ignoroval, protože měla natolik odlišnou barvu (a nehodící se) od zbytku webu, že jsem myslel, že je to nějaká reklama.

Proto jsem to zesvětlil, ale budu muset víc. Reklama takhle? Ono je to výrazné, aby to kontrastovalo s grafikou a tudíž aby šlo poznat, že to je podstatné. Reklama mě fakt nenapadla.

Minule si mi nevysvětlil co je ona záhadná chyba s float v IE, tak mě vlastně napadá, proč to sem píšu... Zkus to menu předělat na seznam. Jestli to taky není chyba v IE teda.

Zapomněl jsem na to. Když dám prvek1 a pod něj (v kódu) prvek2, pak dám prvek1 odplavat (odfloatovat) doprava a prvek2 dostane pravý okraj (margin). Prvek2 se v MSIE (jinde ne) objeví pod prvkem1 jakoby měl čekat (clear: both), ač to po něm nikdo nechce.

Jinak bych nedělal pevnou výšku, ten scrollbar uvnitř nevypadá dobře.

Pak bych musel řezat obrázek, což nechci. Nebo by to přetékalo, což nechci. Nebo by se to neukázalo, což nechci.

[eXces]

Právě reklama se často nehodí do stránek vizuálně, takže to co se tam nehodí moje oči při zběžném prohlédnutí odfiltrují

Díky, to je zajímavý, až budu mít čas, tak se na to podívám.

BTW právě ořezem obrázku nic neztratíš a naopak ušetříš nějaká ta přenášená data uživateli.

[Robo]

To je na rozlisenie 640x480 alebo menej? :)

[Fluttershy, yay!]

Ne, více než 640 na 480.

[peto]

Neviem co proti tej velkosti mate, je dokazane, ze text v stlpcekoch sa cita rychlejsie (napr. noviny..) .

[paranoiq]

nefunguje menu a tlačítka! :)

[Jardík]

Než jsem našel menu a zjistil, že je to ten modrej humus bijící do očí na vybledlém pozadí ... mně osobně se ty stránky zdají příšerné, ale co člověk, to názor. Nechte si to ohodnotit třeba na intervalu.

[Fluttershy, yay!]

Na ten bulvár, kde píše i Hulán už ani nepáchnu. To radši diskuse na JPW, tam nejsou kreténi á la Hulán (no comment), či Málek (viz cenzura na Intervalu), ale je tam třeba Dero, nebo DoubleThink.

[happy barney]

Pozadie by stačilo rozrezať, jeden float left, druhý float right, a človek má hneď rámček. Nevraviac o tom, že zväčšením písma to nahodí nejaký scrollbar, ako keby browser nemal svoj vlastný. Celkovo za 5-.

[juraj-bit]

Klikám ako blbec na to horné menu a ono to nič nerobí :D

[Daniel Kvasnička ml.]

To nefungujici menu je prohresek proti pouzitelnosti jako krava...vetsina lidi bude IMHO zkouset jako prvni prave to. A maly to je zbytecne, k tomu se pridavam taky. Ale jinak to vizualne neni tak hnusny

[Fluttershy, yay!]

Zrovna ty položky menu se tam tak hodí, navštívím osobní stránku a z položek menu okamžitě vybírám: File, Edit, View, History, Bookmarks, Tools, Help. Polovina z toho je nesmysl, navíc na osobním webu v češtině.

[Daniel Kvasnička ml.]

Jenze presne takhle bezny Franta nepremysli, s tim se smir Vidi menu, instinktivne klika, protoze to tak v podobne vypadajicim prostredi vzdy funguje.

[Filip Jirsák]

Proč by tak taky běžný Franta měl přemýšlet? Pokud k nějakým informacím přibalím balast, který vypadá jako informace, je to rozhodně chyba moje jako autora. Design znamená mimo jiné zařídit, aby danou věc člověk mohl používat s nejmenší námahou, u webové stránky tedy mimo jiné to, aby nemusel přemýšlet o tom, co na webovou stránku patří a co tam nepatří, ale stejně to tam je.

[Fluttershy, yay!]

BFU má taky rád barvičky, animace, Flash, Javascript, [frontpíč],... Alespoň tak vypadají jeho pokusy v rámci tvorby webu. Ne všichni jsou pravda takoví.

Důležité je, kam web míří. Pro stránky ministerstva je použitelnost a přístupnost mnohonásobně důležitější než design. Pro e-shop je použitelnost a přístupnost také důležitá. Pro osobní stránky je důležitá sdělená informace a případně i design, použitelnost ani přístupnost není dramaticky důležitá (když už, tak si mohou vypnout CSS).

[Honza Jaroš]

(když už, tak si mohou vypnout CSS)

Běžný uživatel netuší co je CSS, takže ani neví, že se dá vypnout a už vůbec nemá ponětí jak na to.

[Fluttershy, yay!]

Jeho chyba . Mělo by se více propagovat "View - Page style - No style" ve Firefoxu. Uděláme kampaň "Špatný vzhled stránek? Třikrát klikněte a přečtete si, o co jde."!

[Daniel Kvasnička ml.]

S tim vsim ja souhlasim, vsak taky muj prispevek byl kritika jeho pristupu

[Jardík]

Odkaz na to metacity téma by nebyl?

[Fluttershy, yay!]

Tady.

[kotyz]

je to zbytecne maly.

[stafan]

originální a celkem i pěkný, jen bych to ještě vycentroval na střed i vertikálně

[multi]

v linksu to frci
ve firefoxu to je nejake malinkate pri mem rozlizeni 1600x...

[voj-tech]

Vypada to zajimave, ale pouzitelne to moc neni. Ta mala fixni velikost na tvych strankach je ale koneckoncu celkem ok -- textu tam moc neni, takze se nema na velkych monitorech co roztahovat. Nejakym zpusobem bych se ale snazil vyhnout tomu iframu, cili aspon promenna vyska by byla fajn. :)

[Fluttershy, yay!]

To není iframe, ale overflow: auto.

[voj-tech]

Aha, to jsem ani nevedel, ze overflow: auto se chova takhle.

[teekey]

napadne mi to pripomina Firefox s nejakym "echt cool" skinem, ale jinak pekne, osobne davam prednost obsahu a provedeni spise strohemu (plaintext only)