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...

Hargitai Gábor, buddhista tanító (Buddhista Misszió)

Rugalmas, együttműködő, megoldáscentrikus, nyugodt, kiegyensúlyozott.

Bögölyné Molnár Szilvia, fotóművész (Studio Kópháza)

Precíz, maximalista, kedves, pontos, abszolút megfizethető, minden kérést teljesít, szívből ajánlom mindenkinek!

Orbán Júlia, igazgató (Pedagógusok Soproni Művelődési Háza)

Motivációja, elkötelezettsége, precizitása munkája iránt példaértékű. Megbízható, kreatív tevékenysége nagy segítség számunkra.

Sziklai Ákos, építész (sziklaiakos.hu)

Pont olyan lett a honlapom, amilyet szerettem volna. Kreatív, együttműködő és türelmes, jó vele dolgozni. Teljesen meg vagyok elégedve vele.

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.

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.