Schneller Tipp Vergessen Sie nicht das Noscript-Element

JavaScript ist eine mächtige Sprache, die Websites mit Interaktivität zum Leben erweckt, bis zu dem gefürchteten Moment, in dem JavaScript im Browser aus heiterem Himmel deaktiviert ist. In diesem kurzen Tipp wird beschrieben, wie Sie mit der

Kein JavaScript

Benutzer können JavaScript aus verschiedenen Gründen deaktivieren. Möglicherweise tun sie dies, um die Bandbreiteneinschränkungen zu bewältigen, die Akkulaufzeit des Telefons zu retten, vielleicht für die Privatsphäre, damit sie nicht mit analytischen Skripts verfolgt werden. Eine Handvoll Leute installiert sogar Browser-Erweiterungen wie NoScript, um zu verhindern, dass der Browser JavaScript ausführt. Es genügt zu sagen, wenn JavaScript deaktiviert ist, funktionieren viele Websites und Apps nicht. wenn nicht ganz, dann teilweise.

Sehen wir uns einige Beispiele an.

Spitze: Für dieses Tutorial werde ich Quick JavaScript Switcher verwenden, eine praktische Erweiterung für Chrome, mit der ich JavaScript mit einem Klick umschalten kann.

WordPress.com

Der neue WordPress.com-Post-Editor ist stark von JavaScript abhängig. Wie Sie dem folgenden Screenshot entnehmen können, wird bei deaktiviertem JavaScript nur das WordPress-Logo „W“ angezeigt. Vorausgesetzt, die Mehrheit von WordPress Benutzer Vielleicht sind sie nicht technisch versiert, sie wissen wahrscheinlich nicht, was passiert.

WordPress.com Post Editor (11. Dezember 2015).

Trello

Trello, eine Projektmanagement-Webapp, ist in hohem Maße von JavaScript abhängig. Im Gegensatz zu WordPress.com teilt uns Trello jedoch mit einer einfachen Warnung mit:

Trello-Schnittstelle (11. Dezember 2015)

Facebook

Facebook geht mit dieser Situation noch besser um. Es zeigt eine Benachrichtigung an, informiert die Benutzer über das Geschehen und bietet verschiedene Aktionen mit der Abmelde- und Aktualisierungsschaltfläche sowie der Möglichkeit, auf die für Mobilgeräte optimierte Version zuzugreifen. Diese werden alle mit dem bekannten Facebook Visual Branding dargestellt.

Facebook (11. Dezember 2015)

NewYorkTimes

Einige Websites verwenden JavaScript möglicherweise nur teilweise, z. B. Blogs und News-Sites. Wenn Sie beispielsweise NewYorkTimes verwenden, finden Sie einige leere Stellen, wenn JavaScript deaktiviert ist. Die Suchsymbole, die den Suche und das Abschnitte Links verschwinden, wie unten gezeigt.

Dies ist eine graziöse Beeinträchtigung (die Benutzer bemerken es möglicherweise nicht einmal), und unterstreicht, dass es ratsam ist, die bestmögliche Erfahrung zu bieten, wenn JavaScript deaktiviert ist. 

Verwenden des Elements "noscript"

Wie wir Fallback bereitstellen, hängt weitgehend davon ab, wie wir JavaScript auf unseren Websites einsetzen noscript Element wird in vielen Fällen nützlich sein. Wie der Name schon sagt, können wir verwenden noscript um alternative Inhalte zu rendern. Alles drin Tags werden nur gerendert, wenn JavaScript deaktiviert ist.

Als Beispiel habe ich eine Demoseite erstellt. Diese Demo repliziert den auf Medium sichtbaren Effekt des verschwommenen Bildes. Die Bilder und der Weichzeichnungseffekt werden beide über JavaScript bereitgestellt. Erraten Sie also, was passiert, wenn Sie JavaScript deaktivieren?

Die Bilder werden nicht geladen.

Um diese Bilder anzuzeigen, können wir sie einwickeln noscript Elemente sowie das Wrapping der Style-Deklarationen, um die Positionierungsprobleme anzugehen.

  … 
      
 

Wir können auch die verwenden noscript Element, um Benutzer über die Deaktivierung von JavaScript zu informieren - ähnlich wie bei Facebook und Trello. Darüber hinaus können wir einen Referenzlink hinzufügen, der unseren Benutzern hilft, sich zu wenden auf JavaScript.

Einpacken

Bereitstellung noscript Ein Fallback ist ein nützliches Mittel, um Webseitenbenutzern mitzuteilen, dass Dinge ohne JavaScript nicht unbedingt zu 100% funktionieren. Aber vergessen Sie nicht, dass Ihre Priorität darin bestehen sollte, sicherzustellen, dass ein Mangel an JavaScript (oder CDN oder einer der zahlreichen anderen Abhängigkeiten) die Benutzererfahrung nicht beeinträchtigt. Danke an Christian Heilmann für die Vermittlung dieser Botschaft.