Sito Responsive: cos’è e come crearlo da zero

Un sito internet che sia responsive è condizione fondamentale per ogni azienda o organizzazione che desidera fare attività di marketing online e avere successo sul web. Scopriamo ora insieme cosa significa sito responsive e come crearne uno a partire da zero.

Cos’è un sito responsive

Un sito responsive è un sito web in grado di adattarsi graficamente in maniera automatica a qualsiasi dispositivo su cui viene visualizzato (dai pc ai tablet, passando per smartphone e web tv). In questo modo, un sito web responsive riduce al minimo la necessità dell’utente di ridimensionare l’immagine mostrata sullo schermo e di scorrere tra i vari contenuti per trovare ciò che sta cercando, migliorando la sua esperienza d’uso.

Perché è importante avere un sito responsive

Chiarito il significato di sito web responsive, va da sé che una migliore esperienza d’uso per l’utente (o User Experience) si traduce in maggiori possibilità che questi rimanga sul sito internet stesso per godere dei contenuti, prodotti o servizi proposti al suo interno.

La maggior parte degli utenti, quando visitano un sito non ottimizzato per il dispositivo che stanno utilizzando, sono spinti ad abbandonarlo in tempi brevi. Il rischio, pertanto, per quelle attività che non hanno ancora provveduto a rendere i loro siti responsive, è che un potenziale cliente possa abbandonare la sua vetrina web e rivolgersi al sito di un diretto concorrente.

In questi ultimi anni, dove la fruizione di contenuti web su smartphone è diventata centrale, è fondamentale avere un sito mobile friendly, cioè che si possa visualizzare correttamente su più tipologie di dispositivo mobile. Google stesso, non a caso, consiglia di utilizzare siti responsive e penalizza i siti che non sono mobile friendly.

Come creare un sito responsive da zero

Per sapere come creare un sito responsive da zero è importante conoscere alcuni dettagli tecnici. Il design responsive si fonda principalmente su tre elementi distintivi:

• griglia fluida che permette al sito responsive di modificare le sue dimensioni in base a quelle del dispositivo su cui viene visualizzato;
• immagini e testi flessibili che possono variare dimensione, apparire o scomparire all’occorrenza, in base a ciò che si decide di mostrare sui vari display;
• media queries che fanno sì che gli elementi citati precedentemente appaiano in maniera corretta.

Nello specifico, a livello tecnico, è proprio grazie alle media queries che diverse porzioni specifiche del CSS sono applicate in modalità differenti quando il sito viene visualizzato su schermi di dimensioni diverse. Le parti di CSS contenute all’interno delle media queries vengono applicate quando si riscontrano dei breakpoint, o punti di interruzione, che determinano il cambiamento della griglia fluida e delle immagini e testi flessibili.

Generalmente, i breakpoint si basano sulle dimensioni più comuni dei dispositivi attraverso cui vengono visualizzati i siti internet. Pertanto, il consiglio per chi intende creare un sito responsive da zero è quello di fissare i breakpoint per le dimensioni dei device più comuni.

Un passaggio fondamentale per la creazione di un sito responsive è quello relativo ai test: bisogna necessariamente assicurarsi, infatti, che il contenuto del sito si adatti effettivamente in modo appropriato alle varie dimensioni da noi precedentemente scelte. Il modo più facile per farlo è verificarlo direttamente sui vari dispositivi, ma è possibile farlo anche da browser (utilizzando Google Chrome o Mozilla Firefox) aprendo un sito e cliccando F12 oppure tasto destro e “Ispeziona”.