Best Practices für Webentwicklung - So unterstützen Sie JavaScript deaktiviert

Question

Was ist das Beste, wenn ein Benutzer JavaScript nicht aktiviert hat? Was ist der beste Weg, um diese Art von Benutzern Inhalte zu liefern? Was ist der beste Weg, um eine Website von Suchmaschinen lesbar zu halten?

Ich kann mir zwei Möglichkeiten vorstellen, dies zu erreichen, weiß aber nicht, was besser ist (oder ob eine dritte Option besser ist):

1. Verlassen Sie sich auf das Meta-Refresh-Tag, um Benutzer in eine Nicht-JavaScript-Version der Website umzuleiten. Wickeln Sie das Meta-Refresh-Tag in ein Noscript-Tag ein, sodass es von denen mit JavaScript ignoriert wird.
2. Verlassen Sie sich auf ein Iframe-Tag, das sich innerhalb des Body-Tags befindet, um eine Nicht-JavaScript-Version der Website zu liefern. Wickeln Sie das Iframe -Tag in AA NOSScript -Tag ein, damit es von denen mit JavaScript ignoriert wird.

Ich würde auch hochkarätige Beispiele für den richtigen oder falschen Weg, dies zu tun.

--------- Addition zu Frage -----------

Hier ist ein Beispiel für das, was ich in der Vergangenheit getan habe, um dies anzusprechen: http://photocontest.highpoint.edu/

Ich möchte sicherstellen, dass es keine besseren Möglichkeiten gibt, dies zu tun.

Answer 1

Sie sprechen über anmutiger Abbau: Entwerfen und Erstellen der Website zum Arbeiten mit JavaScript und dann, was die Website immer noch mit JavaScript funktioniert. Am einfachsten ist es, das HTML -Tag "NoScript" -Tag irgendwo ganz oben auf Ihrer Seite zu beziehen, die eine Nachricht gibt, dass die Website JavaScript benötigt oder Dinge nicht richtig funktionieren. Dies ist also ein perfektes Beispiel dafür. Die meisten Tasten oben auf dem Bildschirm laufen über JavaScript. Schalten Sie es aus und Sie erhalten ein schönes rotes Banner und die Dropdown -JS -Effekte sind verschwunden.

Ich bevorzuge die Entwicklung der progressiven Verbesserung. Lassen Sie die Website ohne JavaScript / Flash / CSS3 / was auch immer in ihrer Gesamtheit arbeiten, und verbessern Sie sie Stück für Stück (schließen Sie das NoScript -Tag immer noch ein), um die Benutzererfahrung zu verbessern. Dies stellt sicher, dass Sie eine vollständig funktionierende, lesbare Website haben, unabhängig davon, ob Sie ein deaktivierter Benutzer mit einem Bildschirmleser oder einer Suchmaschine sind und gleichzeitig Benutzern mit neueren Browsern eine gute Benutzererfahrung bieten.

Fazit: Für alle dynamisch generierten Inhalte (z. B. Seitenelemente, die über AJAX generiert werden) muss es eine statische Seitenalternative geben, bei der dieser Inhalt über einen Standard -Link verfügbar sein muss. Wenn Sie JavaScript für Registerkarteninhalte verwenden, zeigen Sie den gesamten Inhalt auf eine Weise an, die mit dem Rest der Webseite übereinstimmt.

Ein Beispiel ist http://www.bbc.co.uk/news/ Schalten Sie JavaScript aus und Sie haben eine vollständige Seite mit schriftlichen Inhalten, Bildern, Links usw. Schalten Sie JavaScript ein und Sie erhalten Nachrichtengeschichten, Registerkarteninhalte, Scrollenbilder usw.

Ich werde ungezogen sein und Links zu Wikipedia veröffentlichen:

Progressive Enhancement

Anmutige Dandschaft

Answer 2

Sie haben eine andere Option, laden Sie einfach dieselbe Seite, lassen Sie es jedoch für Noscript -Benutzer arbeiten (progressive Verbesserung/Apledfull -Abbau).

Ein einfaches Beispiel: Sie möchten Inhalte in ein DIV mit AJAX laden, machen Sie eine <a> Tag, das mit dem neuen Inhalt (Noscript -Verhalten) auf die vollständige Seite verlinkt und die binden <a> Tag mit JQuery, um Klicks abzufangen und mit AJAX (Skriptverhalten) zu laden.

$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});

Answer 3

Ich bin mir nicht ganz sicher, ob die progressive Verbesserung heutzutage als bewährte Praxis angesehen wird, aber es ist der Ansatz, den ich persönlich bevorzuge. In diesem Fall schreiben Sie Ihren Server -Seitencode so, dass er wie eine Standard -Web 1.0 -Web -App (kein JavaScript) funktioniert, um zumindest genügend Funktionen für das System ohne JavaScript zu liefern. Anschließend beginnen Sie, JavaScript -Funktionen darüber zu lenken, um das System benutzerfreundlicher zu gestalten. Wenn Sie ordnungsgemäß erledigt sind, sollten Sie eine Web-App haben, die zumindest genügend Funktionen bietet, um für Nicht-JavaScript-Benutzer nützlich zu sein.

Ein verwandter Prozess wird als Anmeldebegie bezeichnet, der auf ähnliche Weise funktioniert, beginnt jedoch mit der Annahme, dass ein Benutzer JavaScript aktiviert und in Problemumgehungen für Fälle aufgebaut ist, in denen er nicht/t ist. Dies hat jedoch einen Nachteil, da Sie einen Nicht-JavaScript-Benutzer ohne Fallback übersehen können, wenn Sie etwas übersehen.

Beispiel für progressives Verbesserungsbeispiel für eine Suchseite: Erstellen Sie Ihre Suchseite so, dass sie normalerweise nur eine HTML -Seite mit Suchergebnissen zurückgibt. Fügen Sie aber auch ein Flag hinzu, das über GET setzt, wenn Sie dies gesetzt haben. Es gibt stattdessen XML oder JSON zurück. Fügen Sie auf der Suchseite ein Skript hinzu, das eine AJAX -Anforderung an die Suchseite mit dem an der Abfragezeichenfolge angehängten Flag durchführt und dann den Hauptinhalt der Seite durch das Ergebnis des AJAX -Anrufs ersetzt. JavaScript -Benutzer erhalten den Vorteil von AJAX, aber diejenigen ohne JavaScript erhalten immer noch eine praktikable Suchseite.

http://en.wikipedia.org/wiki/progressive_enhancement

Answer 4

Wenn Ihre Bewerbung muss Lassen Sie JavaScript funktionieren, dann können Sie nichts tun, außer dass Sie ihnen eine höfliche Nachricht in einem Noscript -Tag zeigen können.

Andernfalls sollten Sie umgekehrt nachdenken.

1. Erstellen Sie Ihre Website ohne JS
2. Geben Sie eine großartige Benutzererfahrung und machen Sie es voll funktional
3. Fügen Sie JS hinzu und machen Sie den UX noch funktionaler. Lagen Sie die JS oben.

Wenn der Benutzer keine JS hat, wird Ihre Website weiterhin zu Schritt zwei Ihres Site -Status zurückkehren.

Was das Krabbeln betrifft. Wenn Ihre Website von AJAX und vielen JS abhängt, können Sie Gogole darauf aufmerksam machen: http://code.google.com/web/ajaxcrawling/docs/getting-started.html

Answer 5

Ein kurzer Tipp, der Ihnen helfen kann: Installieren Sie einfach Lynx, einen Webbrowser mit Befehlszeilen, und Sie werden sofort sehen, wie Google und andere SEO Ihre Website (und auch blinde Personen) sehen. Das ist sehr nützlich. Natürlich gibt es in einer Befehlszeile Windows keine Grafiken und JavaScript ist deaktiviert.

Answer 6

Wenn Sie "ernsthafte" AJAX (z. B. Side-Routing von Client) ausführen, kann die folgende Technik nützlich sein:

1. Verwenden Sie URLs ohne Get/"?"-Parameter (es erleichtert Ihr Leben später leichter)
2. Verwenden http://baseurl.com/#!/path/to/resource Für Kunden-Nebenrunde
3. Implementieren Sie das Rendering von nicht-skriptischer HTML-Version Ihrer Website (HTML Snapshot ist das, was Google es nennt) bei http://baseurl.com/path/to/resource
4. Wickeln Sie den gesamten Inhalt Ihres HTML-Snapshots in NoScript-Tags und leiten Sie über top.location.href zur Vollversion der Website um
5. Handhaben http://baseurl.com/?_escaped_fragment=/path/to/resource - Es sollte über 301-Reaktion auf umleiten http://baseurl.com/path/to/resource
6. Verwenden Sie A-Tags nur für Get-Links, verwenden

Ein schöner Beispielcode für Links, den ich bei der Recherche "Wie man ordnungsgemäßes Ajax-Code schreibt" gefunden habe:

<a href="/path/to/resource" onclick="Routing.navigate(&quot;/path/to/resource&quot;); return false;">Resource</a>

Dies ist natürlich eine ziemlich komplexe Lösung, sollte aber sowohl SEO (einschließlich Crawlers-Suchmaschinen) als auch die Zugänglichkeit ermöglichen. Das Problem ist, dass Sie in der Lage sein müssen, Ihre Seitenserver- und Client-Seite zu rendern.

Eine Lösung könnte darin bestehen, ein Templating -Framework wie Schnurrbart zu verwenden, bei dem Implementierungen für verschiedene Plattformen vorhanden sind.

1. Verwenden Sie etwas wie {{#Pagelet}}/path/to/partial {{/pagelet}} für dynamische Teile Ihrer Seite - Beispiel: {{#Pagelet}}/Image/{{{image_id}}/preview {{/pagelet }}
2. In Ihrem clientseitigen Rendering wird Pagelet implementiert, um dynamisch durch etwas über AJAX geladen zu sein (z. B. Render)
3. In Ihrem serverseitigen Rendering wird das Pagelet einfach direkt gerendert (im Zweifelsfall nur das Pagelet und machen Sie es sofort wieder auf Ein Puffer, beginne, alle Pageletts zu holen, die temporären Spannweiten zu ersetzen, wenn die Hälfte ankommen und den Puffer spülen, sobald alle Pagelets gerendert wurden.

Das ist das beste allgemeine Design, das ich bisher gefunden habe. Sie können tief in Ihre App verknüpfen, es ist suchmaschinenfreundlich und sollte Sie dazu zwingen, eine Seite zu erstellen, die sich anmutig verschlechtert.

PS: Ein Vorteil der oben beschriebenen Techniken besteht darin, dass sowohl das AJAX- als auch das "Web 1.0" -Rendern einer Seite von der Memcached-Caching von ganzen Pagelets profitieren könnten.

Answer 7

Ich würde es vorziehen, die Seite ohne JavaScript zu codieren, und wenn JavaScript aktiviert ist, leiten wir Benutzer zu einer ähnlichen Seite mit JavaScript um. (Gleiches Konzept wie progressive Verbesserung)

Umleiten mit JavaScript