Design reattivo davvero semplice
Non è un segreto che molti credono che il web reattivo sia il futuro. La creazione di un sito reattivo significa che è in grado di adattarsi ai molti diversi browser e dimensioni disponibili. Se voglio assicurarmi che il mio sito web che ho creato sul mio desktop sia visibile su un tablet con minium scrolling e zoom, sarò interessato alla creazione di un sito responsive.
Uno dei motivi per cui i siti sensibili sono diventati popolari è perché ha senso. È più economico rispetto alla creazione di uno o più siti aggiuntivi per telefoni cellulari e tablet. Garantisce inoltre un'esperienza di visualizzazione coerente tra dispositivi e schermi desktop. Non è divertente dover aumentare le dimensioni della finestra o scorrere orizzontalmente per vedere un intero sito web.
Mentre la creazione di web design reattivi sta diventando più facile, ci sono alcuni modi per farlo andare ancora più velocemente. Grazie ad alcuni CSS e HTML, possiamo codificarlo direttamente nei nostri siti. Altri elementi richiedono un po 'più di lavoro. In ogni caso, abbiamo creato un elenco per aiutarti a mettere insieme il tuo sito reattivo con il minimo sforzo e i risultati massimi.
plugin jQuery
Isotopo
Isotope è un plugin jQuery che pretende di creare layout magici che non possono essere altrimenti creati da CSS e HTML. Ha la capacità di riorganizzare gli elementi all'interno di un contenitore in modo che si adattino al suo interno mentre si ridimensiona. Puoi anche usare Isotope per filtrare e ordinare gli oggetti per categorie e simili.
Breakpoints.js
Il punto di rottura è stato creato pensando a sviluppatori e progettisti. È un plug-in che ti consente di creare punti di interruzione per diverse dimensioni del browser. Quando il tuo browser viene ridimensionato a una di queste dimensioni, gli elementi sono in grado di adattarsi allo schermo.
FitText.js
Questo è uno dei miei plugin jQuery preferiti perché è per i caratteri. Troppo spesso nel responsive web design, le persone non prendono in considerazione il fatto che i titoli dovrebbero essere reattivi invece di essere schiacciati in un certo spazio. FitText ti consente di fare proprio questo, ma ricorda di usarlo solo per i titoli!
Response.js
Se ti piace l'idea di Breakpoint.js ma desideri più personalizzazione, Response.js è la risposta. È davvero fantastico per chi conosce meglio jQuery di CSS e HTML e ha bisogno di creare siti web reattivi. Utilizzi i tuoi punti di interruzione, ma c'è molta più personalizzazione, come dimensioni del dispositivo, razioni pixel e la possibilità di caricare fonti diverse per dimensioni diverse.
TinyNav.js
TinyNav è un leggero plug-in jQuery che consente di modificare qualsiasi voce di menu utilizzando gli elenchi per trasformarsi in menu a discesa quando il browser viene ridimensionato. È possibile specificare le dimensioni e i menu che cambiano. Non ha una funzione così ampia, ma è molto efficace per quello che fa.
Quadri e sistemi popolari
Sistema di rete reattivo
Questo sistema afferma di non essere un piano d'appoggio o una struttura, ma solo un sistema per rendere i vostri progetti reattivi. Sembra essere uno dei più flessibili in quanto non vi limita ad una certa dimensione o ad una certa gridsize. Usano diverse classi CSS che sono in grado di fluttuare e creare le proprie colonne.
Golden Grid System
Il GGS è anche un sistema e non un 'framework'. A loro piace riferirsi a se stessi come luogo di partenza o linea guida per coloro che sono disposti a utilizzare una certa quantità di griglie nel loro web design. Ti vengono date 18 colonne sullo schermo, ma 16 da utilizzare nel tuo progetto. Si creano le proprie larghezze e grondaie da utilizzare e in sostanza si passa da lì.
Sistema a griglia 1140
Per un certo periodo, molti progettisti hanno utilizzato progetti web larghi 960 px. Poi quello divenne piccolo e salirono. Ora molti progetti sono stati sviluppati utilizzando una larghezza di 1140 px. Questo sistema a griglia 1140 consente di creare 12 colonne da utilizzare in un design web di ampia larghezza.
Twitter Bootstrap
Bootstrap è uno dei framework più popolari disponibili. È un framework a 12 celle che si è reso utilizzabile per il cross-browser (incluso Internet Explorer 7) e può essere utilizzato in modo reattivo nei dispositivi palmari. Viene fornito con vari componenti per lo styling, tipografia e JavaScript da utilizzare e creare siti eleganti e intuitivi.
SimpleGrid
SimpleGrid prende l'idea delle griglie e la semplifica. Con la maggior parte dei sistemi di griglia e dei framework, hai queste classi sconosciute e le colonne sconosciute. La griglia semplice ha classi che specificano quali colonne sono prime, medie e ultime. Inoltre, puoi aggiungere diversi "slot" alle colonne per far sembrare che ci siano più colonne. È una struttura molto semplice e diretta.
Altri strumenti reattivi
Schede di disegno responsive Web Design
Proprio come qualsiasi progettista o sviluppatore, probabilmente disegni i tuoi progetti prima di realizzarli. Spero che tu lo faccia. Altrimenti, forse dovresti iniziare usando questi fogli di schizzo RWD. Vengono con le differenze di dimensioni del dispositivo e del desktop su di essi in modo da poter pianificare tutto fuori.
Sketchbook Responsive Design
Se ti piace l'idea di disegnare su carta, ma vuoi avere tutti i tuoi scarabocchi insieme, potresti prendere in considerazione l'idea di creare il quaderno reattivo. Viene fornito con 50 pagine, rilegato a spirale con varie dimensioni dello schermo su ogni pagina. Tutte le griglie e la matematica sono già state fatte per te, quindi questo è un ottimo strumento per principianti ed esperti in design reattivo.
Piastrelle di stile
Questa è una bella piccola risorsa per i web designer sia che stiano cercando qualcosa per il responsive design o meno. È un PSD che ti consente di ottenere l'essenza di un sito web aggiungendo titoli (tipografia), loghi, colori e altri elementi. Il motivo per cui questo funziona per il responsive web design è perché non implica alcuna dimensione, solo un'idea digitale senza restrizioni.
Responsive Calculator
C'è un sacco di matematica coinvolta nella creazione di design reattivi pixel perfetti. È necessario che anche la tua matematica sia corretta, perché avrai a che fare con percentuali, larghezze e dimensioni del browser diverse. Per dare una mano, ecco una calcolatrice che ti dà la matematica corretta e il CSS per andare avanti con esso.
Conclusione
È fondamentale che ci rendiamo conto di ciò che sta facendo il web reattivo. Molti clienti vorranno avere i loro siti disponibili per una varietà di dispositivi, ed è solo più conveniente creare siti reattivi. Inoltre, la maggior parte dei tuoi framework e altre risorse per la progettazione reattiva aiutano a coltivare siti Web standard e di alta qualità organizzati.
Quali sono i tuoi modi preferiti per iniziare progetti reattivi? Abbiamo perso una risorsa su cui ti basi? Fateci sapere nei commenti.