Progressive Enhancement

Progressive Enhancement kommt aus dem englischen und bedeutet soviel wie "zunehmende Verbesserung". Arbeitet man nach diesem Ansatz, geht man von den kleinsten Browserversionen aus und fügt anschließend die "zunehmende Verbesserung", also diese Funktionen und CSS-Regeln hinzu, welche die neuesten Browser unterstützen.

Der Zweck dahinter liegt klar auf der Hand: Man versucht die Webseite für so viele Browser wie möglich zu konstruieren und dabei die fast gleiche Funktionalität zu ermöglichen. Beispielsweise muss ein Shop nicht immer wunderschön aussehen, solange er seine Basisfunktionen beibehält. Eine Visitenkarte eines Künstlers sollte zwar auch immer anzeigbar sein (Kontaktdaten etc.), allerdings in ihrer vollsten Pracht, denn genau das macht einen Künstler ja aus: Die Kreativität der Farben (Bsp.: RGBA), eine gute Ausleuchtung seiner Kunstwerke (Bsp.:Funktionelle Galerie) und vieles mehr.

Ein Aufbau einer Seite nach dem Konzept "Progressive Enhancement" kann in folgender Reihenfolge passieren:

  1. Zunächst sollte das HTML-Markup erstellt werden. Damit sind lediglich die Aufstellung der Elemente gemeint, die für die Webseite gebraucht werden. Dabei ist wichtig darauf zu achten, dass alle Elemente von beinahe allen Browsern in ihren Anfangsversionen unterstützt werden. Das Ergebnis sieht nach diesem Schritt zwar unschön aus, erfüllt jedoch bereits den Zweck der Kompatibilität.
  2. Als nächstes sollte mit CSS schrittweise ein Layout erstellt werden. Dabei ist es wichtig, dass sämtliche Eigenschaften, die ein Präfix benötigen, auch solche bekommen, damit sie in allen Browsern angezeigt werden können.
  3. Optional: Nun kann das Design mit CSS Media-Queries auf weitere Feinheiten abgestimmt werden. Beispielsweise kann eine Version für Tablets und eine weitere Version für Smartphones erstellt werden.
  4. Als letztes kommt der Schritt, welcher die größten Schwierigkeiten mit der Kompatibilität erzeugen kann: Das Verhalten und die Interaktion mit dem Benutzer. Darunter fallen die Einbindung von Javascript, Flash, Frameworks und Co., aber auch die Einbindung von CSS-Animationen und Transitions. Hierbei sollte immer wieder ein Augenmerk auf die Kompatibilität gelegt werden und wenn nötig eine Alternative angeboten werden. Bietet diese Alternative auf anderen Browserversionen eine komplett andere Funktionalität an, so sollte sie entweder weggelassen oder der Ansatz "Graceful Degradation" verfolgt werden.

Graceful Degradation

Graceful Degradation kommt aus dem englischen und bedeutet soviel wie "eleganter Abbau". Dieser Ansatz verfolgt den Standpunkt der maximalen Funktionalität und bietet anschließend für kleinere Browserversionen einen weniger funktionellen Internetauftritt bzw. für manche Versionen gar keine dar.

Wichtig ist bei diesem Ansatz, dass man sich vor Augen hält, für welche Gruppe die Internetpräsenz geeignet sein soll. Habe ich eine Gruppe geschäftstüchtiger Menschen, die Größtenteils von ihrem Smartphone oder der Firmenwebseite aus die Website besuchen sollen, so kann ich davon ausgehen, das diese eine relativ aktuelle Version ihres Browser haben werden.

Ein weiterer Ansatz zur Bestimmung der Zielgruppe verfolgt nicht das Umfeld, sondern die Branche. Als gutes Beispiel kann hier https://www.coding-lab.de/ genutzt werden. Jemand der sich diese Zeilen gerade durchliest, dürfte zu 90% IT Begeistert sein oder aber aus beruflichen Gründen eine gedrängte begeisterung mitbringen. Aus diesem Grund macht es wesentlich mehr Sinn davon auszugehen, dass die Besucher dieser Seite eine aktuelle Version ihres Browser benutzen, da sie die Notwendigkeit von Updates aufgrund von Sicherheitslücken und neuen Features bereits verstanden und umgesetzt haben.

Hat man sich Gedanke zur Zielgruppe gemacht, so kann das folgende Schema angewendet werden:

  1. Die Webseite kann nach einem ganz normalen Schema aufgebaut werden. Dabei gibt es viele verschiedene Möglichkeiten. Ein Ansatz wäre die erstellen des Inhalts. Darauf aufbauend die Gestaltung eines Layouts und anschließend die Integration von Funktionalität. Ein anderer Ansatz begnügt sich dem "just in time" Slogan. Während man beispielsweise auf einer Webseite eine Galerie einbinden möchte, wird diese bereits während der Entwicklung mit voller Funktionalität (evtl. Slider etc.) ausgebaut.
  2. Anschließend kommt die Überprüfung der Browserkompatibilität. Dabei kann man sich Webseiten zur Hilfe nehmen, die die erstellte Seite auf verschiedenen Betriebssystemen und Browsern ausführt und Screenshots anzeigt. Diese Prüfung ist für das Layout von Vorteil, da man sich nicht alle Testumgebungen selber aufsetzen muss. Für die Prüfung der Funktionalität ist es jedoch von Vorteil, wenn man das Feature auf so vielen Browserversionen wie möglich austestet oder die Kompatibilität in der Dokumentation nachschaut.
  3. Nachdem feststeht, welche Versionen welches Layout und welche Funktionalitäten unterstützen und welche nicht, kommt der Part der Restriktion. Da der Internet Explorer immer wieder Probleme verursacht, kann über die bedingte Einbindung von Stylesheets ein alternatives Layout angezeigt werden.
  4. Schlussendlich kann die härteste Form der Kompatibilität genommen werden: Der Hinweis auf eine veraltete Browserversion. Dieser Trend sollte zwar vermieden werden, wurde aber bereits von größeren Unternehmen, wie 1und1 angewendet, wenn einfach nicht mehr gewährleistet werden kann, dass die vertraglichen Bedingungen mit einer Browserversion X erfüllt werden können.