Téma: Kijelző méret - mi a minimum?

Sziasztok!

Ma már nem is kérdés, hogy egy új lap mobilkész legyen-e, azaz reszponzív felépítéssel készüljön el. Viszont - miután sokat és én is - "media screen" deklarálással dolgoznak, felmerült bennem, mi a legkisebb felbontás, amit még érdemes css-ben formázni.
Jómagam ezeddig az alap stíluslapon kívül (ami asztali változat) négy féle reszponzív stíluslapot kezelek, lefedve minden képernyőt:
Tehát:
Style.css
Style-300.css (300 - 479 px)
Style-480.css (480 - 639 px)
Style-640.css (640 - 1023 px)
Style-1024.css (1024 - 1279 px)

Szeretném viszont elhagyni a 300 és 480 méretre formázást, mert szerintem ma már nincs 640 alatt valamire való kijelző. Úgy értem, lehet, hogy van, de nem hinném, hogy az üzleti életben bárki is ilyet használ manapság.

Mi a véleményetek, tapasztalatotok? Szerintetek érdemes még ilyen kis kijelzőmérettel számolni, főleg úgy, hogy a mobil és tablet + hibrid piac egyre jobb felbontásokat produkál és cserére ösztönzi a fizetőképes fogyasztóit, főként az üzleti klienseket?

Köszi előre is!

Lachazi eredeti hozzászólása

Szeretném viszont elhagyni a 300 és 480 méretre formázást, mert szerintem ma már nincs 640 alatt valamire való kijelző. Úgy értem, lehet, hogy van, de nem hinném, hogy az üzleti életben bárki is ilyet használ manapság.

Attól függ, mi a célközönséged. Mert átlag embereknél több ilyen készülék van, mint nagyobb felbontású. Másrészről pedig nem mindig a telefon felbontása a lényeg. Nekem pl. full HD kijelzős telóm van, és azért, hogy élvezhetőek legyenek az oldalak, böngészéskor viszont auto butítja harmadára, hogy élvezhetőek legyenek az oldalak (felbontás marad, de pl. javascriptnek azt mondja, hogy ő harmada annyi minden irányban, és skálázza is a kapott oldalt). Így állított helyzetben 360px, és beleesik a törölni kívánt css méretbe.

Egyébként ez normális, és ajánlott CSS specifikációban. Szerintem jó pár telefon dolgozik így.

Igen, köszi - már én is észrevettem! Sajnos, nem maradhat ki akkor a felbontási-skála, de szerintem redukálható kissé. Átnéztem pár nagyobb cég oldalát (pl. aqua, laptop...stb) és meglepődtem azon is, hogy szinte mindegyik 980 és 1024 px széles.
Ez vagy azért van, mert így könnyebb optimalizálni mobilra, vagy pedig egyszerűen csak a felhasználói szokások nem igazodnak a teljes képernyős honlapok elvárásaihoz.
Így most azt próbálom, hogy beszorítom 320-639 és 640-1023 közé a media screent. A célközönség kizárólag üzleti, így szerintem nem lesz probléma a készülékekkel és a látvánnyal...

Szerintem ha már van egy olyan html-ed, amit tudsz mobilra, tabletre és pc-re is optimalizálni css-sel, akkor már jó vagy. Csak azt oldd meg, hogy tényleg responsive legyen, magyarán a 320-639px-es CSS ne 320px széles oldalt kreáljon, hanem legyen 100% széles az oldalon, és %-ban ossza el az elemeket benne.
Igazából arra kell külön CSS, ahol az oldal szerkezete, felépítése változik, pl. olyan elemeket kerülnek egymás alá, amik eredetileg egymás mellett vannak. Csak azért, mert más méret, azért nem kell külön CSS. Így bőven elég egy mobil, egy tablet és egy pc nézet, ha az oldalad olyan.

Arra érdemes még figyelni, hogy a kiegészítő elemek (ajánlódoboz, oldalsáv, kapcsolódó linkek, esetleges hirdetések stb.) ne csak elrejtve legyenek ha kis felbontású a céleszköz, de le se töltődjenek - így a mobil méretű verzió nemcsak kisebb lesz, de gyorsabban is töltődik le.

wzol eredeti hozzászólása

Arra érdemes még figyelni, hogy a kiegészítő elemek (ajánlódoboz, oldalsáv, kapcsolódó linkek, esetleges hirdetések stb.) ne csak elrejtve legyenek ha kis felbontású a céleszköz, de le se töltődjenek - így a mobil méretű verzió nemcsak kisebb lesz, de gyorsabban is töltődik le.

Ezzel nem értek egyet. Ha én PC-n összehúzott ablakban töltöttem be az oldalt, és utána széthúzom, mert felkelti az érdeklődésem, akkor ennyi volt a nagy design... ha be sem töltöd a tartalmat, akkor abból semmi reszponzivitás nem lesz, akkor ez egy külön mobil verzió és külön aloldal. Azzal egyet tudok érteni, hogy tényleg sokmegás hirdetések és hasonlók ne töltődjenek be, de nehogymár a pár bájtos vagy egy-két KB-os kapcsolódó linkek, ajánlódoboz és hasonlók ne töltődjenek be.

Teljesen igazad van, természetesen úgy kell megcsinálni, hogy ha letöltés után változik a méret - és itt a széthúzás jó példa, de ugyanígy elég ha állóból fekvőbe fordítod a kütyüt - akkor ami még fér, azt utólag letölti az oldal, a CSS meg a helyére rakja, beformázza. Ezt szépen le lehet kezelni egy jQuery

Kód:

$(window).resize(function() {	});

blokkal.

Egy egyszerű ajánlódoboz nyilván nem okoz gondot, viszont ha cikkből kivett képeket tartalmaz, van mellettük Like gomb is és még mondjuk animált is, akkor már érdemes elhagyni.

Ennek többek között akkor van nagy jelentősége, ha például az oldalsávban hirdetés fut:
- ha megjelenés alapú a szerződés, akkor mobil ablakszélességben is letöltődne, "megjelenne", rejtve, ami nem túl fair a partnerrel szemben
- ha AdSense van az oldalsávban, akkor az ilyenkor rejtett lehet, amit a Google nem kifejezetten értékel

Ha én PC-n összehúzott ablakban töltöttem be az oldalt,

akkor a screen verzió töltődik be és nincs ilyen gondja. Ezért kell megadni.

Én mindig innen szedem a méreteket:
websitedimensions_com

És szerintem nem árt 640 alá is optimalizálni, mert több olyan üzletember is van (kiindulva ismerősökből, családból), akik lehet, hogy kisebb képernyőjű telefont használnak, de mégis sikeresek az életben, és számodra fontosak. Szerintem nem a telefon képernyőtől függ.