Mi a reszponzív, avagy mobilbarát weboldal lényege? Miért fontos, hogy weblapod optimalizált legyen a különféle eszközökre?
Mind a mai napig találok olyan honlapokat az interneten, amik csak asztali monitoron mutatnak, telefonon sehogy sem néznek ki. Világszinten a mobilon internetezők aránya 55% körül mozog, de ez a szám egyes országokban sokkal magasabb (USA, India 80-90%).
Tehát manapság már nem az a kérdés, hogy érdemes-e, kell-e mobilra optimalizálni egy honlapot, hanem (kis túlzással) éppen fordítva, érdemes-e asztali monitorra optimalizálni egy weboldalt?
A modern honlapok (főleg a blogok) már érezhetően csak mobilra vannak kihegyezve, asztali gépen kissé "primitív"-nek tűnnek a hajdan oly sokat használt dizájn elemek (árnyékolás, lekerekítés, vésett szöveg, sarokdísz stb.) hiánya miatt.
Ez a kérdés persze tartalom és célcsoport függő. A Sopron anno interaktív térképeket megjelenítő oldalai sokkal élvezhetőbbek nagy monitoron, mint kicsi telefon képernyőn. A mindennapi internethasználat azonban a gyors információszerzésről szól, amihez a mindig zsebben lapuló mobil tökéletesen megfelelő.
A mobilon való megjelenítés két módszere
Alapvetően kétféle módszert használok a mobilra való optimalizáláshoz.
- mobil verzió
- reszponzív töréspontok beiktatása (reszponzív = válaszoló, vagyis a monitor méretéhez igazodó)
A mobil verzió azt jelenti, hogy az asztali monitorra kidolgozott honlapnak elkészítem egy attól kinézetben teljesen különböző változatát, gyakorlatilag egy másik weboldalt (közös tartalommal).
A reszponzív töréspontok beiktatása azt jelenti, hogy a honlap kinézetéért felelős fájlba (CSS) újabb kódok kerülnek, meghatározva a képernyő szélességét (magasságát), aminél kisebb/nagyobb képernyőjű eszközön az eredeti kódok helyett az optimalizált kódok lépnek működésbe.
Példa: az asztali képernyőn 1200px szélességűre tervezett tartalmi blokk egy 1200px-nél keskenyebb kijelzőn (mondjuk mobilon) a teljes képernyőt kell, hogy kitöltse, nem lóghat ki. Itt az első (egyik) reszponzív töréspont az 1200px-nél lesz.
A mobilok terjedésekor néhány honlapomat mobil verzióval készítettem el, de hamar rájöttem, hogy praktikusabb, és hosszútávon egyszerűbb is, ha a reszponzív megoldással teszem mobilbaráttá a weboldalaimat.
A fent említett Sopron anno weblap jó példa ennek ellenkezőjére, hiszen ott gyakorlatilag lehetetlen ugyanazt a kinézeti (dizájn) alapot használni kis képernyőn, mint az eredeti asztalin. Mégis tapasztalatom szerint egy-két speciális esetet leszámítva remekül működik a reszponzív megoldás.
Honlapjaim készítésekor már alapszolgáltatás a különböző méretű eszközökre való optimalizálás.
Honlap referenciáimat itt találod.
Köszönöm, hogy elolvastad! Keress bátran!
Wallon-Hárs Viktor
egyéni.egyedi.wahavi.