Mekkora képernyőre optimalizáljuk az oldalunkat?
A válasz egyszerű, a látogatóinktól függ: nézzük meg a statisztikát. Ennél azonban lehet, hogy érdemes egy kicsit tovább gondolkodni ha nem is a válaszon, de a mostani trendeken. Egyre olcsóbban, egyre nagyobb felbontású LCD kijelzőket lehet venni, az 1024x768 ma már korántsem számít nagyfelbontásnak. És egyre olcsóbban, egyre használhatóbban lehet mobilon internetezni, kezd ez is elérhetővé válni.
Ha ez ember egy kicsit összeszedi spórolt pénzét, nem kell milliomosnak lennie ahhoz, hogy vegyen magának akár egy 22"-os képernyőt, extrémnek mondható felbontással. Például nemrég vettem egy 19"-osat 1680x1050 felbontással 60e Ft környékén, és nem bántam meg a dolgot. A megújuló portálok mindegyike már 1024x768-as felbontásra optimalizál, a 800x600 még létezik, de kezd elenyésző százalékú lenni. Talán ma már nem az a kérdés, hogy 800x600 vagy 1024x768, hanem hogy esetleg nagyobb is szóbajöhet-e? Viszont kezd a mobil böngészés is terjedni, ahol korántsem ekkorák a felbontások...
A válasz - szerintem -, hogy semmiképp sem érdemes 1024x768-nál nagyobb képernyőre optimalizálni. Egyrészt illik gondolni azokra, akik még mindig 800x600-as képernyő előtt ülnek, még ha a látogatóink 1%-a is ők. Érdemes lehet úgy szervezni az oldalkialakítást, hogy a jobb oldal hiánya ne okozzon hatalmas gondokat a navigációban. Másrészt a nagyobb felbontások esetén a felhasználók egy része rászokik arra, hogy ne teljes képernyőn használja a böngészőjét (esetleg valamilyen oldalsávot is használnak vagy a böngészőben, vagy az oprendszerükben - lásd Vistán alapból, de más oprendszerek alatt is -, mely csökkenti a szélességet). Harmadrészt a túl széles oszlopok, vagy a túl sok tartalom simán használhatatlanná tudja tenni az oldalunkat, akármilyen okosan és ügyesen is szervezzük az oldalkialakítást. Vannak, akik 1 oszlopos oldalakra esküsznek, de 3 oszlopnál semmiképp sem érdemes többel dolgozni a tapasztalatok szerint.
Felmerül a kérdés, hogy akkor mit kezdjünk azokkal a látogatókkal, ahol a böngészőméret (nem a képernyőméret!) tényleg nagyobb 1024 pixelnél? Használhatunk kreatív hátteret, dinamikus oldalszélességnél nagyobb betűméretet, beugró új oszlopokat extra információkkal (alapból mondjuk két oszlopos kialakítás, nagyobb felbontásnál még egy új oszlop bejön). Vagy egyszerűen elkezdhetjük őket rászoktatni arra, hogy nem teljes képernyőn kell nézni a böngészőt, még ha ez is tűnik a legkényelmesebbnek.
A másik oldalról, a 800x600-nál kisebb felbontásokról sem illik azonban elfelejtkezni, ezt főleg a PDA-k, mobiltelefonok és más kisképernyős eszközök reprezentálják. Bár jellemzően ezen látogatók aránya elenyésző egy oldalnál, de az ez irányú használat biztosan növekedni fog a 3G hazai terjedésével (vezetékessel összenérhető ajánlatok kezdenek megjelenni), és idejekorán jó, ha elkezdjük nem leszoktatni a felhasználóinkat az oldalunk meglátogatásáról. Korábban az alternatív CSS mellett érveltem, azaz hogy úgy szervezzük az oldalt, hogy CSS nélkül, vagy mobilos CSS-sel (erre lehetőséget kínál a HTML szabvány ugye) jól működjön, de a tapasztalataim azt mutatják, hogy nem ez a jó megoldás. Két érvem van: egyrészt hogy a CSS lehetőségei kötöttek, nem feltétlenül tudunk segítségével egy kis képernyőn jól használható, áttekinthető oldalt prezentálni az amúgy nagy képernyős oldalból, másrészt pedig elég botor dolog a forgalomért fizető, jellemzően nem igazán korlátlan mobil internetet használó felhasználóknak felesleges tartalmakat elküldeni - nem fogják szeretni az oldalunkat. Az iPhone-ra optimalizált oldalak mutatták meg leginkább, hogy érdemes teljesen más oldalkialakításban gondolkodni mobiltelefonokon, sokat tud javítani a használhatóságon ugyanis. A mobiltelefonokat, mobil böngészőket egy kis utánaolvasással elég jól lehet detektálni, vagy pedig adhatunk egy külön aldomaint is nekik (minél rövidebb a címe, annál jobb, mobilon nehéz gépelni), és egy alternatív megoldást nyújthatunk feléjük. Alapvetően nem más tartalmakról, csak a navigáció más prezentálásáról van szó.
Összefoglalva egy kicsit a dolgot, alapvetően semmit sem változott az irány a nagy felbontású monitorok megjelenésével és a mobil internet terjedésével. Továbbra is a látogatók azok, akik meghatározzák, mire érdemes tervezni az oldalt. Ez legyen az első, és legfontosabb szempont továbbra is, azzal együtt hogy készüljünk fel arra, hogy a jövő (és idei?) év egyik trendje a nagyfelbontás és mobilitás lesz.
■ Ha ez ember egy kicsit összeszedi spórolt pénzét, nem kell milliomosnak lennie ahhoz, hogy vegyen magának akár egy 22"-os képernyőt, extrémnek mondható felbontással. Például nemrég vettem egy 19"-osat 1680x1050 felbontással 60e Ft környékén, és nem bántam meg a dolgot. A megújuló portálok mindegyike már 1024x768-as felbontásra optimalizál, a 800x600 még létezik, de kezd elenyésző százalékú lenni. Talán ma már nem az a kérdés, hogy 800x600 vagy 1024x768, hanem hogy esetleg nagyobb is szóbajöhet-e? Viszont kezd a mobil böngészés is terjedni, ahol korántsem ekkorák a felbontások...
A válasz - szerintem -, hogy semmiképp sem érdemes 1024x768-nál nagyobb képernyőre optimalizálni. Egyrészt illik gondolni azokra, akik még mindig 800x600-as képernyő előtt ülnek, még ha a látogatóink 1%-a is ők. Érdemes lehet úgy szervezni az oldalkialakítást, hogy a jobb oldal hiánya ne okozzon hatalmas gondokat a navigációban. Másrészt a nagyobb felbontások esetén a felhasználók egy része rászokik arra, hogy ne teljes képernyőn használja a böngészőjét (esetleg valamilyen oldalsávot is használnak vagy a böngészőben, vagy az oprendszerükben - lásd Vistán alapból, de más oprendszerek alatt is -, mely csökkenti a szélességet). Harmadrészt a túl széles oszlopok, vagy a túl sok tartalom simán használhatatlanná tudja tenni az oldalunkat, akármilyen okosan és ügyesen is szervezzük az oldalkialakítást. Vannak, akik 1 oszlopos oldalakra esküsznek, de 3 oszlopnál semmiképp sem érdemes többel dolgozni a tapasztalatok szerint.
Felmerül a kérdés, hogy akkor mit kezdjünk azokkal a látogatókkal, ahol a böngészőméret (nem a képernyőméret!) tényleg nagyobb 1024 pixelnél? Használhatunk kreatív hátteret, dinamikus oldalszélességnél nagyobb betűméretet, beugró új oszlopokat extra információkkal (alapból mondjuk két oszlopos kialakítás, nagyobb felbontásnál még egy új oszlop bejön). Vagy egyszerűen elkezdhetjük őket rászoktatni arra, hogy nem teljes képernyőn kell nézni a böngészőt, még ha ez is tűnik a legkényelmesebbnek.
A másik oldalról, a 800x600-nál kisebb felbontásokról sem illik azonban elfelejtkezni, ezt főleg a PDA-k, mobiltelefonok és más kisképernyős eszközök reprezentálják. Bár jellemzően ezen látogatók aránya elenyésző egy oldalnál, de az ez irányú használat biztosan növekedni fog a 3G hazai terjedésével (vezetékessel összenérhető ajánlatok kezdenek megjelenni), és idejekorán jó, ha elkezdjük nem leszoktatni a felhasználóinkat az oldalunk meglátogatásáról. Korábban az alternatív CSS mellett érveltem, azaz hogy úgy szervezzük az oldalt, hogy CSS nélkül, vagy mobilos CSS-sel (erre lehetőséget kínál a HTML szabvány ugye) jól működjön, de a tapasztalataim azt mutatják, hogy nem ez a jó megoldás. Két érvem van: egyrészt hogy a CSS lehetőségei kötöttek, nem feltétlenül tudunk segítségével egy kis képernyőn jól használható, áttekinthető oldalt prezentálni az amúgy nagy képernyős oldalból, másrészt pedig elég botor dolog a forgalomért fizető, jellemzően nem igazán korlátlan mobil internetet használó felhasználóknak felesleges tartalmakat elküldeni - nem fogják szeretni az oldalunkat. Az iPhone-ra optimalizált oldalak mutatták meg leginkább, hogy érdemes teljesen más oldalkialakításban gondolkodni mobiltelefonokon, sokat tud javítani a használhatóságon ugyanis. A mobiltelefonokat, mobil böngészőket egy kis utánaolvasással elég jól lehet detektálni, vagy pedig adhatunk egy külön aldomaint is nekik (minél rövidebb a címe, annál jobb, mobilon nehéz gépelni), és egy alternatív megoldást nyújthatunk feléjük. Alapvetően nem más tartalmakról, csak a navigáció más prezentálásáról van szó.
Összefoglalva egy kicsit a dolgot, alapvetően semmit sem változott az irány a nagy felbontású monitorok megjelenésével és a mobil internet terjedésével. Továbbra is a látogatók azok, akik meghatározzák, mire érdemes tervezni az oldalt. Ez legyen az első, és legfontosabb szempont továbbra is, azzal együtt hogy készüljünk fel arra, hogy a jövő (és idei?) év egyik trendje a nagyfelbontás és mobilitás lesz.
Fix vagy ablak mérethez igazodó méretezés
De milyen felbontáson?
Alapvetően két fő gondolat van az írásomban: gondolkodjunk azon, hogy mit kezdünk azokkal a látogatókkal, akik "nagyon-nagy" felbontással érkeznek, és gondolkodjunk azon, hogy mit kezdünk a mobil eszközökön netezőkkel. Mind a két szám növekedni fog, illik valamit kezdeni velük.
nagyon nagy felbontás
Felhasználói észrevétel
Úgy gondolom, sok más kérdéshez hasonlóan itt is igaz, hogy valahol valamikor egy guru "megmondta az igazat", s onnan kezdve azt "kötelező" alaptételként számon tartani. A legnagyobb sorhosszúságra gondolok.
Nos, 1 db mezei felhasználóként a véleményem: engem kifejezetten idegesít, ha egy honlap nem használja ki azt a teret, melyért én nem keveset fizettem a képernyőm vásárlásakor. Engem egyáltalán nem fáraszt (legalábbis jóval kevésbé érdekel), hogy hosszú sorokat kell olvasnom, viszont nagyon zavar, ha állandóan tekergetnem kell föl-le (rossz esetben még jobbra-balra is) az olvasáshoz. Szeretem az oldal minél nagyobb részét átlátni, hogy tudjam, milyen részt látok/olvasok az egészből. Képzeld el a helyzetet: ahelyett, hogy kezedben tartod az újságot, s tudat alatt tökéletesen tisztában vagy vele, hogy a jobb alsó sarokban lévő hirdetést olvasod épp (s olvasás közben már "előjegyezte" az agyad, hogy utána rákukkantassz a bal oldalt középen lévő cikkre is, mert egy szó szemedbe ötlött) - szóval, ehelyett valaki más tartja kezében az újságot, eltakarják előled egy spanyolfallal, s csak egy 10×10 cm-es kis kockán keresztül nézegetheted. Ha át akarod tekinteni az egész oldalt, előbb össze-vissza kell tekergetned egy fogantyút a spanyolfalon, s akkor aszerint mozgatják neked az újságot.
Lefogadom, 1 perc alatt megunnád. Bizonyítom másképp is (saját tapasztalatom alapján): ha megnyílik előttem egy oldal, s nem látom az egészet, mielőtt bármelyik részét olvasni kezdeném, először össze-vissza tekergetek, hogy lássam a teljes elrendezést. S ez ösztönösen alakult ki nálam, meglévő belső késztetésre.
Tehát felhasználóként az én szavazatom: igenis rugalmas tartalom, teljes térkitöltéssel! Nem lenne semmi bajom a hasábos elrendezéssel (jónak vélem), de ha ez ennyire megoldhatatlan, ha ennek ára az, hogy a nagyobb képernyős felhasználók bámulják a nagy semmi közepén a 10 szónyi kis szöveget - akkor köszönöm, nem.
Nem állítom, hogy mindenki ilyen; még csak azt sem, hogy a felhasználók zöme. De hogy nem állok ezzel egyedül, abban biztos vagyok. Utolsó megjegyzésként: mire a nagyon nagy képernyők elterjednek, akkor úgyis sokan rászoknak majd a nem teljes ablakos használatra, s akkor megint nem fog gondot okozni a teljes kitöltés. Én most 19 hüvelykeset használok, 1280×1024 felbontással, s mindig minden teljes ablakban fut.
Ellenvélemény felhasználó szemmel
Ami pedig a felbontás növekedését illeti: nekem 23"-os FullHD monitorom van (1920x1080-as felbontással). A böngészőt 1280px szélességben és a monitor teljes magasságában használom. A 12-es betűmérettel írt szöveg olvasása olyan, mint 1024-en a 10-es betűmérettel írt szöveg (azaz qrva kényelmetlen és zavaró).
A honlapokat úgy olvasom, hogy FireBug segítségével átállítom a betűtípust, méretet, sormagasságot és az elrendezést (sorkizártra) -- ha sokat látogatom az oldalt, akkor user css-ben definiálom a nekem megfelelő beállításokat. Általában 13-14px az a betűméret, ami ekkora felbontáson kellemesen olvasható.
A felbontás növekedésével úgy gondolom, hogy nem fognak (nagy mértékben) változni a teret kihasználó trendek (most a tipikus honlapokról beszélünk), hanem a betűméretek fognak nőni.
Amit a teljes kitöltésről írsz: próbáljál meg FullHD felbontáson, teljes méretre állított böngészővel HUP-ot olvasni. Nekem már 1280-as böngészővel, default (lepkefing) méretű betűkkel is zavaró a liquid-layout, nemhogy 1920-as felbontáson.
Neked is igazad van
Az igazi természetesen az lenne, ha létezne olyan kiszolgáló- vagy ügyféloldali megoldás, ami cm-re és képpontra pontosan megmondaná, mekkora a bongészőablak. (Álmodni nem tilos :)) Addig az igényesebb, fontosabb honlapoknál, úgy gondolom, feltűnő helyen (hogy a járatlanok is észrevegyék) legalább 2-3 CSS közti választást kell felajánlani. (Nem olyan őrült nagy meló az.) De az egyik mindenképp teljes térkitöltős kell legyen.
Továbbá, apró meglátás (megint csak személyes vélemény): jóval kevesebb fáradságába kerül az 1920x1080 felbontást használónak egy kattintással lekicsinyíteni a böngészője ablakát, mint a hozzám hasonlóaknak bőszen tekergetni először össze-vissza, hogy átlássák az oldalt. Ha én is 1920x1080 használnék, talán engem is zavarna a sorhossz; de káromkodnék rendesen, ha 2-4 hasáb helyett megint csak egy csíkot kapnék középre.
Felbontás - méret
Persze vannak már arra utaló jelek, hogy kicsit közelítenek a standardok a felbontásfüggetlen megjelenítés irányába (lásd CSS betűméretek már nem csak pixelben megadható méret definíciói) , de amíg ezekből valóban lesz valami kézzelfogható, minden browser álltal elismert és betartott szabványrendszer, addig még sok poshadt víz lefolyik a webdesignerek torkán.
Igazándiból amíg a <body> tagben nincs dpi="xx", és az <img> width/height pixel méretet definiál inch, vagy valódi felbontásfüggetlen százalék helyett, addig nincs mit tenni: el kell dönteni milyen minimális felbontásigénye van a felületnek.
800x600
3.45%
Persze ezek egy teljesen más szegmensben működő webhelyre nem alkalmazható adatok, csak gondoltam megnézem (és akkor már megosztom), hogy a Weblaboron mik az adataink.
szakmai oldal
Mobil és egyebek
Egyébként a 3.45% egész korrektnek tűnik, más nem-szakmai oldalon is hasonló számokat láttam. :)
Van már jobb felbontás is
A minap volt nálam egy nokia N90-es Communicator. 800 x nemtommennyi volt a felbontása. Szóval mobilban is egyre jobbak jönnek ki.
Üdv, Pali
A pixelmeret nem info
Attol, hogy begyomoszolnek 800 pixelt 3 inchre meg nem valik olvashatova a 12px-re beallitott verdana.
A cikket olvasva ugy velem, mindenek elott el kell donteni, hogy ki a celkozonseg: ha aztali felhasznalo, akkor arra kell beallitani a designt, ha mobilos, akkor arra.
Ha mindenkihez szol a dolog, akkor szerintem celszerubb a kis felbontasra egy osszefoglalo/tajekoztato tervezese es kozreadasa, mint a 800x600 gyurmazasa css-sel.
Oké
Nagy felbontáson szemre, kis felbontáson méretre
2 ajánlott progi
1) Firefox kiegészítő NoSquint, hogy domainenként lehessen szövegméretet állítani.
2) WinSplit: nagy monitoron az ablakok gyors átméretezése/áthelyezése.
+1, Sizer
Üdv, Pali
A kérdést a felhasználói oldalról kell megközelíteni
A mobil szerintem egyre hangsúlyosabb lesz, megfelelő html kóddal, és erre a célra külön css fájl segítségével nagyrészt megoldható. Mindenesetre a szigorúan pixelre fix dizájnra épülő oldalaknál ez utóbbi nagyobb problémát jelenthet, de a mobil eszközökön úgyis a tartalom kaphat nagyobb hangsúlyt, kicsit a print css megoldásokhoz hasonlóan a "könnyített" dizájn jó megoldás lehet.
Természetesen a cikkben említett külön mobil verzió is jól jöhet, de itt már érdemes a felhasználói igényeket felmérni, és ha az oldalunk témája, tartalma valószínűsíti a mobil igényeket, akkor erre külön fejleszteni. A mobil böngészők terjedésével feltételezhetően kialakul az igény az elérhető tartalmakra, mondjuk egy fotós portfolio oldalt nem hiszem, hogy optimalizálni kellene 320px szélességre, míg egy utazási portál számára hasznos lehet a külön mobil verzió.
A megjelenítés szintjeit is érdemes figyelembe venni (tartalom-html, design-css, effekt-js-flash), mivel a mobilomon nem biztos, hogy tudok, vagy akarok flash reklámokat nézegetni. A hirdetői oldalon is érdemes alternatívákban gondolkodni...
Mindenestre a kérdés szerintem rövid időn belül megkerülhetetlen lesz, ahogy az ipod magával hozta az mp3-as lejátszók tömeges elterjedését, valószínűsíthejük, hogy az iphone is elindítója a mobil internet elterjedésének, hiszen a szolgáltatás már itthon is kezd elérhető és megfizethető lenni.
ha az origo, akkor én is
én úgy vagyok a felbontással, hogy ami az origo.hu nak jó, az nekem is. Szóval ha ők bevállalják, az 1024et, akkor én sem fogok foglalkozni a kisebb felbontású emberkékkel, így is fogyóban a számuk.
nameg ha minden oldal kedvez nekik, akkor aztán végképp később fognak váltani nagyobb monitorra.:P
Ja én amúgy még olyan radikális lépést is tettem, hogy csak firefoxra optimalizálok, a többi böngésző alatt meg se nézem a lapot. Bár Opera, IE7 el nyílván nem lesznek nagyobb gondok, de azért IE6 nál kiíratok egy piros szöveget, hogy ezt azért nem kellene.:D
ui.: az oldal végülis vistábval foglalkozik nagyrészt, ott pedig alapból IE7 van és elég ütős gép kell a futtatáshoz, tehát a nagyfelbontás is majdnem biztosan megvan.:)
és ha az origo kútba ugrik?
origoval kapcsolatban: és ha az origo szart csinál, te is szart csinálsz? a magyar web nagypályásai sajnos nem a minőségi munkáról híresek. sőt. nekem személy szerint pl. lennének gondjaim az origó felépítéséve. de ez csak magánvélemény.
ugyfel orientalt
Szeretnem parhuzamba allitani bolti, ettermi, banki, vagy egyeb szolgaltatassal. Ugy velem nem ez az irany, amerre haladnunk kellene, mert ez csak visszafele megy arra amerrol menekultunk: unott arcu eladok azt mondjak: nincs, pincer, aki nem jon az asztalhoz, mert eppen beszelget, bank, amibol van 2 es csak azt nem adja szolgaltataskent, amire az embernek szuksege van.
Nem tudom, hogy a megrendelod mit szol ahhoz, hogy a latogatok 50%-val egyaltalan nem foglalkozol (lasd a statisztikai bemutatomat az IE 7 Update for Pirated Windows Users blogmark mellett.)
1024 vs hozzáállás
Az nem mondás, hogy csak Firefoxban tervezel, mert a Firefox is bugos. Hanem hiszed, járj utána. Ha Te a személyes oldaladon az IE6-ot ki akarod tiltani, hajrá, legszívesebben én is így tennék, de nem egy nagyközönségnek szánt oldalon.
sikerült kiforgatni a szavaim
Nyílván nem, de ha ők hoztak egy ilyen lépést a sok százezres nézettséggel, akkor azt gondolom ez azt jelenti, hogy a többség (látogatók) felkészültek a váltásra, márpedig az origo nem tekinthető szakmai lapnak.
Nem tudom ezalatt mit értesz, én mindenesetre nehezen találom meg a helyem az információ tengerben. Azt se tudom hova nézzek érzés :D
A megrendelő tökéletesen megvan elégedve a munkámmal, mert ott kétségtelen, hogy át kell gondolni/beszélni a kompatibilitás témát (felbontás, böngészők...), én viszont most a saját, szakmai oldalamról beszéltem.
??? 3-4% 800x600ból hogy lett 50? Böngészők terén IE7, Opera Firefox alatt tökéletes és IE6 alatt sincsenek komolyabb gondok...statisztikám..:
Msie 7.0 37.8 %
Msie 6.0 17.5 %
Firefox 2.0.0.7 29.3 %
Firefox 2.0.0.6 2.3 %
Opera 6.7 %
Egy Windows Vista oldalon a nagyközönségnek Vistája van, amin alapból Internet Explorer 7 van. Aki XP miatt jön, annak a vistás részen belül lehetnek kinézet gondjai, mivel ezt nem ellenőrzöm, de ettől még használható a lap. Az XPs rész pedig teljesen.
Remélem megnyugtattam mindenkit...:D
Mekkora képernyőre optimalizáljuk az oldalunkat?