50 utili strumenti di progettazione web reattivi per i progettisti
Negli ultimi giorni, ti abbiamo mostrato alcuni dei migliori temi reattivi di WordPress e Joomla che puoi scaricare e utilizzare sul tuo sito. Oggi ti daremo gli attrezzi. Compresi framework, servizi e script scaricabili, pensiamo che saranno di grande aiuto quando si tratta di sviluppo web reattivo.
Per semplificare la discesa dell'intero elenco di strumenti, li abbiamo suddivisi nelle seguenti sezioni:
- Grid e quadri
- Schizzi e wireframe
- JavaScript e plugin jQuery
- Test e Anteprima
- Sliders
- Altri
Grid e quadri
[Torna in cima]
Columnal
Columnal è un progetto Pulp + Pixels, che è stato preso in prestito da cssgrid.net mentre alcune ispirazioni al codice sono state prese da 960.gs. Columnal ti aiuta molto nel tuo web design reattivo, rendendo flessibili le tue griglie per cambiare dinamicamente quando la finestra del browser viene ridimensionata.
Scheletro
Skeleton è un framework CSS semplice e potente, che è principalmente apprezzato dagli sviluppatori e dai designer per la sua semplicità ed efficienza. Non c'è nessun sollevamento pesante con Javascript qui, solo CSS buono e puro con documentazione pulita.
LessFramework 4
Less Framework è più o meno un framework, nel nome del suo creatore. Si tratta di un sistema di griglia CSS adattivo basato sull'utilizzo di query multimediali in linea CSS, che rende molto più facile lo sviluppo di siti Web reattivi.
Sistema di griglia semantica
Semantic Grid System viene utilizzato per progettare layout di griglia reattivi. Utilizza estensioni CSS pre-elaborate come LESS, SCSS o Stylus per offrire la massima efficienza. È possibile selezionare le larghezze colonne e grondaie, scegliere il numero di colonne e passare da pixel a percentuali.
Golden Grid System
Golden Grid System è un sistema a griglia fluida che funge da punto di partenza per il tuo web design reattivo. Consente al sito Web di offrire pagine di bell'aspetto che vanno da 240 a 2560 px.
320 e fino
320 e Up è un boilerplate delle query multimediali CSS, che funge da modello di partenza per la progettazione reattiva. Ne consegue un approccio completamente inverso rispetto a molti altri piatti disponibili.
Inuit.css
Inuit.css è un framework CSS, estremamente facile da usare, anche per i principianti. Ha un approccio minimalista, quindi è necessario occuparsi solo delle cose che sono necessarie, ma se necessario, può anche essere esteso con una manciata di plugin disponibili.
gridless
Gridless è uno standard per la creazione di siti web reattivi e cross-browser con una bella tipografia. Questo strumento si concentra sullo sviluppo progressivo di un progetto e funge da punto di partenza per qualsiasi progetto.
1140 griglia CSS
1140 CSS Grid è un ottimo sistema di griglia CSS progettato dal designer di Melbourne Andy Taylor, che consente al tuo design di adattarsi perfettamente a 1140px per monitor di grandi dimensioni e il layout fluido si adatterà perfettamente ad altre risoluzioni più piccole con pochissimo lavoro extra.
1KBCSSGrid
Griglia CSS da 1KB progettata da Tyler Tate, è un semplice e leggero generatore di griglia CSS. Ti permetterà di impostare il numero di colonne, larghezza della colonna e larghezza della grondaia, e puoi ottenere un CSS scaricabile per la griglia dei tuoi siti web.
bootstrap
Bootstrap, creato e gestito da Mark Otto e Jacob Thornton su Twitter, è un eccellente set di elementi dell'interfaccia utente, layout e strumenti javascript, disponibili gratuitamente per il download e l'utilizzo nei progetti di web design.
Grid Grid Calculator
Questo semplice strumento ti aiuterà a prendere rapidamente il CSS della progettazione del tuo sito web con la griglia fluida.
Griglie fluide
Fluid Grid è una struttura di griglia fluida semplice ma utile, che crea layout reattivi basati su 6, 7, 8, 9, 10, 12 o 16 colonne.
Flurid
Flurid è un framework di griglia CSS cross-browser semplice e molto utile con un massimo di 16 colonne. Inoltre, non nasconde i pixel nei margini.
Gridset
Il gridset è uno strumento per creare griglie di qualsiasi tipo, ad esempio colonne, asimmetriche, fisse, proporzionali, composte, reattive e molto altro. Questo strumento di Mark Boulton è ancora in beta, ma si dimostra promettente. E ho detto che usarlo è semplice come incorporare un link.
Gridpak
Gridpak è un generatore di griglia reattivo online, in cui è possibile modificare il numero di colonne, padding e gutter e possono essere aggiunti punti di interruzione personalizzati. Il CSS è generato dallo strumento e reso pronto per il download. Fornisce anche modelli di griglia PNG, che possono essere utilizzati per la progettazione in Photoshop.
SimpleGrid
SimpleGrid, sviluppato da Michael Kuhn, è un framework CSS molto semplice e diretto per creare infiniti layout basati su griglia. Per impostazione predefinita, SimpleGrid viene preparato per 4 intervalli distinti di dimensioni dello schermo.
susy
Susy di Oddbird è simile in azione al Sistema di Griglia Semantica. Non utilizza markup extra o altre classi speciali, ma è rivolto esclusivamente agli utenti di Saas e della sua estensione Compass.
Piccola griglia fluida
Tiny Fluid Grid è una fantastica applicazione web, che può aiutarti a determinare il sistema di griglia del tuo sito web in modo interattivo. Puoi impostare il numero di colonne, la percentuale di grondaia, la larghezza minima e massima del layout del tuo sito web e ottenere un CSS scaricabile per questo.
Sistema a griglia variabile
Il sistema a griglia variabile è progettato e sviluppato da SprySoft e si basa sul sistema a griglia 960. Consente a sviluppatori e progettisti di generare la griglia personalizzata e quindi di scaricare il file CSS associato basato su tale griglia.
Schizzi e wireframe
[Torna in cima]
Schede di disegno responsive Web Design
Questo strumento è utile per mappare i posizionamenti di vari elementi nel layout del tuo sito web su vari dispositivi. Con l'aiuto di questo dispositivo, è possibile farsi un'idea di dove posizionare gli elementi necessari di un sito Web per diverse dimensioni e risoluzioni dello schermo.
Wireframe reattivo
Responsive Wireframes è uno strumento sperimentale creato da James Mellers di Adobe. È costruito solo con HTML e CSS (non sono state utilizzate immagini o JS) che è possibile utilizzare per visualizzare l'aspetto del design reattivo sui browser effettivi di vari desktop e dispositivi mobili.
StyleTiles
Style Tiles ti dà un modo per sviluppare un'idea di come un sito web apparirebbe, indipendentemente dagli stili complicati che entrano in gioco. Ti dà l'opportunità di un perfetto flusso di lavoro di progettazione reattivo e anche la possibilità di integrare i feedback dei clienti.
JavaScript e plugin jQuery
[Torna in cima]
Adapt.Js
Adapt.js è una soluzione Javascript e un'eccellente alternativa alle query multimediali CSS. L'utilizzo dell'approccio @media è una buona pratica, ma non funziona per tutti i browser. Nathan Smith, il creatore di 960 Grid System, ha rilasciato Adapt.js, una libreria javascript molto leggera per superare questo problema.
Isotopo
Isotope è un fantastico plugin jQuery, che si rivela molto utile durante la progettazione di un design reattivo. Non solo aiuta a riorganizzare gli elementi di una pagina quando la finestra del browser viene ridimensionata o le dimensioni dello schermo sono più piccole, ma aiuta anche a filtrare quegli elementi.
Opere murarie
La massoneria è un ottimo plugin jQuery, che viene utilizzato per creare layout dinamici e adattivi. Questo plugin aiuta a riorganizzare gli elementi nel tuo design reattivo, in modo che possano adattarsi meglio agli open-spots sulla griglia.
Respond.js
Respond.js è uno script veloce e leggero (3 Kb minified e 1 Kb gzip), il cui scopo principale è quello di abilitare il web design reattivo in quelli che non supportano le Media Queries CSS3, come i browser IE.
TinyNav.js
TinyNav.js è un piccolo e leggero plug-in jQuery, solo 362 byte, che converte le grandi liste di navigazione in piccoli menu a tendina per schermi più piccoli.
Wookmark jQuery Plugin
Wookmark è un plugin jQuery che rileva le dimensioni della finestra del browser e organizza automaticamente gli elementi della pagina in colonne. Puoi anche vedere un'anteprima dal vivo nella parte inferiore della pagina stessa.
Test e Anteprima
[Torna in cima]
ProtoFluid
ProtoFluid è uno strumento di prototipazione basato sul web che consente di testare i prototipi del tuo sito Web in varie dimensioni e risoluzioni dello schermo. Basta digitare l'URL, selezionare il dispositivo (o eventuali dimensioni personalizzate) e premere Avvia. Poiché si tratta di uno strumento basato sul Web, consente anche di utilizzare altre estensioni come FireBug.
Responsive.Is
Responsive.Is è stato creato da TypeCast con un altro strumento di emulazione del browser, che puoi utilizzare per testare il tuo design reattivo. Basta digitare un URL e cambierà automaticamente le sue dimensioni in base al dispositivo che scegli.
Responsivepx.Com
ResponsivePx è uno strumento fantastico per testare la progettazione del tuo sito web reattivo. La caratteristica principale che lo distingue dagli altri, è la sua capacità di ridimensionare il sito pixel per pixel. Questa fantastica funzionalità ti consentirà di identificare i punti di interruzione e anche di testare come funzionano le query multimediali CSS nel tuo sito.
Strumento di test reattivo per il web design
Un fantastico strumento di test, che ti consente di visualizzare il tuo sito web reattivo in varie dimensioni dello schermo contemporaneamente in un unico schermo, mentre le costruisci o le progetta. Mi piace questo strumento principalmente perché mostra tutte le risoluzioni dello schermo affiancate che rende più facile il debug.
ReView.Js
ReView è un sistema di visualizzazione dinamica, sviluppato in puro JavaScript, che offre una fantastica esperienza di visualizzazione per il tuo web design reattivo.
Screenfly
Screenfly di QuirkTools, è uno strumento straordinario che ti consentirà di visualizzare il tuo sito web reattivo in una varietà di dispositivi: desktop, tablet, mobile e TV. Ha anche opzioni per abilitare o disabilitare lo scorrimento o persino per ruotare il display.
Screenqueri.es
Screenqueri.es è uno strumento di test di progettazione reattivo pixel-perfetto. Basta inserire qualsiasi indirizzo del sito web che si desidera controllare, e questo strumento esegue mostrerà il sito Web in varie dimensioni dello schermo in base al dispositivo. È inoltre possibile ridimensionare manualmente le dimensioni pixel per pixel per identificare i punti di interruzione.
Il Responsinator
Prova il tuo sito su vari dispositivi da un iPhone e iPad, a un Kindle e su Android sul Responsinator. Mostra anche il tuo sito sia in modalità verticale che orizzontale. Questo strumento mi piace molto di più a causa dei contorni dei dispositivi visualizzati sulla pagina, il che conferisce maggiore significato all'intero processo.
Sliders
[Torna in cima]
Mirtillo
Blueberry è un fantastico slider di immagini jQuery open source, che è stato scritto per funzionare in modo specifico per layout fluidi o reattivi.
Elastislide
Vuoi un carosello che si adegui automaticamente alle dimensioni dello schermo quando la finestra del browser viene ridimensionata o quando ti trovi in uno schermo più piccolo? Elastislide è il plugin jQuery più adatto alle tue esigenze.
Responsive CSS3 Slider
Si tratta di un cursore CSS3 reattivo in grado di adattarsi facilmente a qualsiasi dimensione dello schermo e risoluzione dello schermo. La cosa bella di questo cursore è che le frecce entrano nella scatola quando le dimensioni dello schermo del dispositivo sono abbastanza piccole. Non è richiesto JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js è un plugin jQuery molto semplice ed estremamente leggero (solo 1Kb) che crea un cursore reattivo usando liste non ordinate. Funziona su una vasta gamma di browser, anche su IE6 e versioni successive.
Altri
[Torna in cima]
Immagini adattive
Adaptive Images è uno strumento online per il responsive web design, che rileva le dimensioni dello schermo dei visitatori e crea, memorizza nella cache e distribuisce le immagini riscalate, in base alle dimensioni e alla risoluzione dello schermo.
FitText.Js
FitText.js è un piccolo strumento javascript che consente il ridimensionamento automatico di testo e titoli quando viene ridimensionata la finestra del browser. Non dovrai più preoccuparti della mancata corrispondenza delle dimensioni del testo con questo strumento a bordo.
FitVid.Js
Vuoi ridimensionare i video incorporati quando la finestra del browser viene ridimensionata o il dispositivo ha una risoluzione minore? FitVid.Js può aiutarti a realizzare questo. È un plug-in jQuery leggero, semplice e facile da usare utilizzato per ottenere video incorporati a larghezza fluida.
Immagini retina
Retina Images è una fantastica soluzione javascript, che servirà automaticamente @ 2X immagini più grandi e ad alta risoluzione se visualizzate sul display retina. Tutto quello che devi fare è mettere una versione ad alta risoluzione di ogni singola immagine, e gestirà il resto.
Griglia reattiva per foto
Responsive Photo Grid senza interruzioni visualizza le immagini da bordo a bordo sul browser, senza spazi vuoti tra le immagini. Le foto sono affiancate e scorrono da sinistra a destra in tutta la pagina in colonne. Il numero di colonne si modifica di conseguenza quando la finestra del browser viene ridimensionata.
SlabText
SlabText è un plugin o strumento jQuery di Brian McAllister basato sull'algoritmo slabText, che divide i titoli in righe prima di ridimensionare ogni riga per riempire lo spazio disponibile. È abbastanza simile al plugin FitText.Js in azione.
Zurb - ResponsiveTables
Ti sei mai chiesto come gestire le tabelle di big data nel responsive design? Zurb, una combinazione CSS / JS ti dà la risposta; prende le tabelle di dati e le modifica in modo che non interrompano il layout reattivo su dispositivi con schermo più piccolo.
Categorizr
Categorizr è uno script PHP molto piccolo, offre ai tuoi visitatori un'esperienza web più mirata. Ti aiuterà a fornire design specifici per dispositivo per tablet, TV, dispositivi mobili o desktop.
Bookmarklet Media Query
Media Query Bookmarklet ti mostra quali dimensioni ha il viewport corrente e quale media query è stata appena attivata per esso.
Il calcolatore reattivo
Il Calcolatrice reattivo è uno strumento online molto semplice che può aiutarti a convertire i pixel in percentuali durante la progettazione del tuo sito web reattivo.
La prossima settimana
Nella seconda settimana di questa serie, ti insegneremo i tutorial che ti porteranno davvero in Responsive Web Design (RWD).
Da non perdere.
