Best practice per il miglioramento progressivo nel Web design

La creazione di siti Web di costruzione è incredibilmente complessa con molte parti in rapida evoluzione. L'obiettivo della comunità di web design è di ridurre la complessità e ridurre il potenziale di errore in ogni fase del processo di creazione.

Il miglioramento progressivo è una tale idea nel web design che mira a ridurre gli errori e fornire un'esperienza utente coerente su tutta la linea. Il concetto ha una sua pagina Wikipedia che lo spiega come un metodo di contenuto completamente accessibile, il rendering di funzionalità avanzate solo se supportato dal browser.

È facile comprendere il miglioramento progressivo, ma non altrettanto facile da applicare direttamente al lavoro di progettazione. Mi piacerebbe illustrare alcune best practice per il miglioramento progressivo in progetti reali per aiutare i progettisti a pensare in modo più sostenibile sul loro flusso di lavoro .

1. Comprensione del miglioramento progressivo

La teoria del miglioramento progressivo consiglia di iniziare con un semplice sito Web che funziona in tutti i browser, rendendolo accessibile per ogni visitatore . Quindi aggiungi funzionalità quando possibile.

Questo è l'opposto del degrado elegante che include tutte le funzionalità di default, quindi degrada quando qualcosa non funziona.

Il miglioramento progressivo è migliore per l'esperienza utente complessiva, perché al suo interno carica solo gli elementi necessari . Ogni browser Web può supportare il testo (e di solito le immagini). Senza i CSS questa informazione sembrerà insipida e insapore, ma sarà accessibile.

Questo articolo di List Apart sostiene che il miglioramento progressivo è il contenuto prima di tutto con gli stili e i componenti dinamici aggiunti in seguito . Il contenuto in HTML semantico dovrebbe essere consegnato prima di ogni altra cosa.

I CSS avanzati e JavaScript che usiamo oggi sono ampiamente supportati, ma se vogliamo seguire i principi del miglioramento progressivo, dovrebbero essere considerati dei lussi.

Ecco una carrellata generale delle principali funzionalità di miglioramento progressivo, che dovresti prendere in considerazione:

• Markup semantico per tutti i contenuti
• Le preferenze del browser degli utenti devono essere rispettate
• Contenuto e funzionalità di base dovrebbero essere disponibili per tutti gli utenti
• JavaScript discreto viene caricato solo in ambienti che possono supportarlo

Le limitazioni tecnologiche nello sviluppo del front-end sono determinate principalmente dalla compatibilità del browser. Il miglioramento progressivo ti riporta alle nozioni di base pensando a come potrebbe apparire la pagina web più semplice dell'osso nudo . Da lì, puoi pianificare funzionalità più avanzate, come le proprietà CSS3.

Ma che dire dei browser che non supportano i moderni CSS3? È qui che entrano in gioco siti come Can I Use. Dovresti decidere quali caratteristiche vale la pena implementare e formulare giudizi basati sul pubblico target del tuo sito web .

2. Sottosistenza in fogli di stile

La maggior parte dei browser oggi supporta tutte le proprietà di base di cui hai bisogno. Ma il CSS3 avanzato è ancora un problema per gli utenti precedenti e il miglioramento progressivo offre una soluzione.

Invece di cercare metodi di fallback per mantenere queste nuove funzionalità, preoccupatevi innanzitutto delle strutture di layout appropriate .

Scrivi marcature semantiche HTML e CSS che funzionano con il maggior numero possibile di browser attivi (il supporto per browser antichi come il supporto per IE5 non è necessario).

Prendiamo ad esempio questo JSFiddle che usa float con due barre laterali ( .fixed ) e un'area di contenuto del fluido ( .fluid ). Se elimini tutti i CSS e riesegui il codice, noterai che tutto si accumula bene con la prima colonna, poi la seconda e infine l'ultima.

Alcuni sviluppatori preferirebbero che la colonna del contenuto ( .fluid ) appaia per prima nell'HTML. È qui che entra in gioco il miglioramento progressivo e le soluzioni CSS alternative diventano valide.

I due obiettivi principali del tuo HTML sono i seguenti:

• Codice completamente semantico e valido
• Un'esperienza coerente per tutti

Il modo più diretto per raggiungere questi obiettivi è quello di iniziare dal nulla e lavorare, come raccomanderebbero i sostenitori della promozione progressiva.

Se il tuo codice sembra buono con CSS disabilitati e abilitati, allora offre una soluzione ragionevole per tutti.

Vale anche la pena considerare in quale momento si rinuncia a supporto per qualcosa . Microsoft ha già abbandonato il supporto principale per IE6, quindi gli utenti che eseguono quel browser potrebbero non valere la pena.

Ma c'è ancora una grande domanda: se un browser non supporta il mio moderno CSS, cosa dovrei fare?

Basta scrivere un codice che funzioni senza di esso e considerare il CSS moderno come un miglioramento progressivo. Questa è la bellezza della metodologia di miglioramento progressivo.

Non hai bisogno di fallback, perché in pratica stai assumendo che nulla sia supportato di default .

I metodi di miglioramento progressivo servono a rendere il sito utilizzabile anche nei casi in cui qualcosa non è supportato, ma se è supportato, tanto meglio.

È necessario considerare in che modo il contenuto scorre effettivamente senza CSS . Ad esempio, quando disattivo i CSS sul sito Web di Transmit, il contenuto scorre ancora in modo organico lungo la pagina.

Sì, è brutto, e sì, sembra che abbiamo perso vent'anni di progressi ... ma funziona .

3. Gestione di JavaScript

Vale la pena ricordare che ogni problema di JavaScript che si può imbattersi durante il processo di sviluppo è complicato e unico. Quando si crea un nuovo progetto con miglioramento progressivo, è necessario elencare tutte le funzionalità richieste basate su JS e considerare come potrebbero funzionare senza JavaScript .

Ciò richiederà molte ricerche online per trovare soluzioni valide. Aaron Gustafson ha scritto un ottimo post sul blog con soluzioni a vari problemi, come sostituire Ajax con un meta refresh per contenuti all'interno di un iframe.

Inoltre, quando crei le schede JavaScript, è consigliabile utilizzare i link di ancoraggio con valori ID reali . In questo modo, quando JavaScript è disabilitato, puoi comunque avere le schede visibili e accessibili tramite il valore di ancoraggio. Aaron ha scritto un altro pezzo su A List Apart che tratta una panoramica più generale di come dovresti pensare a questi problemi.

Ecco un altro esempio. Supponiamo che tu abbia un link che carica il contenuto in modo dinamico. Il valore href è vuoto, perché tutto viene caricato tramite JavaScript con il metodo preventDefault ().

Invece, sarebbe saggio impostare la proprietà href in modo che punti a una pagina diversa in cui il contenuto possa essere caricato in modo naturale, ma il visitatore vede solo quella pagina quando JavaScript è disabilitato .

Il miglioramento progressivo riguarda qualcosa di più di JavaScript, ma con lo sviluppo del web che aumenta ulteriormente ogni anno, non c'è dubbio che JavaScript abbia un ruolo significativo.

Operare partendo dal presupposto che tutto è stato disabilitato, e scala da lì . Ciò potrebbe includere problemi con i widget incorporati che sono fuori dal tuo controllo, il

Pensa anche alle funzionalità JavaScript che non dispongono del supporto completo del browser . Ciò include l'API fetch, l'API push, la sintassi della funzione freccia o persino i browser senza supporto per le librerie moderne come jQuery.

Ogni funzione richiede test individuali con una soluzione individuale.

L'essenza del JavaScript progressivamente migliorato è creare contenuti che funzionino senza script . Ciò può portare a un'esperienza utente rudimentale, ma va bene purché il sito Web sia utilizzabile e il contenuto sia accessibile.

Se si desidera eseguire test dal vivo, in genere è possibile disabilitare CSS e JavaScript in tutti i principali browser per verificare il rendimento del sito Web. Vale anche la pena considerare l'utilizzo di estensioni come A-Tester per la conformità alle WCAG.

JavaScript con miglioramento progressivo è un argomento enorme. Ecco alcuni post per aiutarti a scavare più a fondo:

• Progressive Enhancement! = "No JavaScript"
• L'interazione è la chiave: Progressive Enhancement e JavaScript
• Miglioramento progressivo: riguarda il contenuto
• Come applicare il miglioramento progressivo quando JavaScript sembra un requisito

Dove Progressive Enhancement Falls Short

Sebbene il miglioramento progressivo sia un'idea brillante per quasi tutti i tipi di siti Web moderni, potrebbe non essere applicabile ai progetti che mirano a spingere i limiti della tecnologia web .

Ad esempio, questa metodologia non è una buona soluzione per le applicazioni Web che funzionano esclusivamente sulle chiamate Ajax. È una buona scelta per l'accessibilità? No certo che no. Ma se così fosse, la maggior parte dei tutorial di Codrops non esisterebbe nemmeno. Devi ricordare il pubblico di destinazione .

Un sito web aziendale probabilmente non ha il pubblico interessato alle vistose proprietà di prospettiva CSS3, ma gli sviluppatori web possono essere il pubblico perfetto per tali funzionalità avanzate.

Il miglioramento progressivo non è sufficiente per le applicazioni web a cui semplicemente non interessa tornare indietro nel tempo . Mi rendo conto che queste applicazioni web sono poche e distanti tra loro, ma gli sviluppatori amano il progresso e in alcuni casi può essere ragionevole andare avanti con la nuova tecnologia lasciandosi alle spalle i ritardatari.

Sono un sostenitore del miglioramento progressivo (o persino del degrado gradevole, a tua scelta) per i progetti web generali. Ma mi rendo anche conto che non è la soluzione perfetta per tutto. In realtà, non esiste una soluzione perfetta. Tutto si riduce alle esigenze del pubblico e agli obiettivi del progetto.

Ulteriori letture

Se sviluppi costantemente progetti Web, dovresti considerare l'applicazione di un miglioramento progressivo al tuo flusso di lavoro. È molto più facile di quanto sembri a prima vista, e tutto inizia con i fondamentali. La maggior parte degli argomenti che riguardano il miglioramento progressivo richiedono solo pratica e test. Prova i suggerimenti di questo articolo e scopri cosa funziona meglio per il tuo flusso di lavoro.

Se vuoi saperne di più sul miglioramento progressivo, controlla questi post correlati:

• Comprensione del miglioramento progressivo
• Miglioramento progressivo: che cos'è e come utilizzarlo?
• Backlash di dipendenza da JavaScript: miglioramento progressivo di Myth-Busting