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 è quello di ridurre la complessità, e ridurre il potenziale di errore in ogni fase del processo di creazione.

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 la sua pagina Wikipedia che lo spiega come un metodo di contenuto completamente accessibile, rendering di funzionalità avanzate solo se supportate dal browser.

È facile comprendere il miglioramento progressivo, ma non altrettanto facile da applicare direttamente al lavoro di progettazione. Mi piacerebbe coprirne alcuni migliori pratiche per il miglioramento progressivo nei progetti del mondo reale a aiutare i progettisti a pensare in modo più sostenibile al loro flusso di lavoro.

1. Comprensione del miglioramento progressivo

La teoria del miglioramento progressivo raccomanda di inizia con un semplice sito web che funziona in tutti i browser, facendolo accessibile per ogni visitatore. Quindi aggiungi funzionalità quando possibile.

Questo è l'opposto di una degradazione 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 Elenco a parte articolo sostiene che il miglioramento progressivo è content-prima con stili e 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
Users' preferenze del browser deve essere rispettato
Contenuto e funzionalità di base dovrebbero essere disponibile per tutti gli utenti
JavaScript discreto viene caricato solo in ambienti che possono supportarlo

Le restrizioni tecnologiche nello sviluppo del front-end sono determinate principalmente dalla compatibilità del browser. Il miglioramento progressivo ti riporta alle basi pensando a come la pagina web più semplice dell'osso nudo potrebbe sembrare. 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 basare i giudizi sul pubblico di destinazione del tuo sito web.

2. Subsistence In Stylesheets

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

Invece di cercare metodi di fallback per mantenere queste nuove funzionalità, preoccupati prima di tutto strutture di layout appropriate.

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

Prendi ad esempio questo JSFiddle che usa i float con due barre laterali (.fisso) e un'area del contenuto del fluido (.fluido). 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 avere la colonna del contenuto (.fluido) appaiono 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:

Completamente semantico e valido codice
UN esperienza coerente per tutti

Il modo più semplice per raggiungere questi obiettivi è quello di iniziare dal nulla e lavorare, come la maggior parte dei sostenitori dei miglioramenti progressivi lo raccomanderebbero.

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

Vale anche la pena considerarlo a che punto lasci il 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?

Semplicemente scrivi il codice che funziona senza esso, e considera il moderno CSS come un progresso progressivo. Questa è la bellezza della metodologia di miglioramento progressivo.

Non hai bisogno di fallback, perché lo sei basti pensare che nulla è 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.

Devi considerare come 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 operare 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 i contenuti all'interno di un iframe.

Inoltre, quando crei le schede JavaScript, è una buona idea usa 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 copre 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 href il valore è vuoto, perché tutto viene caricato tramite JavaScript con il metodo preventDefault ().

Invece, sarebbe saggio impostare il href proprietà a puntare a una pagina diversa dove il contenuto potrebbe caricare in modo naturale, ma il visitatore vede solo quella pagina quando JavaScript è disabilitato.

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

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