Progressive Enhancement: Unterschied zwischen den Versionen

Aktuelle Version vom 23. Januar 2024, 16:44 Uhr

Definition

Progressive Enhancement (auf Deutsch: progressive Verbesserung) ist eine Design- und Entwicklungsstrategie für Webseiten, bei der mit einer einfachen Basis begonnen wird und schrittweise Verbesserungen für leistungsfähigere Systeme hinzugefügt werden. Sie ermöglicht es somit Entwicklern, Webseiten so zu gestalten, dass sie die Fähigkeiten von modernen Browsern und Geräten optimal ausnutzen. Gleichzeitig werden Ausführungs- und Darstellungsprobleme der Website bei weniger leistungsfähigen Geräten und älteren Browsern mit eingeschränkter Funktionalität vermieden.

Abgrenzung zu Graceful Degradation

Abbildung: Progressive Enhancement vs. Graceful Degradation
Autor: Seobility - Lizenz: CC BY-SA 4.0

Graceful Degradation ist das gegenteilige Prinzip zu Progressive Enhancement. Der Ansatz unterscheidet sich von Progressive Enhancement dahingehend, dass Graceful Degradation den umgekehrten Weg von der Komplexität zur Einfachheit geht. Bei dieser Design-Strategie werden Webseiten zunächst für die modernsten Browser konzipiert. Anschließend werden sie mit älteren und weniger komplexen Browsern getestet, um "Fallbacks" für diese zu erstellen. Dies ermöglicht es einem Front-End-Entwickler, Schnittstellen mit den neuesten Technologien kreativ zu gestalten, stellt aber auch sicher, dass die Website auf älteren Clients funktioniert und genutzt werden kann.

Die Funktionsweise von Progressive Enhancement

Die Funktionsweise von Progressive Enhancement ist vergleichbar mit einem PKW, bei dem einer einfachen aber funktionierenden Basisversion durch Zusatzausstattungen wie einem Navigationssystem, einem Automatikgetriebe oder einer Anhängerkupplung eine erweiterte Funktionalität und zusätzliche Nutzungsmöglichkeiten hinzugefügt werden. Das Design einer Website mit progressiver Verbesserung erfolgt in der Praxis auf drei Ebenen, um die Interaktion eines Users mit der Seite zu verbessern.

Die erste Ebene ist sauberes, semantisches HTML. Dieses ermöglicht textbasierten, sprachbasierten und älteren User Agents, den Inhalt der Website ordnungsgemäß zu interpretieren und anzuzeigen.

Die zweite Ebene ist CSS. Ein Browser, der eine CSS-Zeile nicht versteht, ignoriert diese. Wenn ein Basissatz mit Stilen erstellt wird, die alle Browser verstehen, können zusätzliche Stile mit CSS für neuere Browserversionen hinzufügt werden, die von älteren einfach ignoriert werden. Ein simples Beispiel für eine progressive Verbesserung auf der CSS Ebene zeigt folgender Code:

.main-content {
background: # 999;
background: rgba (153, 153, 153, .75);
}

Dieser Stil setzt den Hintergrund zunächst auf eine graue Farbe. Die zweite Regel verwendet RGBA-Farbwerte, um eine Transparenzstufe festzulegen. Wenn ein Browser RGBA unterstützt, überschreibt er den ersten Stil mit dem zweiten. Wenn nicht, wird nur der erste angewandt.

Die dritte Ebene des Website Designs bildet JavaScript. Dieses ermöglicht es User Agents, die JavaScript verwenden können, den Usern durch Interaktivität eine verbesserte Benutzerfreundlichkeit im Web zu bieten.

Eine weitere Möglichkeit, um progressive Verbesserungen in das Design einer Website zu integrieren, besteht in der Verwendung sogenannter "Feature Queries". Diese ähneln Medienabfragen, die für responsive Webseiten genutzt werden. Anders als Media Queries, mit denen Displaygrößen und sonstige Geräteeigenschaften abgefragt werden, prüfen Feature Queries, ob ein bestimmtes Feature vom Web Browser unterstützt wird oder nicht. Die Syntax lautet beispielsweise:

@supports (display: flex) {
}

Alle Design-Stile, die dieser Abfrage hinzugefügt werden, funktionieren nur, wenn der Browser "flex", also die Stile für Flexbox, unterstützt.

Vor- und Nachteile von Progressive Enhancement

Ein wichtiger Grund für die Attraktivität von Progressive Enhancement im Web ist die Stärke des Endergebnisses. Der Zugriff auf mit Progressive Enhancement entwickelte Inhalte ist sowohl für Benutzer eines beliebigen Clients als auch für Suchmaschinen-Crawler sehr gut möglich. Die Strategie der progressiven Verbesserung zwingt Entwickler dazu, ihr Projekt zunächst als funktionales System zu planen und dabei nur die grundlegendsten Webtechnologien zu verwenden. So entsteht eine funktionierende Grundlage, auf die sie zurückgreifen können, wenn das Projekt in seiner Komplexität zunimmt. Wenn ein neuer Browser auf den Markt kommt oder eine neue Browsererweiterung verfügbar ist, können sie weitere Funktionen hinzufügen, ohne die ursprüngliche Lösung berühren zu müssen. Bei Graceful Degradation müsste die ursprüngliche Lösung hingegen geändert werden.

Progressive Enhancement Projekte sind zudem einfach zu pflegen. Mit dem Fokus auf "First Principles" können sich Entwickler auf komplexere Abschnitte der Systeminteraktion konzentrieren, ohne sich um die Grundlagen kümmern zu müssen. Außerdem ist bei dieser Strategie der Zeitaufwand für Kompatibilitätstests mit unterschiedlichen Browsern geringer.

Anwendungen, die eine aufwendige und komplexe Front-End-Schnittstelle erfordern, können allerdings nur schwer auf Basis von Progressive Enhancement aufgebaut werden. Für solche komplexen und interaktiven Web Anwendungen ist es häufig nicht möglich, eine einfache Basisversion zu erstellen, die Usern älterer Browser und Geräte eine vergleichbare Funktionalität bietet.

Kompatibilität von Progressive Enhancement mit Mobile First

Die Erstellung einer Website auf Basis von Progressive Enhancement ist kompatibel mit dem heute sehr wichtigen Mobile First Ansatz. Bei beiden Strategien wird mit der Entwicklung für das schwächste System (Smartphone) begonnen und schrittweise die Funktionalität der Seite für leistungsfähigere Geräte bis hin zum Desktop PC mit einem modernen Web Browser erweitert.

Das mobile Design einer Website beginnt dabei mit der Erstellung und Strukturierung der Inhalte. Sobald die Inhalte festgelegt sind, kann die Webseite zunächst für mobile Geräte mit kleinen Displays und älteren Browsern programmiert werden.

Wenn diese Basis auf den dafür vorgesehenen Geräten lauffähig ist, kann die Seite durch Hinzufügen von CSS Eigenschaften und Media Queries für die Darstellung auf größeren Bildschirmen von Tablets, Notebooks und PCs angepasst werden. Bei diesem Entwicklungsschritt werden zudem mittels integrierter Feature Detection die Fähigkeiten der Browser abgefragt, sodass die Seite für jede Browserversion eine optimale Funktionalität und Benutzerfreundlichkeit bietet. Durch den Aufbau einer Webseite beginnend mit der einfachsten Version für kleine, mobile Displays und ältere Browser ist eine Erweiterung für größere Displays und Adaptierung auf modernere Geräte mit Progressive Enhancement unkompliziert durchführbar.

Weiterführende Links

• https://blog.kulturbanause.de/2013/08/mobile-first-progressive-enhancement/
• https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

Ähnliche Artikel

• Graceful Degradation
• Mobile Optimierung

Über den Autor

Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. Mehr Informationen über das Seobility Wiki Team.