Suggerimento rapido non dimenticare l'elemento noscript

JavaScript è un linguaggio potente che dà vita ai siti web con l'interattività, fino a quel temuto momento in cui JavaScript è disabilitato nel browser, all'improvviso. In questo suggerimento rapido considereremo i fallback con il

Nessun JavaScript

Gli utenti potrebbero disabilitare JavaScript per una serie di motivi. Potrebbero farlo per far fronte ai vincoli della larghezza di banda, per risparmiare la durata della batteria del telefono, forse per la privacy, in modo che non vengano tracciati con script analitici. Una manciata di persone installa anche estensioni del browser come NoScript per impedire al browser di eseguire JavaScript. Basti dire che, se JavaScript è disabilitato, molti siti Web e app non funzionano; se non completamente, poi parzialmente.

Diamo un'occhiata ad alcuni esempi.

Mancia: Ai fini di questo tutorial userò Quick JavaScript Switcher, una pratica estensione per Chrome che mi consente di attivare JavaScript in un solo clic.

WordPress.com

Il nuovo editor di post di WordPress.com è altamente dipendente da JavaScript. Come puoi vedere dallo screenshot seguente, non visualizza nient'altro che il logo "W" WordPress quando JavaScript è disabilitato. Supponendo la maggior parte di WordPress utenti potrebbero non essere esperti di tecnologia, probabilmente non sarebbero a conoscenza di ciò che sta accadendo.

WordPress.com post editor (11 dicembre 2015).

Trello

Trello, una webapp per la gestione dei progetti, è altamente dipendente da JavaScript. A differenza di WordPress.com, tuttavia, Trello gentilmente ci dice con un semplice avvertimento:

Interfaccia Trello (11 dicembre 2015)

Facebook

Facebook gestisce questa situazione ancora meglio. Visualizza una notifica, comunica agli utenti cosa sta succedendo e offre diversi corsi di azione con il logout e il pulsante di aggiornamento e l'opzione per ricorrere alla versione ottimizzata per dispositivi mobili. Questi sono tutti presentati con il familiare marchio visivo di Facebook.

Facebook (11 dicembre 2015)

New York Times

Alcuni siti possono utilizzare JavaScript solo parzialmente, come blog e siti di notizie. Ad esempio, quando utilizzi NewYorkTimes, quando JavaScript è disattivato troverai un paio di punti vuoti. Le icone di ricerca che accompagnano il Ricerca e il sezioni i collegamenti scompaiono, come visto sotto.

Si tratta di un degrado aggraziato (gli utenti potrebbero non accorgersene), sottolineando che è consigliabile offrire la migliore esperienza possibile quando JavaScript è disattivato. 

Utilizzando l'elemento "noscript"

Il modo in cui forniamo il fallback dipenderà in gran parte dal modo in cui implementiamo JavaScript sui nostri siti Web, ma il noscript elemento sarà utile in molti casi. Come suggerisce il nome, possiamo usare noscript per visualizzare contenuti alternativi. Qualunque cosa dentro i tag verranno visualizzati solo quando JavaScript è disabilitato.

Per servire come esempio ho costruito una pagina demo. Questa demo replica l'effetto di caricamento dell'immagine sfocata come visto su Medium. Le immagini e l'effetto sfocatura vengono entrambi trasmessi tramite JavaScript, quindi indovina cosa succede quando disattiviamo JavaScript?

Le immagini non verranno caricate.

Per visualizzare queste immagini, possiamo avvolgerle noscript elementi e avvolge le dichiarazioni di stile, affrontando i problemi di posizionamento.

  ... 
      
 

Possiamo anche usare il noscript elemento per notificare agli utenti che JavaScript è disattivato, in modo simile a ciò che fanno Facebook e Trello. Inoltre, possiamo aggiungere un link di riferimento per aiutare i nostri utenti a girare sopra JavaScript.

Incartare

fornitura noscript come ripiego è un modo utile per dire agli utenti del sito web che, senza JavaScript, le cose potrebbero non funzionare necessariamente al 100%. Ma non dimentichiamo che la tua priorità dovrebbe essere quella di assicurarti che la mancanza di JavaScript (o CDN, o di una serie di altre dipendenze) non infranga l'esperienza dell'utente. Grazie a Christian Heilmann per essersi assicurato che quel messaggio fosse trasmesso.