Cell. +39 3479684755
Il Blog di Instant Websites
Introduzione al design reattivo
Il World Wide Web è un mondo in continua e rapida evoluzione tecnologica e, in tale contesto, l’innovazione che ha portato con sé le conseguenze più rilevanti per i designer e gli sviluppatori è stata la diffusione dei dispositivi portatili quali smartphone e tablet.
Le previsioni dicono che in tempi brevi gli accessi ai siti Internet tramite i suddetti dispositivi supereranno quelli effettuati sui PC da tavolo e notebook; al di là della precisione di tali previsioni, si impone dunque di considerare le circostanze nel progettare e sviluppare i siti.
La soluzione tecnica adottata per adattare in qualche modo la pagina del sito alla risoluzione dello schermo, fino all’introduzione di HTML5/CSS3, era quella di ricorrere ad un layout liquido in cui, cioè, le dimensioni degli elementi contenitori della pagina fossero espresse non in termini “fissi” (px) bensì in termini relativi: % o ems, dunque.
Questa soluzione comportava però delle difficoltà e degli svantaggi, riassumibili per brevità come segue:
1) un eccessivo allargamento (o restringimento) della risoluzione disponibile a video – anche solo a seguito del ridimensionamento della finestra del browser – determinava una ridisposizione dei contenuti sgradevole e poco compatibile con la fruibilità degli stessi.
Era possibile applicare delle dichiarazioni che limitassero il ridimensionamento, innanzitutto, del contenitore principale del layout tramite le proprietà max-width e/o min-width ma il mancato supporto da parte di IE7 e versioni precedenti – in anni in cui questo era il browser largamente dominante! – rendevano la soluzione poco efficace.
2) in generale, uno scarso controllo sulla disposizione degli elementi all’interno della pagina soprattutto in presenza di contenuti non particolarmente abbondanti.
Con l’introduzione di HTML5/CSS3 è stato reso disponibile uno strumento mirato alla costruzione di siti “reattivi” costituito dalle media query, che istruiscono il browser a leggere la risoluzione dello schermo disposibile sul dispositivo e disporre gli elementi della pagina ed i contenuti di conseguenza.
Un sito reattivo (responsive), anche detto adattivo, è dunque un sito che cambia il suo aspetto a seconda che sia visualizzato su uno schermo di grandi dimensioni o su un telefonino/tablet, per dirla in breve.
Posta questa premessa, e prima di vedere un esempio concreto (sia pure semplificato), occorre chiarire se e quando sia indispensabile applicare questa tecnologia di sviluppo.
La proprietà CSS3 border-radius
Tra le novità introdotte con i CSS3, vale a dire la nuova versione dei Cascading Style Sheet, merita una menzione la proprietà border-radius che consente di arrotondare i bordi di un box in base ad un determinato raggio.
Fino ad oggi, per ottenere l’effetto di arrotondamento era necessario creare i bordi tramite elementi grafici (tipicamente, gif trasparenti) ed applicare questi ultimi al box interessato come sfondo e/o come contenuto.
Un’ulteriore complicazione era data dal fatto che diventava spesso necessario creare dei div ad hoc proprio per applicare tali sfondi, rendendo più complesso – e semanticamente meno corretto – il mark-up.
Si trattava, in altre parole, di una procedura noiosa e contrastante con l’obiettivo di semplicità e stretta rilevanza semantica del codice ma inevitabile per ottenere l’effetto.
Tutte queste complicazioni sono oggi venute meno grazie alla proprietà border-radius che ha la seguente struttura:
#box {
…
border-radius: 10px;
}
dove il valore 10px si riferisce al raggio di ciascun angolo, nel caso specifico uguale su tutti e quattro gli angoli.
La funzione rgba per gestire il canale alfa nella definizione del colore di sfondo
Una delle tante novità introdotte con i CSS3 è quella relativa alla funzione rgba per definire il colore di sfondo di un elemento; oltre ai 3 canali Red, Green e Blue in pratica viene gestito un quarto canale e cioè alfa.
Il valore di alfa va da 0.0 (completamente trasparente) a 1.0 (completamente opaco) e consente quindi introdurre la trasparenza negli sfondi stessi.
La notazione sarà del tipo:
#elemento {
background-color: rgba(255,128,150,0.8);
…
}
utilizzando quindi i 256 possibili valori di ciascun canale e specificando infine la trasparenza.
Potete vedere un esempio molto semplificato in questa pagina dove le proprietà CSS sono state così definite:
body {
margin: 0;
padding: 20px;
background-color: #FFF;
}
#contenitore {
width: 600px;
height: 450px;
background-color: rgb(0,0,0); /* dichiarazione di sicurezza */
background-color: rgba(0,0,0,0.6); /* dichiarazione per i browser che supportano CSS3 */
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
padding: 7px 14px;
line-height: 120%;
}