Verständnis progressiver Verbesserungstechniken im Webdesign

Eines der wichtigsten Themen in Webentwicklungs- und Webdesignkreisen ist das Thema Progressive Enhancement (PE). Der Satz ist in vielen Online-Funktionen und Kommentaren zu finden, einschließlich dieser Fallstudie aus dem North Bay Business Journal, in der ein Weingut im Napa Valley eine Neugestaltung der Website mithilfe fortschrittlicher Verbesserungstechniken in Betracht zieht, und der Zusammenfassung des "Top 15 Web" durch das Dot Net- Magazin Design- und Entwicklungstrends für 2012. "

Bei all der jüngsten Aufmerksamkeit, die der fortschreitenden Verbesserung gewidmet wurde, würde man meinen, es sei eine neue Denkweise oder ein neues System, das gerade aus den Tiefen eines F & E-Think Tanks aufgetaucht ist. Bemerkenswerterweise ist das überhaupt nicht der Fall; Steven Champion prägte den Satz im Frühjahr 2003, vor fast zehn Jahren, in mehreren Artikeln für Webmonkey und bei Präsentationen auf der SXSW Interactive Conference. Warum wird dem Thema der progressiven Verbesserung jetzt so viel Aufmerksamkeit geschenkt? Zusammen mit dem Responsive Web Design (RWD), das versucht, die Vielzahl von webfähigen Geräten auf dem Markt mit unterschiedlichen Bildschirmgrößen und Auflösungen zu berücksichtigen, wird die fortschreitende Verbesserung wieder interessanter.

Was ist progressive Verbesserung?

PE kann als eine Webdesign-Strategie beschrieben werden, die sich bemüht, Websites zu erstellen, die für alle Geräte zugänglich sind, und dabei einen mehrschichtigen Ansatz mit einer Reihe von Grundprinzipien verwendet, bei denen die Zugänglichkeit von Inhalten und Funktionen betont wird. PE ist die Herausforderung für eine traditionelle Webstrategie, die als "Graceful Degradation" bezeichnet wird. Dies bedeutet, dass die Website für eine bestimmte Browsertechnologie konzipiert ist und auch bei Verwendung älterer Benutzeragenten präsentabel bleibt oder sich "verschlechtert". Graceful Degradation setzt auch voraus, dass die Benutzer nur ihre Browser oder Technologien "aktualisieren" müssen, wobei der Fokus auf dem Endbenutzer und nicht auf der Website liegt.

Ich muss Ihnen nicht sagen, wie viel Benutzerakzeptanz-Websites erhalten und welche Art von Empfang sie erhalten, wenn Besucher eine Nachricht sehen, die der Meldung "Am besten angesehen in ..." ähnelt. Führen Sie einfach in Ihrer bevorzugten Suchmaschine eine Abfrage nach dem Ausdruck "Am besten in Netscape angezeigt" aus und sehen Sie, wie viele Ergebnisse angezeigt werden. Wenn überhaupt, wird angezeigt, wie lange es her ist, seit einige Websites aktualisiert wurden. Für andere ist dies eine Erinnerung daran, dass Websites, die speziell für einen Browser oder eine Browserversion entwickelt wurden, früher als später veraltet sind.

Die Schichten der progressiven Verbesserung

Aaron Gustafson schrieb einen bemerkenswerten Artikel, in dem die progressive Verbesserung als eine Reihe von Schichten beschrieben wurde, die einem Schichtkuchen oder den Schichten eines Peanut M & M ähnlich sind. In Gustafsons Modell ist das Zentrum die Inhaltsschicht eines reichhaltigen semantischen Markups. Die Inhaltsebene ist von der Präsentationsebene umgeben, bei der es sich um CSS und Styling handelt. und die Präsentationsschicht ist von der clientseitigen Skripterstellung umgeben, die auch als JavaScript oder jQuery bekannt ist.

Die drei Schichten oder Schichten der progressiven Verbesserung:

  • Inhaltsschicht = reichhaltiges semantisches HTML-Markup
  • Präsentationsschicht = CSS und Styling
  • Clientseitige Skripterstellung = JavaScript- oder jQuery-Verhalten

Abbildung A.

Vorteile der progressiven Verbesserung

Eine praktische Anwendung zum Überlagern Ihres Website-Designs führt zu folgenden Vorteilen:

  • Verbesserte Zugänglichkeit - Einige Benutzer können nicht von einem Bildschirm aus lesen. Durch die fortschreitende Verbesserung können Behinderte Websites mit verbesserter Benutzerfreundlichkeit über Text- oder Bildschirmlesegeräte genießen, was die Benutzerinteraktion fördert.
  • Erweitern Sie die Übertragbarkeit - Websites bleiben unabhängig von Browser, Gerät oder Plattform wirksam, indem Sie die Prinzipien von PE und RWD verwenden, einschließlich Medienabfragen, CSS3 und HTML5.
  • Leistungssteigerung - Der mehrschichtige Ansatz stellt sicher, dass zuerst der Inhalt, dann die Stile und dann das Verhalten geladen werden. Die wahrgenommene Leistungssteigerung resultiert aus der Rendering-Sequenz, die wiederum die Ladezeiten beim Anzeigen von Seiten verbessert.
  • Einfaches modulares Webdesign - Während der mehrschichtige Ansatz das Rendern der Website für den Endbenutzer unterstützt, unterstützt er den Webentwickler auch bei der Organisation und Verwaltung der Technologieschichten in diskreten Modulen, da die Website in einer verteilten Form von Inhalten und Stilen fortbesteht und Skripterstellung.

Anwendung von PE auf Webdesign

Wie integrieren Sie die Grundprinzipien der progressiven Verbesserung in Ihre Webdesign-Strategie? Schauen wir uns die Ebenen noch einmal an, um zu sehen, was aus jeder Ebene herausgeholt werden kann.

Inhalt mit semantischem HTML-Markup

Das semantische HTML-Markup stellt sicher, dass Tags angewendet werden, um Bedeutung und Inhaltsstruktur zu vermitteln, was mit den sich entwickelnden HTML5-Standards für das Webdesign verknüpft ist. Beispiele für ein gutes semantisches Markup sind die HTML5-Liste neuer Elemente und Attribute wie,,, und, die den allgemeinen generischen Block und Inline ersetzen, oder das neue und, die das generische ersetzen.

Präsentationsstyling und CSS

Zusammen mit dem semantischen Markup in HTML5 passen die sich entwickelnden CSS3-Standards gut zusammen und ermöglichen es Ihrem Webdesign, mit Farben, Bildern, Hintergründen, Verläufen, Schatten, Texteffekten und vielem mehr vom Bildschirm zu springen. Warum sollte man sich nur an ein Stylesheet halten? In vielen Website-Implementierungen müssen mehrere verwendet werden, um bestimmte Stile wie Typ, Farbe und Layout zu trennen oder unterschiedliche Medientypen wie Bildschirm, Druck oder Mobil zu definieren.

Skriptverhalten

Die letzte Ebene verbindet alles mit unauffälligem JavaScript oder jQuery und bietet Ihrem Webdesign eine vorteilhafte Leistung. Durch das Einfügen bescheidener Skripte werden robuste Funktionen verbessert und gleichzeitig als separates Modul verwaltet. Es sollte auch ermöglichen, dass alle Inhalte verfügbar sind, ohne dass alle oder einige der Skripte erfolgreich ausgeführt werden. Es sollte nicht die Zugänglichkeit des Inhalts verringern, sondern die Verfügbarkeit des Inhalts für alle Benutzer erhöhen und bereichern.

Während die fortschreitende Verbesserung ihre Kritiker hat, ist sie als Webdesign-Ansatz und als Geschäftsmodell für Designhäuser der Ansicht, dass die wachsende Notwendigkeit besteht, Websites zu erstellen, die für alle Geräte zugänglich sind, insbesondere angesichts der Explosion internetfähiger mobiler Geräte.

© Copyright 2021 | mobilegn.com