Snelle tip vergeet het element noscript niet

JavaScript is een krachtige taal die websites tot leven brengt met interactiviteit, tot dat gevreesde moment waarop JavaScript in de browser is uitgeschakeld, uit het niets. In deze snelle tip zullen we kijken naar fallbacks met de

Geen JavaScript

Gebruikers kunnen JavaScript om een ​​aantal redenen uitschakelen. Ze doen dit misschien om te gaan met bandbreedtebeperkingen, om de levensduur van hun accu te sparen, misschien voor privacy, zodat ze niet worden bijgehouden met analytische scripts. Een handvol mensen installeert zelfs browserextensies zoals NoScript om te voorkomen dat de browser JavaScript gebruikt. Het volstaat om te zeggen dat als JavaScript is uitgeschakeld, veel websites en apps niet werken; zo niet volledig, dan gedeeltelijk.

Laten we enkele voorbeelden bekijken.

Tip: Voor de doeleinden van deze tutorial ga ik Quick JavaScript Switcher gebruiken, een handige extensie voor Chrome waarmee ik JavaScript in een enkele klik kan schakelen.

WordPress.com

De nieuwe berichteditor van WordPress.com is in hoge mate afhankelijk van JavaScript. Zoals u kunt zien in de volgende schermafbeelding, wordt niets anders weergegeven dan het Word-logo van "W" wanneer JavaScript is uitgeschakeld. Uitgaande van de meerderheid van WordPress gebruikers misschien niet-tech-savvy, ze zouden waarschijnlijk niet op de hoogte zijn van wat er gebeurt.

WordPress.com post-editor (11 december 2015).

Trello

Trello, een webapp voor projectmanagement, is sterk afhankelijk van JavaScript. In tegenstelling tot WordPress.com, vertelt Trello ons vriendelijk met een eenvoudige waarschuwing:

Trello-interface (11 december 2015)

Facebook

Facebook gaat hier nog beter mee om. Het geeft een melding weer, vertelt gebruikers wat er aan de hand is en biedt verschillende actielijnen met de knop voor uitloggen en vernieuwen en de optie om gebruik te maken van de voor mobiel geoptimaliseerde versie. Deze worden allemaal gepresenteerd met vertrouwde visuele Facebook-branding.

Facebook (11 december 2015)

NewYorkTimes

Sommige sites gebruiken JavaScript mogelijk slechts gedeeltelijk, zoals blogs en nieuwssites. Wanneer u NewYorkTimes gebruikt, vindt u bijvoorbeeld een aantal lege plekken wanneer JavaScript is uitgeschakeld. De zoekiconen die bij de Zoeken en de secties links verdwijnen, zoals hieronder te zien.

Dit is een sierlijke verslechtering (gebruikers merken het misschien niet eens), met de nadruk dat het verstandig is om de best mogelijke ervaring te bieden wanneer JavaScript is uitgeschakeld. 

Het element "noscript" gebruiken

Hoe we fallback aanbieden, hangt grotendeels af van hoe we JavaScript op onze websites implementeren, maar de noscript element zal in veel gevallen van pas komen. Zoals de naam al aangeeft, kunnen we gebruiken noscript om alternatieve inhoud te geven. Alles binnen tags worden alleen weergegeven als JavaScript is uitgeschakeld.

Om als voorbeeld te dienen, heb ik een demopagina gebouwd. Deze demo kopieert het wazige beeldbelastende effect zoals te zien op Medium. De afbeeldingen en het vervagingseffect worden beide via JavaScript geleverd, dus raad eens wat er gebeurt als we JavaScript uitschakelen?

De afbeeldingen worden niet geladen.

Om deze afbeeldingen weer te geven, kunnen we ze inpakken noscript elementen evenals het inpakken van de stijlverklaringen, waarbij de positioneringsproblemen worden aangepakt.

  ... 
      
 

We kunnen ook de noscript element om gebruikers op de hoogte te stellen van het feit dat JavaScript wordt uitgeschakeld, vergelijkbaar met wat Facebook en Trello doen. Daarnaast kunnen we een referentielink toevoegen om onze gebruikers te helpen bij het omschakelen op JavaScript.

Afronden

Het verstrekken van noscript als een fallback is een handige manier om gebruikers van een website te vertellen dat, zonder JavaScript, dingen niet altijd 100% hoeven te functioneren. Maar laten we niet vergeten dat je prioriteit moet zijn om ervoor te zorgen dat een gebrek aan JavaScript (of CDN, of een van de vele andere afhankelijkheden) de gebruikerservaring niet schaadt. Dank aan Christian Heilmann voor het zorgen dat die boodschap werd overgebracht.