Be cool, be wide
Sociální nůžky se stále otevírají a s nimi rostou i rozdíly v technickém vybavení uživatelů. Na jedná straně supí uživatelé s rozlišením 800×600. Takoví tu holt byli, jsou a budou. Dnes se ovšem začínají rozšiřovat řady uživatelů s opačným extrémem. Widescreen. Tudíž tu máme nízkorozlišováky, pro které se hodí stavět layout na pevnou šířku 800×600 a širokoúhláky, kterým se z úzkých sloupců uprostřed obrazovky […]
Sociální nůžky se stále otevírají a s nimi rostou i rozdíly v technickém vybavení uživatelů. Na jedná straně supí uživatelé s rozlišením 800×600. Takoví tu holt byli, jsou a budou. Dnes se ovšem začínají rozšiřovat řady uživatelů s opačným extrémem. Widescreen.
Tudíž tu máme nízkorozlišováky, pro které se hodí stavět layout na pevnou šířku 800×600 a širokoúhláky, kterým se z úzkých sloupců uprostřed obrazovky začíná dělat úzko. Co s tím?
Mateme tělem
Matení tělem je jednoduchá metoda. Na pozadí stránky necháte uprostřed opakovat určitý motiv v pozadí, který bude graficky propracovaný a zároveň velmi široký. Typický příklad – Filův blog. No.. sice nemám blog zas tak široký, abych uspokojil i širokoúhlé uživatele, ale je tu alespoň náznak. Text necháte v pevném boxíku o šířce okolo 770px. Vlk se nažral a koza zůstala celá.
Zapojujeme JS
Následující metoda je vhodná především v případě, že ze statistik zjistíte, že podíl širokoúhláčů a nízkorozlišováků převyšuje nedžavaskrypťáky (hehe, to jsou pojmenování). V takovém případě je vhodné redesignovat a nasadit při redesignu techniku z článku Preparing for Widescreen. Technika kombinuje XHTML, CSS a JS.. když JS zjistí, že je uživatel širokoúhlák, tak mu předhodí jiný CSS soubor, než nízkorozlišovákům.
Není všechno zlato, co se přizpůsobuje
Nevýhoda této techniky je výroba tří korespondujících designů, místo jednoho. A málo společností vám zaplatí dva designy, nemluvě o všech třech. Technika je tedy vhodná především pro všudypřítomné bloggery.
Třetí možnost
Zapomeňme na pevnou šířku a začněme se přizpůsobovat. Liquidní a fluidní layouty jsou dnes běžnou součástí webu. Otázkou je, jestli se stejné množství informací komfortně zobrazí na 800px i na 1600px. Rozhodnutí je na vás.
Komentáře
Řešení už nějakou dobu existuje a je vcelku jednoduché. Nejde o nic jiného, než do záhlaví stránky umístit přepínač mezi fixní a dynamickou šířkou (důležité je si nastavení pamatovat, aby to uživatel nemusel nastavovat na každé stránce). Viz. např. http://www.simplebits.com/
Pozor ale na opačný extrém, tedy, že příliš dlouhé řádky se špatně čtou. Je tedy rozumné i dynamickou verzi nějak shora omezit.
Široké stránky jsou zlé. Ďábelské. Špatné. 770px je rozumné na čtení, ale fixovat zrak na 1600px širokou stránku je velice, ale opravdu velice špatně. Nesnáším široké stránky.
PS: widescreen monitory jsou určené na to, abych zahodil zaostalý Firefox a v Opeře otevřel vedle sebe dvě okna. Opera má totiž MDI!
[5] někdy je lepší rozvrhnout informace do vícero sloupců, protože tak využiješ celých 1600px a zároveň zkomfortníš web uživateli. Širokoúhlý design zdaleka nemusí znamenat dlouhé řádky.
Kdysi mě nudle hrozně štvaly, ale jelikož mám teď Operu, tak si to vždy zvětším na celou obrazovku, lehnu si hluboko do křesla, daleko od obrazovky a hezky si čtu. Nemám vůbec problém s 1m číst text který je přes celou obrazovku.
[6] Co přesně znamená to „MDI“ a jak se to „zapíná“? Asi se ptám na úplně banální věc, ale já zrovna opravdu nevím.
[9] Přesně znamená „multiple document interface“ a nepřesně – že můžeš mít v rámci jednoho okna aplikace další „podokna“ s dokumenty.
Další možnosti jsou SDI (single DI) – co dokument, to okno (jako v Internet Exploreru) nebo TDI (tabbed DI), jedno okno, jehož obsah si přepínáš pomocí záložek (jako ve Firefoxu).
Opera používá kombinaci MDI a TDI a lze přepnout i na SDI.
Se širokými obrazovkami nevidím žádný problém. Snažit se se svým webem vyplnit celou jeho šířku je nesmysl. To je jako byste si koupili širší stůl a následně místo na papír A4 začali psát na A2, jenom proto, že se vám tam vejde. Větší šířka obrazovky může být (a předpokládám, že většinou je) využita jinak, než na roztažení obsahu webu, tedy na různé toolbary, druhé okno, jinou aplikaci apod. Z pohledu webdesignera nevidím mezi 1280px a 1920px rozdíl.
Mám nb s widescreenem, ale velikost okna prohlížeče nechávám na šířce 1024px, zbytek zabere stále otevřený panel v opeře. Případně, když je stránka moc minimální (10px fonty), dám si lupu na 200%. (Což bude umět i nový IE). Ať žije fixní velikost :)
Be cool, be long :]
Takže je to teď na CSS3, aby poskytl široké možnosti, jak zformátovat text do více sloupců. Chce to takové možnosti, aby i onen počet sloupců byl lze nastavit např. hodnotami min a max. Díky tomu na 800×600 bude text klasicky jako dnes hezky pod sebou, na widescreenech zmizí scrollovátko a text se rozvrhne do tří sloupců vedle sebe.
Media Queries a nebo pro dnešní praktické potřeby Cameronův Adamsův JS a upravovat zalamování/počty sloupců. Fixovat pouze na zachování poměrů/řezů a délku znaků na řádek. Zbytek je špatně. Především u volných layoutů na vysokých rozlišeních u uživatelů s nevyužitým prostorem.
Přesně takový problém jsem řešil na webu freemp3.cz. Složení návštěvníků a jejich velikosti okna je až nezvykle (oproti jiným webům) hrozně roztahané. Prostě web nechávám rozpadnout do šířky s velikostí fontu 1em. Protože při porovnávání velikosti okna a základní velikosti fontu, jsem si všiml, že na větších monitorech uživatelé používají i občas větší písmo. To konpenzuje aby design nepůsobil tolik placatě. Design je „blbě“ jednoduchý a celkem i ošklivý, ale maximálně přizpůsobivý a použitelný. Tedy hlavní cíl je splněn, umožnit předat „nějak“ vizuálně informaci.