Reszponzív, mobilbarát honlap készítése

Reszponzív, mobilbarát honlap készítése

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.

A cikk képeit a szerző, Wallon-Hárs Viktor készítette. Másolás, engedély nélküli felhasználás tilos!

Megrendelőim mondták...

Kótai Mónika, szerkesztő (Sopron anno helytörténeti honlap)

Szerkesztőként naponta átélem azt a biztonságot, amit Viktor nyújt azzal, hogy elérhető, hogy segítőkész és végetlenül precíz.

Prázmári Mihály, búzafű termesztő (Zöldudvar)

Viktornál már első találkozásunk alkalmával tapasztaltam egy más számára is átvehető nyugalmat, ami egyértelművé vált közös munkánk során.

Kondor Szilvia, jóga oktató (Yoga & Balance, jógastúdió)

Szívből tudom ajánlani mindenkinek a Wahavi - honlap tervezés-t! Viktor nagy tapasztalattal rendelkezik, megbízható és elérhető.

Kós Marianna, mediátor (Elite Mediátor Iroda, Budapest)

Megbízható, precíz, gyors, körültekintő és még annál is szélesebb körű együttműködésre, támogatásra számíthatsz, mint amit vállal.

Hargita Eszter, tulajdonos (Hargita Home Ingatlan Közvetítő Iroda)

Megbízható, rugalmas, elérhető - ezek jutnak először eszembe, ha Viktor munkájára gondolok.

Erdélyi Gabo Gábor, tetováló művész (Gaboart Tattoo, Piercing & Art Studio)

Stresszmentes és kreatív összhang, gyors és megbízható. Nem lesöpri a kéréseidet, hanem megoldja.