Daniele Tabacco

Negli ultimi mesi è cresciuto tra i Programmatori, i Designer e gli addetti ai Lavori l'utilizzo della parola "Responsive Web Design", frase per lo più riferita alla Realizzazione di Siti Web Mobile-Friendly.

Se non avete ancora sentito questo termine, o se semplicemente non vi è chiaro a cosa si riferisce, non vi resta che leggere questo articolo, perchè sarete probabilmente destinati a sentirne parlare di Responsive Design ancora per molto.

Il Reponsive Design è una tecnica di Realizzazione di Siti Web e Progetti Web Mobile o comunque capaci di adattarsi alle diverse risoluzioni come ad esempio quelle di Smartphone o Tablet.

Il Responsive Design si contrappone alla tecnica con il quale spesso si lavora per esigenze di tipo Mobile, cioè la realizzazione di due distinti siti (uno mobile e l'altro desktop) visibili alternativamente se si interroga il dominio da uno o dall'altro dispositivo, ma che possono comunque condividere un Database di Informazioni Comune.

Con il Respondive Design non si interrogano due distinte versioni del sito, ma si lavora con le caratteristiche CSS per soddisfare le diverse dimensioni dello schermo, realizzando un sito web che si adatta o "risponde" riformattando i contenuti per creare un'esperienza di visualizzazione ottimale per il dispositivo utilizzato.

Come Funziona?

Come dicevamo la praticità del Design Responsive è che si tratta di una che si basa su una caratteristica di CSS chiamata MEDIA QUERY che permette di chiamare gli attributi e stile differenti a seconda screen-size (dimensione) e l'orientamento del dispositivo rilevato.

Per esempio, potreste voler Realizzare un Sito Web con tre colonne di contenuti per la visualizzazione desktop, risultando poco leggibile su iPhone, grazie alle Media Query invece, potremmo Caratteristiche CSS diverse con un Layout a singola colonna che risulterebbe decisamente più leggibile.

La sintassi nel foglio di stile appare molto semplice, supponiamo di voler creare delle regole che valgano solo per gli Smartphone, in questo caso utilizzeremo una sintassi simile:

Per Maggiori dettagli facciamo sempre riferimento al W3C (http://www.w3.org/TR/css3-mediaqueries/) in cui sono presenti le specifiche di diverse risoluzioni e tipologie di orientamento.

Progettare un Sito in logica Responsive dunque significa pensare in maniera multipla il nostro sito web, che si adatterà al modo in cui l'utente desidera consultarne il contenuto.

Conviene Utilizzare il Responsive Design?

Ogni Sito dovrebbe avere una Strategia per la Realizzazione del proprio sito Mobile perchè sempre più persone accedono al Web tramite un telefono o un dispositivo tablet. La tecnica del Responsive Design è una soluzione che riesce a coprire molteplici esigenze di visualizzazione, per cui sicuramente attualmente è la miglior tecnica di Sviluppo di un Sito Web.

Ma ovviamente come esistono anche delle piccole considerazioni che vanno fatte prima di pensare alla progettazione di un sito con questa tecnica:

Tempo e Budget:

La produzione del Layout del vostro Sito con questa tecnica sarà ovviamente più lunga, il Design va pensato in maniera molteplice e per le diverse visualizzazione. Questo rende molto più complesso e molto più studio, quindi di conseguenza il budget di produzione potrebbe risentirne,  e anche se a mio avviso la spesa vale l'impresa, dobbiamo comunque considerare che non tutti i budget possono essere sufficienti.

Tipo di Contenuto ed esigenze degli utenti: 

Non sempre è possibile o utile replicare tutti i contenuti della versione desktop nella versione Mobile, anzi in alcuni casi questo potrebbe rappresentare un ostacolo, per questo o per casi particolari opterei per lo Sviluppo di un Sito Web Mobile separata o ad una WebApps che potrebbe riscontrare maggiore successo.

Spero di avervi dato una panoramica completa su un ulteriore tecnica di Sviluppo di un Sito Web Mobile e sulla tecnica del Responsive Design. Se vi occorre una Consulenza o se dovete Sviluppare o Pianificare la vostra Strategia Mobile potete contattarmi di seguito:

Inserisci il tuo commento:
Nome & Cognome:

Email: (non visibile)

URL:

Titolo:

Messaggio:

Copia i caratteri che vedi sopra:

Realizzazione Siti Internet Mobile: Ecco qualche consiglio!
Non c'è modo di tornare indietro, il Web è il futuro del Web sempre più Mobile, sempre più utenti accedono al web con dispositivi di ogni tipo, da ogni luogo e hanno bisogno della migliore esperienza di navigazione possibile. Ecco perchè in questo articolo metterò a disposizione la mia esperienza di Programmatore PHP e Sviluppatore di Siti Internet Mobile, per fissare alcuni punti cardine nella pianificazione di una Strategia di Realizzazione Siti Internet Mobile. Perchè un ...Leggi Tutto

Realizzazione Siti Internet Mobile, Siti Internet per iPhone e Android
E' Possibile che ci siano ancora persone che parlano di Mobile come FUTURO, senza rendersi conto che il Mobile è senza dubbio già PRESENTE? Con l'esperienza di Programmatore per il Mobile posso dire che nonostante la realtà italiana sia tutt'altro che confortante, la strada che porta alla necessità di Realizzazione di Siti Internet Mobile è già tracciata. (Leggi Anche Realizzazione Siti Internet Mobile: Ecco qualche consiglio!) Il Mobile è un nuovo mercato, comincia a rappr...Leggi Tutto

Sviluppo di Applicazioni iPhone vs Webapps
Da tempo pensavo di scrivere quest'articolo in merito allo Sviluppo di Applicazioni iPhone, poichè in questi ultimi anni ho avuto modo di avvicinarmi alla tecnologia iPhone ed Apple e ho potuto verificare sul campo quanto Per un Azienda sia Possibile e in alcuni casi Vantaggioso e Necessario lo Sviluppo di Applicazioni iPhone. Lo Sviluppo di Applicazioni può passare in due differenti stili di Programmazione, quello di Applicazioni Native iPhone o di WebApps (utili anche per Android) cioè di Siti In...Leggi Tutto

Sviluppo Mobile: Cos'è il Responsive Web Design?
Negli ultimi mesi è cresciuto tra i Programmatori, i Designer e gli addetti ai Lavori l'utilizzo della parola "Responsive Web Design", frase per lo più riferita alla Realizzazione di Siti Web Mobile-Friendly. Se non avete ancora sentito questo termine, o se semplicemente non vi è chiaro a cosa si riferisce, non vi resta che leggere questo articolo, perchè sarete probabilmente destinati a sentirne parlare di Responsive Design ancora per molto. Il Reponsive Design è una ...Leggi Tutto

Realizzare Siti Mobile con HTML5: Una Strategia Vincente
Non credo di essere tanto originale se affermo che gli Utilizzatori e i Potenziali Consumatori del Web utilizzando sempre più spesso il Mobile, per fare acquisti, ricerche, pianificare viaggi, e altro ancora.   Uno Sviluppatore e un Azienda devono dunque porsi il problema di una giusta strategia per Realizzare Siti Mobile di Successo, e per orientarsi nella Jungla di dispositivi Mobile e di Framework Mobile, per selezionare tecnologia adeguata per il proprio Progetto Mobile.   Il mio consiglio per Realiz...Leggi Tutto

Sviluppo Mobile: Google Analytics su iPhone con AnalyticsGo
Da Moltissimo Tempo avevo pensato a Realizzare uno strumento che fosse nello stesso tempo utile e magari da esempio per le Potenzialità dello Sviluppo Web (HTML, JQuery, PHP) combinato a quello Mobile. Così invece di cimentarmi nel Realizzare un Sito Mobile Demo, ho pensato di realizzare una semplice WebApps per iPhone che mi permettesse di visualizzare le statistiche Google (Utilizzando le Api di Google) ovunque mi trovi in maniera semplice e gratuita e gli ho dato il nome di AnalyticsGo. Partiamo ...Leggi Tutto