Il responsive design ha portato a una nuova serie di sfide per i web designer che hanno deciso di fare il grande passo e abbandonare il design statico. La creazione di un layout che funzioni bene con una larghezza, ma non tutte, ma anche tutte, richiede pazienza, creatività e, naturalmente, molti test.
Nulla sostituisce il controllo del tuo design sui dispositivi reali che hai scelto come target, ma mentre stai costruendo, è bello poter dare una rapida occhiata al layout a varie larghezze direttamente sul tuo computer. È possibile ridimensionare manualmente la finestra del browser, ma ciò diventa noiosamente ridicolo se si effettuano riprese con dimensioni di pixel precise. Fortunatamente, diversi sviluppatori di talento hanno già creato alcuni strumenti eccezionali per aiutarti in questo processo. Unisciti a noi oggi mentre diamo un'occhiata a tre di loro.
Aspetta, perché ho bisogno di questi?
Se sei nuovo del concetto di responsive web design, potresti essere confuso sul perché le seguenti utilità siano utili. Fondamentalmente, l'obiettivo alla base del responsive design è quello di costruire un sito che si adatti e si evolva in diverse dimensioni di viewport. Quindi, anziché creare un sito che funzioni bene sui desktop, un altro per dispositivi mobili e un terzo per i tablet, si crea un layout unico che risponde bene a tutti questi scenari.
Per rimuoverlo, devi ovviamente essere in grado di vedere il tuo layout a diverse larghezze. Personalmente raccomando di progettare per ogni larghezza possibile invece di mirare semplicemente alle larghezze più diffuse del dispositivo, ma è sicuramente comunque una buona idea cercare di capire il layout che vedranno gli utenti di determinati dispositivi. I seguenti strumenti ti aiuteranno a semplificare questo sforzo.
Il Responsinator
Il Responsinator è probabilmente il modo più semplice per dare una rapida occhiata al tuo layout su larghezze popolari del dispositivo. È veloce, è semplice e l'esperienza è stata progettata in modo che chiunque possa immediatamente sapere cosa sta succedendo. Questo è un concetto importante che non abbiamo ancora toccato. A volte è necessario mostrare il proprio design reattivo al proprio cliente e strumenti come questo semplificano notevolmente tale processo.
La ragione per cui questo sito comunica così bene il concetto di responsive design è che utilizza silhouettes di dispositivi popolari, all'interno dei quali verrà visualizzato il sito di tua scelta.
Per iniziare, tutto ciò che devi fare è digitare l'URL di un sito Web che desideri testare. Non deve essere un sito di tua proprietà, quindi questo è anche un ottimo modo per indagare su ciò che altri progettisti hanno fatto. Per questo esempio, ho inserito il sito Web di United Pixel Workers.
Da qui basta scorrere la pagina e vedere le anteprime del layout in tutti i dispositivi disponibili. Queste anteprime sono live e possono essere fatte scorrere, cliccare, ecc. La gamma di anteprime qui è piuttosto impressionante, non solo hanno incluso dispositivi importanti come gli iPad, ma hanno anche utilizzato larghezze comuni usate su più dispositivi come il? Crappy? Android? esempio sotto.
Il Responsinator è l'unico strumento come questo che ho visto che prende in considerazione l'interfaccia utente del software. Ad esempio, piuttosto che visualizzare il tuo sito al massimo 1024 x 768 per un iPad orizzontale, in realtà riservano i migliori 125 pixel o giù di lì per il browser Chrome browser mobile.
Prima di passare allo strumento successivo, ecco una breve panoramica dei pro e dei contro di questa app.
Responsinator Pros
- Quasi senza sforzo, basta incollare un link e scorrere
- Un sacco di diverse anteprime dei dispositivi
- Bella rappresentazione visiva che i clienti capiranno
- Le dimensioni della UI del software sono chiaramente rappresentate
Responsinatore Cont
- È necessario caricare diverse istanze di ciascun sito
- Non c'è modo di esplorare le dimensioni che non sono elencate
Responsive.is
Lo strumento successivo nell'elenco è Responsive.is. Il concetto qui è lo stesso di prima, il sito fornisce un modo rapido per visualizzare il layout su più larghezze diverse. Tuttavia, l'approccio è drasticamente diverso.
Per i principianti, non ci sono sagome di dispositivi. C'è una piccola barra degli strumenti nella parte superiore dello schermo, ma il resto è riservato per una singola anteprima del sito che cambia in base al dispositivo selezionato. Questo è un po 'più conveniente in quanto elimina lo scorrimento apparentemente infinito e il caricamento di più anteprime, ma alcune delle ovvietà di ciò che sta accadendo si perde nel processo. L'interfaccia minima è davvero carina, qualcosa che ho apprezzato dopo aver trascorso molto tempo con le silhouette ingombranti di The Responsinator.
Responsive.is viene fornito con un menu che contiene siti responsive incorporati per testare l'unità in modo da poter avere un'idea di come funziona il servizio (ho usato Food Sense). Se vuoi testare un altro sito, inseriscilo nella scatola.
La barra degli strumenti in alto offre sei diverse opzioni per le dimensioni del viewport, ognuna delle quali è rappresentata da una piccola icona: desktop, tablet landscape, tablet vertical, smartphone landscape, smartphone vertical e auto.
Come ci si aspetterebbe, facendo clic su un dispositivo si ottiene l'anteprima del sito a quella larghezza. Mi piace molto come l'anteprima è stata gestita qui. Il sito completo viene mostrato alla larghezza specificata, ma qualsiasi cosa al di fuori della porzione visibile del viewport è oscurata.
Il mio più grande problema qui è che le effettive larghezze del dispositivo non sono realmente specificate. Invece delle dimensioni in pixel, rimarrai solo con icone generiche. Dato che questo è il caso, questo sito è sicuramente più per test generalizzati rispetto a circostanze specifiche (anche se potresti misurare tu stesso le varie dimensioni).
Responsive.is Pro
- Interfaccia pulita e minimale che si concentra sul contenuto
- Viene caricata solo un'istanza del sito di test
- Non c'è bisogno di scorrere, basta cliccare su un'icona per cambiare la vista
- Opzioni di test integrate
Responsive.is Cons
- Sei limitato a sei finestre generiche
- Nessuna dimensione specifica elencata
- Può essere più complicato per i clienti capire di The Responsinator
Responsivepx
Finora, tutti gli strumenti che abbiamo visto ti costringono a dimensioni prestabilite per il test. Se non ti piacciono le dimensioni del test o semplicemente vuoi aggiungerne un altro, difficile! Non c'è modo di farlo. Allora, dove ti rivolgi se vuoi dettare con precisione le dimensioni del test? La risposta è un sito chiamato Responsivepx.
Qui abbiamo una semplice schermata di benvenuto con alcune istruzioni e un link a un video tutorial. Per iniziare, inserisci semplicemente un URL nella casella in alto a destra. Responsivepx è fantastico in quanto consente di testare anche i siti locali che risiedono sul tuo computer e sono attualmente in fase di elaborazione. Useremo il sito di Bryan Connor come esempio per questo test.
Una volta inserito un sito, è ora di modificare le dimensioni tramite gli strumenti nella parte superiore dello schermo. Come puoi vedere nello scatto qui sotto, non ci sono dimensioni preimpostate questa volta. Puoi controllare completamente le dimensioni dell'anteprima inserendo un numero o utilizzando i cursori.
Mentre modifichi le impostazioni, l'anteprima del sito si aggiorna per riflettere quelle modifiche. È mostrato su una griglia di trasparenza simile a quella di Photoshop.
A mio parere, Responsivepx è di gran lunga l'opzione più utile per gli sviluppatori che lavorano sul proprio sito reattivo. Ci sono una serie di ragioni per questo. In primo luogo, è stato appositamente creato per aiutarti a trovare punti di interruzione basati sul tuo design unico. È possibile caricare un disegno, spostare la larghezza in un punto in cui il layout non funziona più, quindi acquisire i valori dei pixel specifici elencati da inserire nella query multimediale. Una volta che hai tenuto conto delle modifiche, salva il file, aggiorna l'anteprima e sei pronto per attaccare il tuo prossimo punto di interruzione. Ancora una volta, il fatto che funzioni con i file locali è davvero utile qui.
Inoltre, quando si inseriscono test case e si modificano le impostazioni, l'indirizzo nella barra degli indirizzi del browser si aggiorna per riflettere tali modifiche, il che rende estremamente facile condividere un caso di test specifico con i colleghi.
Dato che questa app è un ottimo modo per decidere su potenziali punti di interruzione, mi piacerebbe vedere un pulsante incluso che genera una query multimediale basata sulla dimensione corrente della finestra. Ciò renderebbe davvero Responsivepx uno strumento killer per i progettisti reattivi.
Responsivepx Pros
- Decidi le dimensioni di anteprima
- Perfetto per trovare punti di interruzione
- Test remoto e locale
- Facile condividere casi di test specifici
Responsivepx Cons
- Principalmente per gli sviluppatori, utilizzare un'opzione diversa per i client
- L'interfaccia utente della barra degli strumenti potrebbe utilizzare un po 'di lavoro
Conclusione
Ora hai tre nuove armi nel tuo arsenale reattivo per il web design. Tutti questi siti hanno i loro punti di forza e valgono la pena di segnalarli per dopo. Il responsinator ti consente di simulare in modo rapido e semplice molti dispositivi diversi e può essere utile per aiutare i clienti a capire cosa stai cercando di ottenere. Responsive.is è un modo decente per avere un'idea generale di come funziona un layout reattivo su diversi generi di dispositivi. Non è il massimo per scopi di test specifici, ma può essere utile per un test rapido. Infine, Responsivepx è lo strumento ideale per trovare punti di interruzione ideali per il tuo progetto. Prendi il controllo delle esatte dimensioni dei pixel e puoi testare i file locali su cui stai lavorando.
Hai provato nessuno degli strumenti di cui sopra? Cosa pensi di loro? Come potrebbero essere migliorati? Assicurati inoltre di comunicarci eventuali altri strumenti simili che hai trovato.
Immagini di riserva fornite da: Bigstock.