2020-as eszköz felbontások a hazai internetezők körében

2020-as eszköz felbontások a hazai internetezők körében

2020-as eszköz felbontások a hazai internetezők körében 900 507 Rottenbacher Tamás
Napjainkban naponta jelennek meg új mobiltelefonok, tabletek, laptopok, monitorok. Tudod, milyen felbontásokra érdemes felkészülnöd és mikkel érdemes tervezni? Bemutatom röviden és összegzem a 2020-as év méréseit. Vannak változások és jól kivehető trendek, amikről érdemes tudnunk, ha időtálló és hosszú életű weboldalt készítünk, vagy olyanra vágyunk. Az adatok pár hónaposak, azonban amit mutatnak, az az idei és a jövőévi irányokat is meghatározza.

Mobiltelefonok felbontása

A mobil szegmensben továbbra is kitart a kijelző méret növekedés trend. A felmérések alapján a felhasználók 22,81%-a 360×640 px felbontású mobil kijelzőn nézte a vizsgált honlapokat Magyarországon. Ez minden ötödik mobilos felhazsnáló felbontása.  A szegmensen belül a második leggyakoribb eszköz felbontás a 360×780 px, harmadik 375×667 px lett. A hazai mobilon internetezők több mint 55,05%-nak 360px széles kijelzője van. A 360 alatti szélességek aránya ~3% körül vannak.

Tabletek terén

A tabletes csoport elég széles kört lefed. Amennyiben felbontás alapján veszünk egy eszközt tabletnek. Bővült a piac mind a kisméretű, mind a nagyobb kijelzős, erősebb tabletek terén is, mint például iPadPro. Ezen kategóriában a leggyakoribb 32.57%-al a 768×1024 px felbontás. Második helyen a 800×1280 px, mely 19,08%-on áll (1280×800 és 800×1280 együtt nézve). Harmadik helyen a 600×960 px áll, 11,59%-al (itt is a 960×600 is beleszámítva).

Laptop és netbook részről

A laptop szegmensben nem történt jelentős változás. Első helyen 26,19%-al 1366×768 px felbontás áll. Második helyen 9,81%-al az 1556×864 px felbontású lesz. További ~5%-on van az 1280×1024 és 1440×900 px felbontás is. A FullHD 1920x1080px felbontás az asztali számítógéphez tartozik, így az ott kerül beszámításra.

Asztali gépek esetén

Az asztali gépek kategóriájában továbbra is vezető a FullHD, 1920×1080 px felbontás, 21,33%-al. Ez egyre több laptopnál is elérhető és növekvő trendet mutat. Második és harmadik helyezett nem kifejezetten erős, így nem is érdemes kiemelni. Nagyon nagy a szórás, annyi féle felbontású és méretű monitor található a piacon. Amikkel érdemes számolni, az inkább a képarányok. A 16:9 standard, a 16:10 és a 21:9-es. A 4K felbontást weboldal esetén nem érdemes számításba venni még.

Mire optimalizáljunk végül?

Mindig érdemes figyelembe venni a célcsoport eszközhasználatát a honlap megtervezésekor. Gondolok itt arra, hogy egyre több fejlesztő laptopon dolgozik, gyakori a Macbook széria. Ráadásul a fejlesztők mind aktív mobil telefon használók. Így mobiltelefonon és laptopokon makulátlannak, könnyen használhatónak kell lennie. Például 4K felbontásra nem kell nagy hangsúlyt fektetni, maximum a wide és super-wide felbontásokat ellenőrizni.

Idén kezdenek térhódításuknak a hajlítható kijelzős mobil készülékek, például Galaxy Fold, Huawei Mate X széria. Az szinte biztos, hogy sok honlap megjelenésével lesz gond ezen eszközökön. Persze azt is vegyük figyelembe, hogy mivel nagyon (de tényleg nagyon) drágák ezen eszközök, így nagyon elenyésző a felhasználóik száma jelenleg. Azonban ettől függetlenül, a jövőben mindenképpen figyelembe kell venni a tervezésnél, fejlesztésnél.

Általános esetben Én három megjelenést tervezek. Ezek a következők:

  1. Mobil megjelenés, ez szélesség tekintetében 320-tól kezdődik és 767 px-ig tart. Ez lefedi szinte az összes jelenlegi mobiltelefon felbontás szélességét.
  2. Tablet+Laptop megjelenés, ami 768 és 1599 px között van. Ez a laptopok (ami nem FullHD) terén majdnem az összeset lefedi.
  3. Asztali gép megjeleés, ami 1600 px szélességtől felfelé van, az elérhető legnagyobb felbontásokig.

A fenti megosztásokkal készítem a munkáim és ezek alapján készítem a tereket is, továbbá a szükséges lekéréseket, hogy minél jobban optimalizált legyen a kód. Továbbá perszóna függő, azonban amikor B2B oldalt tervezek, azzal számolok, hogy a cégvezetők igen jelentős része laptoppal rendelkezik és azt használja elsődlegesen, így az ehhez tartozó felbontásokat priorítással kezelem. Ez azonban csak egy példa volt, ennél jóval komplexebb az egész.

Rottenbacher Tamás

Összefoglalva

Fejlesztőként már az elsődleges irány a mobile-first line. Vagy is először a mobiltelefonos (esetleg tabletes) megjelenítést kell megterveznünk és elkészítenünk, majd innen kiindulva kell a szélesebb felbontásokra is optimalizálni a weboldalunk megjelenését, miközben a reszponzivitás és funkcionalitás megmarad. A fentebb vázolt 3-as elrendezést tudom bárkinek ajánlani, nagyon jól használható és kellően dinamikus.

A statisztikai adatok a statcounter.com oldaláról származnak, melyeket 2020-ban gyűjtöttek, hazai weboldalakon mért adatok feldolgozásával.

Rottenbacher Tamás

2006 óta foglalkozok weboldal készítéssel és 2007 óta keresőoptimalizációval. WordPress honlapokat 2008 óta készítek. Ha kérdezne írjon hozzászólást vagy email-t a "Kapcsolat" menüpontban.

Közösségi profiljaim:

Honlapunk cookie fájlokat használ, hogy jobb böngészési élményt biztosíthasson és forgalom mérést végezzen.