Best Practices für die schrittweise Verbesserung im Webdesign

Das Erstellen von Websites ist unglaublich komplex mit vielen sich schnell verändernden Teilen. Das Ziel der Webdesign Community ist es Verringern Sie die Komplexität, und das Fehlerpotenzial reduzieren in jeder Phase des Erstellungsprozesses.

Progressive Enhancement ist eine solche Idee im Webdesign, die zielt darauf ab Fehler reduzieren und sorgen für eine konsistente Benutzererfahrung über die Grenze. Das Konzept hat eine eigene Wikipedia-Seite, die es als Methode von erklärt vollständig zugänglicher Inhalt, Rendering erweiterter Funktionen nur, wenn vom Browser unterstützt.

Es ist einfach, die progressive Verbesserung zu verstehen, aber es ist nicht so einfach, sie direkt auf Ihre Konstruktionsarbeit anzuwenden. Ich würde gerne einige davon abdecken Best Practices für die fortschreitende Verbesserung realer Projekte zu helfen Konstrukteuren dabei, ihren Workflow nachhaltiger zu betrachten.

1. Die progressive Verbesserung verstehen

Die Theorie der progressiven Verbesserung empfiehlt Beginnen Sie mit einer einfachen Website das funktioniert in allen Browsern und macht es für jeden Besucher zugänglich. Fügen Sie dann wann immer möglich Funktionen hinzu.

Dies ist das Gegenteil von anmutiger Verschlechterung, die standardmäßig alle Funktionen einschließt und dann abnimmt, wenn etwas nicht funktioniert.

Die fortschreitende Verbesserung ist für die gesamte Benutzererfahrung besser, weil sie im Kern besteht lädt nur notwendige Elemente. Jeder Webbrowser unterstützt Text (und in der Regel Bilder). Ohne CSS werden diese Informationen fad und geschmacklos aussehen, sind aber zugänglich.

Diese Liste auseinander Artikel argumentiert, dass progressive Verbesserung ist inhalt zuerst mit später hinzugefügte Stile und dynamische Komponenten. Inhalte in semantischem HTML sollten vor allem anderen geliefert werden.

Das fortgeschrittene CSS und JavaScript, das wir heute verwenden, wird weitgehend unterstützt. Wenn wir jedoch die Prinzipien der fortschreitenden Verbesserung anwenden möchten, sollten sie als Luxusartikel betrachtet werden.

Hier ist ein allgemeiner Überblick über die Hauptmerkmale der progressiven Verbesserung, die Sie berücksichtigen sollten:

Semantisches Markup für alle Inhalte
Benutzer Browsereinstellungen muss respektiert werden
Inhalt und grundlegende Funktionalität sollten sein für alle Benutzer verfügbar
Unauffälliges JavaScript wird nur geladen in Umgebungen, die es unterstützen können

Technologische Einschränkungen bei der Front-End-Entwicklung werden hauptsächlich von der Browserkompatibilität bestimmt. Progressive Enhancement führt Sie zurück zu den Grundlagen, wenn Sie darüber nachdenken, wie die Einfachste Webseite könnte aussehen Von dort können Sie Planen Sie weitere Funktionen, wie CSS3-Eigenschaften.

Aber was ist mit Browsern, die kein modernes CSS3 unterstützen? Hier kommen Sites wie Can I Use ins Spiel. Sie sollten entscheiden, welche Funktionen es wert ist, implementiert zu werden, und Urteile auf der Grundlage von Entscheidungen treffen bei der Zielgruppe Ihrer Website.

2. Subsistenz in Stylesheets

Die meisten Browser unterstützen heute alle grundlegenden Eigenschaften, die Sie benötigen. Aber Fortgeschrittenes CSS3 ist immer noch ein Problem für ältere Benutzer, und progressive Verbesserung bietet eine Lösung.

Anstatt nach Fallback-Methoden zu suchen, um diese neuen Funktionen beizubehalten, beschäftigen Sie sich zuerst mit richtige Layoutstrukturen.

Schreiben Sie semantisches HTML- und CSS-Markup, das in so vielen aktiven Browsern wie möglich funktioniert (Unterstützung für alte Browser wie IE5-Unterstützung ist nicht erforderlich)..

Nehmen Sie zum Beispiel diese JSFiddle, die Floats mit zwei Seitenleisten verwendet (.Fest) und einen Fluidinhaltsbereich (.Flüssigkeit). Wenn Sie alle CSS-Dateien löschen und den Code erneut ausführen, werden Sie feststellen, dass sich die erste Spalte, die zweite und die letzte Spalte gut zusammenstellen.

Einige Entwickler würden die Inhaltsspalte bevorzugen (.Flüssigkeit) erscheinen zuerst im HTML. Hier kommt progressive Verbesserung ins Spiel und alternative CSS-Lösungen werden realisierbar.

Die zwei Hauptziele Ihres HTML-Codes lauten wie folgt:

Völlig semantisch und gültig Code
EIN konsistente Erfahrung für jeden

Der einfachste Weg, um diese Ziele zu erreichen, ist zu fang von nichts an und aufarbeiten, Die meisten Befürworter der progressiven Verbesserung würden es empfehlen.

Wenn Ihr Code mit deaktiviertem und aktiviertem CSS gut aussieht, bietet es eine sinnvolle Lösung für alle.

Es ist auch eine Überlegung wert An welchem Punkt lassen Sie die Unterstützung für etwas fallen. Microsoft hat bereits die wichtige Unterstützung für IE6 eingestellt, sodass Benutzer, die diesen Browser ausführen, Ihre Zeit möglicherweise nicht wert sind.

Aber es gibt noch eine große Frage: Wenn ein Browser mein modernes CSS nicht unterstützt, was soll ich tun??

Sie einfach schreibe Code, der funktioniert ohne es, und betrachten das moderne CSS als eine progressive Verbesserung. Das ist das Schöne an der progressiven Verbesserungsmethodik.

Sie brauchen keine Rückschläge, weil Sie Grundsätzlich wird davon ausgegangen, dass nichts standardmäßig unterstützt wird.

Bei progressiven Erweiterungsmethoden wird die Website auch dann nutzbar gemacht, wenn etwas nicht unterstützt wird. Wenn dies jedoch unterstützt wird, ist dies umso besser.

Du musst darüber nachdenken wie der Inhalt tatsächlich ohne CSS fließt. Wenn ich beispielsweise CSS auf der Website von Transmit deaktiviere, fließt der Inhalt immer noch organisch auf der Seite.

Ja, es ist hässlich und ja, es fühlt sich an, als hätten wir 20 Jahre Fortschritt verloren… Aber es funktioniert.

3. Umgang mit JavaScript

Es ist erwähnenswert, dass jedes JavaScript-Problem, auf das Sie während des Entwicklungsprozesses stoßen, knifflig und einzigartig ist. Wenn Sie ein neues Projekt mit fortschreitender Verbesserung erstellen, sollten Sie alle erforderlichen JS-basierten Funktionen auflisten und prüfen, wie diese möglich sind funktionieren ohne JavaScript.

Dies erfordert eine Vielzahl von Online-Recherchen, um gültige Lösungen zu finden. Aaron Gustafson hat einen großartigen Blogbeitrag geschrieben, der Lösungen für verschiedene Probleme enthält, beispielsweise das Ersetzen von Ajax durch eine Meta-Aktualisierung für Inhalte in einem Iframe.

Wenn Sie JavaScript-Registerkarten erstellen, ist dies eine gute Idee Verwenden Sie Ankerlinks mit echten ID-Werten. Auf diese Weise können Sie bei deaktiviertem JavaScript die Registerkarten weiterhin anzeigen und mit dem Ankerwert aufrufen. Aaron schrieb einen weiteren Artikel über A List Apart, der einen allgemeineren Überblick darüber enthält, wie Sie über diese Probleme nachdenken sollten.

Hier ist ein anderes Beispiel. Nehmen wir an, Sie haben einen Link, der den Inhalt dynamisch lädt. Das href Der Wert ist leer, da alles mit JavaScript mit der Methode removeDefault () geladen wird.

Stattdessen wäre es ratsam, die Einstellung vorzunehmen href Eigentum an auf eine andere Seite zeigen wo der Inhalt natürlich geladen werden könnte, aber Der Besucher sieht diese Seite nur, wenn JavaScript deaktiviert ist.

Bei der progressiven Verbesserung geht es um mehr als nur um JavaScript. Da die Webentwicklung jedoch jedes Jahr weiter voranschreitet, spielt JavaScript zweifellos eine bedeutende Rolle.

Gehen Sie davon aus, dass Alles wurde deaktiviert, und skaliere von dort aus. Dies kann Probleme mit eingebetteten Widgets beinhalten, die außerhalb Ihrer Kontrolle liegen