Contenuto
- 01. Come iniziare a pensare in modo reattivo
- 02. 9 suggerimenti tipografici reattivi
- 03. Le regole della tipografia web reattiva
- 04. Progetta un sito reattivo con dimensionamento basato su em
- 05. Guide prioritarie: un'alternativa al contenuto prima dei wireframe
- 06. La guida per professionisti al responsive web design
- 07. Come progettare forme reattive e indipendenti dai dispositivi
- 08. Crea un layout reattivo con CSS Grid
- 09. La guida del web designer a Flexbox
- 10. Riferimento a Codrops Flexbox
- 11. Stack: Flexbox per Sketch
- 12. Un corso accelerato in tecnica RWD
- 13. Crea layout flessibili con Susy e Breakpoint
- 14. Come creare guide reattive in Adobe XD
- 15. CSS presso BBC Sport
- 16. Piè di pagina appiccicoso, cinque modi
- 17. Adattarsi agli input
- 18. Le nostre migliori pratiche stanno uccidendo le prestazioni del Web mobile
- 19. Come creare app Web reattive con query contenitore
Il responsive web design non è più un optional; i siti devono semplicemente essere reattivi in questi giorni. Per fortuna RWD è più facile che mai da implementare in quanto ci sono tanti ottimi strumenti per aiutarti a creare e testare i tuoi progetti e assicurarti di creare la migliore esperienza utente.
Ecco la nostra carrellata di alcune delle migliori risorse che ti guideranno a far funzionare bene i tuoi siti web e ad avere un bell'aspetto su qualsiasi dispositivo. Vuoi altre risorse utili? Le nostre guide al miglior costruttore di siti web e servizi di hosting web sono qui per aiutarti. E se sei preoccupato di archiviare i file in modo sicuro, hai bisogno di queste brillanti opzioni di archiviazione cloud.
01. Come iniziare a pensare in modo reattivo
In questo post su FreeCodeCamp, Kevin Powell sottolinea il punto importante che il responsive web design non è più una tendenza; è il modo in cui ci si aspetta che i siti vengano costruiti, e questo significa pensare in modo reattivo sin dall'inizio. Qui dimostra come entrare nello stato d'animo reattivo, mentre costruisce un sito Web di 3 pagine completamente reattivo.
02. 9 suggerimenti tipografici reattivi
Il responsive web design, abbastanza naturalmente, ha bisogno di una tipografia reattiva per accompagnarlo. Ma cosa significa, e come lo implementate? Abbiamo chiesto a sette importanti web designer di fornirci suggerimenti sulla creazione di testo elegante e leggibile in ogni viewport.
03. Le regole della tipografia web reattiva
La tipografia web reattiva è dura: è necessario disporre sia di capacità di progettazione che di know-how tecnico. Ma per quanto complicato possa essere, sbagliare non è un'opzione, perché la tipografia è la pietra angolare del web design. Segui questi principi di progettazione e soluzioni pratiche per farlo bene.
04. Progetta un sito reattivo con dimensionamento basato su em
Utilizzando le unità em per il dimensionamento dei caratteri, è possibile progettare componenti sulla pagina che rispondono automaticamente se la dimensione del carattere cambia. Quindi, con un trucco intelligente per una dimensione del carattere reattiva, puoi produrre un'intera pagina che si regola dinamicamente in base alla larghezza del viewport del browser. Segui questo tutorial per imparare a sfruttare il comportamento "relativo" degli em per creare progetti scalabili e reattivi.
05. Guide prioritarie: un'alternativa al contenuto prima dei wireframe
I wireframe possono essere lo strumento più utilizzato per la progettazione di siti Web, app e altre interfacce digitali, ma non sono privi di inconvenienti, in particolare quando si tratta di responsive design. Qui Heleen van Nues e Lennart Overkamp presentano la loro alternativa preferita ai wireframe: guide prioritarie, che contengono contenuti ed elementi per uno schermo mobile, ordinate per gerarchia dall'alto verso il basso e senza specifiche di layout.
06. La guida per professionisti al responsive web design
Scritta da Justin Avery, curatore della newsletter Responsive Design Weekly, questa guida tratta da net magazine porta i professionisti del web attraverso le basi fino alle più avanzate tecniche di responsive web design.
07. Come progettare forme reattive e indipendenti dai dispositivi
I moduli sono uno degli elementi più importanti nella progettazione di un prodotto digitale e, indipendentemente dal fatto che tu abbia bisogno di un flusso di registrazione o di uno stepper multivista, devi progettarlo in modo che funzioni efficacemente sui dispositivi mobili così come sul desktop. Ecco come farlo, completo di suggerimenti utili su come utilizzare Flexbox.
08. Crea un layout reattivo con CSS Grid
CSS Grid Layout sta crescendo nel supporto del browser ogni giorno e, sebbene non sia un sostituto per Flexbox o anche per i float, se utilizzato in combinazione con essi è un ottimo modo per creare layout reattivi nuovi ed entusiasmanti. Segui questa guida passo passo per creare un sito di portfolio reattivo utilizzando Grid.
09. La guida del web designer a Flexbox
Hai già iniziato a utilizzare Flexbox? In questo tutorial Wes Bos fornisce una guida completa ai concetti fondamentali che ti daranno una solida comprensione di tutto ciò di cui hai bisogno per fare i conti con questo potente strumento.
10. Riferimento a Codrops Flexbox
Questa guida completa a Flexbox è stata scritta da Sara Soueidan, un'autrice rinomata per la sua capacità di spiegare i concetti in un modo facile da seguire senza lesinare sui dettagli. La guida di Codrops viene aggiornata regolarmente, quindi è un'ottima risorsa a cui tornare quando ne hai bisogno.
11. Stack: Flexbox per Sketch
Gli stack, parte del plug-in Auto Layout, forniscono un modo per utilizzare la tecnologia Flexbox all'interno di Sketch, senza utilizzare CSS. Questo articolo spiega come utilizzare questa potente tecnica per un facile responsive design.
12. Un corso accelerato in tecnica RWD
Scrivendo sul blog Treehouse, Jerry Cao ha condensato molte informazioni utili in un articolo relativamente breve e leggibile.
13. Crea layout flessibili con Susy e Breakpoint
Se non vuoi usare un framework per costruire il tuo sito reattivo, queste estensioni Sass sono una bella alternativa, ognuna con i propri punti di forza. Si prenderanno cura della matematica reattiva per te in modo che tu possa concentrarti sul design.
14. Come creare guide reattive in Adobe XD
Se desideri provare Adobe Experience Design (XD), ecco un buon tutorial per iniziare. Include un video dimostrativo che ti guida attraverso ogni clic del processo.
15. CSS presso BBC Sport
Questo non è un tutorial di per sé, ma c'è molto da imparare qui. In questo post, il primo di una serie in due parti, lo sviluppatore del frontend Shaun Bent ci accompagna in un tour dettagliato di come vengono realizzati i CSS alla BBC Sport. Sono riusciti a mantenere le basi CSS di questo enorme sito sotto i 9 kb ed è affascinante vedere come è stato fatto.
16. Piè di pagina appiccicoso, cinque modi
Piè di pagina appiccicoso ... dovrebbe essere abbastanza semplice, giusto? Sfortunatamente no. Può essere più complicato di quanto ci si potrebbe aspettare ottenere quel piè di pagina nel posto giusto su ogni dispositivo. Fortunatamente Chris Coyier ha messo insieme cinque trucchi che ti aiuteranno a realizzarlo usando calc (), Flexbox, margini negativi e Grid.
17. Adattarsi agli input
Il responsive design non si limita a far visualizzare correttamente la tua pagina su qualsiasi dispositivo, devi anche farlo funzionare bene, e questo significa che deve essere bravo ad accettare input in un mondo in cui i desktop hanno touchscreen e i telefoni hanno la tastiera. Questo articolo di Jason Grigsby di Cloud Four contiene alcuni buoni consigli.
18. Le nostre migliori pratiche stanno uccidendo le prestazioni del Web mobile
Applicate senza considerazione, alcune best practice concepite durante l'era desktop potrebbero avere un effetto negativo sulle prestazioni del Web mobile. Questo articolo ti farà riflettere più a fondo su come far funzionare bene il tuo sito sui dispositivi mobili.
19. Come creare app Web reattive con query contenitore
Scopri come trasformare un'app Web bella e complessa, con componenti, stati e interazioni, in diverse dimensioni e risoluzioni, utilizzando le query sui contenitori.
