IE6, IE7, IE8, IE9, IE10(preview), Firefox 3.6, Firefox 4, Firefox 5, Chrome 7->11, Safari 3->5+, Opera, IOS, BlackBarry.
Questa è solo una piccola lista degli strumenti oggi utilizzati per consultare il web.

L’utente medio cerca informazioni complete e aggiornate in una grafica accattivante.
Il nostro scopo (di web designer) è soddisfare questi bisogni e renderci conto che essi evolvono nel tempo e questa evoluzione è determinata da tecnologia e moda.

In questo articolo spiego come le tecniche di Web Design Progressivo e Web Design Adattivo possono essere utilizzate come compromesso vincente per la realizzazione di progetti web attuali e retro compatibili.

HTML4, xHTML Transitional, xHTML Strict, HTML5, CSS2, CSS3, Javascript, jQuery (e altri frameworks) sono le infrastrutture che abbiamo a disposizione per realizzare una pagina web. Come capita in moltissimi ambiti lavorativi dobbiamo avere le competenze necessarie per scegliere lo strumento giusto per il lavoro da realizzare.

Un esempio pratico di questa affermazione è HTML5: è una novità sulla bocca di tutti ed introduce nuove ed interessanti funzionalità alle pagine web (io utilizzo già HTML5 per molti miei lavori!).
Eppure se dobbiamo realizzare un progetto web per una Pubblica Amministrazione italiana non possiamo farne uso! Siamo obbligati dalla Legge Stanca ad utilizzare xHTML.

Vecchie abitudini dure a morire!

In principio era Explorer (e Netscape!) e poi pian piano abbiamo assistito (noi utenti del Web) alla nascita degli altri browsers. Da sempre agenzie e clienti chiedono (pretendono) che le loro pagine web si vedano identiche su qualunque computer, browser e OS.

Questo fenomeno deriva dal fatto che l’utente medio ha assistito alla nascita del web ed il web è stato venduto per anni come il volantino digitale dell’azienda: una semplice digitalizzazione di una brochure.

La caratteristica principale del volantino è che tutte le copie sono identiche tra loro e questa abitudine è stata erroneamente trasferita al web. Questa abitudine è dura a morire!

La (pessima) soluzione grafica

In principio era FrontPage e Dreamweaver e poi pian piano abbiamo assistito  (noi sviluppatori) alla crescita di una coscienza collettiva orientata alla qualità del codice ed alla sua semantica con lo scopo di valorizzare un contenuto di qualità.

Gli strumenti visuali (WYSIWYG) utilizzavano (e lo fanno tutt’ora!!!) tabelle e slices per comporre il risultato grafico di una pagina.
Quasi tutta la grafica risultante è basata su di un mosaico di immagini composte in una una struttura a tabelle annidiate.

Questa soluzione permette di ottenere un elevato grado di “uguaglianza” tra i vari supporti ma è legata a tecnologie vecchie e deprecate (le tabelle di layout) ed è destinata a morire perchè colossi dell’informazione come Google basano i risultati delle proprie ricerche anche sulla qualità intrinseca delle pagine indicizzate: la qualità del codice sorgente!

Moda e Tecnologia

Il web è fatto di contenuti impaginati ed erogati principalmente attraverso lo schermo di un computer o di un dispositivo mobile. In sintesi una pagina web può essere sia letta sia osservata come immagine.

L’immagine di una pagina web può essere percepita come bella o brutta in base al background culturale del singolo individuo ma anche in base alla moda del momento. Anzi, sempre più spesso sono le mode collettive ad influenzare il singolo background culturale anche nella fruizione di una semplice pagina web.

Le tecnologie messe a disposizione di noi sviluppatori web evolvono assieme alla moda e spesso rispondono ad esigenze stilistiche con maggior priorità rispetto alle esigenze funzionali. Un esempio eclatante è la direttiva border-radius introdotta con i CSS3.

Quasi sempre l’ultima tecnologia disponibile nasce per semplificare un certo compito (si pensi sempre ai bordi arrotondati) mentre quasi mai gli strumenti esistenti si adeguano alle nuove tecnologie (si pensi a Internet Explorer).

Il risultato è che lo sviluppatore si trova a dover scegliere tra:

  • utilizzare l’ultima tecnologia disponibile a rinunciando alla compatibilità con sistemi obsoleti
  • rinunciare all’aggiornamento tecnologico per favorire una compatibilità globale del proprio lavoro
  • studiare soluzioni complesse per rendere retro-compatibili alcune (ma non tutte) le nuove tecnologie (si pensi a sIFR o Cufon)

Il Compromesso Vincente

Esiste tuttavia un approccio pragmatico che tiene in massima considerazione il contenuto che una pagina deve erogare (su questo non c’è compromesso!) e tenta di studiare soluzioni grafiche che possano sfruttare al massimo le nuove tecnologie ma risultare comunque accettabili in assenza delle stesse.

Questo compromesso prende il nome di “Design Progressivo” e “Design Adattivo” (in inglese “progressive enhancement web design” e “adaptive web design”).

Utilizzo il termine compromesso perchè entrambe queste tecniche di desing hanno risultati grafici differenti su browsers o supporti differenti.

Utilizzare queste tecniche significa comprendere che il web è uno strumento elastico e contestualizzato allo strumento che lo visualizza. Significa comprendere che il web non è la carta stampata!

Colori, layouts, effetti grafici e movimenti possono essere un’utile arricchimento della pagina quanto viene visualizzata su di un iMac 27″ e contemporaneamente risultare un pesante impedimento per chi tenta di accedere alla stessa pagina con un cellulare.

Web Design Progressivo

Il termine Design Progressivo identifica delle tecniche di sviluppo per cui un layout tecnologicamente semplice viene arricchito di funzionalità extra solo per i browsers che le supportano.

Il design di partenza si basa su tecnologie solide e ampiamente diffuse assicurando che un determinato layout è correttamente visualizzato sulla (quasi) totalità dei browsers/dispositivi in circolazione. Successivamente si applicano gruppi di regole avanzate le quali vengono lette solamente dai browsers che le supportano. Tali regole verranno ignorate da vecchi dinosauri quali IE6, IE7, IE8!

In passato si utilizzavano i commenti condizionali per IE, successivamente hanno preso il sopravvento i CSS Hacks (safe e non) mentre oggi possiamo contare su strumenti evoluti quali modernizr che ci permettono di scrivere fogli di stile simili a questo:

<style type="text/css">
/* Basic Layout Rules */
.box { margin:10px; padding:10px; background: #ddd; color: black; }

/* Advanced CSS3 Rules */
.boxshadow .box { box-shadow: 2px 2px 4px #666; }
</style>

Leggi l’approfondimento su Wikipedia (inglese) »

Web Design Adattivo

Il termine Design Adattivo identifica delle tecniche di sviluppo per cui un layout subisce delle trasformazioni in base alle caratteristiche del dispositivo che lo visualizza.

Questa pratica si basa sul concetto che chi visualizza una data pagina con un cellulare o un iPhone non ha interesse nel visualizzare una enorme, seppur magnifica, testata grafica del sito.

Il Web Design Adattivo è una materia molto complessa perchè ha a che fare con molti livelli di erogazione di una pagina web.

A livello CSS possiamo decidere di caricare o meno la testata del sito grazie ad una media query oppure possiamo utilizzare un set di icone ad alta risoluzione per lo schermo di un iPhone4.

A livello Javascript possiamo valutare di inserire i tasti avanti/indietro in uno slide-show per chi utilizza il mouse mentre per chi utilizza un iPad (touch screen) possiamo prevedere un comportamento a trascinamento (qui ci aiuta modernizr).

A livello Server possiamo valutare di ridimensionare le immagini a 800px per chi ha una connessione veloce e ridurle a 300px per chi ha una connessione lenta o un cellulare basandoci sugli header della richiesta e su dei pingback ajax (qui si va sul difficile).

L’ultima Sfida!

Considero abbastanza semplice da comprendere quanto esposto in questo articolo: la grafica su web ha caratteristiche diverse dalla grafica su carta.

Nel lavoro quotidiano mi trovo spesso a discutere di questi argomenti con colleghi designers e grafici e molto spesso mi accorgo che quando un creativo si mette davanti a Photoshop raramente tiene in considerazione le problematiche di implementazione e lo strumento (il web) cui è destinato il suo lavoro.

Per fortuna l’impatto che il SEO ha su di un progetto web è sempre più forte e Google sta facendo enormi sforzi per premiare la qualità costruttiva di una pagina web.

Sono sicuro che in un futuro abbastanza vicino le considerazioni qui esposte diverranno argomento comune tra tutti i miei colleghi!
E tu cosa ne pensi?