Hírek

Mire ügyeljünk a mobil nézet kialakításánál?

2022-08-28

Hogyan készítsünk mobiltelefonra is optimalizált weboldalt? Ebben a cikkban nem mutatjuk be ezt kód szintjén, feltételezzük, hogy ismered a CSS-t. Mire kell ügyelned a technikai dolgokon felül? Tanácsok

Reszponzív mobil weboldal


Ez a cikk nem mutatja be pontosan, hogyan kell a weblapodhoz megfelelő mobilnézetet kialakítani, feltételezzük, hogy ismered a CSS-t. Ha nem, akkor tanuld meg profi módon a Prooktatás front-end alaptanfolyamán.

 

A weboldal mobil nézetének kialakításánál az alap elgondolás, hogy a desktop nézetben egymás mellett lévő elemek egymás alá kerülnek, ezt például flexbox-szal érhetjük el. A mediaquerry-vel pedig új css-t írunk, ami csak bizonyos képernyőszélesség alatt érvényesül. De ezt úgyis tudod! Mire kell ügyelned ezen felül? Pár fontos gyakorlati tanács.

 

Tudjuk hány pixelre optimalizálunk

 

Saját statisztikáink alapján az emberek több mint fele 360-393 pixel közötti képernyő szélességben böngészi a weboldalakat. Erre az intervallumra érdemes tehát optimalizálni. A gyakorlatban a legkisebbre, a 360-ra kell igazán odafigyelni, viszont a mediaquerrynél már legkevesebb 600 pixelnél át kell, hogy váltsunk mobil nézetbe. Ne tévesszen meg minket, hogy telefonunk felbontása papíron ennél jóval magasabb!

 

Betűméret

 

Az, hogy a betűméret jó desktop nézeten, még nem jelent automatikus sikert a mobilnézet tekintetében. Valószínűleg mediaquerryt kell írnunk, hogy a betűk mérete a kis képernyőn is jó legyen. De mit jelent, hogy “jó”? Első sorban, ne legyen túl kicsi, mert az nehezen olvasható, és ez már nem csak a weboldalunk látogatóinkat zavarja, de a Google is tudni fog róla. Ha egy címnél nem is, egy normál szövegnél a túl nagy betű is zavaró, mert akkor állandóan scrollozni kell az olvasáshoz. Általában soronként 5-7 szó remekül olvasható mobilon, még egy zötykölődő villamoson is :) Sokan a 14- pixeles betűméretet javasolják mobilon.

 

A betűméret problémára jó megoldás lehet, ha eleve vw (viewport) mértékegységben adod meg a betűméreteket, már a desktop nézet írásakor is. Ezzel elérheted, hogy a szövegben, különösen egy cím esetén, mindig ugyanott legyen a sortörés. A címeken kívül a vw használatát a köztes, mobil és desktop nézet közötti, kb. 600 és 1200 pixel közötti intervallumban érdemes használni. A két végponton azonban, a mobil és desktop nézetben akkor is érdemesebb min és max fix betűméreteket beállítani mediaquerryvel, mert különben a betűid túl kicsik vagy túl nagyok lesznek.

 

Túl közeli elemek

 

Desktopon nem baj, ha két kattintható elem közel van egymáshoz, az egér egy pontos eszköz. Az ujjbegyünk ennél sokkal tompább, mondhatnám böszmébb, így könnyen mellé nyomhatunk! Figyeljünk oda, hogy a gombok, feliratok, menü elemek elég messze kerüljenek egymástól mobil nézetben.

 

Padding és margin

 

Desktop nézetben ugye nem néz ki jól, ha a szöveg faltól falig ér, ezt padding és/vagy margin megadásával oldjuk meg. Egy 80-120 pixeles padding mindkét oldalon desktop nézetben a szemnek kellemesen nézhet ki, de ugyanez mobilon már elfoglalja a képernyő felét. Érdekes módon a mobil keskeny képernyőjén már néhány pixeles távolság a képernyő szélétől elegendő, a képeknél pedig érdemes teljesen elhagyni. A lényeg: ne hagyjuk ki margint és a paddingot a mediaquerryből!

 

Hamburgermenü

 

Sokféleképpen tehetjük elérhetővé aloldalainkat mobil nézetben, de ezek közül kérlek használd a hamburger menüt! Egyszerűen ez terjedt el, erre számítanak a felhasználók, és ha ettől eltérő megoldást választunk, valószínűleg látogatókat fogunk veszíteni. A hamburger menü hamburger ikonja floatoljon, ahogy lefelé scrollozunk a weblapon, mert senki sem szeret “visszamászni” az oldal tetejére, csak hogy megnézzen egy oldalt a menüben.

 

Figyeljünk arra, hogy mobilon nincs hoover effekt! Amikor desktopon az egér elem fölé vitelével hozunk elő tartalmat, például al-menüpontokat, akkor mobilon ez “kattintásra” kell, hogy előjöjjön (de magától nem fog). Alternatív megoldás, ha egyszerűen már kibontva kerülnek fel a menüpontjaink a mobil menübe. Függőlegesen ugyanis jelentősen több menüpont is jól átlátható marad, mint desktop nézetben a vízszintesen egymás mellett álló menüpontok esetében.

 

Végül arra is figyeljünk, hogy ha bármi kimarad a mobil nézetből (például egy aloldalra mutató link) azt esélyes, hogy a Google nem fogja egyáltalán feltérképezni.

 

Méret

 

Ha elégedett látogatókat és jó SEO-t szeretnénk, akkor a weboldalunknak mobilon is be kell töltődnie 3 másodperc alatt. Erre rengeteg technológia van, azonban a legegyszerűbb, ha egyszerűen csökkentjük az adatmennyiséget.

 

A képek nagyon sok helyet foglalnak, de felesleges részletes, 2000 pixel széles képet megjelenítenünk, ha azt csak 375 pixel szélességben látja majd a felhasználó a készülékén. A talán legegyszerűbb módszer, ha a kevéssé használt HTML picture taggel egy másik, kisebb képet töltünk be mobil nézetben. A WordPress oldalak is azért maradnak viszonylag gyorsak mobilon, mert minden képről több változat is készül és jelenik meg, különböző képernyő méreteken.

 

Ha esetleg mozgókép, videó van a weboldalunkon, azt mindenképp cseréljük le egy normális képre. Elég, ha kattintásra töltődik be az a videó, annak, aki erre vágyik!

 

Weboldal hossza és tartalom

 

Mivel mobil nézetben az egyébként egymás mellett lévő tartalmakat egymás alá tesszük, könnyen lehet, hogy az oldalunk túl “hosszúvá” válik, sokat kell scrollozni lefelé, hogy a minket érdeklő tartalomhoz jusson a felhasználó. Nem tudunk róla, hogy ezt a Google büntetné, de a felhasználók számára kellemetlen lehet, mivel nem csak az oldal hosszabb mobilon, de ugye az ujjunkkal lefelé hajtani több energia és idő, mint az egérrel gyorsan lefelé görgetni. Ne felejtsd el, hogy sokan a munkából hazafelé jövet, két villamosmegálló között nézik meg a weboldaladat, és ha nem találják meg gyorsan, amit keresnek, egyszerűen kilépnek.

 

A problémára két megoldás-kör van. A design alapú, ennek egy példája, hogy az elemeket és a köztük lévő távolságot kisebbre vesszük, vagy átrendezzük mobilon. A tartalmi megközelítés lényege, hogy mobilon egyszerűen elrejtünk elemeket, tartalmakat. Arra viszont ügyeljünk, hogy csak olyan tartalmat hagyjunk ki, jellemzően a főoldalról, ami egyébként a menüből továbbra is elérhető marad, vagy ami nem lényeges, csak töltelék jellegű design elem vagy szöveg desktop nézetben.
Azt is megtehetjük, hogy csak a címeket hagyjuk meg, amik alatt csak egy lefelé mutató nyíl megnyomásával jelenik meg a tartalom; ezt a GYIK-nál például nagyon gyakran használják.

 

Teszteljük különböző készülékeken, vagy emulátorral

 

Nem elég a nagy otthoni képernyőnkön inspect nézetben ellenőrizni az elkészült munkát! Sőt: nem elég csak a saját mobilunkon csekkolni sem. Ellenőrizzük legalább egy androidos és egy iOS-es készüléken is, utóbbi esetében külön safari-n is nézzük meg az eredményt. Vagy használjunk egy jó kis emulátort, mint amilyen például a Responsinator.
 

Tippek

 

  • nem érdemes egyedi betűstílusokat használni magyar weblapnál, mert mobilon vagy másik böngészőben esélyes, hogy az ékezetes karakterek nem fognak jól megjelenni.

  • nézd meg, hogy jobbra-balra lehet-e elhúzni az oldalaidat mobilon! Akkor jó, ha nem lehet.

  • Fekvő téglalap alakú képek jók desktopon, de a mobil képernyőjén az álló téglalap vagy négyzet alakú képek festenek jól. Ha nem akarsz új képeket emiatt, akkor állítsd be, hogy a képeid középső része jelenjen meg mobilon.