“Progressive enhancement”: cos’è e come utilizzarlo – Parte 1


Oggi affrontiamo un argomento su cui, almeno in Italia, non si pone troppa attenzione e su cui, a mio avviso, i riferimenti non sono numerosi: il “progressive enhancement” (in italiano la traduzione più corretta sarebbe “miglioramento progressivo” ma nel corso di quest’articolo utilizzeremo, per maggiore coerenza, il termine inglese).

Cercheremo di capire di cosa si tratta, come utilizzarlo sul web e quali sono, secondo questa metodologia, gli elementi da prendere in considerazione per costruire un sito web funzionale.

Innanzitutto, per provare a spiegare il concetto alla base dell’idea del “progressive enhancement”, riprendiamo una metafora utilizzata da Mitch Hedberg (di cui è riportata la traduzione):

An escalator can never break – it can only become stairs. You would never see an “Escalator Temporarily Out Of Order” sign, just “Escalator Temporarily Stairs. Sorry for the convenience. We apologize for the fact that you can still get up there.”

 “Una scala mobile non si può mai rompere – se si blocca il meccanismo, resta comunque una rampa di scale. Non sarà mai possibile vedere delle scale che sono “temporaneamente fuori servizio” ma soltanto delle scale mobili diventate “temporaneamente scale”. Ci dispiace per la comodità e ci scusiamo per il fatto che si può ancora arrivare fin lassù.”

Il Progressive Enhancement consente agli sviluppatori web di concentrarsi sulla costruzione di siti nel miglior modo possibile, tenendo conto di tutte quelle questioni inerenti l’accesso a quegli stessi siti da un numero indefinito di utenti sconosciuti. Esso può essere inteso come la filosofia corretta da prendere in considerazione al fine di costruire un sito internet che poggia su solide basi e si propone come primo obiettivo quello di rendere l’esperienza del visitatore funzionale e gradevole. In aggiunta,esso permette di rendere fruibile i contenuti in maniera appropriata anche a chi non può trarre vantaggio da certe tecnologie come ad esempio Javascript.

La citazione fornita sopra non è scelta a caso; essa deve aiutare a comprendere il tipo d’atteggiamento che ogni bravo web designer dovrebbe adottare tenendo conto del possibile (e neppure inusuale) malfunzionamento delle odierne tecnologie. Le soluzioni tecniche da adottare dovrebbero essere, infatti, proprio come le scale mobili descritte poco sopra, vale a dire funzionanti anche quando la tecnologia fallisce o si verifica un’interruzione di corrente improvvisa.

Nel mondo reale, esistono delle scale mobili che si arrestano quando non c’è nessuno che le sta utilizzando e riprendono a funzionare quando la gente inizia nuovamente a camminarci su; sul web ciò prende il nome di “applicazione condizionale di funzionalità”. Ad esempio, perché caricare un numero elevato di immagini quando, per qualche motivo, non possono essere viste?

Un altro aspetto interessante e su cui vale la pena riflettere continuando ad osservare il funzionamento della scale mobili riguarda l’atteggiamento dei suoi utilizzatori: quando le scale mobili non sono funzionanti capita frequentemente che le persone inciampino quando vi salgono su. Questo accade perché sono abituati ad aspettarsi un movimento e dunque quando questo non si verifica, è come se la loro memoria percepisse che c’è qualcosa che non va, qualcosa di inusuale. La stessa cosa accade in Rete. Le persone che non hanno mai beneficiato di una connessione veloce o di un dispositivo (computer o cellulare) dotato dei browser più recenti hanno difficoltà a trovarsi a proprio agio con queste innovazioni e non riescono a godere appieno dei vantaggi offerti.

Un discorso simile può essere fatto pensando alle passerelle orizzontali presenti negli aeroporti. Queste sono state costruite con lo scopo di accelerare e rendere più agevole il cammino, non sostituirlo. Tuttavia ancora oggi numerose persone si lamentano per la loro scarsa velocità. Questi soggetti corrispondono, sul web, a quegli utenti che si lamentano costantemente delle nuove tecnologie alla moda poiché, in realtà, loro stessi non sono stati in grado di utilizzarle. Bisognerebbe ricordare in questo caso l’esempio delle passerelle orizzontali: si può raggiungere l’altro lato anche senza camminare, occorre solo un po’ di tempo in più. La loro utilità è immensa quando si è stanchi, quando si devono trasportare molti bagagli oppure si desidera fare una breve chiacchierata senza perdere fiato a causa della corsa. Il corpo ha esigenze diverse in momenti diversi.

Tutto questo per rendere più chiaro il concetto che il “miglioramento progressivo” dei prodotti tecnologici permette di soddisfare molti bisogni in ambienti diversi. Specializzare ed ottimizzare ognuno di essi porterà ad un risultato impressionante. Ciò di cui deve accertarsi un vero professionista, è che l’utente possa continuare a fare le cose per cui si è collegato ad Internet, dall’inizio alla fine. Ciò potrebbe essere facile e veloce o richiedere un po’ più di impegno. La cosa che conta è che si raggiunga il risultato.

La forza di attrattiva del Progressive Enhancement si fonda proprio sul risultato finale. Esso obbliga lo sviluppatore a pianificare fin dal principio il progetto su cui intende lavorare, utilizzando le tecnologie più elementari. Ciò significa che ci sarà sempre una base semplice e solida a cui ricorrere nel momento in cui verranno introdotte funzionalità via via più complesse al progetto in questione.

Questi progetti sono più facili da gestire perché i programmatori, prestando attenzione alle fondamenta del loro lavoro, possono poi successivamente agire sulle sezioni più complesse del sistema di interazione senza temere che tutto venga sconvolto o compromesso. I vantaggi riguardano anche gli utenti che possono interagire con il contenuto del sito internet in base alle funzionalità supportate dal proprio browser.

In termini pratici, per migliorare l’esperienza di interazione dell’utente con il sito, occorre costruire ogni livello che lo compone su quello precedentemente creato.

  1. Il 1° livello è costituito da un codice HTML quanto più semantico e pulito possibile. Ciò permetterà alle applicazioni testuali, a quelle basate sul parlato o ancora obsolete di essere visualizzate correttamente sul sito.
  2. Il 2° livello riguarda il CSS che permette una corretta visualizzazione della rappresentazione visiva del contenuto del sito web.
  3. L’ultimo livello è quello di JavaScript, in grado di fornire agli utenti una maggiore usabilità.

In conclusione possiamo affermare che stabilendo in modo chiaro come gli elementi interattivi di un dato sistema dovrebbero funzionare già dal livello più elementare, si otterrà allo stesso tempo una migliore e più chiara comprensione dei requisiti del progetto, dei cui benefici godranno molteplici persone.