Responsive design. Consigli utili, plugin e tutorial.

Da quando iniziai ad occuparmi di web design capitava di scontrarmi con problematiche di tutti i tipi, spesso complesse e di difficile risoluzione. Tra queste una è divenne ben presto un vero e proprio incubo: l’ottimizzazione dei siti per le differenti risoluzioni dei monitor. Un problema correlato all’incompatibilità tra i browser, allora apparentemente di difficile risoluzione visto che in quegli anni c’era Internet Explorer da una parte e poca concorrenza dall’altra. Una situazione evolutasi con il passare degli anni, ma mai completamente risolta.

Quando iniziò la diffusione dei dispositivi di telefonia mobile in grado di connettersi ad internet, gli sviluppatori si orientarono sulla realizzazione di due versioni dello stesso sito, da usare per la visualizzazione sui computer desktop e sui cellulari. Un escamotage che consentiva di raggiungere lo scopo, pur presentando degli evidenti limiti.

Non solo per il dover fare un doppio lavoro, con conseguente aumento dei costi di produzione e di gestione, ma anche per la necessità di avere due differenti indirizzi url a cui connettersi, uno per ogni versione.

Responsive Design Devices Icon

Source:Cssauthor

Responsive Design

Internet e la tecnologia sono però in continua evoluzione e l’aumento costante di nuovi dispositivi mobili, usati per la navigazione su internet, ha nuovamente posto all’attenzione degli addetti ai lavori il problema della compatibilità. La soluzione adottata, diventata un vero e proprio standard, si chiama Responsive Design.

Con Responsive Design indichiamo quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.

Kayla Knight per Smashing Magazine

In questo caso si realizza una sola versione del sito web, perché tutte le informazioni che ci interessano sono contenute all’interno dei fogli di stile (CSS). A seconda del tipo di risoluzione in uso sul nostro dispositivo, il layout si adatterà alla larghezza dello schermo, gli elementi verranno riposizionati in base alla necessità ed i contenuti formattati per fornire una visualizzazione ottimale.

Responsive design per i tabletI vantaggi che è possibile ottenere con il Responsive Design sono numerosi:

  • il progetto da mettere online sarà uno soltanto,
  • la navigazione sarà corretta per desktop, tablet, smartphone, iPad, Iphone,
  • una migliore e più veloce navigazione delle pagine web,
  • i siti avranno un indubbio aumento dei visitatori,
  • la fruizione delle informazioni sarà sempre disponibile, in qualsiasi momento e in qualsiasi posto.

Ecco spiegati, in breve, i motivi che hanno contribuito alla diffusione del tecniche responsive, sempre più diffuse tra i professionisti del settore.

Con questa breve introduzione tengo a battesimo una nuova sezione del blog che si occuperà di plugin e tutorial sul responsive design. Per cominciare vi suggerisco la lettura di tre articoli scritti per Italian Web Design.

Slider responsive tridimensionale con Slicebox

Viewport Resize, tool per testare il responsive design

10 migliori plugin per slideshow responsive gratuite con jQuery

Se ti è piaciuto questo articolo, iscriviti GRATUITAMENTE agli aggiornamenti via email