8 Strumenti di progettazione chiave per massimizzare il traffico sul tuo sito web |

Secondo uno studio della Banca Mondiale, circa il 75% delle persone in tutto il mondo ha accesso ai dispositivi mobili. CNET riferisce che gli abbonamenti ai servizi di comunicazione mobile sono passati da 1 miliardo nel 2000 a più di 6 miliardi nel 2012. A causa della rapida espansione dell'uso del telefono cellulare, è ora più che mai cruciale che i siti web funzionino su più piattaforme. Utilizza questi otto strumenti per migliorare il tuo web design reattivo e massimizzare il numero di persone che possono visualizzare e fare clic sui tuoi siti.

8. Adobe Edge Inspect

Aggiornato e rilasciato nel 2013 con un nuovo marchio che lo lega a Creative Cloud, Adobe Edge Inspect consente di visualizzare in anteprima i progetti Web per vedere come appariranno su piattaforme diverse. L'attrazione principale di Edge è la sua capacità di farti risparmiare tempo vedendo i cambiamenti attraverso le piattaforme in tempo reale.

Questo strumento consente di sincronizzare il tuo computer e i tuoi dispositivi mobili. In questo modo, puoi esplorare e ispezionare il web design su più piattaforme contemporaneamente. Inoltre, quando apporti modifiche al web design ed esegui il debugging, il tuo lavoro appare immediatamente sul tuo dispositivo, purché tu stia lavorando con la codifica Java, CSS e HTML.

7. Skeleton

Questo pacchetto aziendale di file CSS consente lo sviluppo di siti Web senza problemi che sembrano eleganti se visualizzati su un monitor desktop o un piccolo schermo luminoso in mano. Considerato uno standard di facile utilizzo per il web design reattivo, Skeleton è giustamente chiamato perché crea una struttura che si espande e si contrae in base alle dimensioni del dispositivo dell'utente. Sebbene contenga elementi di base per la progettazione, è abbastanza flessibile da consentire ai designer di introdurre stili più sofisticati.

6. Wireframe reattivo

Presentato come uno strumento sperimentale che utilizza tecniche di progettazione Web reattive, Responsive Wireframe utilizza HTML / CSS per fornire una griglia di sovrapposizione che consente di visualizzare le visualizzazioni desktop e mobili del progetto. L'idea con questo strumento è di semplificare la progettazione all'interno del browser. Mentre alcuni designer potrebbero obiettare che questi wireframes distruggono la creatività, altri dicono che è un modo rapido e semplice per creare progetti che funzionano su piattaforme diverse. L'utilizzo di questo strumento ti fa risparmiare tempo mentre testai i progetti utilizzando i wireframe reattivi per vedere come appariranno su laptop, desktop e cellulari.

5. Style Tiles

Più concreto di un mood board, ma meno statico di un vero e proprio mockup, Style Tiles consente ai designer di mostrare ai clienti layout di siti Web diversi. Presentando le tessere, i progettisti evitano di dover realizzare più versioni finite.

Queste tessere a cascata mostrano i progetti senza adattarli a qualsiasi dispositivo, rendendoli un modo semplice per creare progetti e condividerli con i clienti prima di prendere in considerazione le numerose considerazioni associate con un design reattivo. In altre parole, questo approccio offre ai progettisti la libertà dalle restrizioni dimensionali. Un prodotto secondario di Style Tiles, "Component Style Guide" offre consigli su come prendere il tuo progetto e farlo funzionare su piattaforme come l'iPhone e il nuovo smartphone Blackberry 10.

4. The Responsive Calculator

Usando le percentuali, questa calcolatrice ti fornisce i dati necessari per trasformare un design PSD in un elemento per il tuo progetto web reattivo. Immetti sei campi, quindi fai clic su "Invia query". Opta per bordi, margini e spaziatura sul tuo PSD con questa calcolatrice.

3. Wookmark

Questo è un plug-in jQuery che prende i componenti di una pagina Web e li inserisce in colonne. Il layout della colonna si basa sulla dimensione della finestra del browser. Questo pratico strumento è un ottimo modo per rendere un sito sensibile a diverse dimensioni dello schermo.

2. ProtoFluid

Avendo un vantaggio perché è basato sul web, questo strumento rende indolore vedere mock-up del tuo design con risoluzioni e dimensioni diverse. Divertiti a usare Firebug mentre controlli i tuoi HTML, CSS, JS e altri elementi per problemi. Le scorciatoie da tastiera, un passaggio rapido tra le diverse visualizzazioni e il codice pulito assicurano velocità man mano che si utilizza questo strumento per testare l'aspetto del tuo design su diverse dimensioni dello schermo, inclusi Nexus, iPhone e iPad.

1. Foundation

Questo framework di front-end offre l'opzione per codificare in modo più intelligente e veloce. Tra le sue caratteristiche, questo strumento ti consente di iniziare la progettazione per schermi di piccole dimensioni. Mentre lavori per costruire il tuo progetto per schermi più grandi, Foundation ti aiuta a migliorare gli elementi del design. Inoltre, questo strumento offre fantastici modelli HTML che ti consentono di iniziare rapidamente la progettazione del sito.

Sfrutta la griglia flessibile di questo strumento, i layout reattivi e la rapida produzione di prototipi. L'efficacia e la credibilità di Foundation sono evidenti nell'elenco dei siti che la utilizzano, tra cui National Geographic, Pixar e Los Alamos National Laboratories.

Come si guarda a massimizzare il tuo web design reattivo, quali sono le maggiori sfide che affronti? Quali strumenti ti sono stati più utili?

[Immagini tramite]