Jó, ezt már nyilván te is tudod. De mit is jelent ez tulajdonképp?

Milyen egy reszponzív weboldal? Hogyan viselkedik?

Egy mobileszközökre optimalizált weboldaltól ne várd el, hogy minden kütyün ugyanúgy nézzen ki. Hiszen épp ez a lényege a reszponzivitásnak, hogy minden eszközön másképp jeleníti meg a weboldalt.

Egyik ügyfelemnél épp ez történt, hogy bemutattam neki az új weboldalát, és a frász jött rá, amikor meglátta a tabletjén, hogy az mennyire “szét van esve”. Legalábbis ő úgy látta, hogy az asztali gépen megjelenő verzióhoz képest ez teljesen szét van vagdosva, nem is egymás mellett vannak az elemek, hanem egymás alatt, és hogy lehet ez? És egyébként is, hova tűnt a menü?! 🙂

Szerencsére sikerült megnyugtatnom, mielőtt túl magasra szökött volna a vérnyomása 🙂 Elmeséltem neki, hogy ha a kicsi tabletjén ugyanúgy jelenne meg a weboldala, ahogyan azt az asztali gépen látja, akkor nagyon kicsik lennének az elemek, és nagyon nehéz lenne kezelni a egészet. Ez ismerős volt neki, találkozott már ilyen weboldalakkal a tableten böngészve… 🙂

Mondtam neki, hogy a weboldala érzékelte azt, hogy ő most egy kisebb eszközön próbálja megjeleníteni, és igazodott ehhez. Beterelte a tartalmat arra a helyre, amennyi rendelkezésére állt, és ehhez képest igazította a lehető legolvashatóbb és kezelhetőbb formára.

Ezután elfordítottuk a tabletet álló nézetbe, a kép megint megváltozott.

Vagyis mi a lényeg?

A reszponzív weboldal mindig érzékeli, hogy mekkora mobileszközön kell megjelennie, és igazodik annak képernyőjéhez. Így lesz a kicsi képernyőre bezsúfolt és használhatatlan weboldalból egy kényelmesen és jól láthatóan használható weboldal.

Mire számíts a kinézetét illetően?

Arra, hogy az egyes elemek valószínűleg úgy fognak kinézni, mint az asztali verzióban. Olyan lesz a színük, a megjelenésük. De a helyzetük nem. Ha asztali gépen például három blokkot látsz egymás mellett, az mobileszközön már egymás alatt fog megjelenni. Egész egyszerűen azért, mert ha egy elem nem fér el fizikailag egy adott helyen, akkor ahelyett, hogy a méretét változtatná, és bezsugorodna a kisebb helyre, inkább megtartja a méretét – vagy akár növeli is azt -, és bemászik egy új sorba, vagyis vizuálisan alá kerül a tőle balra lévő elemnek.

És hova tűnt a menü?

Nos a menü általában “elbújik” ilyenkor 🙂 Vagyis nem egészen elbújik, inkább csak álcázza magát. Mégpedig jellemzően három darab vízszintes csíkocskával (esetleg egy Menü felirattal), ami a menü helyén jelenik meg. Mivel a teljes menüsor jellemzően nem fér el kicsi képernyőkön, ezért ahelyett, hogy két-három-sok sorba szétcsúszva jelennének meg a menüpontok, inkább egy elegáns megoldással egy kis szabványos ikon jelenik meg az egész menüsor helyett, amire ha az ujjunkkal rábökünk, akkor megjeleníti nekünk a menünket szépen, olvashatóan, jól láthatóan.

Hogyan lehet reszponzív weboldalt készíteni? Ezt is megtudhatod a TrendiNet WebSuli online tanfolyamain!

Honnan tudhatod egy weboldalról, hogy reszponzív, ha épp nincs nálad semmilyen mobileszköz amin megnézhetnéd?

Egyszerű, figyelj! Kicsinyítsd le a böngésződ ablakát, és változtasd az ablak szélességét. Ha a weboldal a kereteken belül marad (néha kell egy kis idő, hogy igazodjon), átrendeződnek az elemek, és egy bizonyos szélesség alatt átvált a menüsor a “három csíkos” megjelenésre, akkor az a weboldal reszponzív. Ha viszont kimászik a keretből, és egy része nem látszik többet az ablakon belül, akkor az még nem reszponzív weboldal.

Csinálj magadnak reszponzív weboldalt!

A TrendiNet WebSuliban már a kezdő tanfolyamon is reszponzív weboldal készül minden hallgató által! Ha Te is szeretnéd elkészíteni magadnak weboldalad, gyere, és csatlakozz a hallgatókhoz!

 

Ezek is érdekelhetnek, nézd csak!