Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Progressive Verbesserung ist eine Technik, mit der Sie sicherstellen können, dass Ihre Software robust und zugänglich ist. Indem Sie ihm folgen, können Sie sicherstellen, dass so viele Menschen wie möglich Ihre Website oder App nutzen können.

Beginnen Sie mit einer minimal realisierbaren Version Ihres Webdesigns und stellen Sie sicher, dass es bei Bedarf funktioniert. Fügen Sie dann zusätzliche Funktionen und Stile hinzu, damit leistungsfähigere Browser davon profitieren können.

Wie funktioniert die progressive Verbesserung?

Aufgrund seiner extrem verteilten Natur musste das Web schon immer eine große Auswahl an Geräten unterstützen. Von einfachen Computern aus den 1970er Jahren bis hin zu leistungsfähigen modernen Desktops, Tablets und Fernsehern haben Websites einen langen Weg zurückgelegt.

Das Herzstück von allem ist HTML. Da es sich um eine „verzeihende“ Sprache handelt, zeigen Browser HTML so gut an, wie sie es verstehen. Normalerweise ignorieren sie alles, was sie nicht unterstützen.

instagram viewer

Dies kann aus Sicht eines Entwicklers nützlich sein, aber es kann zu Problemen für die Leser führen. Wenn Ihre Website eine leere Seite anzeigt, obwohl JavaScript nicht ausgeführt werden kann, haben Benutzer keine andere Wahl, als sie abzubrechen. Die progressive Verbesserung ermutigt Sie, Kerninhalte für alle bereitzustellen, die darauf zugreifen können, und diese Inhalte dann mit geeigneten Technologien wie CSS und JavaScript zu verbessern.

Ein progressiver Styling-Ansatz

CSS ist die Stylesheet-Sprache des Webs die Sie verwenden können, um Farben, Schriftarten, Grundrisse, und viele andere visuelle Aspekte Ihrer Seiten. Sie können es verwenden, um das Standard-Erscheinungsbild Ihrer Inhalte zu verbessern, aber das bedeutet nicht, dass Sie Ihre Inhalte nicht von vornherein richtig strukturieren sollten.

Nehmen Sie zum Beispiel eine Menüleiste; du könntest es so strukturieren:

<Navi>
<ein href="/register">registrieren</A>
<ein href="/login">Anmeldung</A>
<ein href="/about">über uns</A>
<ein href="/contact">Kontakt</A>
</nav>

Um ein horizontales Menü anzuzeigen, bei dem jeder Link ein bisschen wie eine Schaltfläche aussieht, können Sie es mit diesem CSS gestalten:

Navi ein {
Textdekoration: keine;
Anzeige: Inline-Block;
Polsterung: 0.5em 1em;
Rand: 1px fest;
Randradius: 8px;
Rand rechts: 1em;
}

Wenn der Browser dies vollständig rendert, sollte es wie folgt aussehen:

Wenn CSS jedoch nicht verfügbar ist, wird das Menü wie folgt angezeigt:

Beachten Sie, dass dies nicht wie ein Menü aussieht und nicht sehr einfach zu verwenden ist, da die Links zu einem verschmelzen.

Sie können eine alternative Struktur verwenden, um das Design robuster zu machen:

<Navi>
<Ul>
<li><ein href="/register">registrieren</A></li>
<li><ein href="/login">Anmeldung</A></li>
<li><ein href="/about">über uns</A></li>
<li><ein href="/contact">Kontakt</A></li>
</ul>
</nav>

Da dieses Markup ein ungeordnetes Listenelement verwendet, ist es ohne CSS viel besser verwendbar:

Beachten Sie, wie viel einfacher es ist, diese Links schnell zu scannen und zu verstehen, selbst mit dem Standardstil des Browsers. Bei diesem Ansatz müssen Sie etwas mehr CSS hinzufügen, um die Standardlistenstile zu überschreiben:

Navili { Anzeige: im Einklang; }

Obwohl die endgültige Struktur und das Styling komplizierter sind und die meisten Benutzer CSS aktiviert haben, ist dieser Ansatz robuster. Es wird benutzerfreundlicher für Benutzer von Screenreadern und Endgerätebasierte Browser.

Schrittweise Einführung der Funktionalität

Progressive Verbesserung ist am wichtigsten, wenn es um das Funktionieren einer Website oder App geht. Das Prinzip besagt, dass Ihre Website in jedem Fall so gut wie möglich funktionieren soll.

In der Praxis trifft dies typischerweise auf JavaScript zu. Wenn Sie clientseitiges Verhalten einführen, sollte es die Funktionalität einer Site oder Anwendung überlagern, die bereits ohne sie funktioniert.

Ein sehr häufiger Fall ist die Ereignisbehandlung. Stellen Sie sich eine Seite vor, die bei Bedarf zusätzliche Inhalte lädt. Dies kann ein manuelles unendliches Scrollen, ein eingebetteter Kommentar oder ähnliches sein.

<Körper>
<!--... -->
<Schaltfläche onclick="Mehr laden();">
Belastung Mehr
</button>
<!--... -->
</body>

Die Knöpfe anklicken -Attribut enthält JavaScript-Code, der ausgeführt wird, wenn jemand auf die Schaltfläche klickt. Wenn JavaScript jedoch nicht verfügbar ist, wird diese Schaltfläche nichts tun. Ein Benutzer klickt auf diese Schaltfläche ohne Feedback und ohne Ahnung, was schief läuft. Ein weitaus besserer Ansatz verwendet die progressive Verbesserung:

<Körper>
<!--... -->
<eine id="p2" href="/page/2">Seite 2</A>

<Skript>
FunktionMehr laden() { Konsole.Protokoll("!"); }

/* Link durch Button ersetzen */
Var Link = dokumentieren.getElementById("p2");
Var Knopf = dokumentieren.createElement("Schaltfläche");
button.innerText = "Mehr laden";
button.addEventListener("klicken", Mehr laden);
dokumentieren.Körper.insertBefore(Taste, Verknüpfung);
Verknüpfung.Elternknoten.Kind entfernen(Verknüpfung);
</script>
</body>

Dieser Code wandelt den einfachen Link in eine Schaltfläche mit einem Event-Handler um. Indem Sie die Abhängigkeit von JavaScript mit JavaScript selbst einführen, können Sie sicher sein, dass es funktioniert. Und es gibt ein funktionales Standardverhalten, das funktioniert, in Form des Standardlinks zu /page/2.

Ist Progressive Enhancement wirklich notwendig?

Jeder verwendet Browser mit CSS und JavaScript, also warum sollte man sich um eine Situation kümmern, die nicht eintritt? Nun, es gibt mehrere Gründe, warum Sie die bewährte Methode der progressiven Verbesserung anwenden sollten.

  1. Erstens verwendet nicht jeder, der Ihre Website besucht, einen Browser. Einige Besucher werden Bots sein, wie ein Suchmaschinenindexierer, und diese verstehen möglicherweise überhaupt kein CSS oder JavaScript.
  2. Zweitens wird nicht jede Person, die Ihre Website besucht, einen Browser mit CSS und JavaScript verwenden. Einige Besucher verwenden möglicherweise einen terminalbasierten Browser, der einfachen Text mit minimaler Formatierung anzeigt. Andere verwenden möglicherweise einen Bildschirmleser.
  3. Drittens, selbst wenn ein Browser CSS und JavaScript unterstützt, gehen Dinge schief. Ein defekter Link oder eine schlechte Netzwerkverbindung kann zu einer fehlenden .css- oder .js-Datei führen. Ein Fehler in JavaScript kann dazu führen, dass anderer Code überhaupt nicht ausgeführt wird.
  4. Schließlich entscheiden sich einige Besucher möglicherweise aktiv dafür, CSS oder JavaScript zu deaktivieren. Sie tun dies möglicherweise aus Datenschutzgründen oder weil sie eine langsame oder nutzungsabhängige Verbindung verwenden.

Eine progressive Denkweise wirkt Wunder

Vor allem die progressive Verbesserung ermutigt Sie, einen inhaltsorientierten Ansatz zu verfolgen. Inhalt ist König, daher sollten Ihre Texte und Bilder immer für alle verfügbar sein, egal wie sie auf Ihre Website zugreifen.

Indem Sie allen Lesern das bestmögliche Erlebnis bieten und es dann für diejenigen, die davon profitieren können, noch besser machen, können Sie das Beste aus allen Welten haben. Progressive Verbesserung ist nur eine Schlüsselkomponente guter Zugänglichkeits- und Usability-Praktiken.