7 gratis verktøy for testing av responsive layouter
Hvert nettsted skal utformes med en responsiv tilnærming. For å holde deg på rett spor, vil testen tidlig og ofte, med noen av disse responsive testverktøyene, sørge for at designet ditt ser ut på alle nettlesere, og i alle visningsstørrelser.
Hvert moderne nettsted trenger en responsiv design . Dette krever mer innsats, men sluttresultatet er verdt.
Jeg anbefaler faktisk å teste dine ideer med responsive designverktøy for å se hvordan nettstedet ditt ser på hvert trinn. Du kan lete etter brukbarhetsproblemer på forskjellige skjermstørrelser alt fra et praktisk verktøy.
Og disse gratis verktøyene er mine beste valg for responsiv testing, siden de er altfor enkle å bruke. Best av alt disse støtter mange enhetsstørrelser, slik at du kan få en god følelse av hvordan layoutet skal se fra smarttelefoner til skrivebord.
1. XRespond
De XRespond app kaller seg et "virtuelt enhetslaboratorium", og jeg vil si det er ganske sted på.
Med dette nettstedet kan du forhåndsvise hvordan et nettsted ser på en rekke enheter. Nettstedet fungerer i en lang horisontal stil der du må rulle sidelengs for å se alle skjermformatene.
Etiketten over hvert skjermbilde forteller deg nøyaktig størrelse og hvilken enhet den samsvarer med. I tillegg fra rullegardinmenyen er det et bredt utvalg av smarttelefoner, nettbrett og bærbare datamaskiner for testing av bestemte enheter.
Denne rullegardinen støtter selv en tilpasset bredde- / høydeinnstilling hvis du vil se hvordan nettstedet ditt vises på bestemte skjermer. Et utmerket testverktøy for responsiv design, og den støtter mye variasjon i enhetstilbehør.
2. Respondator
En lignende app du også kan nyte er Responsinator .
I stedet for å bruke en horisontal rullepanel, viser dette nettstedet hver forhåndsvisning av en enhet i en vertikal kolonne. På denne måten kan du bla ned gjennom hver enhet og forhåndsvise siden på hver enkelt.
Enheter inkluderer de vanligste iPhones og Android Nexus-enhetene, både med portrett og landskapsforhåndsvisning. Du finner også iPad-forhåndsvisninger, også i portrett og landskap.
En annen kul funksjon er bryteren mellom HTTP og HTTPS. Responsinator tilbyr begge typer for forhåndsvisning av nettsteder, avhengig av nettadressen du skriver inn. Den samsvarer automatisk med hvilket nettsted du forhåndsviser for å unngå SSL-feil.
3. Responsive Design Checker
Trenger du å raskt sjekke om et nettsted virkelig er responsivt? Prøv deretter å bruke dette Responsive Design Checker laget spesielt for tilpassede skjermstørrelser.
Når du har skrevet inn en nettadresse, har du full kontroll over det responsive testområdet. Du kan endre bredden / høyden uansett, og bruk den til å passe til visse skjermforhold hvis du bruker en aspektforhold verktøy .
I sidelinjen finner du massevis av forhåndsdefinerte skjermstørrelser for vanlige enheter som Nexus-nettbrett, Kindles og til og med nyere telefoner som Google Pixel.
Nettstedet støtter også store skjermstørrelser med bordskjermer opptil 24 "brede . Overraskende fungerer disse store størrelsene bra selv på små skjermer fordi forhåndsvisningspanelet er omformet basert på forhold, ikke totalpikselbredde.
Så hvis du sliter med å teste 1920px-skjermer på din mindre MacBook-skjerm, er dette verktøyet verdt bokmerket.
4. Google Mobile Test
Google er fullt av gode verktøy for webmastere og deres Mobilvennlig test er et slikt eksempel.
Dette testverktøyet er egentlig ikke en forhåndsvisning, og det hjelper deg ikke å oppdage UI-feil. I stedet er det et dedikert mobilverktøy for å finne frem til problemer på nettstedet ditt på mobilen.
Når testen kjører, vil du enten passere eller feile som et mobilvennlig nettsted. Dette er litt for generisk for designere, men Google tilbyr tips basert på problemområder og sideelementer som kan bruke forbedringer.
Hold dette lagret som et pålitelig mobilt testverktøy. Det er ikke en komplett ressurs for responsiv testing, men det er et flott sted å samle informasjon og det kommer fra kanskje det mest autoritative selskapet på nettet.
5. Matt Kersley's Responsive Tool
Designer og utvikler Matt Kersley utgitt sin egen gratis testverktøy for responsive oppsett. Denne er mye enklere enn andre og har ikke mange frills.
I stedet er det en vanlig inline side forhåndsvisning med 5 faste bredder: 240px, 320px, 480px, 768px, 1024px.
Forhåndsvisningspanelet har funksjonen rullestenger slik at du kan bevege deg gjennom innhold uten problemer. Men du kan ikke klikke på noen koblinger eller bla gjennom andre sider i rutene, så dette er virkelig best for å teste singulære sider.
Men for et enkelt verktøy som får jobben, fungerer dette bra, og det er et av de få testverktøyene som tilbyr en bredde på 240 px som standard.
6. Er jeg Responsive?
Du trenger sannsynligvis ikke dette verktøyet hvis du leter etter pixel-perfekt nøyaktighet.
I stedet Er jeg Responsive? Nettstedet fungerer best for hurtige sjekker og forhåndsvisninger på noen få vanlige enhetstyper.
Du skriver ganske enkelt inn en nettadresse, og den lastes inn i fire forhåndsvisningspaneler: en smarttelefon, en nettbrett, en bærbar datamaskin og et skrivebord. Disse skal ikke skaleres slik at du bare ser på nettstedet som et forhold.
Men dette er veldig kult for å ta skjermbilder av nettstedet ditt for å vise hvordan det ser ut i ulike enheter. Gjengivelsen er nøyaktig å skalere, og den er avhengig av nettleseren din for riktig rendering.
I tillegg til dette verktøyet kan du kjøre localhost-adresser, slik at du selv kan sjekke prosjekter du er bygningen lokalt på datamaskinen din.
7. Designmodo Responsive Test
Et annet verktøy jeg virkelig liker er Responsive Web Design Tester laget av Designmodo. Dette gratis verktøyet lar deg igjen forhåndsvise et nettsted i nettleseren din basert på bestemte bredder.
Men det kule tillegget til dette verktøyet er nettbasert sideoppsett. Du kan sjekke siden din for pixelpunkter og til og med studere sidens rutenett bruker denne webapp.
Ved siden av de forhåndsdefinerte enhetens bredder kan du også dra forhåndsvisningsruten slik at den passer til hvilke skjermbredder du tester. Den har innganger for bredden / høyden hvis du også trenger å skrive inn størrelser manuelt.
Men hvert enhetikon i øverste høyre hjørne lar deg velge mellom dusinvis av vanlige skjermstørrelser som gjør dette verktøyet perfekt for å kontrollere hvilken som helst enhet du kan forestille deg.
