INTRODUZIONE
Nel mondo odierno internet è accessibile da qualsiasi dispositivo tecnologico e, soprattutto negli ultimi anni, la navigazione da dispositivi portatili ha avuto un picco incredibile.
Dati alla mano, secondo Ansa.it, nel 2020 il numero degli smartphone superava il numero degli abitanti in Italia, (ben 80 milioni rispetto i 60 milioni circa di italiani).
Conseguentemente, l’aumento dei dispositivi portatili ha spostato la fruizione di internet dal computer classico al comodo e tascabile smartphone. Questo cambiamento ha sollevato così un nuovo problema.
Quale?
L’ALBA DEL SITO WEB RESPONSIVE
Ti stai chiedendo quale sia questo misterioso problema, eccolo:
La dimensione variabile degli schermi in contrapposizione alla staticità grafica dei siti web.
Da questo scontro è nata la necessità di costruire siti web Responsive o in gergo “Responsivi”. Il significato lo troverai approfondito nel prossimo capitolo.
É importante che il portale web si adatti ad ogni dimensione di schermo esistente per garantire un’esperienza di navigazione in qualsiasi caso piacevole e intuitiva agli utenti.
Un sito web Responsive, infatti, è ciò di cui hai bisogno se stai pensando di costruire un nuovo sito web o se vuoi ricostruire il design del tuo vecchio portale aziendale obsoleto.
Andiamo a scoprire di più..
RESPONSIVE VS ADAPTIVE
Abbiamo compreso, quindi, perché è fondamentale avere un sito web Responsive, ma per capire di più il significato di questo termine è altrettanto importante non confonderlo con un sito web Adaptive o in gergo Adattativo.
Ciò è necessario perché i due termini sembrano uguali ma non lo sono…
Vediamo le differenze insieme:
RESPONSIVE: il termine significa che il contenuto del sito web si adatta in maniera fluida qualsiasi sia la dimensione dello schermo del dispositivo usato o della finestra del browser (applicazione per navigare in internet es. Internet explorer, Google Chrome ecc.)
ADAPTIVE: significa che il sito web è visibile correttamente e navigabile solo per determinate dimensioni dello schermo del dispositivo o del browser. Per esempio il contenuto del sito web può essere ben visibile sul cellulare ma se visto attraverso tablet, titoli e testo vengono tagliati o non resi visibili graficamente.
Comprese queste due differenze tuffiamoci in un’area un po’più tecnica ma tanto semplice quanto fondamentale…
…ti prometto che alla fine di questo articolo questo argomento non avrà più segreti per te…
UNITÁ RELATIVE
Affinchè il sito web sia Responsive è necessario che sia costruito tramite Unità relative.
Non preoccuparti è un concetto tanto semplice quanto importante; da conoscere per interloquire con il professionista a cui ti affiderai… e anche per testare la sua preparazione.
Portiamo come esempio un comunissimo documento Word…chiunque nella sua vita ci ha pasticciato almeno una volta, no? Ecco, in maniera rudimentale possiamo dire che un sito web è formato da margini, spaziature, come il famoso foglio di lavoro di Microsoft.
Essi ci permettono di gestire il contenuto in modo uniforme e piacevole per la lettura. Lo stesso avviene per il sito web che altro non è che un “ipertesto”.
Qualsiasi sito web, come Word, usa l’unità di misura dei Pixels per calcolare la posizione del contenuto sullo schermo. Il problema di questa unità di misura fissa è che non permette al contenuto di fluire con il ridimensionamento dello schermo.
Ciò, quindi, non rende il contenuto visibile correttamente su qualsiasi dispositivo.
La differenza sostanziale tra un documento Word e un sito web è che quest’ultimo deve, e ripeto, DEVE essere flessibile graficamente. Quindi, la caratteristica che ha un sito web Responsive per essere denominato tale è che queste Unità Relative debbono essere appunto relative relazionate alle dimensioni del dispositivo, non fisse.
Ciò permetterà a qualsiasi browser di leggere le misure del nostro sito web in maniera flessibile e proporzionale allo schermo del dispositivo da cui stiamo navigando. Così magicamente abbiamo un sito web Responsive.
Queste Unità Relative sono: % (Percentage) , VW (Viewport Width) , VH (Viewport Height), EM, REM.
Quando vedi il contenuto di un sito sito web perfettamente visualizzato sia su Desktop (PC), Tablet o Smartphone, beh ecco, è anche merito loro.
I BREAKPOINTS
No, non è il nome di una nuova boy-band emergente proveniente dalle spiagge inglesi di Brighton, i Breakpoints ovvero in gergo italico “punti di rottura”, caratterizzano qualsiasi sito web Responsive.
Se prima le Unità relative ci permettevano di gestire margini e spaziature, i “punti di rottura” ci danno la possibilità di gestire la visualizzazione su schermi diversi dei contenuti nelle sezioni e colonne.
Ogni volta che si cambia dimensione di schermo o finestra essi cambiano la disposizione e la quantità dei contenuti all’interno le colonne visualizzate.
Insomma è di fondamentale importanza che l’esperienza dell’utente sia sempre semplice, intuitiva e fluida evitando di far sperimentare qualsiasi tipo di resistenza.
GOOGLE AMA I SITI WEB RESPONSIVE
Come le api amano andare di fiore in fiore, il colibrì di Google (l’algoritmo di Google si chiama Hummingbird = Colibrì in Inglese) ama andare di sito in sito alla ricerca di siti web Responsive, e li premia.
Infatti, con il nuovo aggiornamento di Google partito a dicembre 2020 e in fase di implementazione nei mesi di Giugno e Luglio 2021, l’importanza di avere un portale web pensato per cellulare è B-A-S-I-L-A-R-E.
Questo perchè, essendo i dispositivi tascabili sempre più scelti dagli utenti per la navigazione, anche il motore di ricerca ha scelto di dare priorità a questo tipo di visualizzazione per creare e gestire i risultati di ricerca organici.
In poche parole, se volete essere in prima pagina di Google il vostro sito deve essere Responsivo e graficamente fluido (per scoprire di più riguardo il mio innovativo servizio di Posizionamento in Prima Pagina Clicca qui) .
Insieme a questi cambiamenti epocali Google ritiene importantissimi anche i Web Core Vitals del tuo sito, ma questo argomento vi parlerò nei prossimi articoli.
Stay tuned
Un abbraccio
Massimiliano
