7 gratis værktøjer til test af responsive layouts
Hvert websted skal udformes med en responsiv tilgang. For at holde dig på rette spor, vil testen tidligt og ofte med nogen af disse lydhøre testværktøjer sikre, at dit design ser ud på alle browsere og i alle visningsstørrelser.
Hvert moderne websted har brug for et lydhørt design . Dette kræver mere indsats, men slutresultatet er umagen værd.
Jeg anbefaler faktisk at teste dine ideer med lydhøre designværktøjer for at se, hvordan dit websted ser på hvert trin. Du kan kigge efter brugbarhedsproblemer på forskellige skærmstørrelser alt fra et praktisk værktøj.
Og disse gratis værktøjer er mine bedste valg til responsiv testning, da de er alle super nemme at bruge. Bedst af alt dette understøtter mange enhedsstørrelser, så du kan få en god følelse for, hvordan dit layout skal se fra smartphones til stationære computere.
1. XRespond
Det XRespond app kalder sig et "virtuelt enhedslaboratorium", og det vil jeg sige, det er smukt sted på.
Med dette websted kan du forhåndsvise, hvordan et websted ser ud på en række forskellige enheder. Webstedet arbejder i en lang horisontal stil, hvor du skal rulle sidelæns for at se alle skærmformaterne.
Mærket over hver skærm fortæller dig den nøjagtige størrelse og hvilken enhed den passer til. Derudover er der et bredt udvalg af smartphones, tablets og bærbare computere til at teste specifikke enheder fra dropdown-menuen.
Denne dropdown understøtter endda en brugerdefineret bredde / højdeindstilling, hvis du vil se, hvordan dit websted vises på bestemte skærme. Et fremragende testværktøj til lydhørt design, og det understøtter meget variation i enhedsstile.
2. Respondator
En lignende app du også kan nyde er Responsinator .
I stedet for at bruge en vandret rullepanel, viser dette websted hvert enkelt forhåndsvisning af enheden i en lodret kolonne. På denne måde kan du rulle ned gennem hver enhed og forhåndsvise webstedet på hver enkelt.
Enheder omfatter de mest almindelige iPhones og Android Nexus-enhederne, både med portræt og landskabsforhåndsvisninger. Du kan også finde forhåndsvisninger af iPad-enheder også i portræt og landskab.
En anden cool funktion er skiften mellem HTTP og HTTPS. Responsinator tilbyder begge typer til forhåndsvisning af websteder afhængigt af den URL, du indtaster. Det matcher automatisk det sted, du forhåndsviser, for at undgå SSL-fejl.
3. Responsive Design Checker
Behov for hurtigt at kontrollere, om en hjemmeside virkelig er lydhør? Prøv derefter at bruge dette Responsive Design Checker lavet specielt til brugerdefinerede skærmstørrelser.
Når du har indtastet en webadresse, har du fuld kontrol over det responsive testrum. Du kan ændre bredden / højden, du vil have, og endda bruge den til at matche visse skærmforhold, hvis du bruger en formatforhold værktøj .
I sidebjælken finder du et ton af foruddefinerede skærmstørrelser for almindelige enheder som Nexus-tabletter, Kindles og endda nyere telefoner som Google Pixel.
Webstedet understøtter også store skærmstørrelser med skrivebordskameraer op til 24 "brede . Overraskende nok fungerer disse store størrelser godt selv på små skærme, fordi forhåndsvisningspanelet ændres på basis af forholdet, ikke den samlede pixelbredde.
Så hvis du kæmper for at teste 1920px skærme på din mindre MacBook-skærm, er dette værktøj værd at bogmærke.
4. Google Mobile Test
Google er fyldt med gode værktøjer til webmastere og deres Mobil-venlig test er et sådant eksempel.
Dette testværktøj er ikke rigtig en previewer, og det hjælper dig ikke med at se UI-fejl. I stedet er det et dedikeret mobilværktøj til at finde frem til problemer inden for dit websted på mobil.
Når testen kører, vil du enten passere eller fejle som et mobilvenligt websted. Dette er lidt for generisk for designere, men Google tilbyder tips baseret på problemområder og sideelementer, der kan bruge forbedringer.
Hold dette gemt som et troværdigt mobil testværktøj. Det er ikke en komplet ressource til responsiv testning, men det er et godt sted at samle information og det kommer fra måske det mest autoritative selskab på nettet.
5. Matt Kersleys Responsive Tool
Designer og udvikler Matt Kersley udgivet sin egen gratis testværktøj til responsive layouts. Denne er meget enklere end andre og har ikke mange dikkedarer.
I stedet er det en almindelig inline site previewer med 5 faste bredder: 240px, 320px, 480px, 768px, 1024px.
Forhåndsvisningskanalerne gør funktionen scrollbars, så du nemt kan flytte gennem indhold. Men du kan ikke klikke på nogen links eller gennemse andre sider inden for ruderne, så det er virkelig bedst at teste singulære sider.
Men for et enkelt værktøj, der får jobbet, virker det godt, og det er et af de få testværktøjer, der som standard tilbyder en bredde på 240 px.
6. Er jeg Responsive?
Du har sikkert ikke brug for dette værktøj, hvis du leder efter pixel-perfekt nøjagtighed.
I stedet for Er jeg Responsive? Websted fungerer bedst for hurtige checks og forhåndsvisninger på nogle få almindelige enhedstyper.
Du indtaster simpelthen en webadresse til en webside, og den indlæses i fire enheds preview-paneler: en smartphone, tablet, laptop og skrivebord. Disse skal ikke skaleres, så du kun kigger på webstedet som et forhold.
Men det er virkelig sejt for at fange skærmbilleder af dit websted for at vise, hvordan det ser ud i forskellige enheder. Gendannelsen er nøjagtig at skalere, og den afhænger af din browser for korrekt gengivelse.
Plus dette værktøj lader dig køre localhost adresser, så du kan endda kontrollere projekter, du er bygning lokalt på din computer.
7. Designmodo Responsive Test
Et andet værktøj jeg virkelig kan lide er Responsive Web Design Tester skabt af Designmodo. Dette gratis værktøj giver dig mulighed for at forhåndsvise et websted i din browser baseret på bestemte bredder.
Men den ene seje tilføjelse til dette værktøj er den netbaserede sideopsætning. Du kan tjekke din side for pixelpoint og endda studere sidens net bruger denne webapp.
Ved siden af de foruddefinerede enhedsbredder kan du også trække for preview-ruden for at passe til de skærmbredder, du tester. Det har indgange til bredden / højden, hvis du også skal indtaste størrelser manuelt.
Men hver enhedikon øverst til højre giver dig mulighed for at vælge fra snesevis af almindelige skærmstørrelser, hvilket gør dette værktøj perfekt til at kontrollere enhver enhed, du kan forestille dig.
