Blog

Sito responsive? Ecco le risposte

Negli ultimi anni, la tecnologia ha avuto una veloce evoluzione permettendo ad ognuno di noi di disporre di almeno un dispositivo mobile con collegamento ad internet. Che sia uno smartphone o un tablet, una cosa è sicura: chiunque sia in possesso di uno di questi, ha avuto la necessità di consultare un sito web, per lavoro o semplicemente per restare aggiornato sulle news.

Ciò significa che quando si possiede o si crea un sito web, bisogna renderlo web responsive, per adattarlo al dispositivo su cui verrà visualizzato, così da permettere una buona visione e dunque una lettura ottimale del contenuto.
In queste righe andremo ad approfondire questa particolare funzione per dispositivi portatili.
scopriremo cosa sono i siti web responsive e come funzionano.

Web responsive, la nuova frontiera dell’accessibilità

Tramite la tecnica del web responsive design, i siti si adattano ai dispositivi mobili. Questi portali, applicano alla loro realizzazione il web responsive design, ovvero quella tecnica che permette di adattare automaticamente la grafica del sito al dispositivo col quale vengono visualizzati: pc, smartphone, tablet, ecc.

Poiché i formati e le grandezze degli schermi dei dispositivi mobili sono in continuo perfezionamento, è importante per un sito web adattarsi a qualsiasi formato, in modo da ottimizzarne la visualizzazione. Un paragone molto pratico è quello dello scaldabagno di casa, che tramite il sensore del termostato, regola la temperatura dell’acqua, accendendo la resistenza per aumentare o diminuire la temperatura.

Nel caso del web responsive i sensori sono il browser, mentre il “termostato” sono i CSS

I CSS infatti vanno a modificare in questo caso le dimensioni del testo, foto e file.
Questo tipo di design adattivo consente l’accessibilità a qualsiasi piattaforma, tenendo conto, inoltre, di alcuni parametri, quali ad esempio la vista degli utenti al fine di rendere il testo più leggibile.

Lo scopo è quello di adattare diversi tipi di layout ad ogni risoluzione possibile, incluse le dimensioni delle immagini (in alcuni casi vengono messe a disposizione immagini meno pesanti), nonché di nascondere gli elementi non essenziali di una pagina e di facilitare il touch, permettendo di selezionare facilmente un link o un tasto.

Il responsive design si concentrerà ovviamente sulle informazioni essenziali, tralasciando i contenuti superflui, in quanto il problema principale da risolvere è la poca disponibilità di spazio. Per fare un esempio, uno smartphone consentirà la visualizzazione dei contenuti su una sola colonna, mentre un tablet metterà a disposizione due colonne. Questione di schermo

Una priorità del web responsive è “adattare”

L’impaginazione deve adattarsi alle diverse risoluzioni dello schermo e ciò avviene tramite la “resolution breakpoint”, che modifica la densità dei pixel in base alla larghezza e alla lunghezza del dispositivo. Un sito adattivo o “responsivo” si serve di una particolare impaginazione basata su una struttura flessibile; tramite le media queries la pagina può usare diversi fogli di stile in base alle caratteristiche del dispositivo.

Bisogna tenere presente anche la differenza tra i vari sistemi operativi degli smartphone e dei tablet, di fatti per avere una visione ottimale di un sito web su uno smartphone o un qualsiasi dispositivo, non bastano solo i pixel ma c’è bisogno di tener presente anche il sistema operativo adeguato, che può essere Android, IoS o Windows.

Il “viewport” (area di visualizzazione) consente invece al browser di ridimensionare in modo automatico la pagina che viene visualizzata. Di conseguenza per leggere un qualsiasi articolo di una pagina web su un Iphone sarà necessario zoomare sulla parte desiderata, in quanto la risoluzione dello schermo è di 320px.

Se la parola chiave è semplificare, bisognerà sacrificare

Ovvero sacrificare alcune parti di una pagina web che non sono ritenute essenziali. Per la consultazione, ad esempio, del sito di un e-commerce, si darà priorità alla sezione riservata ai prodotti o alla vetrina, in quanto si presuppone che chi consulta questo tipo di sito da un dispositivo mobile abbia bisogno di visualizzare immediatamente i prodotti da acquistare.