Sablont váltottál? Új lett a design? Biztos, hogy a weboldalad megfelelően jelenik meg a különböző képernyőméretekben, böngészőkben vagy éppen mobil eszközökön? Hogyan ellenőrzöd?
Erre való az úgynevezett Cross Browser Testing, amiről részletesen olvashatsz az alábbi cikkben!
Miért fontos a tesztelés?
Az nyilvánvaló, hogy a Google Chrome a legelterjedtebb böngésző a világon, de ez nem jelenti azt, hogy ne használnák széles körben a Firefoxot, Microsodt Edge-t, a Safarit vagy éppen az Operat. A Cross Browser Testing pedig abban segít, hogy megnézhesd weboldald megjelenését a különböző böngészőkben, eszközökön és platformokon, így megláthatod ha valami nem úgy jelenik meg rajtuk, ahogy azt eredetileg szeretted volna.
Bár a különböző böngészők igen hasonlóan jelenítik meg a weboldalakat, mégis lehetnek olyan különbségek, amelyek sokat ronthatnak az oldal megjelenésén és erre viszont nagyon oda kell figyelni, mert a látogatók gondolkodás nélkül elmenekülnek az ilyen oldalakról!
Itt jön a képbe a Cross Browser teszt! Megbizonyosodhatsz róla, hogy a weboldalad ugyanazt a látványt és felhasználói élményt nyújtja az összes látogatód számára! Persze akár meg is kérheted a barátaidat, hogy nézzenek rá a weboldalra és mondják el az esetleges hibákat, vagy te is megnézheted különböző eszközökön (amik a rendelkezésedre állnak), de azért ez közel sem annyira hatékony, mintha egy erre kifejlesztett tool segít az ellenőrzésben!
Mielőtt belevágnánk a tesztelésbe, nézzük meg, milyen böngészőt használnak a weboldalad látogatói!
Milyen böngészőt használnak a látogatóim?
Figyelembe véve az elérhető operációs rendszerek, böngészők és eszközök magas számát, a tesztelés igen nagy feladatot jelenthet, érdemes egy kicsit szűkíteni a kört.
Szerencsére a Google Analytics segítségével megtudhatod, hogy melyik böngészők és operációs rendszerek népszerűek a felhasználóid között!
Lépj be a Google Analytics fiókodba és válaszd az „Audience” menüpontot, azon belül pedig a „Technology”-t, ami alatt már ki tudod választani a böngészők szerinti analitikát (Browser).
Rögtön megkapod az elemzést (figyelj oda arra, hogy megfelelően nagy időtartamot állíts be), így már tisztán látszik, hogy milyen böngésző és operációs rendszer kombinációkra kell fókuszálnod a tesztelés során!
A legjobb Cross Browser Testing eszközök WordPressre!
A következőkben javaslok néhány eszközt, amelyek segítségével néhány kattintással ellenőrizheted, hogy weboldalad megfelelően jelenik-e meg a különböző böngészőkben?
A Browsershots nyílt forráskódú böngésző-megjelenés tesztelő eszköz. Sajnos nem tartalmazza a Microsoft Edge és az Internet Explorer böngészőket, illetve a mobilos nézetet sem tudod vele tesztelni, viszont az a nagyon jó hírem van, hogy legalább ingyenes!
Egyszerűen írd be az oldalad URL-jét a megfelelő helyre és várd meg amíg lefuttatja a tesztet a rendszer. Eredményül számos képernyőképet kapsz, amiket lehetőséged van külön-külön megnyitni és kielemezni.
Tudnod kell, hogy ez az eszköz csak képernyőképeket készít a weboldalról, ami sajnos nem egyenértékű az élő teszteléssel, mert az oldal megfelelő működéséről így nem tudsz megbizonyosodni. A következő két eszköz, amiről még itt szó lesz, viszont már tud ilyen funkciókat is!
CrossBrowserTesting
A CrossBrowserTesting segítségével már egyaránt végezhetsz élő tesztelést és a képernyőképek lekérésére is van lehetőséged!
Viszont ez már egy fizetős szolgáltatás, amihez tartozik egy rövid (100 perc) ingyenes kipróbálási lehetőség is.
Miután felregisztráltál az ingyenes verzióra, válaszd a „Live test”-et! Add meg az URL-t, válaszd ki a tesztelni kívánt operációs rendszert és böngészőt és vizsgált weboldal élőben fog megjelenni a kiválasztott böngészőben, hogy tesztelhesd is a működését!
Rengeteg funkciója van a fizetős verziónak, számos böngészőn és eszközön tudod vele ellenőrizni a weboldalad! Például az általad etalonnak tekintett oldalmegjelenést egyenként összevetheted a többivel, vagy akár le is töltheted a képernyőképeket a számítógépedre!
Az ingyenes verzió limitált funkciókra ad lehetőséget, de a legnépszerűbb böngésző és operációs rendszer kombinációkat így is ki tudod vele próbálni.
Ára: havi 29 dollárért tudod igénybe venni, ha egész évre előfizetsz.
BrowserStack
Szintén fizetős böngésző-megjelenés tesztelő eszköz, ami 30 perces ingyenes kipróbálási lehetőséget biztosít az érdeklődőknek. Hasonlóan a CrossBrowserTestinghez, egyaránt lehet benne élő tesztelést végezni, vagy képernyőképeket lekérni.
Az eredmények pontosak és az eszköz sebessége is elég jó, viszont egyenként kell megnyitogatni hozzá a böngészőket és úgy elvégezni a teszteket.
Ára szintén 29 dollár éves előfizetés esetén, ha havonta fizetünk!
+1
Firefox és Chrome böngészőkben létezik a következő funkció, amit bátran használhatsz! Az elemezni kívánt weboldalon jobb egérgombbal (egy üres részre) kattintva, a felugró menüből Vizsgálat vagy Elem vizsgálata fület kiválasztva találod a böngészők fejlesztői eszközeit! Ez Firefoxban alul fog egy sávot elfoglalni az ablakodból, Chrome-ban pedig a jobb oldalon fog megjelenni egy ablak. Mindkét böngészőben egy kis telefon ikont kell keresni (Firefox esetén jobb felül, Chrome esetén pedig bal felül). Kattints rá nyugodtan, mert ezen a felületen ellenőrizheted az adott oldal kinézetét a különféle mobil fajták által megjelenített formában!
Hogyan elemezd a tesztek eredményét?
Most, hogy megtanultad, hogyan tesztelheted a legegyszerűbben WordPress weboldalad, nézzük meg mit kezdhetünk a kapott eredményekkel!
Ha reszponzív WordPress sablont használsz, ami mögött egy minőségi kód áll, a kapott képernyőképeknek nagyjából azonosaknak kell lenniük. Lehetnek apróbb különbségek, de ha azok nem különösebben csúnyák vagy befolyásolják a felhasználói élményt, akkor nyugodtan figyelmen kívül hagyhatod őket!
Viszont ha valami feltűnőt látsz, valami olyat, ami elriaszthatja a látogatóidat, valamit, ami nem szép, arra már oda kell figyelni! A legtöbb ilyen eszköz rá fog világítani azokra a CSS hibákra a kódban, amik a gondot okozhatják. Használd a böngésződ fejlesztői elemző eszközét, hogy megtaláld a kérdéses CSS kódokat. Ha ehhez nem értesz, kérd egy WordPress fejlesztő segítségét!
