7 strumenti gratuiti per testare layout reattivi
Ogni sito web dovrebbe essere progettato con un approccio reattivo. Per mantenerti nella giusta direzione, testare in anticipo e spesso, con uno di questi strumenti di test reattivi, garantirà che il tuo design sia corretto su tutti i browser e in tutte le dimensioni di visualizzazione.
Ogni sito web moderno ha bisogno un design reattivo . Ciò richiede uno sforzo maggiore, ma il risultato finale è utile.
In realtà raccomando di testare le tue idee con strumenti di progettazione reattivi per vedere come il tuo sito guarda in ogni fase. Puoi cercare problemi di usabilità su diverse dimensioni dello schermo, tutto da un pratico strumento.
E questi strumenti gratuiti sono le mie scelte migliori per i test reattivi poiché sono tutti super facili da usare. Meglio di tutto questo supporta molte dimensioni del dispositivo in modo da avere una buona sensazione di come dovrebbe apparire il tuo layout dagli smartphone ai desktop.
1. XRispondi
Il App XRespond si definisce un "laboratorio virtuale di dispositivi" e direi che è piuttosto azzeccato.
Con questo sito è possibile visualizzare l'anteprima di qualsiasi sito Web su una varietà di dispositivi. Il sito funziona in uno stile orizzontale lungo in cui devi scorrere lateralmente per vedere tutti i formati di schermo.
L'etichetta sopra ogni schermata indica la dimensione esatta e il dispositivo a cui corrisponde. Inoltre dal menu a discesa c'è un'ampia scelta di smartphone, tablet e laptop per testare dispositivi specifici.
Tale elenco supporta anche un'impostazione di larghezza / altezza personalizzata se desideri vedere come il tuo sito appare su monitor specifici. Uno strumento di test eccellente per la progettazione reattiva e supporta una grande varietà di stili di dispositivi.
2. Responsinator
Un'app simile potrebbe anche piacerti Responsinator .
Invece di utilizzare una barra di scorrimento orizzontale, questo sito elenca ogni anteprima del dispositivo in una colonna verticale. In questo modo è possibile scorrere verso il basso attraverso ciascun dispositivo e visualizzare in anteprima il sito su ciascuno di essi.
I dispositivi includono gli iPhone più comuni e i dispositivi Android Nexus, entrambi con anteprima verticale e orizzontale. Troverai anche le anteprime dei dispositivi iPad anche in verticale e orizzontale.
Un'altra caratteristica interessante è il passaggio tra HTTP e HTTPS. Responsinator offre entrambi i tipi per l'anteprima dei siti in base all'URL inserito. Corrisponde automaticamente a qualsiasi sito che stai visualizzando in anteprima per evitare errori SSL.
3. Responsabile del design reattivo
Hai bisogno di verificare rapidamente se un sito web è davvero reattivo? Quindi prova a usare questo Responsive Design Checker realizzato appositamente per dimensioni dello schermo personalizzate.
Una volta inserito un URL, hai il pieno controllo dello spazio di test reattivo. Puoi modificare la larghezza / altezza come vuoi e persino usarlo per abbinare determinati rapporti dello schermo se usi un strumento di proporzioni .
Nella barra laterale troverai un sacco di dimensioni dello schermo predefinite per dispositivi comuni come tablet Nexus, Kindle e persino telefoni più recenti come Google Pixel.
Il sito supporta anche schermi di grandi dimensioni con monitor desktop fino a 24 "di larghezza . Sorprendentemente queste grandi dimensioni funzionano bene anche su piccoli monitor perché il riquadro di anteprima si ridimensiona in base al rapporto, non alla larghezza totale del pixel.
Quindi, se hai difficoltà a testare i monitor 1920px sullo schermo MacBook più piccolo, questo strumento vale la pena di aggiungerlo ai segnalibri.
4. Test di Google Mobile
Google è pieno di ottimi strumenti per i webmaster e i loro Test di ottimizzazione mobile è uno di questi esempi.
Questo strumento di test non è realmente un programma di anteprima e non ti aiuta a individuare i bug dell'interfaccia utente. Invece è uno strumento mobile dedicato per individuare i problemi all'interno del tuo sito su dispositivi mobili.
Una volta eseguito il test, passerai o fallirai come sito ottimizzato per i dispositivi mobili. Questo è un po 'troppo generico per i progettisti, ma Google offre suggerimenti basati su aree problematiche e elementi della pagina che potrebbero essere migliorati.
Mantieni questo come strumento di test mobile affidabile. Non è una risorsa completa per i test reattivi, ma è un ottimo posto per raccogliere informazioni e proviene forse dall'azienda più autorevole del web.
5. Lo strumento reattivo di Matt Kersley
Designer e sviluppatore Matt Kersley rilasciato il suo libero strumento di test per layout reattivi. Questo è molto più semplice di altri e non ha molti fronzoli.
Invece è un semplice programma di anteprima inline con 5 larghezze fisse: 240px, 320px, 480px, 768px, 1024px.
I riquadri di anteprima sono dotati di barre di scorrimento in modo da poter spostare il contenuto senza sforzo. Tuttavia, non è possibile fare clic su alcun collegamento o sfogliare le altre pagine all'interno dei riquadri, quindi questo è il modo migliore per testare pagine singolari.
Ma per un semplice strumento che ottiene il lavoro fatto questo funziona alla grande ed è uno dei pochi strumenti di test che offre una larghezza di 240px per impostazione predefinita.
6. Sono responsabile?
Probabilmente non avrai bisogno di questo strumento se stai cercando una precisione perfetta per i pixel.
Invece il Sono responsabile? il sito Web funziona al meglio per controlli rapidi e anteprime su alcuni tipi di dispositivi comuni.
Basta inserire l'URL di un sito Web e verrà caricato in quattro riquadri di anteprima del dispositivo: uno smartphone, un tablet, un laptop e un desktop. Questi non sono in scala quindi stai solo guardando il sito come un rapporto.
Ma questo è davvero bello per catturare schermate del tuo sito per mostrare come appare in vari dispositivi. Il rendering è accurato in scala e si basa sul tuo browser per il rendering corretto.
Inoltre, questo strumento ti consente di eseguire gli indirizzi localhost in modo da poter persino controllare i progetti che sei costruendo localmente sul tuo computer.
7. Designmodo Responsive Test
Un altro strumento che mi piace davvero è il Responsive Web Design Tester creato da Designmodo. Questo strumento gratuito ti consente di visualizzare in anteprima un sito nel tuo browser in base a determinate larghezze.
Ma l'aggiunta interessante a questo strumento è l'impostazione della pagina basata sulla griglia. Puoi controllare la tua pagina per punti pixel e persino studiare la griglia della pagina usando questa webapp.
Oltre alle larghezze predefinite del dispositivo, puoi anche trascinare il riquadro di anteprima per adattarlo alle larghezze dello schermo che stai testando. Ha ingressi per la larghezza / altezza se è necessario inserire le dimensioni manualmente.
Ma ogni icona del dispositivo nell'angolo in alto a destra ti consente di scegliere tra dozzine di dimensioni dello schermo comuni, rendendo questo strumento perfetto per controllare qualsiasi dispositivo tu possa immaginare.
