21 ottimi strumenti per il responsive web design

3

Come web designer, sappiamo che il responsive web design è arrivato per restare. Ti sei preso il tuo tempo per costruire un sito web molto bello e robusto, con un numero considerevole di traffico verso il tuo sito dai motori di ricerca. Quindi, arrivi alla realtà dei dispositivi. Quale dispositivo verrà utilizzato per aprire il tuo sito web?. E l'altezza e la larghezza del dispositivo? Ci sono migliaia di dispositivi, insieme a diverse dimensioni e finestre.

Come web designer, sappiamo che il nostro design verrà visualizzato da vari dispositivi e browser e allo stesso tempo i nostri blocchi di codice verranno eseguiti da vari dispositivi.

C'è stato un massiccio aumento del numero di dispositivi abilitati al web, accompagnato da molta densità di pixel, interazione, risoluzione e così via, anche a giudicare dalle attuali tendenze tecnologiche, ci saranno più dispositivi con cui le persone potranno accedere al web.

Il fatto che il responsive web design sia necessario per ogni web non significa che sia così facile, considerando il fatto che devi prendere in considerazione diversi dispositivi oltre a dimensioni e viewport. La sfida è che dobbiamo creare un'interfaccia che si ridimensioni praticamente con tutti i dispositivi, dal piccolo schermo ai grandi schermi nella sala del teatro.

Ciò ha semplicemente reso imperativo che tutti i siti Web rispondessero a vari dispositivi per una facile navigazione e una migliore esperienza utente.

Se hai visto uno dei nostri post precedenti sull'utile cassetta degli attrezzi per il web design reattivo, allora sai che ci sono così tanti strumenti sul web per il web design reattivo. Ma, dalla mia pluriennale esperienza come web designer, sviluppatore e consulente, unita alla ricerca approfondita che ho svolto, condividerò 21 fantastici strumenti e risorse per il responsive web design. Intendiamoci, per i designer che devono ancora fare i conti con il responsive web design. Ti consiglio di leggere Importanza e motivi del responsive web design, puoi anche porre la tua domanda e un esperto ti risponderà tramite il tuo indirizzo email. Dopodiché puoi continuare qui con 21 ottimi strumenti per il responsive web design.

01 Fondazione ZURB

ZURB Foundation è uno dei framework più accettati e avanzati al mondo per un sito reattivo. Molte risorse sono state spese da ZURB sul framework, oltre ai numerosi sforzi che erano stati fatti per il progetto open source sul framework.

ZURB Foundation ha un'enorme strategia di miglioramento, poiché ti è consentito aumentare il livello di complessità in base alle dimensioni dello schermo e alle capacità di progettazione. Non solo, troverai anche una libreria completa composta da diversi componenti dell'interfaccia utente, che ti rende più facile prototipare qualsiasi interfaccia tu possa immaginare.

Visita il sito web

02 Jetstrap

C'è stato un enorme cambiamento nel processo di progettazione del matrimonio, poiché il wireframe non mostrerà come apparirà un particolare design in diversi ambienti web. E la conoscenza della codifica è necessaria per utilizzare alcuni strumenti di prototipazione.

È qui che arriva Jetstrap. Consente al progettista di assemblare rapidamente il prototipo semplicemente trascinando e rilasciando i componenti dall'interfaccia utente alla tela. Per iniziare non sono necessarie competenze di sviluppo front-end e ti ritroverai con una pagina web che respira. Devi solo utilizzare gli strumenti di trascinamento della selezione sull'interfaccia.

Visita il sito web

03 Settimanale del design reattivo

Lo sviluppatore web Justin Avery dedica del tempo all'invio di newsletter dedicate su risorse, strumenti e tecniche per il responsive web design. Come designer, passo parte del mio tempo su Twitter leggendo feed sul responsive web design. Alcuni dei feed comprendono le risorse più recenti e suggerimenti utili sulla creazione di un design Web reattivo. Partecipare alla discussione sul web design reattivo da LinkedIn migliorerà sicuramente le tue abilità e ti fornirà le ultime idee sulle tendenze attuali nel web design reattivo.

Visita il sito web

04 Prototipo di stile

Il prototipo di stile è una pagina HTML che mostra lo stile del pulsante, la tipografia, il colore, lo stile della fotografia, il rollover e altri elementi per un sito di proposte.

Uno degli scopi principali del prototipo di stile è creare risultati utili e replicabili. Sebbene non ci siano regole per costruire un prototipo di stile, devi includere alcuni elementi di base, come lo stile del pulsante, la tipografia, il colore e il rollover oltre ad altri elementi che possono essere inclusi.

Il prototipo di stile ti consente di aggiungere animazioni, colori e altri elementi nell'ambiente web.

Visita il sito web

05 collage di elementi

Quando si creano mock-up a pagina intera, una delle cose più difficili che dobbiamo affrontare come designer è la progettazione del minuto di ogni pagina. Professionalmente, è consigliabile dedicare più tempo alla progettazione dei messaggi eroi sulla home page piuttosto che dedicare più tempo al resto delle pagine.

Come designer, la creazione di prototipi del tuo sito in Photoshop non è consigliabile con le tendenze attuali nel settore dello sviluppo web, poiché hai molte altre cose da fare.

Il fondatore dell'agenzia SuperFriendly Dan Mall ha fatto un ulteriore passo avanti nella semplificazione delle cose con Element Collages.

Element Collages ha un'ottima interfaccia utente per l'esplorazione visiva dei componenti dell'interfaccia. I collage ti aiutano nella direzione visiva e non devi creare l'intero componente da solo, considerando il fatto che non stai progettando per un solo dispositivo.

Visita il sito web

06 Pere

Alcuni importanti vantaggi delle guide di stile frontend comportano test più semplici, flusso di lavoro migliore, vocabolario condiviso e servizio di riferimento a cui continuare a tornare. Pears è un tema wordpress open source creato da Dan per creare una guida allo stile del frontend.

Pears consente ai progettisti di utilizzare facilmente una libreria comune per un sistema di progettazione coerente.

Visita il sito web

07 Icomuna

Retina e altri display ad alta risoluzione stanno rapidamente diventando all'ordine del giorno, le icone bitmap non si adattano molto bene con questi dispositivi ad alta risoluzione. Per fortuna, l'industria dello sviluppo web è all'altezza del compito.

La soluzione efficace a questo è creare un'icona indipendente dalla risoluzione, che può essere ottenuta creando un carattere icona personalizzato e incorporandolo con CSS @font-face.

Iconmoon semplifica semplicemente il processo di creazione e visualizzazione del carattere dell'icona. Sarai in grado di scegliere da una libreria di icone, con opzioni per caricare la tua icona. Da lì, puoi quindi generare il tuo carattere icona personalizzato e scaricare un pacchetto che include il carattere e il CSS appropriato. Quando si tratta di creare un'icona indipendente dalla risoluzione, Iconmoon è uno strumento importante.

Visita il sito web

08 Foresight.js

Vari dispositivi hanno modi diversi di visualizzare le immagini bitmap, ma come designer, devi tenere presente che il caricamento di immagini ad alta risoluzione può aumentare il peso della pagina. Foresight.js detects ha la capacità di rilevare la visualizzazione e la connettività del dispositivo per determinare se caricare o meno i componenti ad alta risoluzione.

Visita il sito web

09 Rivelatore

Il rilevamento e la profilazione dei dispositivi possono essere complicati a volte, poiché la libreria dei dispositivi è difficile da gestire. Poiché il rilevamento delle funzionalità si basa sul rilevamento lato client, quindi dipendere esclusivamente da esso può comportare alcune limitazioni nella flessibilità durante la fornitura di funzionalità a un'ampia gamma di dispositivi.

Ciò ha portato alla creazione di un rilevatore da parte di Dave Olsen, utilizzando lo script PHP e un browser basato su Javascript, insieme a una serie di librerie di rilevamento delle funzionalità. Gli utenti della libreria modernizzano e rilevano l'agente utente per determinare le classi di dispositivi. Detector ha la capacità di adattarsi a nuovi dispositivi e browser da solo senza la necessità di estrarre dal database centrale le informazioni del browser.

Visita il sito web

10 Enquire.js

Ogni designer conosce l'importanza di utilizzare le media query nei CSS. Allora cosa succede quando vuoi alterare alcune esperienze a un certo punto? Questi possono essere facilmente realizzati con lo script Enquire.js.

Lo script Enquire.js utilizza matchmedia per eseguire in modo condizionale alcune funzioni e caricare alcuni script se vengono soddisfatte determinate condizioni. Con questo puoi aspettarti un'esperienza utente migliore e facile da parte degli utenti.

Visita il sito web

11 Conteggio sociale

Il caricamento dei widget di condivisione dei social media come Facebook, Twitter e Google richiede 19 widget di richiesta HTTP e aggiunge ulteriori 246,7 KB al peso delle pagine, questo spesso aumenta il tempo di caricamento delle pagine Web e consuma più larghezza di banda.

Zach Leatherman ha risolto il problema creando una soluzione leggera, denominata social count. È un piccolo script che carica in modo pigro i widget sociali, in modo che gli utenti non vengano affatto penalizzati.

Visita il sito web

12 FitVid

Diversi oggetti multimediali, inclusi i video, sono diversi rispetto alle immagini, nel senso che non mantengono alcune delle loro proporzioni dopo il ridimensionamento. Ciò crea un problema di ridimensionamento durante la visualizzazione di video da una serie di diversi dispositivi abilitati per il Web.< br/> Chris e altri designer sono riusciti a sviluppare un plug-in chiamato FitVids.js. oggetti multimediali durante il ridimensionamento. Con questo, puoi ottenere il rapporto di ridimensionamento corretto quando il tuo video viene ridimensionato e, di conseguenza, ottenere oggetti multimediali visualizzati con precisione, inclusi i video nelle tue applicazioni.

Visita il sito web

13 CSS mobile-first compatibile con IE

Ogni designer sa quanto siano importanti le media query, ma il fatto è che Internet Explorer non supporta le media query. Allo stesso tempo, come designer, non puoi decidere di eliminare la media query, solo perché vuoi supportare il vecchio IE. Questo problema può essere facilmente superato utilizzando Sass. Sass ci aiuterà a creare stili mobile-first e allo stesso tempo fornirà stili desktop appropriati alla vecchia versione di IE.

Visita il sito web

14 posti di lavoro.

In qualità di designer, se controlli online per cercare strumenti di test di viewport, troverai molti strumenti di test di viewport. Ma il problema è che la maggior parte degli strumenti di test del viewport si basa su larghezze di dispositivi popolari come 320, 768, 1024 e così via.

Ish classifica e mette in evidenza gli intervalli generali (piccolo, medio, grande, ecc.) Solo per assicurarti che il tuo metta in risalto lo spettro di risoluzione generale.

Visita il sito web

15 media query proporzionali

Alcuni designer utilizzano ancora i valori dei pixel per impostare i punti di interruzione, mentre noi abbiamo utilizzato larghezze, misure e unità di carattere relative ai vari punti di vista dei dispositivi. Un buon tutorial è stato fornito da Lyza Gardner che spiega come possiamo utilizzare le unità relative per i punti di interruzione per creare una migliore esperienza utente.

16 MQTest.io

Come designer, a volte, potrebbe essere in qualche modo scoraggiante tenere traccia delle query multimediali supportate da un particolare browser. Questo è facilmente risolvibile utilizzando MQTest.io sviluppato da Viljami Salminen. Lo strumento ti aiuterà a riconoscere e analizzare varie query multimediali a cui rispondono diversi browser web. Con questo, potresti anche essere in grado di utilizzare query multimediali che non sono comunemente utilizzate.

Visita il sito web

17 Segnalibro media query Sparkbox

Sparkbox è un bookmarklet di media query che aiuta a determinare le query per i media correnti o per i media in uso. È imperativo per i progettisti avere accesso alle dimensioni dello schermo, poiché consente di risparmiare tempo e aiuta anche a determinare query multimediali proporzionali.

Visita il sito web

18 BrowserStack

In qualità di designer, sappiamo quanto può essere costoso, impegnativo e persino scoraggiante quando si tratta di testare in uno stack rappresentativo di browser e dispositivi. Questo è facilmente risolto quando utilizziamo BrowserStack.

Lo stack del browser fornisce l'accesso remoto a diversi dispositivi e ambienti, consentendo in tal modo di eseguire alcuni test di garanzia della qualità. BrowserStack è impressionante come qualsiasi altra cosa in quanto è efficace anche durante i test su vecchie versioni di Internet Explorer.

Visita il sito web

19Mobitest

Le prestazioni sono uno degli aspetti più essenziali del web design. Con Mobitest, sarai in grado di vedere come si comportano i tuoi progetti con alcune analisi.

Quando provi il tuo progetto su Mobitest, devi solo inserire un indirizzo web, dopodiché lo strumento visualizza il sito su un dispositivo reale, e allo stesso tempo ti fornisce molte statistiche sulle prestazioni, in quanto sarai anche in grado di conoscere il carico tempo e dimensione media della pagina insieme ad altre statistiche.

Visita il sito web

20 Adobe Edge Ispeziona

L'importanza del test su un dispositivo reale non può essere enfatizzata troppo per un web designer, poiché è necessario vedere e analizzare il tipo di prestazioni che il tuo progetto porterà a un utente prima della pubblicazione. Un Adobe Edge Inspect ha reso i test su un dispositivo reale molto semplici e diretti, poiché hai lo strumento che aggiorna automaticamente tutti i dispositivi collegati. Puoi anche testare il codice su un'ampia gamma di dispositivi.

Visita il sito web

21 Codepen Pro

CodePen è uno strumento che aiuta rapidamente a dimostrare modelli e tecniche reattivi. È uno strumento che aiuta anche l'esecuzione dei nostri progetti su diversi dispositivi e computer, mentre si sta ancora digitando.

CodePen è un potente strumento che ti aiuta a vedere i risultati del tuo codice su più dispositivi e computer durante la digitazione.

Visita il sito web

Conclusione

Tutti i 21 strumenti menzionati sopra sono utili per il responsive web design. Ma ciascuno degli strumenti ha funzionalità diverse, personalmente non ho preferenze, poiché tutti gli strumenti sono efficaci, sebbene con interfaccia e funzionalità diverse. La scelta è tua.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More