Progressive Enhancement ist eine Bauweise für Websites, bei der zuerst eine Fassung entsteht, die in jedem Browser funktioniert, und alles Weitere danach darauf aufgesetzt wird. Die Grundlage ist HTML mit vollständigem Inhalt und Bedienelementen, die von sich aus arbeiten. Darüber liegt CSS für die Gestaltung, darüber JavaScript für den Komfort. Fällt eine der oberen Schichten aus, bleibt die darunter benutzbar.
- Progressive Enhancement
Bauweise, bei der eine Website mit einer überall funktionierenden Grundfassung beginnt und Komfort erst darauf aufbaut.
Beispiel: „Das Kontaktformular verschickt auch ohne JavaScript, die Prüfung direkt im Feld ist Progressive Enhancement.“Der Begriff geht auf Steven Champeon zurück, der ihn 2003 auf der SXSW vorgestellt hat. Im Deutschen wird er nicht übersetzt.
Abgrenzung: Graceful Degradation beschreibt denselben Gedanken aus der Gegenrichtung. Dort steht die Vollausstattung am Anfang, und es wird festgelegt, was beim Wegfall einzelner Voraussetzungen erhalten bleibt. Progressive Enhancement legt umgekehrt zuerst fest, was in jedem Fall vorhanden sein muss.
HTML trägt, CSS und JavaScript kommen obendrauf
Die unterste Schicht ist ein HTML-Dokument mit dem vollständigen Inhalt und Bedienelementen, die von sich aus arbeiten: ein Formular mit action-Attribut, ein Link mit href, eine Auswahl über ein select-Element. Diese Fassung sieht schlicht aus und lässt sich vollständig benutzen.
Darauf setzt CSS auf und macht aus der Rohfassung das Layout. Darüber liegt JavaScript und ergänzt, was die Bedienung angenehmer macht: eine Eingabeprüfung schon beim Tippen, das Nachladen weiterer Treffer ohne Seitenwechsel, eine Karte anstelle einer Adresszeile. Jede dieser Ergänzungen setzt auf etwas auf, das vorher bereits ging.
Warum die Grundfassung öfter gebraucht wird, als es aussieht
JavaScript fällt selten aus, weil jemand es abgeschaltet hat. Häufiger sind ein Skript, das im Mobilfunknetz noch lädt, während der Besucher schon tippt, ein Firmenproxy, der eine externe Datei blockiert, ein Blocker im Browser oder ein Fehler in einer einzigen Zeile, der den Rest des Skripts mitnimmt.
Dazu kommen Leser, die sich nicht wie ein Browser verhalten: Suchmaschinen-Crawler, die Vorschau-Bots von LinkedIn und WhatsApp, Lesemodi, Übersetzungsdienste, Screenreader. Sie alle kommen mit sauberem HTML zurecht. Wo Geschäft entsteht, halten wir die Grundfassung konsequent: Navigation, Formulare und die Wege zu Kauf und Kontakt.
Was das im Projekt bedeutet
Progressive Enhancement ist eine Entscheidung über die Reihenfolge und kostet vor allem am Anfang Disziplin. Der Test dafür ist schnell gemacht: Schalte JavaScript in den Entwicklerwerkzeugen ab und gehe den wichtigsten Weg durch die Seite. Was dann noch geht, ist deine Grundfassung.
Für jede Funktion lohnt die Frage neu. Beim Kontaktformular ist die Antwort klar, weil ein Formular von Haus aus abschicken kann. Bei einer Karte mit Umkreissuche fällt sie anders aus: Dort ist die sinnvolle Grundfassung die Adresse mit einem Link auf den Kartendienst, und mehr braucht es an dieser Stelle nicht.