Studio Manolibera | Milano design&development for print&digital

.

.

Responsive Web Design - testata desktop
Responsive Web Design - testata mobile

Responsive web design

Chiedici un preventivo!

Cos’è un sito responsive?

In poche parole, un sito web responsive è sviluppato applicando tecniche di progammazione (Responsive Web Design) che permettono all’interfaccia del sito (layout grafico, impaginazione, lettering, sistemi di navigazione, ecc.) di adattarsi automaticamente alle caratteristiche del dispositivo utilizzato dagli utenti che lo visitano, in funzione delle dimensioni dello schermo utilizzato e del tipo di interazione (mouse o touch) che utilizza.

Un sito responsive visualizzato su un pc desktop o notebook ha un layout grafico sostanzialmente diverso da quello stesso sito quando viene visualizato su un dispositivo mobile tablet o smartphone:

  • diversa impaginazione del layout grafico e dei contenuti;
  • diverso trattamento grafico del testo e delle immagini (dimensioni e rapporti spaziali);
  • diversi sistemi di navigazione in funzione dell’interazione prevista (mouse o touch).

Un’esempio? Questo sito! Prova a visualizzarlo su uno smartphone e su un desktop o portatile per vedere come il comportamento del layout si adatta automaticamente. Visualizza altri esempi nel nostro portfolio.

Nelle soluzioni più riuscite, un sito web responive, quando viene visualizzato su uno smartphone o un tablet si comporta come una App dedicata:

  • occupa interamente lo schermo del dispositivo;
  • ha sistemi di navigazione e ricerca facilmente facilmente utilizzabili con le dita;
  • presenta i contenuti (gli stessi del sito visualizzato su desktop e notebook) in un formato adatto alla visualizzazione su uno schermo di piccole o medie dimensioni

Perchè disporre di un sito responsive?

Il numero di ore navigate tramite dispositivi mobile (smartphone e tablet) è in forte e costante aumento e le previsioni dicono che non è lontano anche in Italia il momento in cui supereranno le ore navigate con dispositivi tradizionali (pc desktop e notebook).

 Responsive Design - Navigazione mobile

Chiunque abbia investito tempo e denaro per pubblicare un sito web sa che la visibilità e la permanenza degli utenti sono gli obiettivi più importanti ed allo stesso tempo i più difficili da raggiungere e mantenere.

Un sito ben ottimizzato lato SEO (Search Engine Optimization) può portare molti nuovi utenti sul sito, ma anche se i contenuti sono curati e aggiornati, difficilmente gli utenti spenderanno del tempo sul sito se, navigandolo da un dispositivo mobile dovessero continuamente armeggiare con zoom e trascinamenti per riusicre a leggere i testi, visualizzare le immagini, cliccare su microscopici link o addirittura non riuscire proprio a visualizzare il sito con un’impaginazione decente.

Certo una soluzione possibile è quella di intercettare il traffico proveninte da mobile e dirottarlo su un’apposita versione del sito. Il problema è che lo sviluppo di due o più versioni del sito, con relativi problemi di allinemento di funzioni e contenuti non è alla portata di tutti o semplicemente non è un investimento giustificato per gli obiettivi ed i risultati che un sito web aziendale o professionale può generare.

Responsive Design vs Non Responsive

La soluzione responsive, con un piccolo incremento di costo rispetto allo sviluppo di un sito web tradizionale consente di assecondare ed accogliere gli utenti che navigano con dispositivi mobile, massimizzando le possibilità di traffico e visualizzazione del sito.

Inoltre non va trascurato che la disponibilità di un sito mobile indubbiamente influenza la percezione della serietà e della professionalità dell’azienda o dell’istiutzione che lo pubblica.

Quanto costa fare un sito responsive?

Lo sviluppo di un sito responsive, nella maggior parte dei casi produce un incremento dei costi in quanto, a partire dalle fasi di analisi, passando per il design grafico e lo sviluppo esecutivo, molte attività possono richiedere il doppio del tempo rispetto allo sviluppo di un sito tradizionale destinato ad una sola tipologia di dispositivi.

Un esempio facilmente comprensibile è rappresentato dal design grafico dell’interfaccia. Normalmente, definito un progetto grafico generale in accordo al brand vengono progettati i wireframe (schemi strutturali) ed i layout grafici delle pagine tipo del sito (home page, pagine specifiche, pagina generica, ecc.). Nella progettazione di un sito responsive ognuno di questi aspetti deve essere declinato indue o più versioni. Detto in sintesi, il progetto grafico della home page, ad esempio, dovrà essere pensato e presentato al committente nella versione smartphone e desktop ed eventualmente anche nella versione tablet.

Anche lo sviluppo esecutivo, oltre al design, comporta un incremento di ore lavoro per programmare i comportamenti e le funzioni di interazione in modo che automaticamente si adattino alle caratteristiche mouse o touch rinted dei dispositivi.

La sfida che deve affrontare lo sviluppatore è complicata dalla continua evoluzione delle caratteristiche dei dispositivi mobile disponibili sul mercato, con enormi differenze in termini di prestazioni, standard tecnici e soprattutto  dimensioni dello schermo: un buon sito responsive deve prescindere da queste caratteristiche ed adattarsi perfettamente al dispositivo utilizzato.

Naturalmente è impossibile definire matematicamente l’incremento di costo richiesto per lo sviluppo di un sito web responsive rispetto al costo di sviluppo secondo la metodologia tradizionale, in quanto è necessario stimare con attenzione le specifiche, i requisiti, l’ampiezza e la complessità generale del sito da realizzare.

Per esperienza, possiamo prevedere che l’incremeto di costo per lo sviluppo di un sito responsive non è inferore al 25% e in alcuni casi può raggiungere il 50% del costo per sviluppare lo stesso sito senza caratteristiche responsive.

È possibile adattare un sito esistente?

Se il committente ha sostenuto un investimento sostanziale per il proprio sito tradizionale che graficamente e funzionalmente lo soddisfa, nella maggior parte dei casi è possibile sviluppare un restyling responsive a partire dal sito esistente, attraverso un processo che prevede di

  • analizzare la versione esistente del sito e recuperarne il più possibile (design, elementi grafici, eventualmente il codice sviluppato);
  • declinare il progetto grafico dell’interfaccia negli adattamenti tablet e smartphone;
  • modificare il codice esistente, se possibile, oppure riscriverlo per renderlo compatibile con l’adattamento responsive;
  • integrare le funzionalità responsive e pubblicare la versione rinnovata e resonsive del sito.

Hai un sito tradizionale e vorresti renderlo responsive?

Vorresti un sito efficace e perfettamente utilizzabile con uno smartphone?

Chiedici un preventivo o chiama 0236508061 per maggiori informazioni.

Compilando ed inviando questo modulo si accettano le condizioni sulla privacy (in conformità con l'art. 13 Legge 196/03 sulla privacy)