Contenuto
- Adattati o muori
- Passi falsi di 'Graceful'
- L'aumento della tolleranza
- Gustoso a qualsiasi livello
- L'approccio content-out
- Limiti? Non ci sono limiti
- Miglioramento progressivo = eccellente servizio clienti
- All'altezza dell'occasione
Questo estratto è il Capitolo 1 di Adaptive Web Design di Aaron Gustafson, una guida sulla creazione di esperienze ricche con miglioramenti progressivi.
Se hai lavorato sul Web per un certo periodo di tempo, probabilmente hai già sentito (o anche usato) il termine "miglioramento progressivo". Come probabilmente saprai, è il gold standard per approcciare il web design. Ma cos'è veramente il miglioramento progressivo? Cosa significa? Come funziona? E come si inserisce nel nostro flusso di lavoro in un'epoca di linguaggi e browser in rapida evoluzione?
Queste sono tutte buone domande e sono proprio quelle a cui rispondo in questo libro. Come vedrai presto, il miglioramento progressivo non riguarda i browser e non riguarda la versione di HTML o CSS che puoi utilizzare. Il miglioramento progressivo è una filosofia volta a creare esperienze che siano al servizio dei tuoi utenti fornendo loro l'accesso ai contenuti senza restrizioni tecnologiche.
Indica i kumbayah, giusto? Sembra abbastanza sorprendente, ma suona anche come un sacco di lavoro. In realtà, non lo è. Una volta capito come funziona il miglioramento progressivo o, cosa più importante, perché funziona, vedrai che è abbastanza semplice.
Man mano che progrediamo in questo libro, vedrai numerosi modi pratici in cui possiamo utilizzare il miglioramento progressivo in combinazione con HTML, CSS e JavaScript per creare siti Web adattivi che non solo serviranno bene i tuoi utenti, ma forniranno loro un'esperienza fantastica, non importa quale browser o dispositivo stanno utilizzando per accedervi.
Ma prima di arrivare ai punti fondamentali dell'applicazione, dobbiamo discutere i come e i perché del miglioramento progressivo, le basi della filosofia.
Adattati o muori
E quando si arriva al punto, il miglioramento progressivo si basa su un principio: la tolleranza ai guasti.
La tolleranza agli errori è la capacità di un sistema di continuare a funzionare quando incontra un errore imprevisto. Questa proprietà consente a una lucertola di ricrescere la coda e al cervello di reindirizzare le connessioni neurali dopo un trauma. La natura si è dimostrata abbastanza abile nella tolleranza ai difetti e, seguendo il suo esempio, abbiamo incorporato questo concetto nelle nostre creazioni. Ad esempio, l'apprezzata "rete intelligente" può automaticamente evitare o mitigare le interruzioni di corrente rilevando (e in alcuni casi anticipando) i problemi del sistema.
Se utilizzi il Web, sia come tela professionale o semplicemente come consumatore occasionale, beneficerai sempre della tolleranza ai guasti. Non solo è integrato nei protocolli che instradano una richiesta dal tuo browser web al server che stai cercando di raggiungere, ma è cucito nel tessuto stesso dei linguaggi che hanno reso il Web quello che è oggi: HTML e CSS. Come prescritto dalle specifiche per queste due lingue, i browser devono ignorare tutto ciò che non capiscono. Questo semplice requisito rende possibile un miglioramento progressivo. Ma ne riparleremo tra un minuto.
Un altro aspetto interessante della tolleranza ai guasti è il modo in cui consente l'evoluzione. Di nuovo, guardando alla natura, puoi vederlo in aree in cui il clima o altri fattori ambientali hanno causato un cambiamento sufficiente che gli organismi sono costretti ad adattarsi, muoversi o morire.
Nel 1977, le Isole Galapagos hanno subito una siccità che ha ridotto drasticamente la disponibilità dei piccoli semi che hanno sostenuto la popolazione di fringuelli delle isole. L'ottantacinque per cento dei fringuelli delle isole furono spazzati via a causa della fame. Stranamente, furono gli uccelli più grandi a sopravvivere. Perché? Perché possedevano grandi becchi in grado di rompere i semi più grandi e duri che erano disponibili. In assenza di siccità, i fringuelli più grandi non possedevano alcun vantaggio distinto sui loro parenti più piccoli, ma quando l'ambiente cambiava, erano perfettamente posizionati per sfruttare la situazione e non solo sopravvissero alla siccità, ma trasmisero i loro geni a quello successivo. generazione di fringuelli che, come ci si aspetterebbe, tendevano ad essere più grandi.
HTML e CSS hanno molto in comune con i fringuelli delle Galapagos. Entrambi sono stati progettati per essere "compatibili con il futuro", il che significa che tutto ciò che scriviamo oggi funzionerà domani e il prossimo anno e tra dieci anni. Sono, in un certo senso, il fringuello perfetto: progettati per prosperare indipendentemente da come cambia l'ambiente di navigazione stesso.
Questi linguaggi sono stati progettati per evolversi nel tempo, quindi i browser web sono stati istruiti a rispettare le regole della tolleranza agli errori e ignorare tutto ciò che non capivano. Ciò offre a queste lingue lo spazio per crescere e adattarsi senza mai raggiungere un punto in cui il contenuto che racchiudono e lo stile non sarebbe più leggibile o correrebbe il rischio di causare il blocco del browser. La tolleranza agli errori consente di esplorare un sito Web basato su HTML5 in Lynx e ci consente di sperimentare le funzionalità CSS3 senza preoccuparci di danneggiare Internet Explorer 6.
Comprendere la tolleranza ai guasti è la chiave per comprendere il miglioramento progressivo. La tolleranza agli errori è il motivo per cui il miglioramento progressivo funziona e consente di garantire che tutti i contenuti forniti sul Web siano accessibili e disponibili a tutti.
Poiché la tolleranza agli errori è stata una componente di HTML e CSS sin dall'inizio, penseresti che noi (come professionisti del web) ne avremmo riconosciuto l'importanza e il valore nella creazione dei nostri siti web. Sfortunatamente, non è stato sempre così.
Passi falsi di 'Graceful'
Per quasi un decennio dopo la creazione del web, il mezzo si è evoluto rapidamente. In primo luogo, il National Center for Supercomputing Applications presso l'Università dell'Illinois, in breve NCSA, ci ha fornito Mosaic, il primo browser grafico, e HTML ha ottenuto l'elemento img. Poi è arrivato l'audio. Poi il video. Quindi interazione. È stata una sfida solo per stare al passo con la tecnologia in rapida evoluzione e nella nostra fretta di stare al passo, abbiamo perso di vista la tolleranza ai guasti e abbiamo iniziato a costruire secondo l'ultima moda. Alcuni dei nostri siti erano costituiti interamente da mappe di immagini a pagina intera sovrapposte a file JPEG dal design elegante. Altri sono diventati santuari di Flash e Director di Macromedia. Pochi erano utilizzabili e ancora meno erano accessibili.
Questa era ha dato origine alla filosofia di sviluppo nota come "degrado aggraziato".
Il grazioso degrado era l'equivalente filosofico della sorella superficiale e ossessionata dall'immagine della tolleranza ai difetti che è fissata con le ultime mode e frequenta solo i ragazzi fighi. Applicato al Web, il degrado grazioso equivaleva a offrire ai browser più recenti e migliori l'esperienza di un pasto completo, mentre lanciava alcuni frammenti alla gente triste abbastanza sfortunata da utilizzare un browser più vecchio o meno capace.
Durante il periodo di massimo splendore del degrado grazioso, ci siamo concentrati sull'assicurarci che il nostro sito funzionasse nei browser moderni con la maggiore quota di mercato. Il test per il supporto nei browser meno recenti, ammesso che lo facessimo, è stato relegato alla fine dell'elenco delle priorità.
Il nostro ragionamento era semplice: HTML e CSS sono a tolleranza di errore, quindi almeno l'utente otterrà qualcosa, che (ovviamente) ignorava il fatto che JavaScript, come altri linguaggi di programmazione, non è a tolleranza di errore (cioè, se si tenta di utilizzare un metodo che non esiste, genera un errore); invece, gli script e le applicazioni che utilizzano JavaScript devono essere scritti in modo tale da poter recuperare da un errore (magari provando un metodo di esecuzione alternativo) o prevedere il potenziale di un errore e uscire prima che si verifichi.
Ma quasi nessuno lo stava facendo perché il nostro obiettivo era sempre in avanti mentre cercavamo il prossimo giocattolo brillante con cui potevamo giocare. Pensavamo che i browser meno recenti avrebbero avuto un'esperienza inferiore, quindi abbiamo giustificato che non valeva la pena spendere il tempo per assicurarci che fosse almeno uno decente e privo di errori. Certo, avremmo affrontato gli errori più eclatanti, ma oltre a questo, gli utenti erano lasciati a se stessi. (Purtroppo, alcuni di noi sono addirittura arrivati al punto di bloccare attivamente i browser che non volevamo preoccuparci di supportare.)
L'aumento della tolleranza
Nel corso del tempo, le persone intelligenti che lavorano sul Web hanno iniziato a rendersi conto che l'enfasi del degrado grazioso sull'immagine rispetto alla sostanza era completamente sbagliata. Hanno visto che un grazioso degrado stava minando direttamente sia la disponibilità dei contenuti che l'accessibilità. Questi designer e sviluppatori hanno capito che il Web era destinato alla distribuzione e al consumo di contenuti - parole, immagini, video, ecc. - e hanno iniziato a basare tutte le loro decisioni di markup, stile e interazione su come ciascuna scelta avrebbe influenzato la disponibilità di quel contenuto.
Riorientando i loro sforzi, gli sviluppatori hanno iniziato ad abbracciare la natura a tolleranza di errore di HTML e CSS, nonché il rilevamento delle funzionalità basato su JavaScript per arricchire l'esperienza dell'utente. Cominciarono a rendersi conto che una grande esperienza non doveva essere una proposta tutto o quasi (come nel caso di un grazioso degrado), ma invece le tecnologie web potevano essere applicate come livelli che si sarebbero costruiti l'uno sull'altro per creare esperienze più ricche e interazioni; Steve Champeon del Web Standards Project ha catturato perfettamente l'essenza di questa filosofia quando l'ha battezzata "miglioramento progressivo" (hesketh.com/publications/inclusive_web_design_for_the_future/).
Gustoso a qualsiasi livello
Un'analogia che mi piace usare per il miglioramento progressivo è la nocciolina M&M. Al centro di una nocciolina M&M c'è, beh, l'arachide. L'arachide stessa è una ricca fonte di proteine e grassi; un ottimo cibo che tutti possono gustare (tranne quelli con un'allergia, ovviamente). In un senso simile, il contenuto del nostro sito web dovrebbe essere fruibile senza abbellimenti.
Spalma quell'arachide con un po 'di cioccolato e crei una prelibatezza appetitosa che, come le arachidi, ha anche un ottimo sapore. Allo stesso modo, il contenuto ben organizzato e organizzato utilizzando i CSS è spesso più facile da capire e sicuramente più divertente da consumare.
Ricoprendo la nostra confezione di nocciola con un guscio di caramelle zuccherine, l'esperienza di questo trattamento è migliorata ancora una volta. In un senso simile, possiamo coronare i nostri bellissimi progetti con coinvolgenti interazioni guidate da JavaScript che facilitano il nostro movimento attraverso il contenuto o lo danno vita in modi unici e divertenti.
Questa è, ovviamente, una semplificazione eccessiva del miglioramento progressivo, ma ti dà un'idea generale di come funziona. Le tecnologie applicate come livelli - HTML, quindi HTML e CSS, quindi HTML, CSS e JavaScript - possono creare esperienze diverse, ognuna ugualmente valida (e gustosa). E al centro di tutto c'è il dado: ottimi contenuti.
L'approccio content-out
Il web è tutto sulle informazioni. Ogni giorno, su ogni sito, vengono diffuse, richieste e raccolte informazioni. Lo scambio di informazioni è stato fondamentale per la crescita del Web e senza dubbio continuerà a guidare la sua continua espansione in quasi tutti gli aspetti della nostra vita quotidiana.
In quanto aspetto così importante del web, la promozione dello scambio di informazioni, dovrebbe essere il nostro obiettivo principale nella costruzione di qualsiasi interfaccia web. Il miglioramento progressivo garantisce che tutto il contenuto (vale a dire le informazioni contenute in un sito Web) sia disponibile e utilizzabile da chiunque, indipendentemente dalla sua posizione, dal dispositivo che sta utilizzando per accedere a tali informazioni o dalle capacità del programma che è utilizzando per accedere a quel contenuto. Allo stesso modo, anche i meccanismi di raccolta dei contenuti (moduli web, sondaggi e simili) traggono grande vantaggio dal miglioramento progressivo perché garantisce che siano universalmente utilizzabili e, quindi, migliori nel loro lavoro.
Fondamentalmente, il miglioramento progressivo riguarda l'accessibilità, ma non nel senso limitato in cui il termine è usato più spesso. Il termine "accessibilità" è tradizionalmente utilizzato per indicare la messa a disposizione di contenuti per individui con "bisogni speciali" (persone con motilità limitata, disabilità cognitive o disabilità visive); il miglioramento progressivo fa un ulteriore passo avanti riconoscendo che tutti abbiamo esigenze speciali. Le nostre esigenze speciali possono anche cambiare nel tempo e in contesti diversi. Quando carico un sito Web sul mio telefono, ad esempio, sono visivamente limitato dalla risoluzione dello schermo (soprattutto se utilizzo un browser che incoraggia lo zoom) e sono limitato nella mia capacità di interagire con pulsanti e collegamenti perché sto navigando con i polpastrelli, che sono molto più grandi e meno precisi di un cursore del mouse.
Come abbiamo visto, i siti creati con un gradevole degrado come principio guida possono funzionare alla grande nei browser moderni, ma risultano insufficienti se visualizzati in qualcosa di meno dei browser più recenti e migliori per i quali sono stati creati. In un senso non web, mette l'utente in una posizione in cui, come un bambino in un parco di divertimenti, potrebbe perdere una grande esperienza perché non è abbastanza alta per guidare il Tilt-a-Whirl. Allo stesso modo, gli utenti senza il browser "giusto" probabilmente riscontreranno problemi (ed errori) durante l'accesso ai contenuti del sito, se possono accedervi.
Al contrario, un sito web costruito seguendo la filosofia del miglioramento progressivo sarà utilizzabile da chiunque su qualsiasi dispositivo, utilizzando qualsiasi browser. Un utente su un browser di testo come Lynx non avrà necessariamente la stessa esperienza di un utente che naviga con l'ultima versione di Safari, ma la chiave è che avrà un'esperienza positiva piuttosto che nessuna esperienza. Il contenuto del sito web sarà disponibile per lei, anche se con meno campane e fischietti, cosa che non è garantita con un grazioso degrado.
Sebbene filosoficamente diversi, da un punto di vista pratico il miglioramento progressivo e il degrado aggraziato possono sembrare abbastanza simili, il che può creare confusione. Per mettere a fuoco le differenze, mi piace ridurre la relazione tra le due filosofie a qualcosa di simile alla logica di test standardizzata: tutte le esperienze che vengono create utilizzando il miglioramento progressivo si degraderanno con grazia nei browser più vecchi, ma non tutte le esperienze costruite a seguito di un degrado grazioso lo sono progressivamente migliorato.
Limiti? Non ci sono limiti
Durante il periodo di massimo splendore del degrado aggraziato, i siti web sono diventati molto simili al parco di divertimenti di cui ho parlato prima: "devi essere così in alto per cavalcare". Il web era (e, purtroppo, lo è ancora) disseminato di siti "visualizzati al meglio in Netscape Navigator 4" e simili. Con l'aumento del miglioramento progressivo e degli standard web in generale, ci siamo allontanati da quella pratica, ma poiché più siti hanno iniziato ad abbracciare la tecnica JavaScript nota come Ajax, il fenomeno è riemerso e molti siti hanno iniziato a richiedere JavaScript o anche browser specifici (e versioni di browser ) per visualizzare i loro siti. Era il sequel del film di serie B del web: Il ritorno dei metodi che rompono il browser e non sono amichevoli per gli utenti che pensavamo di aver lasciato indietro.
Nel corso del tempo, il fervore per l'Ajax si è placato e abbiamo iniziato a costruire (e in alcuni casi ricostruire) siti basati su Ajax seguendo la filosofia del miglioramento progressivo. Poi è arrivata la vetrina HTML5 di Apple con le sue transizioni e animazioni CSS ottimizzate. Quando abbiamo finito di pulire la bava dalle nostre scrivanie, molti di noi hanno iniziato a incorporare questi nuovi giocattoli scintillanti nel nostro lavoro, o per la nostra ansia di giocare con queste caratteristiche o per ordine dei nostri clienti. Di conseguenza, i siti hanno iniziato a spuntare che limitavano gli utenti richiedendo una moderna variante di Webkit per funzionare. (Accidenti a quasi l'80% dei browser che non lo includevano.)
(Nota: Webkit è il motore che alimenta una serie di browser e applicazioni. Ha un eccellente supporto CSS e vanta il supporto per alcune straordinarie funzionalità CSS (come le animazioni basate su CSS) che devono ancora essere abbinate ad altri browser. Webkit può essere si trova in Safari di Apple, nei browser Chrome e Android di Google, nel browser Symbian S60, Shiira, iCab, OmniWeb, Epiphany e in molti altri browser. Costituisce la base per il sistema operativo WebOS di Palm ed è stato integrato in numerosi prodotti Adobe, incluso il loro Adobe Integrated Runtime (AIR) e la suite di applicazioni CS5.)
Quando l'auto-realizzazione ha colpito quella richiesta di tecnologie che non sono universalmente disponibili è andata contro il progressivo miglioramento, alcuni web designer e sviluppatori hanno dichiarato la filosofia "limitante" e hanno iniziato a tornare indietro verso un grazioso degrado. Il miglioramento progressivo, hanno ritenuto, li ha costretti a concentrarsi sulla fornitura di browser meno recenti con cui, francamente, non era altrettanto divertente lavorare. Quello che non riuscirono a realizzare, tuttavia, era che il miglioramento progressivo non li limitava; la loro comprensione della filosofia era.
Il miglioramento progressivo non riguarda i browser. Si tratta di creare esperienze che servono i tuoi utenti dando loro accesso ai contenuti senza limitazioni tecnologiche. Il miglioramento progressivo non richiede di fornire la stessa esperienza in browser diversi, né ti impedisce di utilizzare le tecnologie più recenti e migliori; ti chiede semplicemente di onorare i tuoi contenuti (ei tuoi utenti) applicando le tecnologie in modo intelligente, strato su strato, per creare un'esperienza straordinaria. Browser e tecnologie andranno e verranno. Unire il miglioramento progressivo con il tuo desiderio di essere innovativo e fare cose incredibili nel browser è del tutto possibile, a patto che tu sia intelligente nelle tue scelte e non perdi di vista i tuoi utenti.
Miglioramento progressivo = eccellente servizio clienti
Immagina, per un momento, di essere il cameriere di un bel ristorante. Il tuo lavoro (e il tuo suggerimento) dipende dalla tua attenzione ai dettagli e dal modo in cui servi i tuoi clienti. Una misura della tua attenzione è quanto vuoto lasci che il bicchiere d'acqua di un cliente diventi prima di riempirlo. Un cameriere distratto potrebbe lasciare il bicchiere vuoto per diversi minuti prima di riempirlo. Qualcuno leggermente più sulla palla potrebbe lasciarla colpire solo a metà strada prima di rabboccarla. Un cameriere che eccelle nel soddisfare le esigenze di bevande dei suoi clienti non solo si assicurerebbe che il livello dell'acqua non scenda mai nemmeno così lontano, ma riuscirebbe persino a riempire il bicchiere senza che il cliente se ne accorga. Quali clienti pensi che siano i più soddisfatti? E, se giudichiamo esclusivamente in base a un'idratazione soddisfacente, chi pensi che possa ottenere il consiglio migliore?
Come web designer e sviluppatori, dovremmo sforzarci di essere bravi nel nostro lavoro quanto quel cameriere attento e discreto, ma non è un compito semplice. Proprio come un cameriere non ha idea se un cliente che entra dalla porta richiederà ricariche frequenti o poche, non abbiamo modo di conoscere le esigenze di un particolare utente quando arriva sul nostro sito. Invece, dobbiamo alzarci per soddisfare tali esigenze. Se siamo davvero bravi, possiamo farlo senza che i nostri clienti si rendano conto che stiamo facendo considerazioni speciali per loro. Per fortuna, con il miglioramento progressivo dell'approccio incentrato sull'utente e sul contenuto (in contrasto con il più recente approccio del browser del degrado grazioso), questo è facilmente realizzabile.
All'altezza dell'occasione
Quando ti avvicini a un progetto da una prospettiva di miglioramento progressivo, il tuo obiettivo principale è il contenuto e tutto si basa su questo. È un approccio a più livelli che nasce per soddisfare le "esigenze" di un utente prestando attenzione al contesto in cui si accede a una pagina (una combinazione delle capacità del browser e, in misura minore, del mezzo in cui opera) e adattando il esperienza utente di conseguenza.
L'esperienza di base è sempre sotto forma di testo. Nessuna tecnologia specifica plasma questo livello, invece il suo successo o fallimento dipende interamente dalle capacità del copywriter. Una copia chiara e ben scritta ha il supporto universale del dispositivo e fa miracoli per migliorare l'accessibilità del contenuto agli utenti. Inoltre, indipendentemente da come il linguaggio HTML si evolve nel tempo, l'imperativo che i browser tollerino i guasti nel trattamento della sintassi HTML garantisce che, qualunque cosa accada, il contenuto che descrive sarà sempre disponibile nella sua forma più elementare: come testo.
Il secondo livello di esperienza deriva dalla semantica del linguaggio HTML stesso. I vari elementi e attributi utilizzati in una pagina forniscono un significato e un contesto aggiuntivi alle parole scritte. Indicano nozioni importanti come l'enfasi e forniscono informazioni supplementari, come la fonte di una citazione o il significato di una frase sconosciuta.
Il terzo livello di esperienza è quello audiovisivo, espresso attraverso l'utilizzo di CSS e l'utilizzo di immagini, audio e video inline. Come con l'HTML, le implementazioni di CSS all'interno di un browser sono necessariamente a tolleranza di errore, quindi i browser ignorano ciò che non capiscono; un fatto che rende possibile il miglioramento progressivo dei CSS.
Il quarto livello di esperienza è quello interattivo. Nel mondo degli standard, questo livello si basa quasi interamente su JavaScript, sebbene l'interazione sul web sia stata realizzata tramite altre tecnologie come Flash o anche applet Java.
Il livello finale viene realizzato attraverso l'applicazione della semantica avanzata e delle migliori pratiche contenute e utilizzate insieme alle specifiche WAI-ARIA (Accessible Rich Internet Applications) della Web Accessibility Initiative. Questi miglioramenti alla pagina riprendono da dove la specifica HTML è stata tradizionalmente interrotta (sebbene HTML5 includa alcune delle semantiche ARIA migliorate nel suo lessico).
Questi livelli di esperienza (che possono anche essere pensati come livelli di supporto), se impilati l'uno sull'altro, creano un'esperienza che si arricchisce ad ogni passaggio, ma non sono affatto le uniche esperienze che verrà vissuta da un utente. In realtà, sono semplicemente pietre miliari identificabili nel percorso dall'esperienza più elementare a quella più eccezionale. L'esperienza effettiva di un utente può variare in uno o più punti lungo il percorso e va bene; fintanto che teniamo a mente il miglioramento progressivo, i nostri clienti saranno ben serviti.
