Mercoledì, 21 Novembre 2018 10:27

Scopri la differenza tra un sito standard e un sito web responsive?

Scritto da Guido Montoleone

Un tuo amico ti ha detto che si sta facendo aggiornare il suo sito web per renderlo responsive ma non hai capito cosa volesse dire? Hai visto una pubblicità che ti diceva “aggiorna il tuo vecchio sito, fallo diventare responsive” e ti stai chiedendo cosa cambia? Bene sei nell'articolo giusto!

Prima di tutto vediamo come sono composti i siti web e cosa significa renderlo responsive. Niente paura, facciamo solo un pò di chiarezza senza entrare troppo in tecnicismi che ti potrebbero confondere ancor più le idee.

Iniziamo subito! Semplificando il più possibile, e tralasciando qualsiasi altra forma di codice (php, javascript ecc.), devi sapere che un tipico sito web è composto da pagine e che queste pagine sono costituite da un insieme di file. Ogni file contiene del codice HTML (Hyper Text Markup), utilizzato per creare la struttura della pagina (per intenderci la struttura dove poter inserire testi, immagini, link etc.). Oltre all’aspetto puramente strutturale c’è anche quello grafico, questo viene gestito invece da un altro tipo di codice chiamato Cascading Style Sheets (CSS) che consente di personalizzare lo stile grafico di un sito web. Per semplicità e per renderti il concetto molto più semplice, diciamo che un sito web standard (non responsive) possiede solo un tipo di file CSS e che questo non si differenzia in base al tipo di dispositivo utilizzato (esempio smartphone, tablet, laptop e via dicendo) per visitare le pagine del sito web.

I siti web responsive, viceversa, applicano un insieme di codici CSS differenti (media query) che consentono di far adattare la grafica delle pagine web ad ogni differente tipologia di dispositivo utilizzato. In pratica, il sito web responsive "risponde" in modo differente se un utente utilizza uno smartphone piuttosto che un laptop. Quindi, la grafica è in grado di adattarsi al dispositivo utilizzato. I siti web responsive infatti molto più facili da navigare rispetto a quelli standard.

Per chiarirti ulteriormente le idee, ti faccio un esempio pratico: mentre un utente che  effettua l’accesso su un sito web tramite un computer desktop vede un menu di navigazione disposto orizzontalmente, un altro visitatore, che visita sempre lo stesso sito web, ma che vi accede tramite uno smartphone visualizzerà il menu di navigazione a tendina e che si espanderà verticalmente, rendendo più semplice la navigazione e la visualizzazione dei contenuti su uno schermo più piccolo. Semplice no?

Ma perché il design responsive è divenuto così importante?

Eh sì, sembrerà strano ai giovanissimi ma c'è stato un tempo in cui le persone accedevano ai siti web solo da un computer desktop. La stragrande maggioranza possedeva la stessa dimensione di monitor (17/19 pollici) e i dispositivi mobili non consentivano l’accesso ad internet. I siti web venivano quindi progettati per rispondere alle esigenze di questo tipo di utente. L’aspetto grafico non era nemmeno tanto curato poiché ci si basava quasi esclusivamente sui contenuti da inserire.

Oggi tutti noi visitiamo i siti web da una varietà di dispositivi differentii, con schermi che vanno da pochi pollici (5 pollici per gli smartphone più piccoli) fino a 27 "o più (con le smart tv anche oltre i 60 pollici), e ci aspettiamo che la grafica sia abbastanza curata. Sono cambiate quindi le necessità di visualizzazione e di navigazione. I consumatori si aspettano quindi che il sito web sia facile da usare e che si adatti a loro dispositivo e non viceversa.

Grazie alla Apple che ha ideato l’iPhone oggi le persone si aspettano di poter scorrere verso sinistra/destra o su/giù e di fare clic su qualsiasi contenuto visualizzato sullo schermo di uno smartphone. Quindi, se si sta visitando un sito web in cui è presente un numero di telefono ci aspettiamo di poter fare clic in modo da sfruttare la composizione automatica del numero. Allo stesso modo, ci aspettiano che un indirizzo abbia l’opzione "clic for directions" che utilizza il GPS del proprio telefono o che un indirizzo e-mail venga aperto automaticamente nel client di posta elettronica predefinito.
Un sito web responsive tiene conto di tutto ciò e si adatta automaticamente per offrire ai visitatori la migliore esperienza utente possibile, indipendentemente dal dispositivo utilizzato.

Alternative ai design responsive?

Purtroppo sono pochissime le alternative ai siti web responsive, considerato anche i bassi costi con cui se ne può realizzare uno base.

L’unica alternativa è quella di sviluppare un applicazione mobile (le così dette APP). In pratica, anche questa soluzione è poco percorribile se si desidera mantenere sotto controllo l’aspetto economico. Infatti anche le APP tengono conto e vengono differenziati in base al dispositivo utilizzato (ad esempio Android o Apple, senza contare gli altri sistemi operativi) e quindi ci ritroveremmo nuovamente punto e accapo.

Desideri sviluppare un sito web  responsive e vuoi alcuni chiarimenti? Contattami tramite il form per un consulto gratuito!