Fixní layout je dobro
Jedna z webových urban legends zní: „fixní layout je zlo“. Tvrdím, že opak je pravdou.
Článek navazuje na včerejší Typy layoutů webu.
Layout fixní šířky je nejjednoduší a tudíž i nejlevnější přístup. Teď si možná říkáte – hej chlape – jak může být nějaký layout levnější než jiný? Dám ho koderovi a ten ho nějak vymyslí, jinak není schopný koder, kapišto?
Jestliže chcete na webu precizní typografii, vertikální rytmus, mřížku a další vymoženosti moderního webdesignu, tak je v případě fixní šířky webu ladíte právě jednou (pomiňme uživatelské změny velikosti písma, dostanu se k nim na konci článku). Při použití všech ostatních typů layoutů ji ladíte ve více různých poměrech a rozměrech stran contentportu (viewportu.. whatever dle toho jak chápete plochu pro web v prohlížeči). Nebo se na typo webu můžete vykašlat (což je také cesta, ale ještě mě nezačala bavit).
Layout fixní šířky je zcela dostačujícím layoutem pro většinu webů. Nevýhodou jsou horizontální scrollery v příliš malých viewportech a spousta nevyužitého místa v případě velkých viewportů. To druhé není nevýhoda, ale fakt. Když nemáte, co do toho prostoru nacpat, tak do něj nic cpát nepotřebujete. A když potřebujete, použijte jiný typ layoutu.
Úprava velikosti písma není – vzhledem k rozšíření ZOOMu – už takovým strašákem, jako byla před pár lety.
Protiargumenty proti fixnímu layoutu
- Technické vybavení uživatele je příliš variabilní než abychom tvořili fixní layouty. Proto koneckonců používáte fixní layout, že? Protože chcete rozdílnosti uživatelů zcela vědomě ignorovat!
- Je to proti duchu webu – weby by se měly přizpůsobovat uživateli a ne uživatel jim (duch webu… huhle huhle… kolikrát u vás duch nakoupí?).
- Kodeři jsou líní (jsou – proč by dělali něco jiného než to nejjednodušší, že?).
Který layout zvolit a proč
Osobně jsem pro fixní layouty právě kvůli jednoduchosti jejich implementace. Jestliže nemáte převažující jiné než standardní rozlišení 1024×768 a vyšší, tak zůstaňte u fixní šířky 960px. Jestliže máte neomezený budget, použijte variable fixed width layout a upravte komplexně a konzistentně design webu pro různá rozlišení (hezký příklad je třeba pravý sloupec u UX Magazine). Je třeba mít na paměti, že fixní layout zcela ignoruje zvětšení písma uživatelem, je tedy potřeba nastavit relativně velké písmo pro většinu textu už od začátku. On se s tím uživatel nějak popere.
V opačném případě věnujte rozpočet, který byste dali za fluidní či jiné layouty do uživatelského testování – vynaložené úsilí se vrátí výrazně rychleji. Aneb typ layoutu není to, co vás bude u webu pálit nejvíc.
Vzhledem k tomu, že můj blog čtou i zástupci konzultačních firem – pánové a dámy – žádám vás o protiargumenty proti výše uvedenému. Rozsekněme společně tohoto strašáka moderního webu ku prospěchu všech zůčastněných. Ideální protiargument je dle mého názoru case study, kde změna layoutu z fixního na jiný výrazně zvýšila konverze webu a bylo tedy výhodné investovat do jiného layoutu a nikoliv do multivariantního testování nebo jiné formy CRO.
Komentáře
Jendo, mám v podstatě jediný protiargument, i když ne obecný, ale spíše pro speciální (leč relativně časté) případy. Píšeš, že fixní layout je nejlevnější, což ale IMHO neplatí vždy. Platí to tehdy, vystačím-li s fixním layoutem na všech stránkách webu, neplatí to tehdy, když je pro některé stránky fixní layout nevhodný a musím tedy navrhnout pro jeden web víc layoutů.
Fixní layout je typicky nevhodný pro stránky s prvky, které ze své podstaty tíhnou k velké či dokonce neomezené šířce. Sám jsem často narážel na mapy, tabulky s hodně sloupci, méně často na různá interaktivní schemata (třeba mind mapy) či aplikační prvky. Určitě jich ale bude víc. Pro tyto prvky je ideální roztahovací layout s nějakým omezením na šířku textových sloupců.
Pokud takové stránky na webu mám, pak pro mne může být levnější udělat rovnou jednotný roztahovací layout, než dělat layouty dva, což je třeba v některých CMS docela problematické.
Další věc je, jaké má web cíle a priority. U obchodního webu je typické, že chci poskytnout co nejlepší zážitek co nejvíce lidem i za cenu, že se nepatrná menšina k některým informacím vůbec nedostane. To mluví spíše pro fixní layout.
U informačního webu, obzvlášť obsahuje-li nějaké unikátní informace, mohu mít ale jiné priority. Chci, aby se k informacím dostal absolutně každý, a na pohodlí většiny mi až tak nezáleží. Máš moc dlouhé řádky? Zmenši si okno. Proč by na tvou lenost udělat jeden klik měli doplácet ti, kteří si okno nemůžou zvětšit.
Ten pravý sloupec na UX Magazine je hezké řešení. Nikdy jsem si to tam nevšim, dík za tip.
Připadá mi to příliš zjednodušující, nejspíš vyvíjíš spíš weby, než webové aplikace.
> Když nemáte, co do toho prostoru nacpat, tak do něj nic cpát nepotřebujete.
Ale my tam právě máme co nacpat. Pokud zobrazujeme seznam produktů a tabulky s daty spíš než texty, je pro uživatele výhodnější, když se použije celá šířka contentportu a nemusí tolik scrollovat.
Jako uživatel bych dal přednost lepší použitelnosti před vytůněnou typografií. =) Uznávám ale, že si tím jako HTML kodér přidávám práci a je třeba se u každého webu zamyslet nad tím, jestli to za ty komplikace stojí.
[3] Díky za reakci. Ad zvětšování oken – viděl jsi to někdy při nějakých testováních? Mě přijde, že to je pro většinu uživatelů příliš komplikovaná operace.
Už se mi hodně dlouhou dobu nestalo, že by po mě někdo chtěl variabilní layout, nebo se o něm jen zmiňoval jako o možnosti. Spíš vidím problém v tom, že lidi nemají rádi bílou barvu nebo prázdný prostor obecně, který logicky při vysokých rozlišeních po stranách vzniká. Bohužel, klienti právě v těhle místech vidí velký prostor pro (svou) kreativitu.
[7] Při uživatelských testování jsem viděl jen maximalizaci (full screen) oken, zmenšení ne. Nikdy jsem ale nedělal uživatelské testování na tak velkém monitoru, že by přílišná šířka stránky představovala problém.
On je asi trochu problém i v tom, že si IMHO většina uživatelů problém dlouhých řádků neuvědomuje. Text se jim blbě čte, ale nevědí proč. Navíc je nenapadne, že zmenšením oka by se řádky mohly zkrátit.
Další věc je ta, že lidi jsou zvyklí na TABs v prohlížečích. To nějaké zvětšování a zmenšování oken pro každou stránku zvlášť znemožňuje.
Díky za pěkný a trefný článek, vyřešil jsi me dilema, zůstávám u fixního layoutu :-)). Ono je asi lepší fixní layout a web se zajímavým obsahem, než nejmodernější web s posledními výkřiky moderních technologií, ale nulovým obsahem. Díky.
[9] to koresponduje s mou zkušeností – nikdo nezvětšuje písmo a pokud něco dělá s velikostí okna prohlížeče, tak maximalizuje.
Navíc máme trochu začarovaný kruh – majorita webů s fixním layoutem je přímo úměrná zkušenosti uživatele, že s délkou řádku se nedá nic dělat a tudíž se o to přestává zcela pokoušet (i kdyby na začátku své webové kariéry něco takového chtěl).
Diky, moc pekne.
[5] Fil mel na mysli spis neuvazene vyplnovani plochy pri tvorbe standardnich webu. Administracni rozhrani nabyvaji mnoha podob vcetne te, co zminujes. Pak muze byt pouziti nejruznejsich gumovych layoutu zcela na miste.
[12] Navíc máme trochu začarovaný kruh – majorita webů s fixním layoutem je přímo úměrná zkušenosti uživatele, že s délkou řádku se nedá nic dělat a tudíž se o to přestává zcela pokoušet (i kdyby na začátku své webové kariéry něco takového chtěl).
Super pozorovani!
Ona je také druhá věc, která mě přinutila k fixnímu layoutu. A to tak, že některé dnešní monitory jsou už tak široké, že se to špatně čte. Mnoho webových stránek jsem pak na vysokých rozlišeních a velkých monitorech upravoval tak, že jsem zmenšoval okno prohlížeče.
Jinak kolem webových věcí je takových nesmyslných dogmat, že jsem se je rozhodl z větší části ignorovat kompletně. Jel jsem vždy podle selského rozumu a to je často lepší rádce.
Například od začátku jsem věděl, že XHTML bude jednou stopnuto, a věděl to v podstatě každý, kdo se nad tím zamyslel a nedal se strhnout vlnou nadšení. Stejně tak mi bylo jasné, že XHTML pro praxi nemá nic navíc, co by neměla HTML – že je to umělý výdobytek k ničemu. A stejně tak jsem se smál řadě jiných věcí a ono nakonec k tomu lidé přicházejí. Jen jim to trvá trochu déle.
Honzo, myslím, že by bylo dobré upřesnit zadání. Jaké typy webů máš na mysli?
Když v posledním odstavci píšeš o konverzi, lze výzvu chápat tak, že chceš srovnávat výsledky dvou eshopů, kdy jeden má na všech stránkách fixní a jeden fluidní layout? To znamená například fixní Alza.cz versus fluidní Megapixel.cz.
Už to nakousl Marek a Radek – diametrálně rozdílně by to viděli tvůrci zmíněných eshopů a autoři například Mapy.cz, Basecampu, NYTimes online…
[15] ano – existují specifické projekty, na které se fixní šířka nehodí – mapy, administrační rozhraní nebo netvibes mohou být jedny z nich – a liquidní či jiný typ layoutu mohou být výrazně lepší volbou.
Netvrdím, že fixní layout je automatické řešení pro všechny situace, ale tvrdím, že JE nejlepší možnou volbou pro většinu webů, se kterými se webdesigner standardně potká (jestli se dá brát nějaký standard).
Ad výzva – ne, myslel jsem to tak, že máš web s layoutem fixní šířky, změníš ho na jiný typ layoutu a výrazně se zlepší konverze. Srovnávat různé shopy z mého pohledu nemá smysl :-) – těch faktorů tam jsou mraky…
[16] Furt si pod „standardním typem webu“ neumím představit nějakou jasně definovanou množinu, abych s tebou mohl souhlasit nebo nesouhlasit. :-)
Pokud máš na mysli „úplně všechny weby“, pak s tebou souhlasit nemůžu. Webdesign naštěstí není tak jednoduchá disciplína, že by myšlenka „fixní layout je obecně lepší“ mohla být pravdivá. Snad jenom v případě, že bys radil někomu, kdo se neživí jako designér nebo kdo s webdesignem začíná a právě se rozhoduje jakým způsobem bude layout navrhovat.
Pokud máš na mysli eshop, pod kterým si umím představit něco jako – dejme tomu Megapixel – pak s myšlenou v článku souhlasit můžu částečně. Výhrada je ta, že je vždy pečlivě zvažovat rozhodnutí „fixní nebo fluidní layout“ nejen pro celý web, ale hlavně pro konkrétní obsah, tedy stránku v případě eshopu.
Muhehe. Nikdy jsem neřekl, že fixní layout webu je obecně lepší než ostatní layouty. Adaptabilní layout mi z akademického hlediska přijde jako mnohem lepší varianta skoro pro všechny projekty, které by mohly být/jsou fixní.
Adaptabilní layout je hůře udržovatelný a všeobecně dražší, ale je LEPŠÍ právě tím, že se přízpůsobuje uživateli. Řeší některé neduhy fixního layoutu a minoritní skupiny uživatelů. A je řádově lepší než fluidní layout, který si vymyslel někdo, komu se nelíbilo bílé místo okolo úzké nudle (svůj názor jsem shrnul v minulém článku), a tak webu roztáhl nohy bez ohledu na přínos.
To, co se snažím říct je, že se nevyplatí dělat ve většině případů jiný než fixní, protože se vložená investice nevrátí. A aspoň já žiju ve světě omezených rozpočtů (a nejde o konkrétní čísla – i s milionem nemusí vyjít peníze na adaptabilní layout) a blízkých deadlinů než abych řešil projekt, který je řešitelný fixně, jakkoliv jinak.
Přečetl jsem si nadpis článku a můžu jít v klidu spát. Děkuji
:-)
Hned ráno vezmu papír a FIXU a budu pokračovat dle starých
návyků – fixně.
Palec nahoru. Jednoznačně minimálně v 90 % případů se hodí fixní layout.
Fixní layout je fajn, ale pokud je potřeba vyvinout aplikaci pro mobilní zařízení… jedině roztahovací layout. A i při vývoji systémů (CMS, CRM, e-shop,…) se hodí mít víc místa.
Souhlas, taky jsem letos na webu přešel z dynamického layoutu na fixní. Monitory se rozšiřují do šířky, zvětšují úhlopříčky a opravdu mě nebaví u webů, které se roztahují na celou šířku stránky zužovat okno – je to moc práce :) a uživatelé žádnou práci navíc dělat nebudou, když už budou vědět důvod, proč je něco špatně.
Do paměti ukládám, že už typ layoutu nikdy nemám řešit. Dík :)