Rask Tips Ikke glem Noscript Element

JavaScript er et kraftig språk som bringer nettsteder til liv med interaktivitet, til det fryktede øyeblikket når JavaScript er deaktivert i nettleseren, ut av det blå. I dette raske tipset ser vi på å gi tilbakevendinger med

Ingen JavaScript

Brukere kan deaktivere JavaScript av flere grunner. De kan gjøre det for å takle båndbreddebegrensninger, for å spare telefonens batterilevetid, kanskje for personvern, slik at de ikke blir sporet med analytiske skript. En håndfull mennesker installerer selv nettleserutvidelser som NoScript for å forhindre at nettleseren kjører JavaScript. Det er nok å si, hvis JavaScript er deaktivert, mislykkes mange nettsteder og apper til å fungere; hvis ikke helt, så delvis.

La oss se på noen eksempler.

Tips: I denne veiledningen skal jeg bruke Quick JavaScript Switcher, en praktisk utvidelse for Chrome som gjør at jeg kan bytte JavaScript i enkelt klikk.

WordPress.com

Den nye WordPress.com-postredigeren er svært avhengig av JavaScript. Som du kan se fra følgende skjermbilde, viser det ingenting annet enn "W" WordPress-logoen når JavaScript er deaktivert. Forutsatt majoriteten av WordPress brukere kan være ikke-teknisk-kunnskapsrike, de vil nok ikke være uvitende om hva som skjer.

WordPress.com postredaktør (11. desember 2015).

Trello

Trello, en prosjektledelse webapp, er svært avhengig av JavaScript. I motsetning til WordPress.com forteller Trello oss med en enkel advarsel:

Trello-grensesnittet (11. desember 2015)

Facebook

Facebook håndterer denne situasjonen enda bedre. Den viser et varsel, forteller brukerne hva som skjer, og gir flere handlingsmåter med logg og oppdater knappen, og muligheten til å ty til mobiloptimalisert versjon. Disse er alle presentert med kjent Facebook visuell merkevarebygging.

Facebook (11. desember 2015)

New York Times

Enkelte nettsteder kan bare bruke JavaScript bare delvis, for eksempel blogger og nyhetssider. Når du bruker NewYorkTimes, vil du for eksempel finne et par tomme flekker når JavaScript er slått av. Søkeikonene som følger med Søke og seksjoner koblinger forsvinner, som vist nedenfor.

Dette er grasiøs nedbrytning (brukerne kan ikke engang legge merke til), og understreker at det er lurt å levere best mulig opplevelse når JavaScript er slått av. 

Bruke "noscript" Element

Hvordan vi leverer tilbakebetaling, vil i stor grad avhenge av hvordan vi distribuerer JavaScript på våre nettsider, men noscript elementet vil komme til nytte i mange tilfeller. Som navnet tilsier, kan vi bruke noscript å gjengi alternativt innhold. Alt innenfor Merkene vil bare gjengis når JavaScript er deaktivert.

For å tjene som et eksempel, bygget jeg en demonstrasjonsside. Denne demoen repliserer den uskarpe bildebelastningsvirkningen som vist på Medium. Bildene og uskarphetseffekter leveres begge gjennom JavaScript, så gjett hva som skjer når vi slår av JavaScript?

Bildene lastes ikke inn.

For å vise disse bildene kan vi pakke dem inn noscript elementer samt innpakning av stildeklarasjonene, adressering av stillingsproblemene.

  ... 
      
 

Vi kan også bruke noscript element for å varsle brukere om at JavaScript er slått av - ligner på hva Facebook og Trello gjør. I tillegg kan vi legge til en referanselink som hjelper brukerne til å slå på Javascript.

Wrap Up

Gir noscript som en tilbakebetaling er en nyttig måte å fortelle nettsidebrukere at uten JavaScript kan ting ikke nødvendigvis fungere 100%. Men la oss ikke glemme at din prioritet bør være å sørge for at mangel på JavaScript (eller CDN, eller noe av et vell av andre avhengigheter) ikke bryter brukerens opplevelse. Takk til Christian Heilmann for å sørge for at meldingen ble formidlet.