7 gratis verktyg för att testa responsiva layouter
Varje webbplats ska utformas med en responsiv inställning. För att hålla dig på rätt spår, kommer testen tidigt och ofta med något av dessa responsiva testverktyg att se till att din design ser ut direkt på alla webbläsare och i alla visningsstorlekar.
Varje modern webbplats behöver en lyhörd design . Detta kräver mer ansträngning men slutresultatet är värt.
Jag rekommenderar faktiskt att testa dina idéer med lyhörda designverktyg för att se hur din webbplats ser på varje steg. Du kan leta efter användbarhetsproblem på olika skärmstorlekar allt från ett praktiskt verktyg.
Och dessa gratisverktyg är mina bästa val för responsiv testning eftersom de är alla supera lätta att använda. Bäst av allt stödjer du många enhetsstorlekar så att du kan få en bra känsla för hur din layout ska se från smartphones till stationära datorer.
1. XRespond
De XRespond app kallar sig en "virtuell enhet lab" och jag skulle säga att det är ganska fläck på.
Med den här webbplatsen kan du förhandsgranska hur någon webbplats ser ut på en rad olika enheter. Sidan fungerar i en lång horisontell stil där du måste rulla sidledes för att se alla skärmformat.
Etiketten ovanför varje skärm berättar om vilken storlek och vilken enhet den matchar. Dessutom finns det ett brett utbud av smartphones, surfplattor och bärbara datorer för att testa specifika enheter från rullgardinsmenyn.
Den här rullgardinsmenyn stöder även en anpassad bredd / höjdinställning om du vill se hur din webbplats visas på specifika bildskärmar. Ett utmärkt testverktyg för lyhörd design och den stöder mycket variation i enhetstilar.
2. Respondator
En liknande app som du också kan njuta av är Responsinator .
I stället för att använda en horisontell rullningslista listas varje förhandsgranskning av en enhet i en vertikal kolumn. På så sätt kan du rulla ner genom varje enhet och förhandsgranska webbplatsen på var och en.
Enheter inkluderar de vanligaste iPhonesna och Android Nexus-enheterna, både med porträtt och landskapsförhandsgranskningar. Du hittar även iPad-förhandsvisningar även i porträtt och landskap.
En annan cool funktion är växeln mellan HTTP och HTTPS. Responsinator erbjuder båda typerna för att förhandsgranska webbplatser beroende på vilken URL du anger. Den matchar automatiskt vilken sida du förhandsgranskar för att undvika SSL-fel.
3. Responsive Design Checker
Behöver du snabbt kontrollera om en webbplats verkligen är responsiv? Försök sedan använda det här Responsive Design Checker gjord speciellt för anpassade skärmstorlekar.
När du har skrivit in en webbadress har du full kontroll över det responsiva testutrymmet. Du kan ändra bredden / höjden men du vill använda den och matcha vissa skärmförhållanden om du använder en bildförhållande verktyg .
I sidofältet hittar du ett antal fördefinierade skärmstorlekar för vanliga enheter som Nexus-tabletter, Kindles och till och med nya telefoner som Google Pixel.
Webbplatsen stöder också stora skärmstorlekar med skrivbordsskärmar upp till 24 "breda . Överraskande fungerar dessa stora storlekar bra även på små skärmar eftersom förhandsgranskningsrutan ändras baserat på förhållandet, inte total pixelbredd.
Så om du kämpar för att testa 1920px-bildskärmar på din mindre MacBook-skärm är det här verktyget väl värt bokmärke.
4. Google Mobiltest
Google är fullt av bra verktyg för webbansvariga och deras Mobilt vänligt test är ett sådant exempel.
Det här testverktyget är inte riktigt en förhandsgranskare och det hjälper dig inte att hitta UI-fel. Istället är det ett dedikerat mobilverktyg för att hitta problem inom din webbplats på mobilen.
När testet körs kommer du antingen att skicka eller misslyckas som en mobilvänlig webbplats. Detta är lite för generiskt för designers, men Google erbjuder tips baserade på problemområden och sidelement som kan använda förbättringar.
Håll detta sparat som ett trovärdigt mobilt testverktyg. Det är inte en komplett resurs för responsiv testning, men det är ett bra ställe att samla information och det kommer från kanske det mest auktoritativa företaget på webben.
5. Matt Kersleys svarande verktyg
Designer & utvecklare Matt Kersley släppte sin egen gratis testverktyg för responsiva layouter. Den här är mycket enklare än andra och har inte många krusiduller.
I stället är det en vanlig inline-sida förhandsgranskare med 5 fasta bredder: 240px, 320px, 480px, 768px, 1024px.
Förhandsgranskningsrutorna gör funktionen scrollbars så att du enkelt kan flytta igenom innehållet. Men du kan inte klicka på några länkar eller bläddra igenom andra sidor i rutorna, så det här är verkligen bäst för att testa singelsidor.
Men för ett enkelt verktyg som får jobbet gjort fungerar det bra och det är ett av de få testverktyg som erbjuder en bredd på 240 px som standard.
6. Är jag Responsive?
Du behöver nog inte det här verktyget om du letar efter pixel-perfekt noggrannhet.
Istället Är jag Responsive? Webbplatsen fungerar bäst för snabba kontroller och förhandsgranskningar på några vanliga enhetstyper.
Du skriver helt enkelt in en webbadress till webbsidan och den laddas i fyra exemplarpaneler: en smartphone, surfplattform, bärbar dator och skrivbord. Dessa ska inte skala så att du bara tittar på webbplatsen som ett förhållande.
Men det här är verkligen coolt för att fånga skärmdumpar på din webbplats för att visa hur det ser ut i olika enheter. Återgivningen är noggrann på skalan och den är beroende av din webbläsare för korrekt återgivning.
Plus med det här verktyget kan du köra lokalahostadresser så att du även kan kolla projekt du är bygga lokalt på din dator.
7. Designmodo Responsive Test
Ett annat verktyg jag verkligen gillar är Responsive Web Design Tester skapad av Designmodo. Med detta gratisverktyg kan du förhandsgranska en webbplats i din webbläsare baserat på vissa bredder.
Men det snygga tillägget till det här verktyget är nätverksbaserad sidainställning. Du kan kolla din sida för pixelpunkter och även studera sidans rutnät använder denna webbapp.
Utöver de fördefinierade enhetens bredder kan du också dra förhandsgranskningsrutan så att den passar de skärmbredder du testar. Den har ingångar för bredd / höjd om du också behöver ange storlekar manuellt.
Men varje enhetikon i det övre högra hörnet kan du välja bland dussintals vanliga skärmstorlekar vilket gör det här verktyget perfekt för att kontrollera vilken enhet du kan tänka dig.
