Több, mint egy éve hajtogatom, hogy a “reszponzív weboldal” egy olyan parasztvakítás csak (már elnézést a kifejezésért, de nem tudok rá jobbat), mint annak idején a “házimozi” volt. Korábban is ott voltak a műszaki boltokban az erősítők, a DVD-lejátszók meg a hangfalak, de amint ezeket egymás mellé állították, és kiírták rájuk, hogy “házimozi rendszer”, máris jobban fogytak…

De most, hogy az okostelefonos internetezés már megkerülhetetlen trend, és a weboldalak forgalma egyre inkább jön (vagy jöhet) mobilos keresésekből, nekem is muszáj foglalkoznom azzal, hogy a weboldalam (és az ügyfeleimé is) mobilbarát legyen.

Reszponzív, oszt kész…

Maga a szó, az elv, a technika gyorsan divatos lett – a Google is szereti a reszponzív weboldalakat, szó se róla, és például én is szeretek játszani velük, mert mókás, ahogy átrendeződnek, amikor keresztben összébb nyomom a böngésző ablakát. De azért azt nagyon fontos tudni, hogy pusztán attól, hogy a sablon reszponzív, az oldal még nem mobilbarát.

A mobilon nemcsak azért használható egy weboldal, mert elfér egy keskeny csíkban, és nem kell jobbra-balra csúsztatnod a telefonod képernyőjén az oldalt, ha el akarod olvasni a tartalmat. Mit sem ér az egész, ha a linkek és/vagy a gombok túl közel vannak egymáshoz, ha az űrlapok nem működnek, ha az asztali gépen látható tartalom egy része a mobil eszközön nem jelenik meg.

A reszponzív sablon egyszerűen csak válaszol arra a kérdésre, hogy mekkora a böngésző.

Próbáld ki, és meglátod. A böngésződ jobb szélét kezdd el balra húzni, tehát kicsinyítsd a böngésződ ablakát keresztben. Ha a sablon nem reszponzív (ezt láthatod itt, a WP-Suli oldalán is), akkor nem történik semmi látványos, a weboldalból látható terület egyre kisebb, és amikor már nem látszik az egész oldal, akkor a vízszintes gördítősávval kell ide-oda mászkálni az olvasáshoz.

Érdekes, hogy a WP-Suli meglepően jól és olvashatóan jelent meg bizonyos mobileszközökön korábban is (most már ne nézd, most már mobilbarát 🙂 ), de a hangsúly a bizonyos mobileszközökön van: furcsa módon a régebbi Androidos, Opera Minis telefonomon tökéletesen el lehetett olvasni a blogbejegyzéseket, az újabb Androidoson, mobil Chrome böngészővel sokkal nehézkesebb, barátságtalanabb lett az oldal. (De ezen ma már túl vagyunk.)

Ha viszont reszponzív sablont nézel (próbáld ki például ezzel), akkor azt figyelheted meg a böngésző kicsinyítésekor, hogy a képek egyre kisebbek lesznek, a dobozok egymás alá rendeződnek, a menü eltűnik, viszont a helyén megjelenik a “hamburger ikon” (három vízszintes vonal egymás alatt) vagy a “Navigáció” felirat, az oldalsáv bekerül a tartalom alá (vagy eltűnik) és így tovább.

Vedd észre, hogy mindez nem folyamatos módon történik. Először csak csökken a weboldal hasznos része mellett a kifutó üres terület. Amíg el nem éred a sablon szélességét (valahol 1000 px körül, ElegantThemes sablonok esetében például 960 px ez a méret), addig még nincs szükség változtatásokra: ekkora területet még meg tudnak jeleníteni a vízszintesen tartott tabletek. Ha a böngészőt a sablon szélessége alá csökkented, akkor jön az első ugrás, de ekkor még csak kisebbek lesznek a képek és egyéb elemek.

Általában 768 px-hez teszik a következő lépcsőfokot: ekkor a képek, a dobozok már átrendeződnek, a menü is átváltozik a mobil verzióra. Ez a méret felel meg az álló irányba fordított 10 colos tableteknek. Tovább kicsinyítve a böngészőt megint csak az oldal két szélén lévő üres terület fogy; 440 px-nél (amely a nagyobb képernyőjű okostelefonok mérete) jön az újabb ugrás, a képek mérete megint csökken, egyes elemek el is tűnhetnek (a minta oldalon például a hírek mellett ennél a méretnél már nincs kiemelt kép).

Ez tehát a reszponzivitás; de ettől még nem mobilbarát az oldal.

Azon túl, hogy maga a tartalom olvashatóan jelenjen meg a mobil eszközökön, szükség van arra is, hogy minden funkció, WordPress oldalak esetében mondhatjuk úgy is, hogy minden bővítmény működjön. Ehhez pedig kevés a sablon.

Hogyan mehetsz biztosra?

Még az előző bejegyzésben írtam, hogy szerencsére a WordPress oldalak tulajdonosai ezzel a feladattal kapcsolatban is előnyt élveznek. A következő bejegyzésben leírom, hogy mit tehetsz a WordPress weblapod mobilbaráttá tételéért.