Tecniche per il Responsive Web Design

Negli ultimi dieci anni abbiamo visto il web trasformarsi in qualcosa di estremamente diffuso e accessibile, questo è stato raggiunto anche sviluppando siti web con il Responsive Design. In questa prima lezione verrai introdotto ai concetti principali che ti permetteranno di muoverti più facilmente nel corso.

Ovunque si vada, troviamo pixel! Questi definiscono la risoluzione del nostro monitor, quella di un font e anche del film che hai scaricato ieri sera; ma nella progettazione di un sito responsive, queste misure sono inutili! Ecco perché con questa ti spiego quali siano le misure più adatte da usare in questo contesto.

Creare una navigazione responsive permette di utilizzare molte tecniche CSS interessanti e soprattutto ci fa rispolverare un po’ di JavaScript. In questa lezione vedrai proprio come sia possibile applicare i singoli passaggi e modificarli per le tue necessità.

Un layout non è responsive se non è in grado di ottimizzare la posizione del suo contenuto. Esistono molti modi per gestire una pagina che si adatta alla risoluzione, ma l’approccio più veloce e comune per farlo è attraverso la creazione di una griglia.

Non pensare che uscirai da questa lezione con una semplice infarinatura su come ridimensionare le immagini con un max-width 100%. Andremo nel vivo di nuove tecniche come l’attributo srcset e il nuovo elemento picture.

Tutte le tecniche precedenti diventano incredibilmente più semplici se ci mettiamo a lavorare con Sass. In questa lezione scoprirai come impostare un ambiente di sviluppo con Gulp e le librerie più interessanti che ti potranno aiutare nel tuo lavoro.

Flexbox è sicuramente interessante, grazie a questo nuovo modulo CSS sarai in grado di creare dei layout flessibili e con il responsive design questo è incredibilmente interessante. In questa lezione ti mostrerò come sia possibile creare una griglia flexbox e faremo alcune considerazioni su come integrare le due tecniche.