7 fantastiska verktyg för att testa dina responsiva webbdesigner

Varje modern webbdesigner borde känna till principerna för responsiv webbdesign - hur man får dina webbplatser att göra perfekt på vilken enhet eller skärmstorlek som helst. (Om du behöver en uppdatering, kolla in vår pro guide för responsiv webbdesign ).

Men teori är en sak, och övning är en annan. För att säkerställa att din webbplats är fullt lyhörd måste du faktiskt testa den på olika enheter.

De flesta av oss har dock inte budgeten för att få tag på hundratals fysiska enheter som du behöver för att utföra ett verkligt test. Men frukta inte! Dessa verktyg ger ett halvvägs hus genom att låta dig testa dina responsiva mönster i en virtuell miljö.



01. Responsinator

Se hur din webbplats ser ut i olika vyer med Responsinator

lego idéer nasa apollo saturn v (21309)
Se hur din webbplats ser ut i olika vyer med Responsinator

Responsinators skönhet ligger i dess enkelhet. Skriv bara in din webbsides URL och detta gratis, webbläsarbaserade verktyg visar hur din webbsida återges i de mest populära skärmformerna och -storlekarna.

Fantastiskt kan du sedan interagera med din sida, klicka på länkar, skriva i sökfält och så vidare. Observera att det här är generiska enheter, men inte specifika.

02. Screenfly

Kontrollera hur din webbplats visas på olika enheter, inklusive TV-apparater, med Screenfly

Kontrollera hur din webbplats visas på olika enheter, inklusive TV-apparater, med Screenfly

Screenfly är ett gratis verktyg för att testa en webbplats på olika skärmstorlekar och olika enheter. Det har funnits i några år nu, men det är fortfarande populärt och gör sitt jobb extremt bra.

Ange bara din webbadress, välj din enhet och skärmstorlek från menyerna så ser du hur bra din webbplats fungerar med den. Utvalda enheter inkluderar stationära datorer, surfplattor, tv-apparater och smartphones.

03. Google DevTools Device Mode

DevTools Device Mode emulerar olika enheter i Chrome

macbook pro 13 hårt fodral design
DevTools Device Mode emulerar olika enheter i Chrome

DevTools Device Mode erbjuder ett enkelt sätt för utvecklare att simulera mobila enheter i Chrome-webbläsaren. Använd den för att lära dig hur din webbplats visas i olika skärmstorlekar och upplösningar, inklusive Retina-skärmar.

Du kan till och med simulera enhetsingångar för beröring, geolokalisering och enhetsorientering i emulatorn.

04. Google Resizer

Resizer hjälper dig att skapa brytpunkter för materialdesign för din responsiva webbplats

Resizer hjälper dig att skapa brytpunkter för materialdesign för din responsiva webbplats

Googles riktlinjer för materialdesign innehåller råd om användning av brytpunkter, lyhörda nät, ytbeteende och användargränssnittsmönster. Och förra året lanserade det ett gratis verktyg så att du kan se hur följande riktlinjer ser ut på verkliga enheter.

Med Google Resizer kan du ange en anpassad URL och visa en webbplats över Material Design-brytpunkter för skrivbord och mobil. Om du vill se en demo först klickar du på adressfältet och väljer “ Pesto 'Eller' Helgedom Från rullgardinsmenyn.

05. Ghostlab

Ghostlabs fokus ligger på samtidig testning över en massa enheter och webbläsare

Ghostlabs fokus ligger på samtidig testning över en massa enheter och webbläsare

En betald webbplats testapp, Ghostlab låter dig testa din webbplats på ett flertal webbläsare och mobila enheter samtidigt. Börja testa i en webbläsare eller enhet och alla andra speglar dina handlingar, oavsett om du klickar på länkar, väljer knappar, fyller i formulär eller laddar om sidan.

konstartiklar som varje konstnär borde ha

Du kan också ta en screengrab från vilken enhet som helst, kommentera den och dra och släppa den till din bug tracker. Se det i aktion i den här videon .

06. Webbläsarstack

Browser Stack är ett betalt testverktyg som riktar sig till företag

Browser Stack är ett betalt testverktyg som riktar sig till företag

Browser Stack är ett av de mest avancerade testverktygen med alla funktioner. Den betalda appen ger tillgång till mer än 1000 mobil- och stationära webbläsare för teständamål, en lista som kontinuerligt uppdateras baserat på marknadstrender och användningsstatistik baserat på Browser Stacks 36 000 kunder.

var man kan köpa jätte toblerone bar

Med användare inklusive Twitter, Microsoft, AirBnB och Mastercard gör det uppenbarligen något rätt.

07. CrossBrowserTesting

CrossBrowserTesting erbjuder ett stort utbud av verkliga enheter och testfunktioner

CrossBrowserTesting erbjuder ett stort utbud av verkliga enheter och testfunktioner

Browser Stack's största rival i testutrymmet är CrossBrowserTesting, som erbjuder mer än 1 500 webbläsare och enheter att testa din responsiva webbplats på.

Dess allt-i-ett-plattform låter dig köra parallella automatiserade tester, jämföra skärmdumpar visuellt, svepa och interagera med din webbplats på verkliga enheter och felsöka din kod när du går.