7 flotte verktøy for å teste responsive webdesigner

Hver moderne webdesigner bør kjenne til prinsippene for responsiv webdesign - hvordan få nettstedene dine til å gjengis perfekt på hvilken enhet eller skjermstørrelse den vises. (Hvis du trenger en oppfriskning, sjekk ut vår pro's guide til responsiv webdesign ).

Men teori er en ting, og praksis er en annen. For å sikre at nettstedet ditt er fullt responsivt, må du faktisk teste det på forskjellige enheter.

De fleste av oss har imidlertid ikke budsjett for å få tak i hundrevis av fysiske enheter du trenger for å utføre en test fra den virkelige verden. Men frykt ikke! Disse verktøyene gir et halvveis hus ved å la deg teste dine responsive design i et virtuelt miljø.



01. Responsinator

Se hvordan nettstedet ditt ser ut i forskjellige visningsfelt med Responsinator

Se hvordan nettstedet ditt ser ut i forskjellige visningsfelt med Responsinator

Skjønnheten til Responsinator ligger i sin enkelhet. Bare skriv inn nettadressen til nettstedet ditt, og dette gratis, nettleserbaserte verktøyet viser deg hvordan websiden din gjengis i de mest populære skjermformene og -størrelsene.

hvordan bli kvitt perspektivgitter

Strålende kan du deretter samhandle med siden din, klikke på lenker, skrive inn i søkefelt og så videre. Vær oppmerksom på at dette er generiske enheter, men ikke spesifikke.

02. Screenfly

Sjekk hvordan nettstedet ditt vises på forskjellige enheter, inkludert TV-er, med Screenfly

Sjekk hvordan nettstedet ditt vises på forskjellige enheter, inkludert TV-er, med Screenfly

Screenfly er et gratis verktøy for å teste et nettsted på forskjellige skjermstørrelser og forskjellige enheter. Det har eksistert i noen år nå, men det er fortsatt populært og gjør jobben sin ekstremt bra.

Bare skriv inn nettadressen din, velg enhet og skjermstørrelse fra menyene, så ser du hvor godt nettstedet ditt fungerer med den. Utvalgte enheter inkluderer stasjonære datamaskiner, nettbrett, TV-apparater og smarttelefoner.

03. Google DevTools enhetsmodus

DevTools Device Mode emulerer forskjellige enheter i Chrome

DevTools Device Mode emulerer forskjellige enheter i Chrome

DevTools enhetsmodus gir en enkel måte for utviklere å simulere mobile enheter i Chrome-nettleseren. Bruk den til å lære hvordan nettstedet ditt vises i forskjellige skjermstørrelser og oppløsninger, inkludert Retina-skjermer.

Du kan til og med simulere enhetsinnganger for berøring, geolokalisering og enhetsretning i emulatoren.

04. Google Resizer

Resizer hjelper deg med å etablere bruddpunkter for materialdesign for ditt responsive nettsted

Resizer hjelper deg med å etablere bruddpunkter for materialdesign for ditt responsive nettsted

Googles retningslinjer for materialdesign inkluderer råd om bruk av brytepunkter, responsive nett, overflateatferd og brukergrensesnittmønstre. Og i fjor lanserte den et gratis verktøy slik at du kan se hvordan følgende veiledning ser ut på virkelige enheter.

Google Resizer lar deg legge inn en egendefinert URL og vise et nettsted på tvers av Material Design-brytpunktene for stasjonære og mobile enheter. Hvis du først vil se en demo, klikker du på adresselinjen og velger ‘ Pesto 'Eller' Helligdom Fra rullegardinmenyen.

05. Ghostlab

Ghostlabs fokus er på samtidig testing på tvers av en rekke enheter og nettlesere

Ghostlabs fokus er på samtidig testing på tvers av en rekke enheter og nettlesere

En betalt nettstedstestapp, Ghostlab lar deg teste nettstedet ditt på en rekke nettlesere og mobile enheter samtidig. Begynn å teste i en nettleser eller enhet, og alle de andre vil speile handlingene dine, enten du klikker på lenker, velger knapper, fyller ut skjemaer eller laster inn siden på nytt.

Du kan også ta en screengrab fra hvilken som helst enhet, kommentere den og dra og slippe den til din bug tracker. Se den i aksjon i denne videoen .

06. Nettleserstabel

Browser Stack er et betalt testverktøy rettet mot bedrifter

Browser Stack er et betalt testverktøy rettet mot bedrifter

Browser Stack er et av de mest avanserte testverktøyene med alle funksjoner. Den betalte appen gir tilgang til mer enn 1000 mobile og stasjonære nettlesere for testformål, en liste som kontinuerlig oppdateres, basert på markedstrender og bruksstatistikk basert på Browser Stacks 36.000 kunder.

Med brukere inkludert Twitter, Microsoft, AirBnB og Mastercard, gjør det åpenbart noe riktig.

07. CrossBrowserTesting

CrossBrowserTesting tilbyr et stort utvalg av virkelige enheter og testfunksjoner

CrossBrowserTesting tilbyr et stort utvalg av virkelige enheter og testfunksjoner

Browser Stacks største rival i testområdet er CrossBrowserTesting, som tilbyr mer enn 1500 nettlesere og enheter å teste ditt responsive nettsted på.

Alt-i-ett-plattformen lar deg kjøre parallelle automatiserte tester, sammenligne skjermbilder visuelt, sveipe og samhandle med nettstedet ditt på virkelige enheter og feilsøke koden din mens du går.