Was ist Graceful Degradation?
Dein Kontaktformular hängt an einem Skript. Das Skript lädt nicht. Sieht der Besucher jetzt ein leeres Feld oder ein einfaches Formular, das trotzdem abschickt? Die zweite Variante ist Graceful Degradation, wörtlich etwa „würdevoller Abbau“.
Das MDN-Glossar beschreibt es als Designphilosophie: Du baust eine moderne Website für aktuelle Browser. In älteren Browsern fällt sie auf ein Erlebnis zurück, das nicht so gut ist, aber die wesentlichen Inhalte und Funktionen liefert.
Das Motto: Lieber weniger Glanz als gar nichts. Eine Animation darf fehlen. Telefonnummer, Preis und Bestellknopf dürfen es nicht.
Graceful Degradation oder Progressive Enhancement?
Beide Begriffe tauchen fast immer zusammen auf. Der Unterschied liegt in der Blickrichtung:
Ansatz
Blickrichtung
Graceful Degradation
Von oben: volles Erlebnis, dann Rückfall absichern
Progressive Enhancement
Von unten: solide Basis, dann Extras draufsetzen
Als Streitfrage musst du das nicht behandeln. MDN schreibt, beide Ansätze sind gültig und ergänzen sich oft. In der Praxis baust du eine Basis und prüfst zusätzlich, was passiert, wenn etwas fehlt.
Die W3C-Grundsätze für die Webplattform gehen in dieselbe Richtung: Fehlt eine Funktion, soll eine Webseite damit sauber umgehen. Den Begriff selbst benutzt das Dokument aber nicht.
Wie oft fällt so etwas wirklich aus?
Eine aktuelle Zahl haben wir nicht gefunden. Der meistzitierte Beleg ist alt, aber lehrreich: Die britische Behörde GDS maß 2013 auf GOV.UK rund 509.000 Besuche.
Messung · GOV.UK 2013
Besuche ohne JavaScript-Erweiterungen
1,1 %
ohne Erweiterungen
0,2 %
JavaScript bewusst aus
Etwa jeder 93. Besuch bekam die Erweiterungen nicht
Die übrigen 0,9 % hatten JavaScript an, aber es lief nicht: Blocker, Add-ons, Netzfehler.
Das ist der eigentliche Punkt: Die wenigsten schalten JavaScript ab. Es fällt einfach aus, ohne dass jemand etwas dafür kann. Übertrag die Zahl nicht eins zu eins auf heute, nimm sie als Größenordnung.
Beispiele aus der Praxis
Graceful Degradation steckt oft in kleinen Entscheidungen:
- Formular: Ein normales HTML-Formular schickt auch ab, wenn die schicke Prüfung per Skript fehlt.
- Layout: Kennt ein Browser eine CSS-Eigenschaft nicht, ignoriert er sie. Runde Ecken werden eben eckig, die Seite bleibt lesbar.
- Funktion: Ein Button erscheint nur, wenn der Browser die Funktion wirklich kann.
- Polyfill: Ein kleines Skript rüstet eine fehlende Funktion nach.
Häufige Fehler
Fehler 1 · Formulare nur per JavaScript bauen
Läuft das Skript nicht, ist das Formular tot. Du verlierst die Anfrage und merkst es nicht einmal. Native HTML-Elemente sind die sichere Grundlage.
Fehler 2 · „Bitte aktiviere JavaScript“ als Lösung
Ein Hinweistext hilft niemandem, dessen Skript gerade an einem Netzfehler gescheitert ist. Besser ist ein Weg, der ohne Hinweis funktioniert.
Fehler 3 · Browser-Version statt Funktion prüfen
Prüf, ob eine Funktion da ist, nicht welcher Browser anklopft. In CSS geht das mit der Abfrage @supports.
Fehler 4 · Rückfall nie testen
Ein Rückfallweg, den niemand probiert hat, ist eine Hoffnung. Teste ihn einmal bewusst.
So prüfst du deine Website
Der einfachste Test dauert fünf Minuten: Schalte in den Entwicklertools deines Browsers JavaScript ab und lade die Seite neu. Dann frag dich:
- Sehe ich Text, Preise und Kontaktdaten?
- Kann ich das Kontaktformular abschicken?
- Funktioniert das Menü, oder komme ich zumindest zu den wichtigsten Seiten?
Häufige Fragen
Was ist der Unterschied zu Progressive Enhancement?
Graceful Degradation startet beim vollen Erlebnis und sichert den Rückfall ab. Progressive Enhancement startet bei der Basis und baut nach oben aus. MDN sieht beide als gültig und oft ergänzend.
Muss meine Website noch im Internet Explorer laufen?
Meist geht es heute nicht mehr um einzelne alte Browser, sondern um Ausfälle. Schau in deine Webanalyse, welche Browser deine Besucher nutzen, und richte dich danach. Wichtig ist, dass Inhalte und Kontakt immer erreichbar bleiben.
Wie viele Besucher haben JavaScript aus?
Eine aktuelle Zahl haben wir nicht gefunden. Bei GOV.UK waren es 2013 rund 1,1 % der Besuche ohne JavaScript-Erweiterungen, nur 0,2 % davon hatten es bewusst abgeschaltet. Die meisten Ausfälle passieren unabsichtlich.
Wie baue ich ein Kontaktformular, das auch ohne JavaScript funktioniert?
Nimm ein normales HTML-Formular mit Versand an den Server. Skripte dürfen die Eingabe dann komfortabler machen. Fallen sie aus, schickt das Formular trotzdem ab. Prüf das bei Plugins einmal mit abgeschaltetem JavaScript.
