Mitől lesz reszponzív egy weboldal? Milliónyi cikket olvashatunk a reszponzivitás fogalmáról, a gyakorlati megvalósítás esetén azonban még mindig akadnak problémák.
Egy általános weboldal mobil nézete időnként meglepő képet fest. Sok CMS-hez készült témával találkoztam már ami büszke is rá hogy reszponzív de a Google mobilbarát tesztjén sajnos elbukik.
Mit jelent a reszponzivitás?
Alkalmazkodást! Ha változik a nézet pl: átméretezett böngésző, az oldal reagál rá. Azaz egy adott weboldal ugyan különbözőképpen jelenik meg a különböző eszközökön és képernyőfelbontásokon, de mindenhol optimális mértékben tölti ki a rendelkezésére álló helyet.
Hogyan érhetjük el?
- Képeinket több méretben tesszük elérhetővé
- Media query használatával a css fájlokban
- Media query feltételes css fájlbetöltéssel
A technikai részletek kifejtése nem célja a cikknek így ebbe itt nem is fogok túlzottan belemélyedni. A lényeg, hogy több mód is létezik a megvalósításra, hogy milyen esetben melyik a megfelelő megoldás annak eldöntése a fejlesztőtől is függ.
Miért nem mobilbarát egy reszponzív weboldal?
A media query nagyon hasznos eszköz de tudni kell jól használni. A legtöbbször elhibázott lépés a Mobile First (Először a mobil nézet) irányelv figyelmen kívül hagyása.
Ez azt jelenti hogy a fejlesztő/sitebuilder elsőként a weboldal asztali nézetét készíti el, majd ebből jönnek létre a mobilokon is jól működő oldalak. Ha így történik a fejlesztés, a Google Mobilbarát jelleget vizsgáló tesztje sajnos az asztali nézete fogja vizsgálni, ami valószínűleg nem lesz mobilbarát. Sajnos ha keresőoptimalizálási szempontokat is figyelembe akarunk venni, akkor ezen elbukhat az egész folyamat, és ez fokozottan érvényes lesz a jövőben is, mivel a Google fejlesztése jelenleg a mobilos irányokat képviseli.
Hogyan lesz reszponzív egy weboldal?
Most pedig következzen egy kis segítség azoknak a fejlesztőknek, akik ugyan reszponzív webdesign-t készítenek, de úgy érzik valami nincs rendben vele. Gyakorlati tanácsok következnek.
A css felépítésekor legelőször egy olyan oldalt kell megformáznunk amit a régebbi, media query előtti telefonos böngészők is gond nélkül meg tud jeleníteni. Ebben a fázisban még semmilyen modern technológiát nem használunk. Ha kész az alap oldal elkezdhetjük hozzáadni a töréspontokat amelyeknél megváltozik az oldal kinézete.
Ezeknél a töréspontoknál fontos, hogy additív legyen a media query, vagyis ha nem tudja feldolgozni a böngésző, akkor az adott elem nem jelenik meg.
pl:
/*Ez az alap, minden böngésző, minden eszköz felismeri*/
img.logo{
width: 48px;
height: 48px;
}/*Nagyobb kijelzőkön lehet nagyobb a kép*/
@media(screen and min-width:800px){
img.logo{
width: 64px;
height: 64px;
}
}
Nem vagy fejlesztő, de hasonló problémád adódott a weboldaladdal?
Egy egyébként reszponzív weboldal mobilbaráttá tétele általában csak egy kis átszervezést igényel. Segítséget ezzel kapcsolatban itt kérhetsz.