La conception d'un site web pour les support script javascript et non support

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

Question

Bon je sais qu'il est important pour votre site web fonctionne bien avec javascript qui est désactivé.

A mon avis une façon de commencer à réfléchir à la façon de concevoir ces sites est de détecter javascript sur la page d'accueil et si ce n'est pas activé rediriger vers une autre version du site Web qui ne code pas Javascript et fonctionne avec le langage HTML pur (comme gmail)

Une autre méthode que j'ai à l'esprit est que par exemple penser à un X (bouton de fermeture) sur une boîte de dialogue sur une page Web. Et si en appuyant sur X sans javascript fil d'interférence pour l'envoi d'une requête au serveur et côté serveur nous cachons cette boîte de dialogue prochaine fois que nous rendu de la page, et nous lient également une fonction javascript pour onclick du lien et en cas de le javascript activé, il cache la boîte de dialogue instantanément.

Que pensez-vous de cela? Comment voulez-vous concevoir un site Web pour soutenir à la fois?

Était-ce utile?

La solution

Une façon de traiter ce problème est à:

  • Tout d'abord, créer le site, sans javascript
  • Puis, quand tous les travaux, ajouter des améliorations javascript où approprié

De cette façon, si JS est désactivé, la version "première" du site fonctionne toujours.

Vous pouvez faire exactement la même chose avec CSS, naturellement - il y a même un « CSS Naked Day «chaque jour, montrant quels sites Web ressemblent sans CSS ^^


Un exemple?

  • Vous avez un formulaire HTML standard, que les données de messages sur votre serveur lorsqu'ils sont soumis, et la recréation de la page par le serveur affiche un message comme « merci pour subscriving »
  • Vous pouvez ensuite ajouter une JS + Ajax choses: au lieu de recharger la page entière en soumettant le formulaire, vous faites une requête Ajax, qui envoie uniquement les données; et, en retour, il affiche « Merci pour votre inscription » sans recharger la page

Dans ce cas, si le javascript est désactivé, la première façon « standard » de faire les choses fonctionne encore.

Ceci est (en partie) ce qu'on appelle amélioration progressive

Autres conseils

La méthode habituelle est ce qu'on appelle amélioration progressive .

En gros, vous prenez un site Web HTML simple, avec des formes régulières.
L'amélioration suivante est CSS - vous le faites bien paraître
. Ensuite, vous pouvez l'améliorer encore avec Javascript -. vous pouvez ajouter ou supprimer des éléments, ajouter des effets, etc.

Le code HTML de base est toujours là pour les anciens navigateurs (ou ceux avec des bloqueurs de script, par exemple).

Par exemple, un formulaire pour poster un commentaire pourrait ressembler à ceci: 

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

Ensuite, vous pouvez l'améliorer avec le javascript pour faire AJAXy 

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

Idéalement, le rappel AJAX devrait utiliser le même code que post-comment.php -. Soit en appelant le même fichier ou via include, alors vous ne devez pas dupliquer le code

En ce qui concerne, il est important de ne pas faire travailler votre site avec JavaScript désactivé. Les gens qui désactivent JavaScript sont des gens qui veulent pirater des bugs dans votre site, ils ne méritent pas de naviguer correctement. Ne perdez pas vos efforts avec eux. Tout le monde sait que le Web est unsurfable sans JavaScript.

La seule chose que vous devez faire attention est sur vos formes: Ne filtres jamais confiance en JavaScript, Filtre toujours à nouveau sur côté serveur, toujours

Utilisation d'amélioration progressive, étude jquery pour le comprendre. Il faut un certain temps jusqu'à ce que vous obtenez votre tête autour d'elle. Par exemple, votre idée:

  

pour détecter javascript sur la page d'accueil   et si ce n'est pas permis de rediriger   une autre version du site qui fait   pas de code javascript et fonctionne avec   html pur

comment voulez-vous détecter si javascript est désactivé? pas javascript, obivously ...

vous pensez à l'envers: la version la plus fondamentale doit être la version par défaut, puis, si vous détectez des capacités plus avancées, vous pouvez les utiliser

.

Essayez d'éviter des versions distinctes pour différentes bowsers / capacités aussi longtemps que vous le pouvez. Il est tellement de travail à conserver toutes les versions en synchronisation et up-do-jour.

Quelques bonnes ressources pour vous aider à démarrer:

La meilleure façon est de concevoir une page qui fonctionne de manière adéquate sans JS. Ensuite, ajoutez un

scroll top