Stavo guardando qualche giorno fa un sito che aveva come background i ben noti raggi “alla illustrator”, con un gradiente di fondo che variava contestualmente alla zona di sito visitata. Un’idea non originale, ma sicuramente di buon esito, se non fosse stato per il fatto che… ogni “parte” del sito pesava 150k di solo background.
In questo periodo, forte del mio smartphone, mi capita di navigare tramite il cellulare: un peso di 300k di background per due sole pagine è assolutamente fuori luogo, nel caso non ci sia un’opzione wap.
…la cosa bella è che, navigando il sito, avevo pensato che il programmatore del medesimo avesse avuto un’idea geniale, semplice ed elegante. Esaminando poi nel particolare, in realtà, non la aveva avuta: i jpggoni erano stati la soluzione, ma a questo punto, l’idea era “mia”.
L’idea è fondamentalmente molto semplice, e potete verificarla cliccando qui (vogliate perdonarmi se i css ed i contenuti sono per ora terribilmente grossolani; poi migliorerò le pagine, in futuro). Oltre ad un eventuale colore, o immagine di sfondo, sovrapponiamo a questa un unico png trasparente, in modo da creare variazioni contestuali di colore di sfondo in maniera leggera e facilmente controllabile via codice.
Pensate per un attimo alla grafica come se fossero dei layers di photoshop.
// inizializziamo la pagina. Qui può esserci un colore di sfondo o un gradiente per così dire “nativo”
<body>
// apriamo un div chiamato “wrapper” che “copre” tutta la pagina, sovrapponendosi di fatto al “body”. In tale modo, avremo creato una specie di “layer” soprastante, dove inseriremo un png trasparente.
<div id=”wrapper”>
// sopra questi due posizioneremo i contenuti
<div id=”inside”>
Contenuto
</div>
</div>
</body
Il primo livello, il <body>, è di fatto con un colore fisso, o con un gradiente da 1kb o giù di lì.
Il secondo livello è un div che occupa tutto lo schermo. Su questo div noi andiamo ad inserire come background un png trasparente (png 32 in questo caso). Esaminando i css vediamo che
su firefox/mozilla/gecko basta inserire:
background: url(esperimento.png) no-repeat center top;
mentre per renderlo compatibile con IE dobbiamo aggiungere:
* background: none;
* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’esperimento.png’, sizingMethod=’fixed’);
(Nota bene: questo è solo uno dei possibili metodi per rendere compatibile i png con IE. E’ un pò fatto di “forza bruta”, ma di fatto funzionare funziona).
Il terzo livello, interno, limitato e paddato direttamente dal soprastante wrapper, sarà invece il luogo dove il cms, o la pagina, carica i contenuti. Sarà sufficiente dare a questo un bgcolor per avere come risultato un terzo layer adatto ad ospitare i contenuti del sito.
I vantaggi di questa tecnica sono molteplici:
- è possibile cambiare il colore del background in maniera contestuale e semplice; basta aggiungere un piccolo script css per modificare il body, all’interno dei contenuti (lo so, non è molto elegante, nda) o del template per avere come risultato una modifica dell’aspetto generale della pagina.
- diminuisce enormemente il peso della grafica del sito, e permette di fare effetti molto belli con un minimo di gusto.
- permette, tramite ajax o semplice javascript, di rendere visibili ed invisibili eventuali livelli. Anche qui, lascio le possibli implicazioni a programmatori più abili di me.
- extra tamarranza, come da idea di Pelòdia: basta un semplice scriptino come il seguente
<style type=”text/css”>
<!–
#wrapper {background-color: <?php
$color = array(‘#cc3300′, ‘#666666′, ‘#000000′, ‘#00CC00′, ‘#0000CC’);
$cur = rand(0, 4);
echo $color[$cur];
?>;}
//–>
</style>
per fare il fondale di ogni pagina differente, e casuale. Un pò forte tuttavia per la retina dei propri visitatori.
Mi riservo di perfezionare ancora questa tecnica: intanto il dado è tratto. Sicuramente con ajax potrebbe essere fatto eventualmente in tempo reale, ma questo sarebbe skinning non contestuale, meno interessante a mio avviso a fronte di una maggiore chiarezza ed usabilità del sito stesso.
(Ringrazio per il loro aiuto Oliver Georgi, Michele Buresti, Fabio Dreosso, Tommaso Bagassi, Andrea “Pelo” Lodi)
Technorati Tags: css, Design, png
