Progressive enhancement

Die Reihenfolge der progressiven Verbesserung: Html, CSS, und JavaScript.
Barrierefreiheit durch reine HTML (erste Ebene) ohne Styling (zweite Ebene) und Skripte (dritte Ebene). Die Seite hat nur 76 kb mit reinem HTML.

Progressive Enhancement ist eine Strategie in Web-Design Das legt Schwerpunkt auf Internetinhalt Erstens zulassen Jeder zugänglich Der grundlegende Inhalt und die Funktionalität einer Webseite, während Benutzer Mit zusätzlichen Browserfunktionen oder einem schnelleren Internetzugang erhalten Sie stattdessen die erweiterte Version. Zusätzlich beschleunigt es das Laden und erleichtert das Krabbeln Web -Suchmaschinen, wie der Text von Seiten sofort durch die geladen wird Html Quellcode, anstatt auf JavaScript zu warten, um den Inhalt anschließend zu initiieren und zu laden, was bedeutet, dass Inhalte für den Konsum "aus der Schachtel" bereit sind, wird unmittelbar und nicht hinter zusätzlichen Schichten bedient.[1]

Diese Strategie beinhaltet Trennung das Präsentationssemantik Aus dem Inhalt, wobei die Präsentation in einer oder mehreren optionalen Ebenen implementiert wird, aktiviert auf der Grundlage von Aspekten der Browser oder Internet Verbindung des Klient. In der Praxis bedeutet dies, Inhalte durch zu servieren Html, der "niedrigste gemeinsame Nenner" der Webstandards und das Anwenden von Styling und Animation durch CSS in technisch möglicher Ausdehnung und dann weitere Verbesserungen durch anwenden JavaScript. Veraltet Adobe Flash könnte betrachtet werden, dass er den letzten Platz mit JavaScript geteilt hat, während er weit verbreitet war.[2] Da Webbrowser die Site -Funktionen so laden können, dass sie aufgrund eines Fehlers oder einer fehlenden Funktion in JavaScript nicht geladen werden, ist eine zunehmend verbesserte Website stabiler und fehlender Funktionen nicht mehr. rückwärts kompatibel.

Geschichte

"Progressive Enhancement" wurde von Steven Champeon & geprägt. Nick Finck Bei der SXSW Interaktive Konferenz am 11. März 2003 in Austin,[3] und durch eine Reihe von Artikeln für Webmonkey die zwischen März und Juni 2003 veröffentlicht wurden.[4]

Spezifisch Cascading Style Sheets (CSS) Techniken, die sich auf die Flexibilität des Seitenlayouts beziehen, das unterschiedliche Bildschirmauflösungen entgegenbringt, ist das Konzept, das verbunden ist sich anpassendes Webdesign sich nähern. .NET Magazine Wählen Sie die progressive Verbesserung als Nummer 1 in seiner Liste der Top -Webdesign -Trends für 2012 (sich anpassendes Design war #2).[5] Google hat die Einführung einer progressiven Verbesserung gefördert, um "unsere Systeme (und eine breitere Palette von Browsern) zu helfen, nutzbare Inhalte und grundlegende Funktionen zu sehen, wenn bestimmte Webdesignfunktionen noch nicht unterstützt werden".[6]

Einführung

Die Strategie ist eine Entwicklung einer früheren Webdesignstrategie, die als bekannt ist anmutiger Abbau, wobei Webseiten zuerst für die neuesten Browser konzipiert wurden, aber dann in älteren Versionen der Browser -Software gut geeignet sind.[7] Der anmutige Abbau zielt darauf ab, eine Seite zu ermöglichen, sich zu "degradieren" - präsentierbar zu bleiben und zugänglich Auch wenn bestimmte Technologien, die vom Design erwartet werden, nicht vorhanden sind.

Bei der progressiven Verbesserung wird die Strategie absichtlich umgekehrt: die Internetinhalt wird mit a erstellt Markup -Dokument, ausgerichtet auf den niedrigsten gemeinsamen Nenner der Browser -Softwarefunktionalität.[8][4] Inhalt nur durch JavaScript, wie in zusammenklappbaren Menüs, wird standardmäßig angezeigt und nur von JavaScript versteckt, wenn sie geladen werden, wie in Seitenabschnitten von implementiert Wikipedias mobiles Web. Das Entwickler Fügt alle gewünschten Funktionen der Präsentation und des Verhaltens der Seite mit modernen CSS hinzu. Skalierbare Vektorgrafiken (SVG) oder JavaScript.

Hintergrund

Der progressive Ansatz der Verbesserung stammt aus Champeons früher Erfahrung (c.1993-1994) mit Standardverallgemeinerungssprache (SGML) vor der Arbeit mit Html oder alle Web -Präsentationssprachen sowie aus späteren Erfahrungen mit CSS, um in Browser -Fehler zu arbeiten. In diesen frühen SGML -Kontexten war das semantische Markup von entscheidender Bedeutung, während die Präsentation fast immer getrennt betrachtet wurde, anstatt in das Markup selbst eingebettet zu werden. Dieses Konzept wird in Markup -Kreisen als Regel von unterschiedlich bezeichnet Trennung von Präsentation und Inhalt, Trennung von Inhalten und Stil, Oder von Trennung von Semantik und Präsentation. Als sich das Web Mitte der neunziger Jahre entwickelte, aber bevor CSS eingeführt und häufig unterstützt wurde, wurde diese Kardinalregel von SGML von HTML-Extendern wiederholt verletzt. Infolgedessen waren Webdesigner gezwungen, neue, disruptive Technologien und Tags anzuwenden, um relevant zu bleiben. Mit einer Anspielung auf die Anerkennung von Anerkennung, in Anerkennung, dass nicht jeder den neuesten Browser hatte, begannen viele, einfach Designpraktiken und -technologien einzusetzen, die nur in den jüngsten und möglicherweise früheren Major -Browser -Veröffentlichungen unterstützt wurden. Mehrere Jahre lang funktionierte ein Großteil des Web einfach in nichts als in den neuesten, beliebtesten Browsern. Dies blieb bis zum Anstieg und der weit verbreiteten Einführung und Unterstützung von CSS sowie vielen populistischen Basis -Bildungsbemühungen (von Eric Costello, Owen Briggs, Dave Shea und anderen) zutrifft und zeigt Webdesigner, wie CSS für Layoutzwecke verwendet werden.

Progressive Verbesserung basiert auf der Erkenntnis, dass die Kernannahme hinter "anmutiger Abbau" - dass die Browser immer schneller und mächtiger wurden - sich mit dem Aufstieg von Handheld und dem Aufstieg von Handheld und falsch erweisen konnte PDA Geräte mit niedrig-funktionaler Browsern und schwerwiegenden Bandbreitenbeschränkungen. Darüber hinaus hat sich die schnelle Entwicklung von HTML und verwandten Technologien in den frühen Tagen des Web verlangsamt, und sehr alte Browser sind veraltet geworden, um Designer zu befreien, leistungsstarke Technologien wie CSS zu verwenden, um alle Präsentationsaufgaben und JavaScript zu verwalten, um den komplexen Kunden zu verbessern. Seitenverhalten.

Zuerst als etwas weniger unhandlichem Catchall-Phrase vorgeschlagen, um die empfindliche Kunst des "Trennens der Dokumentstruktur und des Inhalts von Semantik, Präsentation und Verhalten" und basierend auf der damaligen Verwendung von CSS-Hacks, um die Rendern von Fehler in bestimmten Browsern zu rendern Die progressive Verbesserungsstrategie hat ein eigenes Leben übernommen, da neue Designer die Idee angenommen und den Ansatz erweitert und überarbeitet haben.[wie?]

Kernprinzipien

Die progressive Verbesserungsstrategie besteht aus den folgenden Kernprinzipien:[4]

  • Grundlegende Inhalte sollten für alle Webbrowser zugänglich sein.
  • Grundlegende Funktionen sollten für alle Webbrowser zugänglich sein.
  • Semantisches Markup enthält alle Inhalte.
  • Das erweiterte Layout wird durch extern verknüpfte CSS bereitgestellt.
  • Verbessertes Verhalten wird durch extern verknüpftes JavaScript bereitgestellt.
  • Endbenutzer-Webbrowserpräferenzen werden respektiert.

Unterstützung und Adoption

  • Progressive Verbesserung wird an den vorderen Enden von verwendet Mediawiki-Fourierte Websites wie z. Wikipedia, wie es lesbar, navigierbar und sogar unter Verwendung der grundlegenden HTML -Schnittstelle ohne Styling oder Skripte bearbeitet werden kann, wird jedoch durch solche verbessert. Zum Beispiel die Symbolleiste des Wikitext -Editors wird geladen und über JavaScript arbeitet.
  • Im August 2003 erstellte Jim Wilkinson eine progressive Wiki -Seite, um einige Tricks und Tipps zu sammeln und die Gesamtstrategie zu erklären.[9]
  • Designer wie Jeremy Keith haben gezeigt, wie der Ansatz harmonisch mit anderen Ansätzen für die Moderne verwendet werden kann Web-Design (wie zum Beispiel Ajax) um flexible, aber leistungsstarke Benutzererfahrungen zu liefern.[10]
  • Aaron Gustafson schrieb eine Serie, die die Grundlagen der progressiven Verbesserung abdeckte, von der zugrunde liegenden Philosophie bis hin zu CSS -Ansätzen bis hin zur Umgang mit JavaScript für eine Auseinandersetzung.[7][11][12]
  • Andere, einschließlich Dave Shea, haben dazu beigetragen, die Übernahme des Begriffs zu verbreiten, um sich auf CSS-basierte Designstrategien zu beziehen.
  • Organisationen wie die Webstandards Projekt (Wesp), das hinter der Erschaffung von stand Säure2 und Acid3 Tests haben die progressive Verbesserung als Grundlage für ihre Bildungsbemühungen angenommen.
  • Im Jahr 2006 Nate Koechley bei Yahoo! In seinem eigenen Ansatz für Webdesign und Browser -Support, abgestufter Browser Support (GBS), wandte sie ausführlich auf die progressive Verbesserung.[13]
  • Steve Chipman von AOL hat die progressive Verbesserung (durch DOM Scripting) als Grundlage für seine Webdesignstrategie bezeichnet.[14]
  • David Arttz, Leiter des AOL -Optimierungsteams, entwickelte eine Reihe von zugänglichen Rendering -Technologien und erfand eine Technik zur Demontage der "Verbesserung" im laufenden Fliegen, wodurch die Präferenz des Benutzers gerettet wurde.
  • Chris Heilmann diskutierte die Bedeutung einer gezielten Abgabe von CSS, so dass jeder Browser nur den Inhalt (und Verbesserungen) erhält, den er verarbeiten kann.[15]
  • Scott Jehl von der Filamentgruppe schlug eine "testgetriebene progressive Verbesserung" vor.[16] Empfehlung, die Gerätefunktionen zu testen (anstatt sie aus dem erkannten Abschluss zu schließen User-Agent) Vor der Bereitstellung von Verbesserungen.
  • Wt ist ein Open-Source-Server-Seiten-Webanwendungs-Framework, das während seines Bootstrap transparent progressive Verbesserung implementiert und von einfachem HTML zu vollem Ajax überschreitet.

Vorteile

Zugänglichkeit, Kompatibilität und Öffentlichkeitsarbeit

Webseiten, die nach den Prinzipien der progressiven Verbesserung erstellt wurden, sind nach ihrer Natur zugänglicher, rückwärts kompatibel, und Öffentlichkeitsarbeit, weil die Strategie verlangt, dass grundlegende Inhalte immer verfügbar sind, nicht durch häufig nicht unterstützte oder skription Textbasierte Webbrowser) oder auf Computern in empfindlichen Umgebungen blockiert. Darüber hinaus erleichtert das spärliche Markup -Prinzip Tools, die Inhalte vorlesen, um diesen Inhalt zu finden. Es ist unklar, wie gut progressive Verbesserungsseiten mit älteren Tools funktionieren, um mit Tischlayouts umzugehen. "Etikettsuppe", und dergleichen.

Geschwindigkeit, Effizienz und Benutzerkontrolle

Das Client (Computing) kann auswählen, welche Teile einer Seite über die grundlegende HTML (z. B. Styling, Bilder usw.) hinausgeladen werden sollen, und kann sich entscheiden können Nur um die erforderlichen Teile herunterzuladen Damit die gewünschte Verwendung beschleunigt und die Bandbreite und den Stromverbrauch reduziert werden können. Beispielsweise kann ein Kunde nur grundlegende HTML herunterladen, ohne Stilblätter, Skripte und Medien (z. B. Bilder) aufgrund niedriger Internetgeschwindigkeiten durch geografische Lage, schlechtes Mobilfunksignal oder gedrosselte Geschwindigkeit aufgrund von erschöpftem Hochgeschwindigkeitsbereich zu laden Datentarif. Dies reduziert auch den Bandbreitenverbrauch auf der Serverseite.

Im Vergleich dazu erfordern Seiten, deren anfängliche Inhalt über AJAX geladen wird, von dem Client, JavaScript ineffizient auszuführen, um Seiteninhalte herunterzuladen und anzeigen, anstatt den Inhalt sofort herunterzuladen.

Suchmaschinenoptimierung (SEO)

Verbesserte Ergebnisse in Bezug auf Suchmaschinenoptimierung (SEO) ist ein weiterer Nebeneffekt einer progressiven Verbesserungs-basierten Webdesignstrategie. Da der grundlegende Inhalt für Suchmaschinenspinnen immer zugänglich ist, vermeiden Seiten mit progressiven Verbesserungsmethoden Probleme, die die Indexierung der Suchmaschine behindern können, während der grundlegende Seiteninhalt durch JavaScript -Ausführung das Kriechen langsam und ineffizient machen muss.[17]

Kritik und Reaktionen

Einige Skeptiker wie Garret Dimon haben ihre Besorgnis zum Ausdruck gebracht, dass progressive Verbesserung in Situationen, die stark auf JavaScript beruhen, nicht zu tunempflichtig ist, um bestimmte Präsentationen oder Verhaltensweisen von Benutzeroberflächen zu erreichen.[18] Andere haben dem Punkt kontert, dass Informationsseiten mithilfe progressiver Verbesserung codiert werden sollten, um von Spinnen indiziert zu werden.[19] und dass sogar flash-hungrige Seiten mit progressiver Verbesserung codiert werden sollten.[20] In einem verwandten Gebiet haben viele ihre Zweifel an dem Prinzip der Trennung von Inhalten und Präsentation in absoluten Begriffen zum Ausdruck gebracht und stattdessen auf eine realistische Erkennung drängen, dass die beiden untrennbar miteinander verbunden sind.[21][22]

Siehe auch

Anmerkungen

  1. ^ "Progressive Verbesserung ist schneller". jakearchibald.com. 2013-09-03. Abgerufen 2021-11-11.{{}}: CS1 Wartung: URL-Status (Link)
  2. ^ Mills, Chris (8. Juli 2011). "Anmutiger Abbau gegen progressive Verbesserung". World Wide Web Konsortium. Abgerufen 2020-08-13.
  3. ^ Champeon, Steven & Finck, Nick (2003) Inklusive Webdesign für die Zukunft, SXSWI -Präsentation
  4. ^ a b c Champeon, Steven (2003), Progressive Verbesserung und die Zukunft des Webdesigns, Webmonkey
  5. ^ "15 Top -Webdesign- und Entwicklungstrends für 2012". 9. Januar 2012.
  6. ^ Pierre weit (2014), Aktualisieren unserer technischen Webmaster -Richtlinien, Webmaster Central Blog
  7. ^ a b Aaron Gustafson (2008), Fortschrittliche Verbesserung verstehen, Eine Liste auseinander
  8. ^ "101 Tipps für Suchmaschinenoptimierung". www.meta4creations.com. Abgerufen 2016-04-14. Progressive Verbesserung […] bedeutet, dass Sie Ihre Website erstellen, beginnend mit den niedrigsten gemeinsamen Nennerbrowsern.
  9. ^ Wilkinson, Jim (2003), Progressive Verbesserung - CSS diskutieren Archiviert 2016-03-09 bei der Wayback -Maschine
  10. ^ Jeremy Keiths Adactio Blog (2005), Progressive Verbesserung mit Ajax
  11. ^ Aaron Gustafson (2008), Progressive Verbesserung mit CSS, Eine Liste auseinander
  12. ^ Aaron Gustafson (2008), Progressive Verbesserung mit JavaScript, Eine Liste auseinander
  13. ^ Nate Koechley, Bewertete Browserunterstützung Archiviert 2006-04-14 im Wayback -Maschine
  14. ^ Steven G. Chipman (2005), NEUE SKOOL DOM Scripting
  15. ^ Chris Heilmann, Doppelsicht - Geben Sie den Browsern CSS, die sie verdauen können (2005) Archiviert 2017-07-06 bei der Wayback -Maschine
  16. ^ Jehl, Scott. "Testgetriebene progressive Verbesserung". Eine Liste auseinander. Abgerufen 27. Oktober 2009.
  17. ^ Stephan Spencer, PE ist gut für SEO | Suchscheinwerfer - CNET -Nachrichten
  18. ^ Dimon, Garret, Die Realität der fortschreitenden Verbesserung Archiviert 2007-03-17 bei der Wayback -Maschine
  19. ^ IA Summit 2006 »Blog -Archiv» Web 2.0 und SEO? Archiviert 2006-04-17 im Wayback -Maschine
  20. ^ Deconcept »Verwenden von alternativen Inhalten als Inhalt in Flash
  21. ^ "Stopdesign | Sind sie wirklich getrennt? (2003)". Archiviert von das Original am 2009-01-02. Abgerufen 2006-04-14.
  22. ^ Eine Liste auseinander: Artikel: Trennungsangst: Der Mythos der Trennung des Stils von Inhalten (2000)

Verweise

Weitere Lektüre

Artikel
Bücher