I migliori compagni di viaggio nella tua avventura sul Web

Responsive web design: come costruire un sito ottimizzato per i vari dispositivi

connection ?omputer telephone tablet black

Il web negli ultimi anni ha mosso passi da gigante; con l’uso crescente di smartphone e tablet, nuovi scenari operativi si sono fatti spazio nello sviluppo di tecnologie per usufruire delle risorse online in modo rapido e facilmente accessibile. Tra le tecnologie maggiormente apprezzate e utilizzate, il “responsive web design” è stato quello che più di tutti ha rivoluzionato lo studio e lo sviluppo dei template; con le soluzioni responsive si disegna una pagina o un sito web in grado di essere fruito da qualsiasi dispositivo.

Responsive design: cos’è?

Alla base del disegno responsivo (così come chiamato in lingua italiana) c’è stata l’esigenza di sviluppare siti web facilmente accessibili da mobile evitando di riprogettare le pagine, in modo tale che una volta realizzato, il sito si adatta armonicamente al dispositivo utilizzato per la navigazione. Con l’uso del responsive, quindi, non si naviga su diverse versioni grafiche del sito, ma sulla stessa versione grafica con opportune indicazioni fornite direttamente sui file CSS (Cascading Style Sheets, ossia fogli di stile, i file utilizzati per impostare lo stile di visualizzazione delle pagine Web). La caratteristica dei siti responsive è di adattarsi alla larghezza della finestra e possono, quindi, adattarsi a qualsiasi dispositivo indipendentemente dalla risoluzione dello schermo:tablet, smartphone, web-tv e ogni tipo di computer.
Con le possibilità offerte dal responsive, l’utente vede potenziata la propria user-experience : non ha più bisogno d’interagire con le dimensioni dei caratteri, né di adattare il sito al dispositivo utilizzato con estreme azioni di ridimensionamento o ingrandimento.

Il concetto di risoluzione nella tecnologia responsive

In sostanza le attuali tecnologie distinguono la risoluzione in 4 grandi famiglie:
- Normale, lo standard dei computer fissi o portatili;
- Mobile, per i telefonini cellulari o i più moderni smartphone;
- Narrow, tipico dei tablet di qualunque risoluzione;
- Wide, principalmente per le TV e gli schermi a grande risoluzione;

Il web designer che progetta  il sito tiene conto del “concetto risoluzione” e sviluppa un sito web che attraverso delle direttive chiamate “Media Query” (introdotte dal moderno standard CSS che permette di invocare determinati attributi in base alla risoluzione dello schermo permettendo di personalizzare il sito elle varie dimensioni del display) si adatti perfettamente al dispositivo utilizzato per navigare le pagine. Partendo da questa condizione si comprende facilmente che la tecnologia responsive è puramente grafica e non interferisce in alcun modo con la “logica” e con il codice di programmazione server-side. Negli ultimi due anni il Framework Bootstrap ha raggiunto una popolarità rilevante, al punto di essere tra i più utilizzati nella progettazione di soluzioni responsive. Il citato framework fornisce una griglia di base basata su 12 colonne su cui il web designer o il front end developer strutturano il sito. Non è un caso se tanti tra i siti più famosi lo adottano come base strutturale; tuttavia non si può avere la pretesa che un sito responsive renda in maniera perfetta su browser o dispositivi di vecchia generazione, ormai obsoleti e poco funzionali.

Tempi di sviluppo e costi del responsive

Dal punto di vista di budget e di tempi di sviluppo per un sito web non responsive è richiesto un maggior impegno di risorse. I tempi di sviluppo più lunghi sono necessari a verificare ed eventualmente correggere la resa grafica dell’applicazione web sui diversi dispositivi o sulle funzionalità dei browser con lo scopo di raggiungere l’obiettivo finale della corretta presentazione dei contenuti in maniera quanto più fruibile indipendentemente dal dispositivo utilizzato dal visitatore; un’agevolazione, rispetto ai tempi, può essere fornita appunto dall’ utilizzo di strumenti per il design di un sito, come Twitter Bootstrap che permette  di risparmiare tempo nella progettazione di un layout responsive. La versione responsive  del sito resta dunque la soluzione  più economica, quantomeno  in termini di manutenzione, rispetto alla scelta di creare una seconda versione mobile dello stesso sito. In tal caso, infatti, il layout non sarebbe unico ma duplicato (uno per la versione desktop e uno per la versione mobile).

Perché scegliere il responsive design?

Creare un sito web responsive potenzialmente offre accesso a un pubblico più vasto, assicura la portabilità ovunque, soprattutto al mobile, che rappresenta il principale canale di navigazione: la mobile audience, infatti, è costituita da circa 17,5 milioni di persone in un giorno di cui oltre il 63% accede tramite smartphone e tablet; risulta indispensabile, dunque, fornire all’utente gli strumenti necessari per una gradevole e comoda esperienza d’uso: si stima, infatti, che circa il 60% degli utenti che atterra su un sito non ottimizzato lo abbandona entro pochi secondi. Infine un sito responsive garantisce un miglior approccio con le funzionalità dei moderni motori di ricerca ai fini dell’indicizzazione e della navigazione. Proprio in questo senso è da interpretare la relativamente recente mossa di Google che ha premiato nel posizionamento i siti mobile, almeno per quanto riguarda le ricerche effettuate appunto da smartphone e tablet, così che per un visitatore che effettua una ricerca dal suo smartphone, tra due siti – a parità di contenuti e fattori di posizionamento – risulti favorito quello con una migliore user experience da mobile. Puoi verificare in autonomia se il tuo sito è mobile-friendly direttamente al link ufficiale di Google

Se il tuo sito non risulta ottimizzato non rischiare di non espandere il tuo business: contattaci  per valutare insieme la soluzione migliore per la tua azienda e per ricevere gratuitamente un preventivo per rendere il tuo sito ottimale e più performante