Progressive Enhancement: migliorare l’esperienza utente per i browser moderni
Chiunque 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.
- Graceful degradation e progressive enhancement ottimo articolo datato ma sempre valido che evidenzia pregi e difetti dei due diversi approcci, con qualche esempio sul campo in grado di rendere bene l’idea.
- E se esistesse un solo browser ? Parlando di standard, questa settimana sul blog di HTML.it.
Un punto di vista alternativo dal blog di HTML.it. - Accessibilità e Usabilità: unobtrusive Javascript. Ottimo articolo di undolog.com che parlando di javascript non intrusivo affronta entrambi i temi con uno sguardo generale
- Neal Grosskopf ci parla di Hack CSS per i vari browser
Articoli della serie
Sempre su FrancescoGavello.it, gli altri post di questa serie.
- Progressive Enhancement (1): Selettori di attributo, selettori adiacenti e bordi arrotondati
- Progressive Enhancement (2): Pseudo elementi, ombre e elementi NOT
- Progressive Enhancement (3): colonne, effetti su testo e background multipli
foto: 713 Avenue
scritto da
Francesco Gavello
il 09 ottobre 2008
| 9 commenti
in: Web Design | xHTML & CSS
Continua a leggere
Share The Love!
Aiuta FrancescoGavello.it a crescere e ad avere sempre più articoli di qualità!
Scarica il mio eBook!
Lanciare, promuovere e mantenere un blog che funziona. Mica male!
Ti presento un eBook di 80+ pagine piene di risorse, idee, consigli e tool per costruire un grande il tuo grande blog partendo dalle fondamenta!
Scegli di ricevere gli articoli via feed RSS e potrai scaricare subito l'eBook direttamente dal tuo feedreader al fondo di ciascun articolo. Puoi anche seguirmi tramite email, se lo ritieni più comodo, per ricevere gli ultimi articoli direttamente nella tua casella di posta.
La tua email sarà mantenuta confidenziale e non divulgata a terzi per alcun motivo.
Sideblog
Link dalla blogosfera.
Intervistato da Splesh! insieme a Giuliano Ambrosio
Solo una veloce segnalazione. Stefano di Splesh! DigitalArt sta portando avanti da qualche tempo una serie di interviste rivolte ad alcuni elementi della blogosfera italiana legati al web design e alla...
Cache, Velocità e Motori di Ricerca
Non passa giorno senza un nuovo annuncio, o rumor, dedicato alla decisione di Google di cominciare a considerare la reattività di un sito web come effettivo parametro di valutazione per...
Automattic annuncia VaultPress (beta)
Il team dietro a WordPress, Automattic, ha annunciato lo sviluppo di VaultPress, un servizio di backup a 360° per blindare i contenuti del tuo blog o sito web. Attualmente il progetto...
Journalistics ci Insegna a Battere il Blocco dello Scrittore
Jeremy Porter per Journalistics ha stilato un ottimo articolo che cerca di fare il punto della situazione sul tanto temuto blocco dello scrittore. Stai fissano il monitor da una ventina di...
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.
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…
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)
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.
[...] Questo post fa parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“. [...]
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
[...] 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“. [...]
[...] è 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 [...]
[...] 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 [...]