Come testare progetti reattivi gratuitamente
"Smetti di ridimensionare quel browser, lo indosserai!" Quante volte l'hai sentito? Va bene, forse non così tante volte, ma se sviluppi responsive siti web di design, sai di cosa sto parlando: con ogni modifica DOM o CSS stai trascinando avanti e indietro il browser, testando le tue modifiche e cercando qualcosa di rotto.
In definitiva, la maggior parte di questo sforzo è un tentativo di emulare le dimensioni dello schermo di diversi dispositivi.
Se stai facendo lo sviluppo aziendale, potresti avere una varietà di dispositivi forniti dall'azienda per testare. Dove lavoro abbiamo un iPad, un iPod, uno o due altri tablet, laptop e desktop. Se non hai quel lusso, devi usare tutto ciò che è a portata di mano.
Nella mia casa abbiamo due laptop diversi, due diversi dispositivi Android, un Kindle e un Nexus 7. Questi sono i dispositivi che uso per testare il mio sviluppo freelance, ma chiaramente questa non è una collezione esaustiva. Nessun dispositivo iOS, e anche se sono un po 'uno dei primi ad adottare, non ho intenzione di acquistare ogni nuovo telefono / phablet / tablet mentre raggiunge il mercato.
Allora, cosa deve fare uno sviluppatore? Per fortuna, è disponibile un numero crescente di strumenti basati su browser che emulano le dimensioni dello schermo di un'ampia varietà di dispositivi. Diversi strumenti sono dotati di diversi set di funzionalità e diversi livelli di utilità, ovviamente. Vedremo molti di questi qui.
A scopo di test, ho usato il primo sito veramente reattivo che ho realizzato, PajamasOnYourFeet.com. Questo sito è basato sul Modello HTML5 di Brownie, fornito molto gentilmente alla comunità di sviluppo gratuitamente su EGrappler.
Sono responsabile?
Sono responsabile? è una visualizzazione istantanea semplice e istantanea del tuo sito che verrebbe visualizzata su quattro diversi dispositivi. Tutti e quattro sono iOS, e lo sviluppatore spiega che si concentra sul sito. Non offre controlli e nessuna scelta, solo una presentazione molto semplice ed elegante.
Le dimensioni di Viewport sono
- Desktop - 1600 x 992 px ridimensionato in scala (0.3181)
- Laptop: 1280 x 802 px ridimensionato in scala (0,277)
- Tablet - 768 x 1024px ridimensionato in scala (0,219)
- Mobile: 320 x 480 px ridimensionato in scala (0,219)
Citando lo sviluppatore, "Questo non è uno strumento per testare, è molto importante farlo su dispositivi reali. Questo è invece uno strumento per schermate rapide (per me) e per consentire visivamente alle persone di "ottenere" ciò che intendi nelle riunioni con i clienti. "
Due caratteristiche molto interessanti sono la possibilità di trascinare i "dispositivi" dove vuoi sullo schermo e la possibilità di incorporare il tuo sito di test in un link che puoi condividere. In Firefox, almeno con la struttura del sito di test, la barra di scorrimento laterale su iPhone non viene visualizzata, ma lo fa in IE e Chrome.
deviceponsive
deviceponsive è simile a Am I Responsive? in quanto visualizza semplicemente e in modo pulito il tuo sito, senza controlli o opzioni disponibili per quanto riguarda i dispositivi. Tutti i dispositivi vengono visualizzati contemporaneamente su una pagina lunga. Ha la caratteristica interessante che è possibile personalizzare l'intestazione del sito modificando un colore di sfondo dell'intestazione e incorporando il proprio logo, e quindi condividere tramite cattura dello schermo. Ciò ti consente di contrassegnare il sito, in un certo senso, quando condividi screenshot con un cliente.
I dispositivi e le dimensioni dello schermo emulati in questo sito sono
- Macbook - 1280 x 800
- Ritratto iPad - 768 x 1024
- iPad landscape: 1024 x 768
- Ritratto Kindle - 600 x 1024
- Paesaggio Kindle: 1024 x 600
- Ritratto iPhone: 320 x 480
- iPhone landscape - 480 x 320
- Galaxy ritratto - 240 x 320
- Galaxy landscape: 320 x 240
Come con la maggior parte di questi strumenti, le barre di scorrimento sono visualizzate sui dispositivi più piccoli. Sul dispositivo effettivo non vengono visualizzati, ma per consentire lo scorrimento della vista di prova su un dispositivo di scorrimento senza contatto, è necessario effettuare alcune concessioni.
test reattivo
Come devicesconsive, test reattivo visualizza il tuo sito in una varietà di dispositivi, ma invece di visualizzarli tutti nella pagina contemporaneamente, puoi scegliere quale dispositivo visualizzare da un semplice menu nella parte superiore della pagina. Visualizzando questo sito su un laptop di dimensioni medie, ho trovato che lo zoom della pagina funziona bene, permettendoti di vedere l'intero sito di test all'interno della cornice del dispositivo di test.
Qui vengono offerti tredici diversi viewport, che vanno da un grande monitor desktop a quello che chiamano 'Crappy Android' (per essere onesti, hanno anche un'opzione chiamata 'Nicer Android').
Ancora una volta, Firefox è il browser che inciampa un po 'su questo sito. Si noti nello screenshot, tra l'intestazione verde e l'area di contenuto dello sfondo bianco, c'è solo una striscia blu in cui dovrebbe essere visualizzato un cursore dell'immagine.
responsive.is
Abbastanza simile alle due voci precedenti, l'unica cosa che imposta responsive.is oltre a loro è l'animazione liscia dal display di un dispositivo al successivo, e una sovrapposizione semi-trasparente che mostra il sito immobiliare che cade al di fuori del viewport.
Le uniche opzioni di dispositivo disponibili qui sono auto, che riempie la finestra del browser, mostrando il sito come lo vedresti se ci andassi davvero, Desktop; Tablet Paesaggio; Ritratto di Tablet; SmartPhone Landscape; e SmartPhone Portrait, le dimensioni dei pixel non vengono fornite.
Screenqueries
Ancora una volta, alcune caratteristiche e opzioni diverse impostate Screenqueries leggermente diverso dagli altri. Qui sono disponibili 14 portatili e 12 tablet, con un controllo separato per passare dalla modalità verticale a quella orizzontale. Vengono visualizzati su una griglia di pixel numerata, con le dimensioni mostrate nella parte inferiore destra del display di prova. I bordi del display sono trascinabili in modo da poter testare dimensioni personalizzate. Passa il mouse sopra o fai clic sull'area di prova e lo sfondo diventa grigio, offrendoti una vista meno ingombrante.
Una caratteristica interessante di questo sito, per molti dei dispositivi è l'opzione "Trueview" che mostra il tuo sito racchiuso nel chrome del browser del dispositivo specificato.
Sfortunatamente, e ormai ci sto abituando, Firefox non riesce a mostrare il cursore dell'immagine del sito di test. Non mi infastidire, Firefox è in realtà il mio browser di scelta, ma per fortuna abbiamo opzioni.
Screenfly
Screenfly davvero aumenta il quoziente di usabilità. Offre nove dispositivi più grandi del tablet, dal desktop da 10 "a quello da 24", cinque tablet, nove smartphone, tre taglie televisive e un'opzione di dimensioni dello schermo personalizzate. Qualsiasi opzione scelta può essere ruotata in verticale o orizzontale con un controllo menu separato. Puoi scegliere di consentire lo scorrimento o meno, e puoi generare un link condivisibile con il clic di un pulsante.
Il sito è proattivo utile con come presenta le informazioni sulla dimensione dei pixel. Ogni dispositivo nei menu viene mostrato con il nome e le dimensioni in pixel, le dimensioni della finestra del browser vengono mostrate nella parte in alto a destra della finestra e le dimensioni dell'opzione selezionata vengono visualizzate in un piè di pagina sotto il display, insieme all'URL di il sito in fase di test. Questa piccola funzionalità aggiunge un tocco di classe per la documentazione degli screenshot e la condivisione delle informazioni con i clienti.
Tutto quanto detto renderebbe questo uno strumento perfettamente valido, ma gli sviluppatori di Screenfly hanno ritenuto opportuno lanciarlo su una tacca importante e fornire una funzionalità del server proxy. Citando dal loro sito, "Screenfly può usare un server proxy per imitare i dispositivi mentre visualizzi il tuo sito web. Il server proxy imita la stringa dell'agente utente dei dispositivi selezionati, ma non il comportamento di tali dispositivi. "
Tutti gli altri strumenti trattati qui riguardano esclusivamente i CSS. Screenfly è l'unico che consente il test basato sulla stringa dell'agent.
Provando con un sito che ho realizzato che fornisce una versione mobile basata su una stringa agent, i risultati per il sito mobile sono stati molto buoni. Le cose venivano visualizzate esattamente come mi aspettavo e le funzioni erano testabili. A dire il vero, il test per le stringhe degli agenti è vecchio stile, ma questo sito è stato reso "indietro nel tempo" e la funzionalità del server proxy è un'utile aggiunta a questo sito.
Conclusione
Quindi vediamo che ci sono un bel po 'di risorse per testare i tuoi siti reattivi. Differenziati per caratteristiche uniche, i siti che potresti utilizzare si baseranno sulle tue preferenze e richieste individuali e ti incoraggio a esplorare e sperimentare con loro. Più strumenti veramente utili abbiamo come sviluppatori web, meglio è.
Usi qualcuno di questi strumenti? Come metti alla prova i tuoi modelli reattivi? Fateci sapere nei commenti.