7 nagyszerű eszköz az adaptív webtervek teszteléséhez
Minden modern webdesignernek ismernie kell a reszponzív webdesign alapelveit - hogyan lehet elérni, hogy webhelyei tökéletesen megjelenjenek bármilyen eszközön vagy képernyőn, amelyen megjelenik. (Ha frissítésre van szüksége, nézze meg a mi oldalunkat a profi web-tervezés útmutatója ).
De az elmélet egy dolog, a gyakorlat pedig egy másik. Annak érdekében, hogy webhelye teljes körűen reagáljon, valójában különböző eszközökön kell tesztelnie.
A legtöbben azonban nem rendelkeznek a költségvetéssel ahhoz, hogy megszerezzük a fizikai eszközök százait, amelyekre a valós teszt elvégzéséhez szükség lenne. De ne félj! Ezek az eszközök egy félúton állnak rendelkezésre, lehetővé téve az érzékeny tervek tesztelését egy virtuális környezetben.
01. Responsinator
A Responsinator szépsége az egyszerűségében rejlik. Csak írja be a weboldal URL-jét, és ez az ingyenes, böngészőalapú eszköz megmutatja, hogyan jelenik meg a weblapja a legnépszerűbb képernyőformákban és -méretekben.
Kiváló módon ezután kölcsönhatásba léphet az oldalával, rákattinthat a linkekre, beírhatja a keresési mezőket és így tovább. Ne feledje, hogy ezek általános eszközök, bár nem specifikusak.
02. Screenfly
A Screenfly egy ingyenes eszköz egy webhely tesztelésére különböző képernyőméretekben és különböző eszközökön. Néhány éve létezik, de még mindig népszerű és rendkívül jól végzi a dolgát.
Csak írja be az URL-t, válassza ki az eszközt és a képernyő méretét a menükből, és láthatja, hogy a webhelye mennyire működik rajta. A kiemelt eszközök közé tartoznak az asztali számítógépek, táblagépek, televíziók és okostelefonok.
03. Google DevTools eszköz mód
A DevTools Eszközmódja egyszerű módot kínál a fejlesztők számára a mobileszközök szimulálására a Chrome böngészőben. Használja, hogy megtudja, hogyan jelenik meg webhelye különböző méretű és felbontású képernyőkön, beleértve a Retina képernyőket is.
Szimulálhatja az eszközbemeneteket is az érintéshez, a földrajzi helymeghatározáshoz és az eszköz orientációjához az emulátoron belül.
04. Google Resizer
A Google Anyagtervezési irányelvei tanácsokat tartalmaznak a töréspontok, az adaptív rácsok, a felületi viselkedés és a felhasználói felület mintáinak használatáról. Tavaly pedig elindított egy ingyenes eszközt, így láthatja, hogyan néz ki ez az útmutató a valós eszközökön.
A Google Resizer lehetővé teszi egyéni URL megadását és egy webhely megtekintését az Material Design töréspontjain keresztül asztali és mobil eszközökön. Ha először bemutatót szeretne látni, kattintson a címsávra, és válassza a Pesto Vagy „ Ereklyetartó ’Legördülő menüből.
05. Ghostlab
A fizetett webhelytesztelő alkalmazás, a Ghostlab lehetővé teszi, hogy webhelyét egyszerre több böngészőn és mobil eszközön tesztelje. Kezdje el a tesztelést egy böngészőben vagy eszközön, és az összes többi tükrözi a műveleteit, legyen szó linkekre kattintásról, gombok kijelöléséről, űrlapok kitöltéséről vagy az oldal újratöltéséről.
Könnyen kivihet egy screengrab-ot bármilyen eszközről, megjegyzést fűzhet hozzá, és áthúzhatja a hibakeresőhöz. Lásd működés közben ez a videó .
06. Böngészőverem
A Browser Stack az egyik legfejlettebb, teljes funkcionalitású tesztelő eszköz. A fizetős alkalmazás több mint 1000 mobil és asztali böngészőhöz nyújt hozzáférést tesztelés céljából. Ezt a listát folyamatosan frissítjük, a piaci trendek és a Browser Stack 36 000 ügyfelére épülő használati statisztikák alapján.
A felhasználók, köztük a Twitter, a Microsoft, az AirBnB és a Mastercard, nyilvánvalóan valamit jól csinálnak.
07. CrossBrowserTesting
A Browser Stack legnagyobb vetélytársa a tesztelési térben a CrossBrowserTesting, amely több mint 1500 böngészőt és eszközt kínál az érzékeny webhely teszteléséhez.
Az all-in-one platform lehetővé teszi párhuzamos automatizált tesztek futtatását, a képernyőképek vizuális összehasonlítását, a valós eszközökön történő ellopást és interakciót a webhelyével, valamint távoli hibakeresést a kóddal, ahogy megy.
