Progressive Enhancement Tricks [geschlossen]

Question

Es ist eine echte Kunst, eine Website zu entwickeln, die für alle funktioniert, und Progressive Enhancement ist praktisch ein Mantra für mich ...

Also ich frage mich, was sind einige der besten Tricks sind Sie verwendet haben, für die Erstellung von Webseiten arbeiten für alle , unabhängig von Browser, Betriebssystem, Javascript, Flash, Bildschirmauflösung, deaktivierte Benutzer Zugänglichkeit, etc.?

(Ich weiß viel über Javascript und Browser-Tricks, wird aber zugeben, über Blitz ist ahnungslos, usw.)

Bearbeiten : Ich spreche nicht wirklich über das 1% der Websites, die RIAs sind, die einfach nicht ohne Javascript oder Flash-Funktion. Ich frage nicht, wie Google Docs ohne js zu schreiben. Ich würde gerne wissen, was die Leute für Websites zu tun, dass können tun coole Sachen, aber nicht wirklich Notwendigkeit .

Ich werde ein paar meiner eigenen als Antwort bieten ...

Answer 1

Ich versuche, Mantras zu vermeiden, es sei denn das Mantra, dass die Welt eine schmutzige Stelle ist.

Ich denke, eine Menge von Desktop-Funktionalität wird durch Web-Funktionalität ersetzt werden, und es wird ein schwieriger Übergang sein, die mit realen Anwendungen im Browser landen. Real Apps bedeutet JavaScript oder Flash oder Silverlight oder Java oder C # oder Objective-J in JavaScript erstellt.

Für mich ist der einzige Trick, um die Leute zu identifizieren und der Browser, das nicht sinnvoll, die Apps nutzen und sie mit einigen alternativen Inhalten.

Und das schließt Erfassung mobiler und die Bereitstellung geeigneter Inhalte. Es gibt viele Websites, die nur auf dem iPhone in Stücke fallen, weil sie so Flash-lastig und abhängig von breiten Computer-Monitore sind.

I nicht denke, es ist OK JavaScript für eine Website benötigen, die eine Website, aber ich denke, es ist für eine Web-OK ist, die eine App ist. I nicht denke, es ist OK nur 960px breite Seiten zu dienen. I nicht denke, es ist in Ordnung, nur Videos im Flash-Format zu dienen.

Answer 2

Einige der geschickten Tricks ich mit Ajax-basierten Websites arbeiten:

1) Schreiben Sie die ganze Seite und alle Verbindungen mit normalen Tags, die eine auf der rechten Seite mit Javascript deaktiviert, dann „hijax“ sie basiert auf so etwas wie „rel = extern“ gehen wird.

2) hinzufügen noscript-Tags mit alternativem Inhalt an jedem Ort, wo Sie JavaScript, sonst dynamische Inhalte einfügen würde.

3) ausblenden Elemente, die Sie Javascript in DOM Last mit Javascript, anstatt sie im Stylesheet zu verstecken und später steuern zeigt sie mit Javascript, da der Benutzer würde sich nie um sie zu sehen, ob sie haben Javascript aus.

Answer 3

Überprüfen Sie Ihre Statistiken (oder installieren Google Analytics wenn Sie Statistiken nicht) und bestimmen wo die Benutzer gehen und was sie tatsächlich tun.

z.

1.) Sie Ihre Benutzer ständig Suche verwenden, weil sie etwas nicht finden können? wenn ja vielleicht können Sie die Suche besser machen?

2.) Gibt es in Ihrer 404-Seite ein paar schnellen Optionen bieten zu verwandten Begriffen zu suchen oder versuchen, „erraten“, was sie suchen?

3.) Hat Ihre Website eine Sitemap, die einen schnellen Zugriff auf sinnvolle Teile Ihrer Website bietet?

4.) Wenn alles andere fehlschlägt, muss der Benutzer ein einfaches Mittel, Sie / technischen Support zu kontaktieren, ihnen zu helfen zu finden, was sie brauchen?

5.) Nicht sicher, ob Sie „verkaufen“ etwas auf Ihrer Website, aber ähnlich wie wenn Sie die Prüfung auf alle wichtigen Ziegel erreichen n morter Händler ... sie fragen Sie, wenn Sie alles gefunden Sie heute gesucht haben. Betrachten Sie eine Option bieten, wo Nutzer Vorschläge machen kann ... Vielleicht haben Sie eine nicht angezapfte Markt wartet, erobert zu werden.

6.) Auf die Benutzerfreundlichkeit, sollten Sie Ihre Website im Internet Explorer surfen (6,7,8), Safari etc. und stellen Sie sicher, dass es funktioniert überall um dich kümmern.

7.) Es gibt ein großes Buch mit dem Titel „ Zwing mich nicht denken “ die ist eine großartige Ressource auf realistische Benutzerfreundlichkeit. Wenn Sie es nicht schon gelesen ... gehen, um eine Kopie greifen.

Darüber hinaus sorgen die anderen kleinen Dinge gesorgt ... z Sie gute Verwendung von Caching (JS, CSS, Bilder)

machen

Answer 4

Normalerweise, was ich tue, ist die gesamte Website ohne Javascript schreiben. Sobald dies funktioniert, können Sie „es markieren“.

Das heißt, es gibt einige gute Startblöcke:

Die PRG Muster gute Erreichbarkeit in der Regel wesentlich ist.

Sie wollen sicherstellen, dass es ein jumplink-fähiges Menü in der Nähe von Beginn Ihres HTML. Wenn Sie nicht sicher sind, versuchen Sie Ihre Website unter Links oder ein ähnlicher Text oder sprachbasierten Browser ausgeführt wird. Wenn Sie verärgert erhalten, so wird Ihre zugänglich Benutzer.

Stellen Sie sicher, dass Sie ALT-Tags, um Ihre Bilder gelten nur, wenn sie sinnvoll sind. Es ist echt ein Bild alt geben = „“, wenn es nur für Design-Zwecke ist. Ebenso Titel Einstellung = „“ befriedigt Ihre Firefox-Nutzer ohne lästige Ihre zugänglich Benutzer für Hover-Tooltips wünschen.

Hoffe, dass diese einfachen Tipps helfen! Die Zugänglichkeit ist jedermanns Verantwortung!

Answer 5

Versuchen Ersatzinhalt zu liefern, wenn Plugins oder andere Inhalte verwenden, die schwierig sein kann, zugänglich zu machen. Putting Video auf der Seite, zum Beispiel. Wenn Sie den HTML5-Weg gehen sind:

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>

[Pseudocode, aber Sie bekommen die Idee]

Für eine umfassendere Lösung für dieses spezielle Problem Besuche Kroc Camen Video für alle .

Answer 6

Progressive Enhancement ist nicht kompliziert.

Beachten Sie die drei wichtigsten Anliegen:

• Inhalt (HTML)
• Präsentation (CSS)
• Verhalten (JS)

Sie mit dem Inhalt starten und arbeiten Sie sich durch die Sorgen um sicherzustellen, dass jeder neue Sorge nicht behindert die vorherige oder versuchen Sie einen anderen Anliegen zu imitieren; JavaScript sollte nicht damit zufrieden sein zu erzeugen; CSS soll nicht Verhalten seinen Umgang; HTML sollte seinen Umgang Präsentation nicht usw. etc.

Answer 7

ok, wenn es um die Art Anwendung Web-Site kommt, das Beste ist, um immer eine Vielzahl von Formaten unterstützt, in einem RESTful Art und Weise ... HTML, XML, JSON, RSS, Atom (wo es Sinn macht) und warum nicht andere ... so zu tun, müssen Sie eine saubere MVC-Architektur auf dem Server ... na ja, es muss nicht MVC sein, aber sagen wir mal, die Rendering-Schicht als Brot dumm sein sollte, und ein gut geschriebenes Geschäftslogik unter ... Frontend-Controller ausgeführt wird, sollte das richtige Format zurückzukehren als Antwort wählen eine Anfrage und dort gehen Sie ... Ihre gesamte Business-Logik / Aktualisierungsdaten abzurufen, Paginieren machen usw. einmal umgesetzt, und dann machen Sie es einfach in eine HTML-Vorlage, oder es in JSON umwandeln, oder was auch immer tun .. .

jetzt eine Idee wäre, einen Blick Implementierung zu machen, dass kehrt rock-solid, semantische und einfache HTML ... und man machen, dass stark Javascript verwenden werden ... machen sie zugänglich unter verschiedenen Pfaden und machen die Javascript uncrawlable ... legt eine Zeile Javascript zu Beginn Ihres Haupt-HTML-Template, das eine Umleitung auf die JavaScript-Version dieser Website verursacht ... Sie auch die gleiche Sache für Flash tun können ... usw. ... dann in der „schmutzigen“ Version der Apps, die Sie tun wirklich alles kann, das Sie mögen ... Last-Vorlagen per HTTP und dann in JSON die Daten und auf dem Client das Rendering tun, eine Schaffung persistent Stateful client javascript App ... warum nicht?

Ich persönlich denke, es ist besser, als mit schönem und klaren HTML starten und als in Tonnen Javascript Füllung, die nicht einmal für alle Benutzer arbeiten ...

greetz

back2dos