Sito web responsive: come crearlo da zero o renderlo navigabile da mobile

Al giorno d’oggi qualsiasi azienda o associazione che voglia sfruttare internet per far conoscere al mondo la propria attività non può fare a meno di un sito web responsive. La storia di internet corre velocissima: nel giro di pochi anni tante cose sono cambiate, a cominciare dall’utente medio della rete. Fino a non molto tempo fa, per navigare sul web si utilizzava esclusivamente il computer, mentre oggi si utilizzano soprattutto gli smartphone. Ma prima di tutto i telefoni non sono tutti uguali (bisogna tener conto delle dimensioni dello schermo, browser e sistema operativo) e va considerato che la navigazione può avvenire anche da altri dispositivi come tablet, computer portatili e le innovative Smart TV. Solo un sito professionale e completamente responsive riesce a garantire a tutti gli utenti la migliore esperienza di navigazione, a prescindere dal dispositivo da cui l’utente si connette: scopriamo come è possibile crearlo da zero oppure come trasformare un sito già esistente in un portale navigabile anche da mobile.

Perché è importante realizzare un sito web responsive?

Partiamo da una definizione: il sito web responsive è composto da pagine che si adattano automaticamente ai display di varie dimensioni, mostrando i suoi contenuti in modo da garantire la migliore user experience su qualsiasi dispositivo. Attenzione, però: il sito responsive non si limita a ridimensionarsi (quello lo fanno anche i portali classici, costringendo l’utente a zoomare o a fare gli odiosi scroll laterali): le pagine, infatti, possono modificare il loro aspetto, organizzando i contenuti in modo da mostrare una versione ottimizzata per quello specifico dispositivo. Il responsive web design esiste già da diverso tempo, ma il suo arrivo ha completamente rivoluzionato la vita di tantissime aziende ed organizzazioni. Nel corso degli anni, infatti, i tradizionali computer desktop sono stati affiancati da tanti altri dispositivi capaci di navigare in rete: ogni device ha le proprie caratteristiche e uno schermo di dimensioni diverse.

Scrivici per un preventivo

>>> Richiedi ora un preventivo GRATUITO per la realizzazione del tuo sito web <<<

Come ottimizzare un sito per renderlo navigabile anche da mobile

Per andare incontro alle esigenze dei navigatori da mobile, inizialmente c’erano solo due scelte: o si lasciava il solo sito creato per il computer desktop oppure si creava un secondo sito ottimizzato per i dispositivi mobile. In realtà questa seconda strategia non ha mai avuto grande successo e parlarne oggi fa quasi sorridere: sembra preistoria, ma si parla davvero di pochi anni fa. Il sito web responsive riesce invece ad adattarsi alle risoluzioni dei vari display grazie ad un sapiente utilizzo del linguaggio HTML e del codice CSS: in pratica si identificano le dimensioni del display (solitamente si indicano tre o quattro dimensioni standard tra quelle più diffuse) e si dettano le regole che definiscono la disposizione e la visualizzazione dei contenuti del sito a seconda del dispositivo con cui l’utente lo sta visitando. Si tratta dunque di uno strumento potentissimo ed utilissimo: sono tantissime le ditte che si sono rivolte ai professionisti del settore per chiedere la creazione di un sito responsive o l’adattamento di un sito già esistente.

Un sito tradizionale, se viene visto su uno schermo di piccole dimensioni, non fa altro che rimpicciolirsi, adattandosi alla larghezza del display utilizzato. I contenuti quindi rimangono sempre raggiungibili, però per visualizzarli l’utente è costretto fare scroll e zoom: non certo il massimo, soprattutto per chi magari sta navigando da smartphone e ha fretta di trovare determinate informazioni. Il responsive design supera queste enormi criticità: non solo le dimensioni dei caratteri e delle immagini vengono calibrate in relazione al display (quindi lo zoom non è più necessario), ma i contenuti, che vengono mostrati a cascata (niente scroll orizzontali) possono essere distribuiti nella pagina con un ordine diverso, seguendo una gerarchia pensata appositamente per chi naviga da quel determinato dispositivo.

Preventivo sito web
Sito web responsive come crearlo

Come creare un sito responsive da zero: si parte dai contenuti

La creazione di un sito web responsive passa attraverso diverse fasi. Prima di pensare alla rea estetica bisogna pensare ai contenuti. Decidere che sui vari display vengano visualizzati tutti i contenuti per intero potrebbe essere già un errore. Ci sono degli elementi che se il sito viene visitato da un computer vanno benissimo, ma che potrebbero complicare l’esperienza dei navigatori da mobile: i menù secondari, i loghi giganteschi, le immagini di sfondo, i widget sulle barre laterali servono davvero a chi consulta il sito da smartphone? Il più delle volte la risposta è no. In linea di massima vale la regola: se si riduce la grandezza del display, si devono ridurre anche i contenuti della pagina. È quindi importantissimo scegliere i contenuti essenziali da mostrare sui display più piccoli, in modo da permettere al visitatore di individuare subito le informazioni che sta cercando. Una volta fatta questa selezione dei contenuti si può iniziare a pensare alla creazione vera e propria del sito, quindi via ad HTML e CSS.

La definizione dei breakpoint e le regole delle media queries

Ovviamente se non si ha grande dimestichezza con i linguaggi web, la cosa migliore da fare è affidarsi a dei professionisti in grado di seguire l’intero processo, dalla scelta dei contenuti da mostrare alla stesura del codice e alla realizzazione delle grafiche. L’anima del responsive web design è rappresentata dal metatag viewport e dalle media queries: il primo va inserito nell’head del codice HTML del sito e serve per “avvisare” il browser che l’adattamento del sito alle varie risoluzioni non deve avvenire in automatico, ma seguendo le regole responsive dettate nel CSS tramite le media queries. In altre parole, un sito responsive ha un solo codice HTML collegato ad un foglio di stile su cui sono inserite regole specifiche che vengono applicate in base alle dimensioni dello schermo del dispositivo sul quale le pagine vengono visitate.

Solitamente si lavora in modo tale da avere tre possibili versioni del layout del sito: una relativa agli smartphone, una per i tablet ed una per i computer. Al giorno d’oggi questa divisione non è sempre perfetta, visto che sul mercato ci sono telefoni di ogni tipo, con display che vanno dai quattro ai sette pollici. Per semplificare, comunque, seguiamo la vecchia concezione dei tre layout: un sistema del genere prevede due media queries (quella con le regole per gli smartphone e quella con le regole per tablet), mentre il layout “normale”, che sarebbe quello visto su computer, è gestito nel foglio di stile senza regole specifiche. Le media queries hanno questa struttura:

@media (min-device-width: ???px) and (max-device.width: ???px) {…}

Al posto dei punti interrogativi si mettono le dimensioni minime e massime del tipo di device per cui si stanno inserendo le regole specifiche, che vengono elencate all’interno della parentesi graffa.