Sito internet responsive

Un sito internet di nuova generazione viene ormai realizzato quasi esclusivamente seguendo la diffusa pratica di responsive web design: una tecnica di web design che permette al sito internet di adattarsi automaticamente al dispositivo col quale viene visualizzato (notebook, desktop, tablet, smartphone, cellulari o perfino alle web tv), riducendo al minimo la necessità dell'utente di ridimensionare i contenuti.

 

Caratteristiche tecniche di un sito responsive

Un sito responsivo fa uso di una impaginazione grafica con griglie a proporzioni fluide, struttura e immagini flessibili e generalmente, dei fogli di stile 3.0; in particolare di un'estensione della regola @media (media queries), per adattare l'impaginazione grafica all'ambiente nel quale il sito è visualizzato. Le media queries infatti consentono alla pagina di usare diversi fogli di stile in base alle caratteristiche del dispositivo utilizzato.
Il concetto di griglia flessibile richiede che gli elementi siano dimensionati tramite unità relative come percentuali ed em, e non con unità assolute come pixel o punti.
Le immagini flessibili devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare all'impaginazione evitando di sovrapporsi agli altri elementi.
Come risultato, gli utenti che utilizzano diverse periferiche e browser, hanno accesso a un singolo sorgente i cui contenuti vengono però disposti in modo differente tale da essere sempre facilmente consultabili, e senza dover compiere troppe operazioni di ridimensionamento, scorrimento e spostamento.

Il framework Bootstrap, quello che adottiamo più comunemente ni nostri progetti, identifica quattro tipi di device e corrispondenti risoluzioni:

  • "XS" - la risoluzione bassa, quella per esempio di uno smartphone portrait
  • "SM" - risoluzione intermedia utilizzata prevamente per i tablet
  • "MD" - risoluzione medio-alta per desktop con schermi piccoli e tablet landscape
  • "LG" - risoluzione alta per pc o notebook con risoluzione a 1200 pixel

 

Rilevazione del dispositivo e compatibilità

Un tema di particolare interesse per il design responsivo è quello della compatibilità. Non tutti i browser e dispositivi, infatti, riconoscono le istruzioni più utilizzate per il ridimensionamento fluido dei contenuti o supportano le tecnologie necessarie. È inoltre fondamentale la rilevazione corretta del dispositivo, per fornire la relativa impaginazione grafica e individuare il livello di compatibilità possibile.
I browser dei primi cellulari non sono in grado di interpretare funzioni quali media queries o Javascript, ed è pertanto più conveniente creare una impaginazione specificamente adatta alla visualizzazione su smartphone e computer, piuttosto che tentare una "degradazione graduale" per adattare un sito complesso e carico di immagini alla maggior parte dei cellulari.
L'identificazione dello user agent, ovvero del browser, e l'identificazione del dispositivo mobile sono due modi di dedurre se Javascript e alcune istruzioni dell'HTML e dei fogli di stile sono supportate. L'utilizzo di librerie Javascript come Modernizr, jQuery, e jQuery mobile può essere utile allo scopo, verificando direttamente le caratteristiche e lo user agent usati dall'utente.


Ultimi progetti

Calendario Eventi

  • 08/04/2017
    Diabates Marathon
  • 25/03/2017
    Le Mani nel Cuore
  • 20/03/2017
    Reboot Grafico di SaluteClick.com
  • 24/02/2017
    TIBF - Executive Master in Corporate Finance & Banking
  • 09/02/2017
    Fiera Milano Sposi Assago
  • Vai al calendario

Il nostro principale obiettivo è quello di far crescere le vostre attività, affidandovi alla nostra creatività e competenza

Luca Bottaro
CEO & Founder

Richiedi un preventivo