Korábbi cikkünkben foglalkoztunk a reszponzivitás témájával és azzal, miért is olyan fontos, hogy a te honlapod is reszponzív legyen. Ezt tudva a következő lépés már csak az, hogyan is tudod ezt megvalósítani. Adunk hozzá néhány hasznos gyakorlati tippet.
Saját honlap készítése online szerkesztőkkel
Honlapot készíteni ma már programozói vagy grafikai tudás nélkül is könnyen lehet. Ha nem szeretnéd másra bízni saját weboldalad elkészítését, akkor remek megoldást nyújtanak számodra a különböző online honlapszerkesztő programok. A honlapépítő kiválasztásánál nagyon fontos szempont, hogy az azzal készült honlap automatikusan reszponzív legyen vagy létezzen olyan beállítási lehetőség, amellyel ezt el lehet érni. A domdom honlapszerkesztőjénél alapfunkció, hogy a megépített weboldalak reszponzívan működnek. Létezik azonban néhány praktika, amelyekkel igazán profivá teheted saját honlapod megjelenését minden képernyőméreten.
Adj meg egyedi tulajdonságokat honlapod sávjaihoz
A szerkesztőben megépített honlapod különböző sávokból áll. Ezek nagyon sokfélék lehetnek, tartalmazhatnak képeket, szövegeket, gombokat, linkeket de kitölthető mezőket is. Ami asztali számítógépen esztétikus, nem feltétlenül mutat jól egy jóval kisebb képernyőjű telefonon. Ezért lehetőséged van rá, hogy az egyes sávoknál egyedileg állítsd be, hogy mi legyen az a minimum vagy maximum képernyőméret, ahol az adott sáv jelenik meg.
Tegyük fel, hogy elhelyeztél egy gyönyörű de nagyméretű képet a honlapodon. Ez asztali gépen nagyon jól fog kinézni, telefonon azonban nagyon sok helyet elvehet ezért rontaná a weboldalad használhatóságát, ezért dönthetsz úgy, hogy aki telefonról nézi az oldaladat, annak inkább ez a kép ne jelenjen meg.
Így állíts be egyedi paramétereket a kép sávhoz:
- A szerkesztőfelületen mozgasd a kurzort a kép sáv fölé, és a jobb felső sarokban megjelenő ikonok közül kattints az okostelefont ábrázoló "Reszponzív láthatóság" elnevezésűre!
- A felugró ablakban állítsd be, hogy minimum hány pixeles legyen az a képernyő, amelyen a képet még szeretnéd megjeleníteni! A legkisebb érték, amit megadhatsz a 300 pixel lesz. Ennél kisebb képernyőben ma már nem érdemes gondolkodni.
- Maximum pixelértéket is megadhatsz, ha azt szeretnéd, hogy bizonyos képernyőméretnél nagyobb eszközökön már ne látsszon az adott kép.
- Mentsd el a beállítást és kész is vagy!
Ellenőrizd honlapod mobilos nézetét!
Ha úgy gondolod, minden beállítással elkészültél, teszteld a gyakorlatban is az eredményt! A szerkesztőben kattints az "Előnézet" gombra! A bal felső sarokban válaszd a kis telefon ikont és nézd meg, hogy fest a megszerkesztett honlapod mobilos nézetben. A fenti sávban át is állíthatod a mobilos nézet méretét ezért szinte bármilyen konkrét eszközre nézve ellenőrizheted, hogy megfelel-e az elképzeléseidnek az elkészült honlapod megjelenése.