Progressive Enhancement: migliorare l’esperienza utente per i browser moderni

scritto da Francesco Gavello [+] il 09 ottobre 2008 | 9 Commenti in: Web Design & UX

Mattoncini LEGOChiunque lavori con il web sa perfettamente che più si cerca di diffondere dei contenuti ad un maggior numero di utenti, più le cose si complicano.

Lavorano contro il coder le incompatibilità tra browser, le differenti modalità di resa e i conosciuti vincoli di Internet Explorer. Tanti grattacapi che portano a sacrificare -in nome della stabilità del progetto- una dopo l’altra le caratteristiche non fondamentali, entrando in un progressivo  “livellamento” verso il basso che penalizza soprattutto gli utenti dotati dei più recenti browser.

Un panorama dove l’avanzamento della qualità dei layout e dell’uso delle reali possibilità offerte da standard CSS3 e simili è purtroppo caratterizzato dall’andamento del “browser più lento”, come nel tipico esempio del battaglione in marcia.

Eppure, qualcosa per agevolare la navigazione a chi se lo può permettere, si può realmente fare. E lo si può fare senza compromettere alcunché verso browser più vecchi e in maniera modulare.

Mantenere la propria sanità mentale e realizzare un progetto in grado di adattarsi al meglio sul mezzo in cui viene presentato ?

Si. La risposta è il Progressive Enhancement. (Hurrà! :) ).

Di progressive enhancement (e del suo diretto opposto, la graceful degradation) si parla oramai da discreto tempo e la realtà è che questi due termini non nascondono nulla di trascendentale.

  • Progressive Enhancement: Il codice viene scritto inizialmente nella sua forma più essenziale e compatibile, aggiungendo arricchimenti progressivi (enhancements) che vengono riconosciuti ed interpretati di volta in volta solo dai browser più recenti.
  • Graceful Degradation: L’esatto opposto, sino ad ora praticamente una prassi in ambito lavorativo. Prima si completa il progetto alla sua massima espressione e solo dopo lo si testa scendendo di browser in browser, in modo da valutarne una degradazione accettabile anche su device più datati.

Miglioramento progressivo e degradazione ottimale rappresentano quindi due facce della stessa medaglia, due modi di gestire il proprio progetto (il primo sin dalle fasi iniziali di sviluppo) e se ben controllate permettono di fare vincere:

  • gli sviluppatori, che contengono i tempi scrivendo del codice oculato e assicurano una compatibilità modulare puntata sempre verso la resa migliore
  • gli utenti, che in maniera trasparente (ergo senza muovere un dito) beneficiano della migliore soluzione disponibile per fruire dei contenuti proposti

Vorrei iniziare a parlare nei prossimi post di alcune tecniche di progressive enhancement affidabili che potete mettere in pratica sin da ora per avvalervi di tutto ciò che è un miglioramento nella user experience nei browser più moderni.

Sia che siate blogger senza esperienza nel coding avanzato dei vostri temi o che siate pane e (x)HTML a pieno ritmo, potreste scoprire come ho fatto io che con i giusti metodi si ottengono risultati notevoli per tutti.

Che ne dite ? :)

Un paio di letture correlate

Qualcos’altro da leggere riguardo al Progressive Enhancement e la Graceful Degradation su questi altri ottimi articoli italiani.

Articoli della serie

Sempre su FrancescoGavello.it, gli altri post di questa serie.

foto: 713 Avenue

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

9 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Nicolo Fasce ha detto:

    Ottimo articolo, complimenti.

    Mentre lo leggevo pensavo: ma le condizioni nel codice che distinguono i diversi browsers in cosa rientrano? Nel Progressive Enhancement o nella Graceful Degradation?

    Secondo me sono una terza categoria.

    Grazie ai fogli di stile multipli e alle condizioni, infatti, puoi adattare il codice ai vecchi browser senza essere penalizzato sulle pagine realizzate al top.

    Nel momento in cui i vecchi browser non verranno più utilizzati non dovrai far altro che eliminare la condizione che punta al foglio di stile per quel determinato browser.

    Cosa ne pensi?
    Resto in attesa delle tue prossime analisi. ;)

    Rispondi
  2. Francesco Gavello ha detto:

    Giusta osservazione ;)

    Imho:

    - Se aggiungono qualcosa di non fondamentele, solo a browser in grado di superare la condizione allora si, ricadiamo nella categoria di arricchimenti progressivi.

    - Se invece servono per non mandare all’aria tutto il layout allora direi che stiamo parlando di semplice, buona scrittura :)

    Riconosco che sia alla fine un concetto abbastanza variabile quale sia la condizione minima da “arricchire” e quale invece una funzionalità indispensabile…

    Rispondi
  3. Felter Roberto ha detto:

    A mio parere le condizioni che cita nicolò sono un sistema di applicazione di entrambi due metodi. puoi avere tre versioni diverse selezionate dai css condizionali, ma quale delle tre versioni sviluppi per primo? quale è la principale su cui le altre poi intervengono? Quale è la condizione di “default”? Da quello capisci quale metodo utilizzi (sempre che ne utilizzi uno ovviamente) :D

    Rispondi
  4. Nicolò Fasce ha detto:

    Aggiungo un pensiero in riferimento al commento di Roberto.

    Subito di primo impatto ho valutato le due metodologie presentate da Francesco pensando agli hacks che modificano il codice nello stesso foglio di stile.

    Per quello ho valutato gli if (nei CSS) come una terza categoria, perchè non modificano il codice del CSS di partenza, se non con un rimando al foglio di stile dedicato, che viaggia in parallelo.
    Quindi non si “migliora”, né si “peggiora”, semplicemente sono “mondi paralleli”.

    Comunque, l’aspetto importante che viene fuori dai nostri pensieri credo che sia la modularità del progetto.

    Un codice flessibile, che può essere integrato da tasselli dedicati ai diversi browser, è la soluzione migliore per un buon progetto, qualunque metodologia si usi. ;)

    Rispondi
  5. [...] Questo post fa parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“. [...]

    Rispondi
  6. Francesco Gavello ha detto:

    Neanche a farlo apposta, è di oggi l’articolo del blog di HTML.it che parla di Hack CSS per i vari browser, riprendendo un post di Neal Grosskopf.

    Da leggere se volete approfondire l’argomento :)

    Rispondi
  7. [...] Continua l’appuntamento con le tecniche di progressive enhancement che sono disponibili sin da ora per migliorare l’esperienza utente nella costruzione vostri layout. Potete leggere l’introduzione alla serie e tutte le altre puntate disponibili all’articolo principale “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“. [...]

    Rispondi
  8. [...] è la terza parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“, dedicata alla tecniche CSS3 (e non solo) che puoi utilizzare a partire da ora per [...]

    Rispondi
  9. [...] articolo fa parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“. La prima, seconda e terza parte hanno già visto analizzati i più interessanti selettori [...]

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!