Che cos’è il Responsive Design e perché abbiamo iniziato ad usarlo?

Il Responsive Web Design è una tecnica sviluppata per realizzare siti web in modo che le pagine si adattino automaticamente al dispositivo con le quali si visualizzano (Pc, tablet, smartphone e web tv).
Ogni nuova tecnologia nasce da un bisogno, anche questa infatti si è affermata dopo la rivoluzione tecnologica arrivata con gli smartphone e l’internet mobile. Già dal 1990 però si cercava di sviluppare questo sistema, ma con scarsi risultati.

Quali sono gli elementi fondamentali nel Responsive Design?

  • Le Media queries 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.

Media queries

Le Media queries sono delle indicazione che vengono inserite nel foglio di stile (CSS), proprio per adattare il layout web al dispositivo utilizzato.

Esempio:

@media only screen  and (min-device-width: 320px)  and (max-device-width: 480px)
 {
body{ font-size: 12px;
 text-align: center;}
}

Traduzione: Andando a navigare all’ interno di un sito internet con un dispositivo compreso tra 320px e i 480px di larghezza (smartphone), il body, quindi la parte di sito in cui il web designer inserisce i contenuti, avrà un carattere(font) di 12px e un text-align(allineamento) centrale.

Griglie (layout) flessibili

Un punto fondamentale del Responsive Web Design è la flessibilità. Ogni sito web che si rispetti deve essere sviluppato con misure flessibili come le percentuali e non con misure fisse come i pixel.
Perché? Perché la regola fondamentale del buon web designer è che, al variare della larghezza del browser, i contenuti del sito rimangano leggibili e mantengano un design accattivante ridimensionandosi automaticamente.

Immagini flessibili

 

Perchè un’ immagine grande riesce ad essere pefettamente visibile da uno smartphone?

Dietro c’è molto lavoro. Ci sono molti metodi per raggiungere il Responsive Design, ma cercherò di svilupparne e spiegarne due.Il primo metodo utilizza le percentuali, ancora loro si, sono il nostro attore protagonista. Quando iniziamo a progettare un sito bisogna sapere la propria risoluzione di partenza. La tua immagine (adattata alla risoluzione iniziale) quindi è uno zero. Utilizzando nel tuo foglio di stile (CSS) determinate righe di codice, riuscirai a scalare l’immagine secondo la grandezza dello schermo in cui visualizzi il sito web, rimpicciolendola o ingrandendola a seconda delle necessità.
Il secondo metodo è quello più rapido. Si sfruttano degli script caricati sul server su cui vi appoggiate, che automaticamente ritagliano dinamicamente e adattano l’immagine per i diversi formati di schermo (desktop, Ipad, Iphone, tablet e smartphone). Questo è un metodo sviluppato in tutti i CMS (content management system), come ad esempio WordPress.

Grafiche Edicta ha sviluppato un sito completamente responsive per facilitare voi, permettendovi di poterci visitare in ogni momento  e da ogni posto in cui vi troviate.