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?

 

http://browsershots.org/

 

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!

Ha elakadtál, megakadtál. Ha szép vagy jól működő weboldalt szeretnél egyedi és hozzád illő dizájnnal, keress bizalommal!

Péter Éva - Webdesigner - ewa.hu