10 verktøy og apper for å teste responsivt design
Det har aldri vært viktigere å sikre at designen din er klar for alle typer brukere - og enheter - før lansering. Selv om det kan være tøft å teste fysisk på alle enheter, er det noen verktøy og apper som hjelper deg med å gjenskape en rekke responsive scenarier.
Med gratis og førsteklasses verktøyalternativer er det ingen grunn til ikke å teste den responsive designen før distribusjon. Bare sørg for å bruke den informasjonen til mange nødvendige designjusteringer! I dag kjører vi deg gjennom et utvalg verktøy for å teste et responsivt design.
Utforsk Envato Elements
1. Google mobilvennlig test
Google Mobile-vennlig test er et av disse verktøyene som på en eller annen måte blir oversett. Du trenger nettsteddesignet ditt for å oppfylle Googles standarder for å hjelpe med søkesynlighet; så enkelt er det.
Bruk er enkelt, bare skriv inn en URL og se hvordan siden din scorer på mobile enheter. Den beste delen av dette verktøyet er at det peker ut hvor nettstedet ditt kan bremse eller ikke gjengis bra på mobilen, slik at du kan gjøre feilene.
Kostnad: Gratis
2. Responsinator
Responsiator lar deg se webdesignen din i en rekke forskjellige enhetsmiljøer. (Dette er en flott måte å gjenskape enheter uten å ha en bunke med telefoner i en skuff et eller annet sted.)
Det beste med dette nettstedet er at nye enheter blir lagt til raskt, og hver enkelt lar deg rulle slik at du ser en hel side, ikke bare det som vises over rullen. Enheter tilbys også i stående og liggende visning. I tillegg er hver enhetsforhåndsvisning merket slik at du vet nøyaktig hva du ser på og hvor problemer kan lure.
Kostnad: Gratis, men med annonser (fjern annonser for en donasjon)
3. Responsiv designkontroll
Responsive Design Checker setter nettstedet ditt i et vindu der du manuelt kan justere størrelser - flott for å sjekke bruddpunkter - og se forskjellige enhetsorienteringer.
Hvor dette verktøyet utmerker seg er at det viser stasjonære størrelser så vel som mobile og nettbrett. (Noen av de andre verktøyene legger virkelig vekt på mobil og ikke større skjermer.)
Det som er fint med det er at du kan se forskjellige størrelser uten å endre størrelsen på nettleseren. Nok en fin bruk for dette verktøyet? Bruk den til å ta skjermbilder for mockups.
Kostnad: Gratis
4. XRespond
XRespond lar deg sammenligne flere versjoner av nettstedet ditt på forskjellige enheter samtidig. Det fine med dette verktøyet er at du kan finne ut hvor konsistent en brukeropplevelse du gir fra en enhet til en annen. (Brukere forventer at nettsteder skal være de samme uansett hvor de får tilgang til dem.)
Test designen i liggende eller portrettvisning, og velg enheter av samme produsent - for eksempel Apple eller Samsung - eller sammenlign på forskjellige enheter i lignende størrelser. Ulempen med dette verktøyet er at det ikke inkluderer alle de nyeste enhetene, selv om mange av de mest populære modellene er listet opp.
Kostnad: Gratis
5. Skjermfly
Screenfly har noen fine verktøy, for eksempel deling, slik at du kan jobbe som et team for å teste og se på et responsivt design. Den inkluderer flere enhetstyper enn noen andre verktøy - stasjonære datamaskiner, telefoner, nettbrett, TV-apparater og muligheten til å legge til hvilken som helst tilpasset skjermstørrelse du ønsker.
Verktøy lar deg rotere, bla og mer med enkle klikk-knapper øverst, og alt fungerer rett i nettleseren.
Kostnad: Gratis
6. LambdaTest
LambdaTest er et av de mer robuste verktøyene i denne listen. Det inkluderer muligheten til å teste på mer enn 2000 virkelige nettlesere og operativsystemer.
Dette verktøyet er mer enn bare å se hvordan nettstedet ditt vil se ut, det tester for kompatibilitet, brukeropplevelse, piksel perfeksjon og mer i et levende miljø. Den tester på flere enheter, nettlesere og versjoner av nettlesere slik at du vet nøyaktig hvordan nettstedet ditt fungerer.
Du kan få skjermbilder av hvordan det hele ser ut og til og med samarbeide med verktøyet (og teamet) online. I tillegg er bonusen til et premiumverktøy som dette at det inkluderer feilsøkingsfunksjoner som hjelper deg med å løse designproblemer når de oppstår.
Kostnad: Lite-versjonen er gratis; betalte planer starter på $ 15 per måned
7. Illustrert responsiv design
Responsive Design Illustrated er mer et planleggingsverktøy enn testverktøy. Vurder dette nybegynneralternativet som noe du kan bruke til å visualisere aspektforhold og hvordan du planlegger designelementer for forskjellige enhets- og skjermstørrelser.
Du gjør det riktig i nettleseren, slik at du visuelt kan utforske hvordan du tenker på designet i forskjellige størrelser.
Kostnad: Gratis
8. Responsivt Web Design Testing Tool
Responsive Web Design Testing Tool er en enkel URL-basert visning som lar deg sammenligne enheter etter størrelse eller enhetstype.
Det fine med dette verktøyet er vekslealternativene for å se forskjellige orienteringer, lengder eller visninger med bare et klikk. Hvis du vil være vert for dette verktøyet for testing i ditt eget miljø, er det et alternativ også. (Så du kan teste før et nettsted går i live.)
Utvikleren av verktøyet, Matt Kersley, har gjort det tilgjengelig på Github.
Kostnad: Gratis
9. Designmodo Responsive Test
Designmodo Responsive Test er kanskje et av de flotteste verktøyene for å teste webdesign. Det inkluderer mange enkle veksler, mange enhetsalternativer og et rent grensesnitt som visningsmiljø.
Brukere kan også legge til tilpassede dimensjoner og vise i forskjellige retninger. Den oppdateres ofte med nye enheter slik at du kan teste enkelt.
Kostnad: Gratis
10. CrossBrowserTesting
CrossBrowserTesting er et førsteklasses verktøy som tilbyr manuell og automatisert testing. Brukere kan kjøre manuelle, visuelle og Selenium-tester i skyen på mer enn 1500 virkelige desktop og mobile nettlesere.
Verktøyet er svært skalerbart - selv for virksomheter på virksomhetsnivå. Det er enkelt å distribuere, inkluderer feilsøkingsverktøy, fungerer på en rekke nettlesere, versjoner og enheter og har en robust testkonfigurasjon slik at du kan finne problemer i testen før de blir store problemer.
Kostnad: Planene starter på $ 29 per måned
Konklusjon
Har du et favorittverktøy som ikke er på denne listen? Del det med oss. Vi elsker å se verktøy som vi ikke visste om.
Som med ethvert verktøy for design og utvikling av nettsteder, er det lurt å leke med et par alternativer før du tar et oppgjør med en ting. De fleste av disse verktøyene kan hjelpe deg med å finne ut om designen din fungerer, men alle fungerer på litt forskjellige måter og har forskjellige nivåer av brukerkontroll. Lek rundt og finn den som er mest behagelig for deg.
