Mi a reszponzív 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!

További cikkeim

Ha a személyes megbeszéléseket szereted, akkor számít, hogy a weboldalad készítője a közeledben lakik.

Sopron, a leghűségesebb város (Civitas fidelissima)

Támpontok a weboldal készítés árának kiszámításához.

Mennyibe kerül egy wahavi honlap elkészítése?

Összeszedtem a szép, dizájnos, csilli-villi újításokat, amiket jobb, ha nem használsz a weboldaladon.

Egy honlap felesleges kiegészítői, plugin-jei

Mi a különbség egy dinamikus és egy statikus weboldal között? Miért készítek kizárólag dinamikus weblapokat?

Wahavi honlaptervezés - Dinamikus vagy statikus honlap?

Milyen típusú weboldalakat készítettem eddig?

Wahavi honlaptervezés - Honlap típusok

Egy wahavi weboldal készítésének lépései az első megbeszéléstől az örök garanciáig.

Wahavi honlaptervezés - Hogyan készül egy wahavi honlap?

Hogyan tudod áthidalni a tapasztalat hiányát kezdő honlapkészítőként?

Hogyan tudod áthidalni a tapasztalat hiányát kezdő weboldal készítőként? - Wahavi honlaptervezés