Hogyan teszteljük a reszponzív oldalakat?

Napjainkban a felhasználók böngészési szokásai jelentősen eltérnek a néhány évvel korábbi modellektől, főként nemzetközi tekintetben. Ezt a rohamos változást, fejlődést robbanásszerű technológiai lépések követték. Magától értetődően ez a weboldalak, portálok kialakítására is vonatkozik.

A mobil eszközök elterjedésével párhuzamosan fontos, hogy tartalmunkat szolgáltató felületeink ezekre optimalizáltak legyenek. Itt jön képbe a reszponzív web design (RWD)  kifejezés. A lényege, hogy oldalunk az eszköz kijelzőméretétől függetlenül, változatlan tartalommal, olvashatóan jelenik meg.

Függetlenül attól, hogy milyen fejlesztési módszertant használunk, teszt nélkül nem kerülhet ki a kezünkből fejlesztés. Lássuk hát hogyan érdemes reszponzív oldalakat tesztelni:

Pixelpontos tesztelés: Mindenek előtt fontos, hogy rendelkezésre álljon a dizájnterv – lehetőleg PSD formátumban vagy screenenként esetekkel JPG/PNG fájlként.

Ezek után bemutatunk pár rendkívül hasznos plugint:

Window Resizer: ez a bővítmény cselesen elrejti a nevében mire képes :) Előre definiált, illetve ablakméretek között lehet váltani, akár eszközspecifikusan.

1

Perfect pixel (welldonecode.com/perfectpixel): Elérhető a Chrome bővítmények között, és Firefoxban is megtalálható. Ezzel a remek kiegészítővel lehetőségünk van egy képet (layert) a böngésző fölé elhelyezni. A layer átlátszósága az  Opacity-vel  állítható, elősegítve hogy a lehető legjobban lássuk a különbségeket. Könnyen előfordul, hogy a böngészők máshogy renderelik le az oldalt, ezért a végeredmény megjelenítésben eltérhet a design-tól.

2

Page ruler (blarg.co.uk/tools/page-ruler):  használatával egyszerűen ellenőrizhetjük a képek, divek, gombok vagy bármely egyéb elem méretét. Hasznos feature, hogy az „Element Mode” bekapcsolásával a fejlécben folyamatosan megjeleníti a kurzor alatti elem méretét és az oldal szélétől való távolságokat minden irányban.

3

ColorZilla (colorzilla.com):  sosem lehetünk elég alaposak! Ha mindenre ki szeretnénk térni, akkor érdemes a színeket is ellenőrizni. Colorzilla-val ezt könnyen megtehetjük. Egyszerűen aktiváljuk a picker-t és real-time kiírja a kurzor alatti terület színének a kódját.

4

Greenshot (getgreenshot.org): Nagyon jól használható, ingyenes “képlopó” bővítmény. A PrintScreen gomb lenyomásával aktivizálja is magát. Egyszerűen jelöljük ki a kivágni kívánt területet majd válasszuk ki a listából azt, amire szükségünk van:

5

A hatékonyság növelése érdekében a Greenshot saját képszerkesztővel rendelkezik. Rengeteg funkcióval vértezték fel, így ha szükséges, akár ki is tudjuk emelni az esetleges hibákat. Lehet a kivágott képre rajzolni, átméretezni, levágni, elforgatni, szövegdobozt elhelyezni.

6

Smart QrCode Generator:  Nem sok idegesítőbb dolog van teszteléskor, mint a tesztkörnyezetek nem kifejezetten felhasználóbarát url-jeit a kijelzőn gépelni. Ezzel a Chrome bővítménnyel pillanatok alatt generálhatunk QR kódot az éppen aktuális oldal linkjéből, amit kamerával rendelkező eszközünkön gépelés nélkül megnyithatunk. Természetesen amennyiben gyárilag nincs, az eszközre telepítenünk kell egy QR kód olvasó alkalmazást.

7

A lista természetesen a teljesség igénye nélkül készült, a tesztelést támogató eszközök is napról napra fejlődnek, a fentiek ha a fenti eszközöket bevetjük, akkor alaposan felvérteztük magunkat arra, hogy elkezdhessük kínozni fejlesztésünket.

Végül egy jó tanács: “van olyan makacs bug ami feature” ;)