A felhasználók képernyőfelbontása jelentős szerepet játszik az UX (User Experience) tervezésében. Mivel közvetlenül befolyásolja a weboldalak és alkalmazások megjelenését, olvashatóságát és használhatóságát, mind a webdesignernek, mind a weboldal kódolásást végző webfejlesztőnek oda kell figyenie a leendő látogat&...
Ma már alap, hogy egy webfejlesztő használjon mobilbarát design-t, rugalmas rácsszerkezeteket (CSS Grid, Flexbox), dinamikusan méretezhető betűket és design elemeket. Aki a sebességre is odafigyel, az különböző méretre szabott ikon- és képváltozatokat is használ. De pontosan milyen felbontású képernyőkre érdemes mindezt optimalizálni?
A fenti kérdésre nincs általánosan fellelhető válasz. Ezért a Prooktatás a saját weblapjának többhónapi statisztikáját vette alapul, hogy reális és megbízható képet kapjon. Sajnos a Google Analytics adatai nem voltak azonnal felhasználhatóak, mivel minden létező képernyőfelbontás egy külön sor a megkapott táblázatban, ezért a jelenleg futó Python Data Science csoportunkat kértük meg, hogy egy házi feladat keretében nyerjék ki a releváns adatokat.
Először megtisztították az adatbázist a felesleges adatoktól, majd összeadták az azonos szélességű látogatások számát, végül beletettek egy kis toleranciát is, hogy a pár pixel eltérésű képernyő szélességeket egyben kezeljük a jobb átláthatóság érdekében. A megtisztított adatok alapján az 5 leggyakoribb képernyőszélesség jelenleg a következő:
1. 390 körül: 21%
2. 375 körül: 13%
3. 1920 körül: 12%
4. 360 körül: 9,5%
5. 412 körül: 8,5%
Bár nincs benne az első ötben, de 1536 körüli képernyő-szélességen nézte meg a weblapot a látogatók 7,5%-a.
Először is: a látogatók épp kétharmada mobilon tekintette meg a weboldalt és csak egyharmada a számítógép képernyőjén. Ez tehát alátámasztja a már évek óta hangoztatott webdesigner jelszót: mobile first, ami a tervezést illeti.
Tableten szinte senki nem böngészik a neten, tehát erre nem is érdemes optimalizálni.
A desktop nézetet viszonylag magas, 1920 pixel szélességre érdemes optimalizálni, a mobil nézetnél viszont figyeljünk oda, hogy a weboldal tökéletesen jelenjen meg 360, 375, 390 és 412 pixel szélességen egyaránt!
Az okostelefonok képernyőfelbontása jóval magasabb, mint a fent látható képernyőszélességek. Azonban a mobil böngészők a teljesítmény optimalizálása érdekében soha nem használják ki a telefon lehetőségeit, hanem csak fele, vagy harmad akkora felbontást alkalmaznak, mint amire a készülék fizikailag képes. Ez a gyakorlati képernyőfelbontás a viewport, és például a yesviz.com oldalon pontosan látható a felbontás, a viewport, és a kettő közötti sűrűségi ráta is.
Nem. A töréspontok azok a képernyő szélességek, ahonnan kezdve a design megváltozik, és ezért lehetőleg ne pontosan a legnépszerűbb képernyű szélességekre legyenek beállítva. Javasolt továbbra is az 500 pixel alatt, 600pixel alatt, 1500 felett, és hasonló breakpointok megadása.
A nem megfelelő képernyő szélességre optimalizált weboldalak használata kényelmetlen lehet: túl nagy szélességben megjelenő szöveget olvasni kényelmetlen, ha pedig mobilon oldalra kell scrollolni az olvasáshoz, az már-már elfogadhatatlan. Szintén gyakori hiba a túl kicsi, ezért nehezen olvasható betűméret, illetve mobilon az egymáshoz túl közel lévő gombok, feliratok, amik félrekattintáshoz vezethetnek. A megfelelő képernyő szélességekre való UX tervezéssel ezek a felhasználói élményt romboló jelenségek elkerülhetők.
Deutsch
