I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Il miglioramento progressivo è una tecnica che aiuta a garantire che il software sia affidabile e accessibile. Seguendolo, puoi assicurarti che quante più persone possibile saranno in grado di utilizzare il tuo sito web o la tua app.

Inizia con una versione minimamente praticabile del tuo web design e assicurati che funzioni come necessario. Quindi, sovrapponi funzionalità e stile extra, in modo che i browser più capaci possano trarne vantaggio.

Come funziona il miglioramento progressivo?

A causa della sua natura estremamente distribuita, il web ha sempre avuto bisogno di supportare una vasta gamma di dispositivi. Dai computer di base degli anni '70 ai moderni desktop, tablet e televisori capaci, i siti Web hanno fatto molta strada.

Al centro di tutto c'è l'HTML. Poiché è un linguaggio "indulgente", i browser visualizzeranno l'HTML così come lo capiscono. In genere, ignoreranno tutto ciò che non supportano.

instagram viewer

Questo può essere utile dal punto di vista di uno sviluppatore, ma può causare problemi ai lettori. Se il tuo sito visualizza una pagina vuota quando JavaScript non può essere eseguito, gli utenti non hanno altra scelta che abbandonarlo. Il miglioramento progressivo ti incoraggia a fornire contenuti di base a tutti coloro che possono accedervi, quindi a migliorare tali contenuti utilizzando tecnologie appropriate, come CSS e JavaScript.

Un approccio progressivo allo stile

CSS è il linguaggio per fogli di stile del web che puoi utilizzare per personalizzare colori, caratteri, layoute molti altri aspetti visivi delle tue pagine. Puoi usarlo per migliorare l'aspetto predefinito dei tuoi contenuti, ma ciò non significa che non dovresti strutturare correttamente i tuoi contenuti in primo luogo.

Prendi una barra dei menu, per esempio; potresti strutturarlo in questo modo:

<nav>
<a href="/register">Registrati</UN>
<a href="/login">login</UN>
<a href="/about">chi siamo</UN>
<a href="/contact">contatto</UN>
</nav>

Per visualizzare un menu orizzontale, con ogni link che assomiglia un po' a un pulsante, puoi modellarlo usando questo CSS:

nav un {
decorazione del testo: nessuna;
display: blocco in linea;
imbottitura: 0.5em 1em;
bordo: 1px solido;
raggio del bordo: 8px;
margine destro: 1em;
}

Quando il browser esegue il rendering completo di questo, dovrebbe essere simile al seguente:

Tuttavia, se CSS non è disponibile, il menu verrà visualizzato in questo modo:

Nota come questo non assomigli per niente a un menu e non è molto facile da usare poiché i collegamenti si fondono in uno solo.

Puoi utilizzare una struttura alternativa per rendere il design più robusto:

<nav>
<Ul>
<li><a href="/register">Registrati</UN></li>
<li><a href="/login">login</UN></li>
<li><a href="/about">chi siamo</UN></li>
<li><a href="/contact">contatto</UN></li>
</ul>
</nav>

Poiché questo markup utilizza un elemento di elenco non ordinato, è molto più utilizzabile in assenza di CSS:

Nota quanto sia più semplice scansionare e comprendere rapidamente questi collegamenti, anche con lo stile predefinito del browser. Questo approccio richiederà l'aggiunta di un po' più di CSS, per sovrascrivere gli stili di elenco predefiniti:

navli { Schermo: in linea; }

Anche se la struttura finale e lo stile sono più complicati e la maggior parte degli utenti avrà i CSS abilitati, questo approccio è più robusto. Sarà più amichevole per gli utenti di screen reader e browser basati su terminale.

Presentazione progressiva della funzionalità

Il miglioramento progressivo è molto importante quando si tratta del funzionamento di un sito o di un'app. Il principio afferma che, qualunque cosa accada, il tuo sito web dovrebbe funzionare nel miglior modo possibile.

In pratica, questo si applica tipicamente a JavaScript. Se introduci un comportamento lato client, dovrebbe sovrapporre la funzionalità a un sito o un'applicazione che funziona già senza di essa.

Un caso molto comune è la gestione degli eventi. Immagina una pagina che carica contenuti aggiuntivi su richiesta. Questo potrebbe essere uno scorrimento infinito manuale, un commento incorporato o simili.

<corpo>
<!--... -->
<pulsante al clic="carica_altro();">
Carico Di più
</button>
<!--... -->
</body>

Il pulsante è al clic L'attributo contiene codice JavaScript che verrà eseguito quando qualcuno fa clic sul pulsante. Tuttavia, se JavaScript non è disponibile, questo pulsante non farà nulla. Un utente rimarrà a fare clic su questo pulsante senza feedback e senza avere idea di cosa non va. Un approccio di gran lunga migliore utilizza il miglioramento progressivo:

<corpo>
<!--... -->
<un id="p2" href="/page/2">Pagina 2</UN>

<copione>
funzionecarica_più() { consolare.tronco d'albero("!"); }

/* Sostituisci collegamento con pulsante */
var collegamento = documento.getElementById("p2");
var pulsante = documento.createElement("pulsante");
button.innerText = "Carica di più";
button.addEventListener("clic", carica_altro);
documento.corpo.insertPrima(pulsante, collegamento);
collegamento.parentNode.removeChild(collegamento);
</script>
</body>

Questo codice trasforma il collegamento di base in un pulsante con un gestore di eventi. Introducendo la dipendenza da JavaScript utilizzando JavaScript stesso, puoi essere certo che funzionerà. E c'è un comportamento predefinito funzionale che funziona, sotto forma di collegamento standard a /page/2.

Il miglioramento progressivo è davvero necessario?

Tutti usano browser con CSS e JavaScript, quindi perché preoccuparsi di provvedere a una situazione che non si presenta? Bene, ci sono diversi motivi per cui dovresti adottare la buona pratica del miglioramento progressivo.

  1. Innanzitutto, non tutti coloro che visitano il tuo sito Web utilizzano un browser. Alcuni visitatori saranno bot, come un indicizzatore di un motore di ricerca, e questi potrebbero non comprendere affatto CSS o JavaScript.
  2. In secondo luogo, non tutte le persone che visitano il tuo sito utilizzeranno un browser con CSS e JavaScript. Alcuni visitatori possono utilizzare un browser basato su terminale, che visualizza testo semplice con una formattazione minima. Altri possono utilizzare uno screen reader.
  3. Terzo, anche se un browser supporta CSS e JavaScript, le cose vanno male. Un collegamento interrotto o una connessione di rete errata possono causare la mancanza di un file .css o .js. Un bug in JavaScript può impedire l'esecuzione di altro codice.
  4. Infine, alcuni visitatori potrebbero decidere attivamente di disabilitare CSS o JavaScript. Potrebbero farlo per motivi di privacy o perché utilizzano una connessione lenta o pay-by-use.

Una mentalità progressista fa miracoli

Soprattutto, il miglioramento progressivo ti incoraggia ad adottare un approccio basato sul contenuto. Il contenuto è re, quindi il tuo testo e le tue immagini dovrebbero essere sempre disponibili, per tutti, in qualunque modo accedano al tuo sito.

Offrendo a tutti i lettori la migliore esperienza possibile, rendendola poi ancora migliore per coloro che possono trarne vantaggio, puoi avere il meglio di tutti i mondi. Il miglioramento progressivo è solo una componente chiave di una buona pratica di accessibilità e usabilità.