Wöchentliche Plattform-Neuigkeiten: Verbesserung der Benutzererfahrung bei langsamen Verbindungen, ein Tipp zum Schreiben von Alt-Text und ein Polyfill für das HTML-Ladeattribut

Avatar of Šime Vidas
Šime Vidas am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

In dieser Woche gibt es einen Überblick darüber, wie langsame Verbindungen erkannt werden, was in den alt-Text für Bilder aufgenommen werden sollte und ein neues Polyfill für das HTML-loading-Attribut sowie mehr.

Erkennung von Benutzern mit langsamen Verbindungen

Algolia nutzt die Network Information API (siehe die API-Chrome-Statusseite), um Benutzer mit langsamen Verbindungen zu erkennen – etwa 9 % ihrer Benutzer – und folgende Anpassungen vorzunehmen, um eine gute Benutzererfahrung zu gewährleisten:

  • Erhöhung der Anforderungs-Timeout-Zeit, wenn der Benutzer eine Suchanfrage stellt (ein statischer Timeout kann bei Benutzern mit langsamen Verbindungen zu einem Fehlalarm führen).
  • Anzeige einer Benachrichtigung für den Benutzer, während er auf Suchergebnisse wartet (z. B. „Sie haben eine langsame Verbindung. Dies kann einige Zeit dauern.“).
  • Anforderung von weniger Suchergebnissen, um die Gesamtantwortgröße zu verringern.
  • Debouncing von Anfragen (z. B. keine Anfragen bei jedem Tastendruck senden).
navigator.connection.addEventListener("change", () => {
  // effective round-trip time estimate in ms
  let rtt = navigator.connection.rtt;

  // effective connection type
  let effectiveType = navigator.connection.effectiveType;

  if (rtt > 500 || effectiveType.includes("2g")) {
    // slow connection
  }
});

(via Jonas Badalic)

Alt-Text sollte den Hauptpunkt kommunizieren

Der Schlüssel ist, zu beschreiben, was Ihr Publikum aus dem Bild mitnehmen soll, und nicht nur eine einfache Beschreibung dessen, was das Bild zeigt.

<!-- BEFORE -->
<img alt="Graph showing the use of the phrase " who="" you="" gonna="" call?"="" in="" popular="" media="" over="" time."="">

<!-- AFTER -->
<img alt="Graph illustrating an 800% increase in the use
          of the phrase " who="" you="" gonna="" call?"="" in="" popular="" media="" after="" the="" release="" of="" ghostbusters="" on="" june="" 7th,="" 1984."="">

(via Caitlin Cashin)

In anderen Nachrichten…

  • Es gibt ein neues Polyfill für das HTML-loading-Attribut, das verwendet wird, indem die Bilder und Iframes, die Sie lazy-laden möchten, in
  • WeChat, die chinesische Mehrzweck-App mit über einer Milliarde monatlich aktiven Nutzern, beherbergt über eine Million „Mini-Programme“, die sehr ähnlich wie Web-Apps aufgebaut sind (im Wesentlichen CSS und JavaScript) (via Thomas Steiner).
  • Microsoft hat 24 neue (Online-)Stimmen aus 21 verschiedenen Sprachen für die Sprachsynthese- API in der Vorschauversion von Edge verfügbar gemacht („diese Stimmen sind die natürlichsten Stimmen, die heute verfügbar sind“) (via Scott Low)

Lesen Sie weitere Neuigkeiten in meiner neuen, wöchentlichen Sonntagsausgabe. Besuchen Sie webplatform.news für weitere Informationen.