Gestaltung einer Website für beide Javascript-Skript-Unterstützung und keine Unterstützung

StackOverflow https://stackoverflow.com/questions/1284899

Frage

Okay, ich weiß, dass es wichtig ist für Ihre Website mit Javascript deaktiviert zu funktionieren.

Meiner Meinung nach eine Möglichkeit, darüber nachzudenken, wie solche Websites zu entwerfen ist Javascript auf der Homepage zu erkennen und, wenn es nicht auf eine andere Version der Website aktiviert ist umleiten, die nicht Javascript-Code funktioniert und arbeitet mit reinem HTML (wie gmail)

Ein andere Methode, die ich im Sinne habe, ist, dass zum Beispiel denken Sie an einer X (Schließen-Schaltfläche) in einem Dialogfeld auf einer Webseite. Was passiert, wenn die X-Taste ohne Javascript Störungen führen eine Anfrage an den Server und in der Server-Seite zu Senden verstecken wir, dass Dialog nächstes Mal, wenn wir die Seite rendern, und auch binden wir eine Javascript-Funktion zu Onclick der Verbindung und bei die Javascript aktivieren, damit sie sofort den Dialog ausblendet.

Was halten Sie davon? Wie würden Sie eine Website-Design sowohl zu unterstützen?

War es hilfreich?

Lösung

Eine Möglichkeit, dies zu umgehen ist:

  • Erstellen Sie zunächst die Website ohne Javascript
  • Dann, wenn alle Arbeiten, fügen Sie Javascript Erweiterungen wo geeignet

Auf diese Weise, wenn JS deaktiviert ist, arbeitet die „erste“ Version der Website noch.

Sie können genau das gleiche tun mit CSS, natürlich - es gibt sogar eine „ CSS Naked Day "jeden Tag, die zeigen, was aussehen wie Webseiten ohne CSS ^^


Ein Beispiel?

  • Sie haben ein Standard-HTML-Formular, dass POSTs Daten auf dem Server, wenn vorgelegt, und die Wiederherstellung der Seite vom Server zeigt eine Meldung wie „Danke für subscriving“
  • Sie fügen dann einige JS + Sachen Ajax: Statt die ganze Seite neu zu laden, während das Formular absenden, erhalten Sie einen Ajax-Request tun, dass nur die Daten senden; und im Gegenzug, zeigt es „Danke für die Anmeldung“, ohne die Seite neu zu laden

In diesem Fall, wenn Javascript deaktiviert ist, die erste „Standard“ Art, die Dinge noch funktioniert.

Dies ist (Teil), was heißt Progressive Enhancement

Andere Tipps

Die übliche Methode ist, was heißt progressive Erweiterung .

Im Grunde nehmen Sie eine einfache HTML-Website mit regelmäßigen Formen.
Die nächste Erweiterung ist CSS - Sie machen es gut aussehen
. Dann können Sie es weiter mit Javascript verbessern -. Sie können Elemente hinzufügen oder entfernen, Effekte hinzufügen und so weiter

Die grundlegende HTML ist immer für alten Browser (oder solche mit Script-Blocker, zum Beispiel).

Zum Beispiel einer Form eines Kommentar hinterlassen könnte wie folgt aussehen: 

<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>

Dann können Sie es mit Javascript zu verbessern, um es AJAXy zu machen 

$('#myForm').submit(...);

Im Idealfall die AJAX Callback den gleichen Code wie Post-comment.php verwenden sollten -. Entweder durch die gleiche Datei oder über include aufrufen, dann müssen Sie keinen Code kopieren

In Hinsicht ist es nicht wichtig, auf Ihre Website Arbeit mit JavaScript deaktiviert zu machen. Leute, die JavaScript sind die Menschen zu deaktivieren, die Fehler in Ihre Website hacken wollen, sie verdienen es nicht richtig zu navigieren. Vergeuden Sie nicht Ihre Bemühungen mit ihnen. Jeder weiß, dass das Web ist unsurfable ohne JavaScript.

Das einzige, was man vorsichtig sein muss, um Ihre Formulare: Nicht immer vertrauen Filter in JavaScript, Immer filtern wieder auf serverseitige, immer

Mit Progressive Enhancement, Studie jquery es zu verstehen. Es dauert einige Zeit, bis Sie Ihren Kopf um es zu bekommen. Zum Beispiel Ihrer Idee:

  

erkennen Javascript auf der Homepage   und wenn es nicht aktiviert Umleitung zu   eine andere Version der Website, die funktioniert   nicht Javascript-Code und arbeitet mit   reine html

Wie würden Sie erkennen, wenn Javascript deaktiviert ist? nicht mit Javascript, obivously ...

Sie denken falsch herum: die einfachste Version der Standard-Version sein muss, und dann, wenn Sie erweiterte Funktionen erkennen, können Sie sie verwenden

.

Versuchen Sie, so lange separate Versionen für unterschiedliche bowsers / Fähigkeiten zu vermeiden, wie Sie können. Es ist so viel Arbeit alle Versionen zu halten synchron und up-do-date.

Einige gute Ressourcen für den Anfang:

Der beste Weg ist, um eine Seite zu gestalten, dass ausreichend ohne JS funktioniert. Dann fügen Sie ein

scroll top