Prima di concentrarci sui punti focali per poter creare un sito web responsive bisogna comprendere il significato del termine.
La parola “responsive” può essere tradotta in italiano con il termine “adattivo”. Che significa quindi?
Significa creare un sito web che si “adatti” a qualsiasi supporto elettronico che andiamo ad usare.
Con l’avvento dei nuovi smartphone sempre più tecnologici e dei tablet la fruizione delle informazione non avviene quasi più tramite pc(desktop).
Questo indica che la tua pagina web deve poter essere vista da tutti questi dispositivi senza perdere nessun elemento e senza che la struttura stessa del sito si deformi. Cosicché le informazioni presenti risultino semplici e immediate da leggere.
Il responsive design ha proprio questo come obiettivo adattare i contenuti e il layout al maggior numero possibile di risoluzioni.
Il web creator deve necessariamente conoscere e saper utilizzare il linguaggio base HTML e CSS e i meccanismi ad essi collegati(media queries, metatag viewport, breakpoint).
HTML
Il codice HTML acronimo di HyperText Markup Language è il linguaggio principale attraverso il quale crei la struttura delle pagine web e permette di inserire immagini, documenti, link a siti esterni collegamenti e formattare testi. Tutto questo è possibile grazie a dei marcatori (tag <>) che devono avere un apertura e una chiusura.
CSS
In stretta collaborazione con il linguaggio HTML troviamo il CSS, Cascading Style Sheets, (fogli di stile a cascata).
Mentre il primo si occupa dei contenuti ,questo invece gestisce il design della pagina , come quindi essa deve risultare esteticamente.
Questo linguaggio è utilizzato per gestire il colore, la dimensione del font, e la disposizione di tutti gli elementi all’interno di una pagina in modo che risultino ben amalgamati tra loro e comunichino al primo sguardo un bel colpo d’occhio.
Contenuto
Ritornando a noi, il primo passo da compiere per un responsive design è la gestione del contenuto.
Decidere il layout, il posizionamento del logo, del titolo, della descrizione e come devono essere impostati i menù attraverso categorie e sotto-categorie.
È utile fare un vero e proprio scherma per visualizzare e definire le parti principali.
Indicare gli elementi imprescindibili, quelli dei quali puoi fare a meno e quelli nascosti che invece appaiono solo grazie ad un determinato comando.
Impostare quindi un ordine e una priorità delle informazioni.
I breakpoint sono, come dice la parola stessa, dei punti di rottura dopo i quali avviene una correzione o un cambiamento. Questo può risultare valido solamente tramite l’utilizzo di media queries. I media queries sono gli strumenti imprescindibili che consentono al nostro sito di adattarsi a diverse condizioni. A diversa risoluzione dello schermo, orientamento del dispositivo e dimensioni entra in gioco la trasformazione. Per utilizzare un mediaquery bisogna inserire il tag @media.
Viewport e meta tag viewport.
Se stai leggendo questa guida sicuramente il tuo obiettivo è che il tuo sito si adatti a tutti i browser dei dispositivi mobili. La maggior parte dei browser riesce ad adattare automaticamente le dimensioni dell’area da visualizzare (viewport) con la struttura della pagina. Se questo però non avviene dobbiamo utilizzare il meta tag viewport.
Attraverso questo comando indichiamo noi la risoluzione dell’area di visualizzazione in base alle dimensioni dello schermo del dispositivo scelto che sia tablet o cellulare.
Serve quindi ad ottimizzare il layout della pagina alla risoluzione dello schermo.
Il suddetto meta tag ha anche altre caratteristiche. Puoi decidere per esempio se consentire a chi visita il sito la possibilità di allargare l’immagine attraverso lo zoom e in che percentuale.
Qui le sue principali proprietà:
Width: Larghezza del display;
Height: Altezza dello schermo del dispositivo;
Initial scale: Zoom di partenza della pagina(Valori da 0 a 10), il settaggio ottimale è 1.0;
Minimum scale: Valore minimo a cui si può rimpicciolire l’immagine;
Maximum scale: Limite massimo di zoom;
User-scalable: Inserire o meno la facoltà di zoomare(yes/no);
Scelta del font
Per poter adattare i contenuti a tutti i dispositivi è bene ragionare sulle dimensioni del font (indicate sempre in percentuali) e la scelta del carattere.
Inutile andare alla ricerca di font particolari, pensa che sui dispositivi Android ne sono disponibili solo 3 tipi. Tutti gli altri quindi non verranno automaticamente riconosciuti.
Foto e video “responsive”
Lo stesso discorso vale per immagini e video.
Scegliere foto abbastanza grandi tanto da poter essere inserite sia in strutture con area visibile minore che in contesti che necessitano una risoluzione maggiore. Anche in questo caso i codici CSS ti vengono in soccorso.
Img{max-width:100%;}
Con questo sistema la dimensione dell’immagine si allarga e si restringe a seconda dell’area in cui viene inserita.
Per i video il codice da inserire è invece questo:
Video{max-widith:100%; height:auto;}.
Testare il sito
Come ultimo punto, ma non meno importante, prima di mettere definitivamente in rete la tua pagina web bisogna testarla sui vari dispositivi. Controllare quindi se tutto il lavoro svolto è stato fatto a regola d’arte o se c’è ancora qualcosa da modificare.
Collegarsi quindi da tablet, pc o smartphone e verificare se ogni pagina del sito ha mantenuto la struttura desiderata e se nessuna informazione si sia persa o deformata.
Insomma grazie a questa molteplicità di codici sei tu a decidere come deve essere visto il sito e le modalità di navigazione. Inconsapevolmente l’utente viene guidato da te nella struttura della pagina tramite l’inserimento di codici e Tag rendendo il tutto il più fluido possibile su ogni dispositivi utilizzato.
