{"id":31654,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31654"},"modified":"2025-03-18T13:52:20","modified_gmt":"2025-03-18T13:52:20","slug":"Progressive_Enhancement","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Progressive_Enhancement","title":{"rendered":"Progressive Enhancement"},"content":{"rendered":"

Definition<\/span><\/h2>\n

Progressive Enhancement (auf Deutsch: progressive Verbesserung) ist eine Design- und Entwicklungsstrategie f\u00fcr Webseiten, bei der mit einer einfachen Basis begonnen wird und schrittweise Verbesserungen f\u00fcr leistungsf\u00e4higere Systeme hinzugef\u00fcgt werden. Sie erm\u00f6glicht es somit Entwicklern, Webseiten so zu gestalten, dass sie die F\u00e4higkeiten von modernen Browsern und Ger\u00e4ten optimal ausnutzen. Gleichzeitig werden Ausf\u00fchrungs- und Darstellungsprobleme der Website bei weniger leistungsf\u00e4higen Ger\u00e4ten und \u00e4lteren Browsern mit eingeschr\u00e4nkter Funktionalit\u00e4t vermieden.\n<\/p>\n

Abgrenzung zu Graceful Degradation<\/span><\/h2>\n
\n
\"Progressive<\/a> <\/p>\n
Abbildung:<\/b> Progressive Enhancement vs. Graceful Degradation
Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Graceful Degradation<\/a> ist das gegenteilige Prinzip zu Progressive Enhancement. Der Ansatz unterscheidet sich von Progressive Enhancement dahingehend, dass Graceful Degradation den umgekehrten Weg von der Komplexit\u00e4t zur Einfachheit geht. Bei dieser Design-Strategie werden Webseiten zun\u00e4chst f\u00fcr die modernsten Browser konzipiert. Anschlie\u00dfend werden sie mit \u00e4lteren und weniger komplexen Browsern getestet, um „Fallbacks“ f\u00fcr diese zu erstellen. Dies erm\u00f6glicht es einem Front-End-Entwickler, Schnittstellen mit den neuesten Technologien kreativ zu gestalten, stellt aber auch sicher, dass die Website auf \u00e4lteren Clients funktioniert und genutzt werden kann.\n<\/p>\n

Die Funktionsweise von Progressive Enhancement<\/span><\/h2>\n

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\u00e4ngerkupplung eine erweiterte Funktionalit\u00e4t und zus\u00e4tzliche Nutzungsm\u00f6glichkeiten hinzugef\u00fcgt 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.\n<\/p>\n

Die erste Ebene ist sauberes, semantisches HTML<\/strong>. Dieses erm\u00f6glicht textbasierten, sprachbasierten und \u00e4lteren User Agents, den Inhalt der Website ordnungsgem\u00e4\u00df zu interpretieren und anzuzeigen.\n<\/p>\n

Die zweite Ebene ist CSS<\/strong>. Ein Browser, der eine CSS-Zeile nicht versteht, ignoriert diese. Wenn ein Basissatz mit Stilen erstellt wird, die alle Browser verstehen, k\u00f6nnen zus\u00e4tzliche Stile mit CSS f\u00fcr neuere Browserversionen hinzuf\u00fcgt werden, die von \u00e4lteren einfach ignoriert werden. Ein simples Beispiel f\u00fcr eine progressive Verbesserung auf der CSS Ebene zeigt folgender Code:\n<\/p>\n

.main-content {\r\nbackground: # 999;\r\nbackground: rgba (153, 153, 153, .75);\r\n}<\/pre>\n
Dieser Stil setzt den Hintergrund zun\u00e4chst auf eine graue Farbe. Die zweite Regel verwendet RGBA-Farbwerte, um eine Transparenzstufe festzulegen. Wenn ein Browser RGBA unterst\u00fctzt, \u00fcberschreibt er den ersten Stil mit dem zweiten. Wenn nicht, wird nur der erste angewandt.\n<\/p>\n
Die dritte Ebene des Website Designs bildet JavaScript<\/strong>. Dieses erm\u00f6glicht es User Agents, die JavaScript verwenden k\u00f6nnen, den Usern durch Interaktivit\u00e4t eine verbesserte Benutzerfreundlichkeit im Web zu bieten.\n<\/p>\n
Eine weitere M\u00f6glichkeit, um progressive Verbesserungen in das Design einer Website zu integrieren, besteht in der Verwendung sogenannter „Feature Queries“. Diese \u00e4hneln Medienabfragen, die f\u00fcr responsive Webseiten genutzt werden. Anders als Media Queries<\/a>, mit denen Displaygr\u00f6\u00dfen und sonstige Ger\u00e4teeigenschaften abgefragt werden, pr\u00fcfen Feature Queries, ob ein bestimmtes Feature vom Web Browser unterst\u00fctzt wird oder nicht. Die Syntax lautet beispielsweise:\n<\/p>\n
@supports (display: flex) {\r\n}<\/pre>\n
Alle Design-Stile, die dieser Abfrage hinzugef\u00fcgt werden, funktionieren nur, wenn der Browser „flex“, also die Stile f\u00fcr Flexbox, unterst\u00fctzt.\n<\/p>\n
Vor- und Nachteile von Progressive Enhancement<\/span><\/h2>\n
Ein wichtiger Grund f\u00fcr die Attraktivit\u00e4t von Progressive Enhancement im Web ist die St\u00e4rke des Endergebnisses. Der Zugriff auf mit Progressive Enhancement entwickelte Inhalte ist sowohl f\u00fcr Benutzer eines beliebigen Clients als auch f\u00fcr Suchmaschinen-Crawler<\/a> sehr gut m\u00f6glich. Die Strategie der progressiven Verbesserung zwingt Entwickler dazu, ihr Projekt zun\u00e4chst als funktionales System zu planen und dabei nur die grundlegendsten Webtechnologien zu verwenden. So entsteht eine funktionierende Grundlage, auf die sie zur\u00fcckgreifen k\u00f6nnen, wenn das Projekt in seiner Komplexit\u00e4t zunimmt. Wenn ein neuer Browser auf den Markt kommt oder eine neue Browsererweiterung verf\u00fcgbar ist, k\u00f6nnen sie weitere Funktionen hinzuf\u00fcgen, ohne die urspr\u00fcngliche L\u00f6sung ber\u00fchren zu m\u00fcssen. Bei Graceful Degradation m\u00fcsste die urspr\u00fcngliche L\u00f6sung hingegen ge\u00e4ndert werden.\n<\/p>\n
Progressive Enhancement Projekte sind zudem einfach zu pflegen. Mit dem Fokus auf „First Principles“ k\u00f6nnen sich Entwickler auf komplexere Abschnitte der Systeminteraktion konzentrieren, ohne sich um die Grundlagen k\u00fcmmern zu m\u00fcssen. Au\u00dferdem ist bei dieser Strategie der Zeitaufwand f\u00fcr Kompatibilit\u00e4tstests mit unterschiedlichen Browsern geringer.\n<\/p>\n
Anwendungen, die eine aufwendige und komplexe Front-End-Schnittstelle erfordern, k\u00f6nnen allerdings nur schwer auf Basis von Progressive Enhancement aufgebaut werden. F\u00fcr solche komplexen und interaktiven Web Anwendungen ist es h\u00e4ufig nicht m\u00f6glich, eine einfache Basisversion zu erstellen, die Usern \u00e4lterer Browser und Ger\u00e4te eine vergleichbare Funktionalit\u00e4t bietet.\n<\/p>\n
Kompatibilit\u00e4t von Progressive Enhancement mit Mobile First<\/span><\/h2>\n
Die Erstellung einer Website auf Basis von Progressive Enhancement ist kompatibel mit dem heute sehr wichtigen Mobile First<\/a> Ansatz. Bei beiden Strategien wird mit der Entwicklung f\u00fcr das schw\u00e4chste System (Smartphone) begonnen und schrittweise die Funktionalit\u00e4t der Seite f\u00fcr leistungsf\u00e4higere Ger\u00e4te bis hin zum Desktop PC mit einem modernen Web Browser erweitert.\n<\/p>\n
Das mobile Design einer Website beginnt dabei mit der Erstellung und Strukturierung der Inhalte. Sobald die Inhalte festgelegt sind, kann die Webseite zun\u00e4chst f\u00fcr mobile Ger\u00e4te mit kleinen Displays und \u00e4lteren Browsern programmiert werden.\n<\/p>\n
Wenn diese Basis auf den daf\u00fcr vorgesehenen Ger\u00e4ten lauff\u00e4hig ist, kann die Seite durch Hinzuf\u00fcgen von CSS Eigenschaften und Media Queries f\u00fcr die Darstellung auf gr\u00f6\u00dferen Bildschirmen von Tablets, Notebooks und PCs angepasst werden. Bei diesem Entwicklungsschritt werden zudem mittels integrierter Feature Detection die F\u00e4higkeiten der Browser abgefragt, sodass die Seite f\u00fcr jede Browserversion eine optimale Funktionalit\u00e4t und Benutzerfreundlichkeit bietet. Durch den Aufbau einer Webseite beginnend mit der einfachsten Version f\u00fcr kleine, mobile Displays und \u00e4ltere Browser ist eine Erweiterung f\u00fcr gr\u00f6\u00dfere Displays und Adaptierung auf modernere Ger\u00e4te mit Progressive Enhancement unkompliziert durchf\u00fchrbar.\n<\/p>\n
Weiterf\u00fchrende Links<\/span><\/h2>\n