Home » Web Development » Responsive Design » Cosa è il Responsive Design

Cosa è il Responsive Design

responsive design

Introduzione al Responsive Design

Come vi sarete accorti, è un sito responsivo. Questo significa che utilizza delle pratiche e delle tecnologie che sono conosciute come Responsive Deisgn. Ho quindi deciso di scrivere una serie di tutorial che tratteranno le pratiche e la filosofia del Responsive Design, dalle basi fino alle tecniche più avanzante, i trick, gli strumenti più utili e i plugin più interessanti.

Cosa significa Responsive Design?

Negli ultimi tempi, nel mondo del Web Design, si sente continuamente parlare delle tecniche e delle pratiche per la costruzione di pagine HTML responsive. Una pagina responsiva è una pagina con un layout che si adatta automaticamente alla risoluzione e alle dimensioni del device con cui la stiamo visualizzando. La prova immediata per vedere se il sito che stiamo visualizzando è responsivo, consiste nel ridimensionare la finestra del nostro browser per vedere come il sito si adatta.

Quindi, con un sito che utilizza un layout che rispetta i canoni del Responsive Design possiamo dire di avere, inclusa automaticamente nel nostro layout, anche una versione mobile del sito e anche una versione ad hoc per i tablet. Questo, comportà quindi un grande risparmio, sia economico che di tempo, infatti non dovremo più acquistare domini di terzo livello per hostare una versione mobile del nostro sito e soprattutto non dovremo più preoccuparci di sviluppare e mantenere un sito mobile parallelo a quello principale.

Perchè affidarsi al Responsive Design

Come potete facilmente immaginare nel mondo esistono centinaia di device diversi schermi e risoluzioni diverse, è quindi impensabile andare a gestire singolarmente ogni elemento delle nostre pagine. Utilizzando le pratiche dette di Responsive Design potremmo però creare dei layout dinamici che si adattano e si trasformano. Ma soprattutto, nella maggior parte dei casi, per ottenere ottimi risultati, basterà affidarsi al solo CSS.

Se volessimo banalmente semplificare il Responsive Design potremmo dire che basta non dare alcuna larghezza fissa ai diversi elementi delle nostre pagine utilizzando sempre misure percentuali, evitare il più possibile i float, e qualche altra piccola accortezza, ma non è così. Grazie al Responsive Design potremo e dovremo:

  • Adattare i nostri layout alla maggiore parte delle risoluzioni di schermo esistenti dai dispositivi mobile ai desktop;
  • Semplificare il layout delle nostre pagine per renderle facilmente consultabili dai dispositivi mobili con schermi piccoli e quindi anche fornire un’interfaccia adatta ai dispositivi touchscreen, nascondendo gli elementi non essenziali su questi dispositivi;
  • adattare le dimensioni delle immagini e di tutti i contenuti alla risoluzione e alle dimensioni dello schermo così da non dover costringere l’utente mobile a zoomare continuamente;
  • Servire immagini meno pesanti ai dispositivi che non possono sempre sfruttare una connessione a banda larga come i moderni smartphone;
  • Sfruttare, funzionalità adatte al mobile che sono sempre più di comune utilizzo tra gli utenti (come ad esempio la geolocalizzazione).

Qualche esempio di Responsive Design

Nel web, già da qualche tempo, spopolano i siti che si affidano a queste pratiche ed è sempre una ottima idea andare a sbirciare i lavori altrui per trovare ispirazione e capire qualche piccolo trucchetto.
Qui di seguito potete trovare una breve lista di siti che ho trovato molto interessanti sull’argomento:

Infine una guida base da cui ho preso spunto agli inizi della mia esperienza con il Responsive Design: Guida introduttiva al Responsive Design

Nei prossimi articoli entreremo nel dettaglio e cominceremo finalmente a muovere i primi passi con il Responsive Design

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...