Realizzazione Siti Internet Mobile | Realizzazione Siti Web Dinamici | Programmatore PHP Freelance | Consulente Web Marketing | Sviluppo di CMS | Ottimizzazione SEO | Programmatore JQuery

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 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 risulterebbedecisamente 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:

@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Stile CSS per telefonini */
}

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:

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

captcha
Inserisci i caratteri che vedi nell'immagine

 


POTREBBE INTERESSARTI ANCHE:
Possibile bloccare la generazione dei transient wordpress per i feed? Poche righe di codice PHP possono evitare che il vostro database cresca troppo.
Creare un Sito Web è un attività che può riguardare diverse attività professionali combinate tra loro, in quest'articolo esamineremo tutte le fasi per Creare un Sito Web
Guida all'utilizzo delle Join INNER, CROSS e OUTER che permettono di incrociare i dati derivanti dal database per selezioni multiple da più tabelle, utilissime per le applicazioni dinamiche.
In questo semplice esempio, mostrerò i fondamenti del linguaggio AJAX utili a comprenderne i costrutti e ad avvicinarsi al suo utilizzo.
Vuoi redere il tuo sito ancora più Social e vuoi che sia presente su Facebook? Grazie alle Open Graph anche chi non è Programmatore PHP potrà integrare il proprio sito nel network Facebook


buzzoole code
Leggi altro:
Realizzare un Form con AJAX e PHP in maniera Semplice

In questo Breve, ma efficace esempio di Script AJAX vedremo come grazie ad AJAX e PHP un Programmatore PHP potrà...

Chiudi