Zde hledá Jyxo.

Elastický design

10. 01. 2004

Patrick Griffiths se ve včerejším čísle A List Apart zaměřil na Elastic Design. Myslí tím layout s plovoucí šířkou, která však nemusí vycházet jen z šířky okna prohlížeče, ale i z aktuálně nastavené velikosti písma. Pokud se rozměry všech prvků (textových boxů i obrázků) nastaví v jednotce em, má změna velikosti písma za následek plně grafickou změnu velikosti celé stránky.

Tuto metodu jsme častečně (bez vlivu na obrázky) použili na Dobrém webu a přiznám se, že si stále nejsem jist, zda je vhodná. Sice elegantně řeší problém optimální délky textového řádku a účinně chrání layout před zhroucením při změně velikosti písma, neřeší však čitelnost na malých obrazovkách. V podstatě tedy upřednostňuje všude stejný vzhled před přístupností.

Marek Prokop, 10. 01. 2004 15:01, Pošli komentář

Komentáře

1. Robert Madaj:

10. 01. 2004 16:05

Trošku sme si nezavisle vošli do témy, ja som sa skôr sám pre seba spýtal, aké dôvody vedú ľudí k použitiu fixnej šírky webstránky.

2. DarkMaster: Design Dobrého webu

10. 01. 2004 18:13

Podle mého názoru je design Dobrého webu inspirativní a dostatečně reprezentativní. Texty jsou stručné, čtivé a dostatečně srozumitelné. Na mém pomalém připojení jsem ovšem na otevření Dobrého webu nějaký ten čas čekal (více než 5 sekund) a sledoval prázdnou bílou stránku. Web se potom načetl rovnou celý (dle Jakoba Nielsena by se měl zobrazit alespoň vršek).

Zkusil jsem si písmo zvětšit a bylo fajn, že mi zvětšení písma nerozhodilo design. Vadila mi ovšem nutnost rolovat stránku.

Při změně okna prohlížeče zůstával design nezměněn. Z toho usuzuji, že není design „gumový“. Já osobně mám raději design, který se plně přizpůsobí návštěvníkovi.

3. Vít Dlouhý:

10. 01. 2004 19:36

A nešlo by pro malé obrazovky použít speciální styl?

4. Marek Prokop: Proč nemá Sova plovoucí layout

10. 01. 2004 21:47

Pamětníci si možná vzpomenou, že kdysi Sova měla plovoucí šířku prostředního sloupce. Změnil jsem ji na pevnou v okamžiku, kdy jsem začal uveřejňovat zdrojové kódy a chtěl jsem, aby byly hezky odsazované zleva podle úrovně vnořování prvků. Odsazování jsem dělal pevnými mezerami a řádky zalamoval pomocí <br>, takže jsem potřeboval nějakou pevnou šířku, abych se měl čeho chytit.

Dnes už dávám řádky zdrojových kódů do divů a odsazuju je pomocí CSS, takže tento důvod padl. Pro změnu jsem ale začal zveřejňovat obrázky a ty zatím stále představují problém. Patrick Griffiths sice uvádí několik řešení obrázků v plovoucím layoutu, ale zatím si z nich neumím vybrat.

Na druhou stranu mi fixní layout vadí čím dál víc, např. proto, že jsem si zvykl používat FeedDemon nastavený na šířku okna jen okolo 500 px. Také bych chtěl zde na Sově začít dávat do pravého sloupce o něco delší texty (odkazy bez komentáře, související odkazy, atd.), které se tam teď nevejdou, takže se budu muset s plovoucím layoutem nějak poprat.

5. Martin Kopta:

11. 01. 2004 00:20

A nešlo ono by v CSS nastavit maximální šířku rovnou šířce okna? (Samozřejmě by to chtělo asi skriptování nebo nějakou ochcávačku kvůli prohlížečům bez max-width.)


html, body {
width: 100%
}
#sloupec {
width: 40ex;
max-width: 100%
}

Obrázky bych neřešil na gumě vůbec, a pokud, pak asi nějak takhle:


a img {
display: block;
width: 4em;
height: 4em;
float: left;
overflow: hidden;
border: none;
}
<a href="obr.jpg"><img src="obr.jpg" alt="Chalupa mojí babičky" title="Po klepnutí se zobrazí obrázek celý." /></a>

Je docela příznačné, že web o pružném vzhledu je zalámán na pevnou šířku.

Komentáře k tomu článku jsou uzavřeny.

Tato stránka je přístupná libovolným prohlížečem, nejlépe však vypadá v prohlížeči, který podporuje HTML 4.0 a CSS 2 (Internet Explorer od verze 5, Mozilla, Opera a další). Pokud čtete tuto zprávu, váš prohlížeč zřejmě dostatečně nepodporuje CSS. Stránku sice vidíte bez pokročilejšího formátování, avšak veškerý obsah je plně přístupný i pro vás.