7. 6. 2009 v sekci webdesign:

Webdesign zeširoka

Nastal čas zvýšit standardní šířku layoutu webu pro nové projekty nad 960px?

Cameron Moll uveřejnil v posledních dnech 2 kontroverzní články, které by mohly být velice špatně interpretovány. Zvláště pak v případě, kdy si je člověk nepřečte pečlivě, ideálně i s komentáři, případně jejich obsah vezme bez hlubšího zamyšlení.

Šířka webu 960px či více

Nastal ten správný čas pohnout se na vyšší šířku layoutu než 960px, což je pro většinu dnešních webů standard? Tuto otázku je nutné si položit nikoliv nad mým blogem, ale nad statistikou daného webu. Např. tady na blogu bych se zcela s klidem mohl změnit šířku na 1100px a 90% návštěvníků by to prakticky nezaznamenalo.

To, že něco mohu však neznamená, že to udělám – a to především ze dvou důvodů:

  1. rozlišení není šířka viewportu – četl jsem nějakou studii, že 80% woknařů má jedno maximalizované okno (což se může s narůstajícím rozlišením displayů změnit), totéž dělá pouze 20% macařů
  2. pro tak široký layout musí být důvod – dokážu si to představit na větších informačních webech typu NY Times, kde potřebujete reálně i 4–7 sloupců vedle sebe.. což ovšem na blogu obecně nevyužiju

K dalším problémům by mohla patřit třeba délka řádku (dlouhé řádky se špatně čtou), horší orientace návštěvníka v příliš širokých a strukturovaných webech, apod.

Což vede k druhému pohledu do statistik webů, ke kterým mám přístup a zjištění, že pro weby fixní šířky s neIT návštěvníky nějaké rozšiřování nemá význam (ač právě pro tento typ webů bych větší šířku jednou za čas využil).

Fixed x liquid x fluid…

Vrátíme se tedy k pečlivému čtení a faktu, že Cameron mluví v článku o fluidních layoutech (mají minimální a maximální šířku) – tam je z mého pohledu zcela OK uvažovat nad 960px. Pro fluidní layout ovšem musí být důvod a já ho měl na jednom jediném projektu v posledních 5 letech.

Otázka do pléna k fluidním layoutům – používáte je někdo? Máte nějaký příklad graficky slušného a velkého webu (100+ unikátních šablon), který někdo vyvíjí a zároveň ho udržuje typograficky v 5+ prohlížečích a 2+ velikostech layoutu?

Druhá (vizionářská) otázka do pléna – kde tipujete, že se zastaví maximální široce podporovaná šířka layoutu webu (když ji nebude omezovat technologie, tak jsou tu koneckonců omezení na straně člověka – hýbat hlavou ze strany na stranu je namáhavé :-) )?

Třetí otázka do pléna – nemá smysl se v dnešní době soustředit spíše než na rozšiřování stávajících webů na jejich optimalizaci pro velmi nízká rozlišení (chytré telefony apod.)?

Související informace

Pokračování příště…

Komentáře

1. Ivo
07. 06. 09, 11.58

Myslím, že je lepší usnadnit návštěvníkům prohlížení stránek na mobilních zařízeních a alternativních přístrojích, než roztahovat stránky přes celou obrazovku.

Člověk ani nemusí kroutit hlavou, stačí jen jaký má zorný úhel k pohodlnému čtení. Osobně si myslím, že při rozlišení 1920*1200 a maximalizovaném okně to není vůbec dobré počteníčko :D

07. 06. 09, 13.37

Určitě je dobré usnadnit mobilním návštěvníkům prohlížení stránek, ale tady je to spíš o typografii nez o designu, kdo by chtěl stahovat kb jen kvůli grafice. Jelikož se zabývám grafikou webových stránek, mám rád hezké weby s grafikou :-) Proto jsem radši když lze udělat web větší a k tomu potřebuji i vyšší rozlišení. Dneska je moderní dělat velké nadpisy, velké prvky… To potom i web, který by se klidně vlezl na rozlišení 640px, se dá zvládnout pro rozlišení 990px, kde má větší rozměry, větší písmo atd. a vypadá to moc hezky.

Je to ale tvrzení proti tvrzení:

  1. větší prvky – více stažených kb oproti menším webům
  2. větší prvky, písmo – potřeba většího rozlišení monitoru ve většině případů
  3. větší prvky, písmo – vhodné pro uživatele s horším zrakem (taky se větší písmo lépe čte), ale lze si ho zvětšit v prohlížeči na úkor horší kvality obrázků

Najdeme spoustu pro a proti, takže je to spíše na samotném uživateli co mu lépe vyhovuje ;-)

Technologie se stále vyvíjejí, nikdo neví co tu bude za pár let. Rozlišení může zůstat u 1280px, ale také se může používat 3000px :-D

07. 06. 09, 21.44

Plovoucí layout jsem snad komerčně nikdy neaplikoval (za posledních 7 let), nevýhod bylo zatím vždycky více než výhod.

Dovolím si položit jednodušší variantu tvé otázky:
Máte nějaký příklad webu (100+ unikátních šablon)?

Já tedy zatím ne :-)

4. karf
07. 06. 09, 22.35

100+ unikátních šablon? Není to překlep? :)
Plovoucí layout používám jen pro GUI webových aplikací (administrační rozhraní apod.).

07. 06. 09, 22.37

Ještě bych dodal, že weby s plovoucím layoutem jsou děsné, pokud se nechají roztáhnout až do rozlišení 1920px. Nemám to rád, protože se to strašně natáhne a vypadá to nehezky. Takových layoutů jsem viděl už hodně…

08. 06. 09, 05.52

1024×768 mám stále na blogu na třetím místě, takže rozšiřování určitě nehrozí… Vede WXGA :-)

08. 06. 09, 12.25

> Otázka do pléna k fluidním layoutům – používáte je někdo?

Ehm, řekl bych, že aspoň tyhle dva weby:

http://seznam.cz/
http://blog.cz/

znáš poměrně dobře :))

8. člun
08. 06. 09, 12.41

„tak trochu“ máme roztahovací Megapixel (kde jde spíše o to že se smrskává na 800×600px) a třeba businessinfo.
Ale například u idosu jsme volili i roztažení (má to tam smysl), ale s omezením na určitý počet pixelů, rozlezlý web na šířce 1920px je zlo. :)

100 unikátních šalbon (v grafice) je skutečně hodně u e-shopu to dle mých zkušeností dělá kolem 25–30 šablon (i včetně modálních oken, variant záložek atp.).

9. rony
08. 06. 09, 14.44
  1. pouzivam radsej fluid samozrejme s obmedzenim min/max – cize neuvazujem o JEDNOM cisle, ktore reflektuje trendy v rozliseniach desktopov ale o INTERVALI OD – DO, ktory s tymito trendami sa meni, pricom vsetko mensie ako OD spada do kategorie „mobilna platforma“ a vsetko viac ako DO sa snazim riesit tak, ako obvykle – pas v strede okna prehliadaca.
  2. kde sa zastavi? dolezity parameter je VELKOST bodu, ak sa ta zmeni v dosledku buducich technologii, tak moze byt sirka kludne taka, aku si dnes nevieme predstavit. Preto sa musi uvazovat s dvomi parametrami: fyzicka velkost obrazovky A rozlisenie desktopu/viewportu. Ak sa totiz zmensi velkost bodu, tak sa moze pri danej fyzickej velkosti zvysit rozlisenie. Pripadne poznamky „ale potom budu ikonky male“ si zodpoviete sami uvahou – v roku 1992 boli pismena tvorene bitmapami o velkosti 12px na vysku a dnes?

Cize: v pripade extremne malych bodov bude teda k dispozicii OS s GUI, ktore s tym bude pocitat.

3. ma to zmysel. Paralelne totiz funguje tradicny web z velkych LCD ale uz prestava byt exotom clovek, ktory si web pozera z maleho pristroja typu mobil, netbook. Skor by som pripomenul, ze zacina nastup pristrojov, kde miesto mysky mam dotykovu obrazovku a niektore vseobecne zasady tvorby webu s nou musia pocitat – napr. neexistuje tu „hover“ efekt, kedy sa sipkou mysky mozem pohybovat a skumat ako to ten webdizajner myslel :-) a zaroven prisposobit takyto dizajn ovladaniu prstom – napr. linky prilis blizko seba sposobia zbytocny problem atd. atd. A samozrejme tradicna otazka: riesit to ako „dalsi stylopis“ alebo extra generovany web. Tam je asi priskoro hovorit aky sposob je idealny.

08. 06. 09, 15.49

[7] O Seznamu jsem přemýšlel, že ho uvedu, ale je natolik graficky minimalistický, že s fluidním layoutem nebude mít žádné problémy – navíc fluidní je titulka, zbytek je elastický (opravte mě, jestli se mýlím). Blog.cz je hezčí příklad :-)

[8] máš pravdu, je to trochu extrém :-)

11. Lukas
09. 06. 09, 16.20

„Nemá smysl se v dnešní době soustředit spíše než na rozšiřování stávajících webů na jejich optimalizaci pro velmi nízká rozlišení (chytré telefony apod.)?“

Ano má! Přizpůsobení se tomuhle trendu bude v příštích letech určitě zásadní. 19"+ wide monitory se sice rychle stávají standardem, ale stejně rychle je lidi přestávají užívat pro web, protože se rozmáhá mobilní internet a nejde jen o mobily, ale také o mininotebooky. Sedět u stolu, zírat do obřího monitoru a nemoci se skoro pohnout přestává být s novými možnostmi nejen phodlné ale hlavně in.

12. Jakub
09. 06. 09, 18.05

Mininotebooky jsou v současné době trend, nic víc.
Rozhodně to není alternativa k notebooku příp. stolímu PC.

Málokdo dokáže dělat na mininotebooku nebo na mobilu něco smysluplného nebo účinného.

Takže s tím přizpůsobováním bych ještě trochu počkal.
Uvidíme za 2 roky jak moc bude rozšířené rozlišení 300×300px :-))

13. Ondrej
10. 06. 09, 08.13

Kdyz pracuji na svem MacBooku, tak maximalizovana okna temer nepouzivam. Urcite ne na prohlizeni webu. Coz nemuzu rict o Win, kde si brouzdani bez maximalizovaneho okna nedovedu predstavit. Prijde mi, ze je to zkratka v tom systemu.

2. Ja bych mozna tipnul, ze sirka webu se zastavi tam kde ted je, vzhledem k rozsirovani mensich zarizeni. Take s ohledem na krouceni hlavou.

3. Nevim, jestli to ma smysl. Z pohledu uzivatele iPhone:

  • Standardne iPhone zobrazi (a oddali) normalni weby jako kdyby pouzival 1024×768.
  • Priblizovani je prijemne intuitivni, takze mi to nevadi. Pokud pujdou i ostatni mobilni zarizeni dal rozumnou cestou a nabidnou take dobre nebo jeste lepsi prochazeni webu, tak nevidim prilis duvod, proc bezne weby optimalizovat.
  • Optimalizovat ma podle me smysl webove aplikace (mapy, hledani spoju, RSS ctecky). Tam potrebuju komfortni a rychle ovladani.
  • Jedinnym problemem tak zustava objem stahovanych dat. Ale pokud se rozsiri opravdu svizny mobilni internet, tak by mohla byt i tato prekazka odstranena.
  • A mozna uz ani nebude potreba optimalizovat, az polozite telefon na stul a on vam do vzduchu promitne celou obrazovku. :-)

Tolik moje postrehy k tematu, po pul cca roce pouzivani mobilniho internetu na iPhone.