Utilisateur:Sub/brouillons/Recommandations sur la création de site web

Connaître XHTML, JavaScript, CSS et PHP : c'est bien. Savoir s'en servir : c'est mieux.

Petit recueil des bonnes pratiques...

Du bon usage des couleurs

(X)HTML et CSS permettent des changer les couleurs du texte : c'est bien, faut-il encore que le texte soit lisible. Sans rentrer dans un cours de web-design ou une dissertation sur l'esthétique : une bonne méthode consiste utiliser des couleurs complémentaires.

Si vous cherchez la couleur la mieux : pas besoin de chercher très loin : noir sur blanc !. C'est ce qu'il y a de mieux - la preuve, wikipédia le fait ;)

Autres bon exemple : blanc sur noir rouge sur blanc vert sur blanc bleu sur blanc

Exemples moyens : rouge sur noir rose sur blanc

Exemples mauvais : vert sur noir bleu sur noir cyan sur blanc

Les pires : jaune sur blanc gris clair sur blanc gris foncé sur noir

C'est la formation de graphiste de savoir tout ça : pas celle de l'informaticien... Bien souvent il suffit de faire simple.

Il est impératif de distinguer les liens du textes. Le mieux pour l'intuitivité étant de laisser le texte en noir sur fond blanc, les liens en bleu souligné et les liens déjà visités en violet souligné. Et pour faire ça : c'est simple : il suffit de ne rien faire. La plupart des navigateurs utilisant ces couleurs par défaut. Encore un doute ? regardez la couleur des liens sur wikipédia...

Privilégier le CSS

Les tableaux en HTML ne sont faits que pour présenter des données tabulaires : pas à la mise en page. Pour celà, utiliser le CSS qui ont été conçues pour.

Pitié, pas de texte clignotants

<blink>Les textes clignotant sont affreux à lire, ils fatiguent les yeux inutilement. C'est encore pire si il faut cliquer sur un lien dans le texte ou que le texte est coloré. Le comble étant ces sites qui mettent leur barre de navigation en <blink>. On a tôt fait de quitter ce genre de site.

A éviter donc sauf éventuellement pour un texte très court (style slogan en 3 mots) juste pour attirer l'attention et donner ensuite l'information sous le texte clignotant.

Exemples à ne pas suivre donc : ce paragraphe et, par exemple, cette page dont l'auteur se reconnaitra ;) </blink>

Oubliez les polices

Oubliez toutes les polices, en CSS comme en HTML : pas de verdana, Times New Roman, Arial (ou pire encore Comic Sans MS...). N'utiliser que les méta polices : serif, sans-serif, monospace, cursive et fantasy. Même si certaines des polices microsoft sont jolies (...), il est très possible que l'utilisateur ne les ait pas. Dans le pire des cas, faites télécharger votre super police gothique au visiteur si le site a vraiment besoin d'une atmosphère (forum de jeu de rôle Vampire où le roleplay est de vigueur...)

N'essayez pas de régler la taille des caractères

Elle dépend du navigateur et aucune taille n'est optimale. Il existe cependant un moyen très fiable pour que les caractères soit d'une taille normale, ni plus, ni moins. Il suffit pour celà de no pas préciser de font-size.

Oubliez les gadgets JavaScript

Dans 99% des cas JavaScipt est utilisé à tort et à travers (à telle point que les surfeurs assidus en viennent à le désactiver). Oubliez le texte défilant dans la barre de statut qui sera parfaitement inutile alors que la barre, elle, aurait pu être utile au visiteur (par exemple pour lire l'URL ou va le mener un lien avant de cliquer). Oubliez l'horloge qui donne la date et/ou l'heure au visiteur : pour la date, parce que s'il ne sait pas quel jour on est : c'est grave. et pour l'heure parce qu'il l'a déjà : dans son tray.

Il ne s'agit pas de se passer de JavaScript qui peut fournir d'excellents services (voir les boutons de la boîte d'édition de page de MediaWiki)

Ne réimplémentez pas des fonctions du navigateur

Épargnez vous du temps de travail, de la bande passante, de la place sur la page : les codes de ce type

<a href="javascript:windows.history(-1)">Page précédente</a>

L'utilisateur à surêment déjà ce bouton dans son navigateur

<a href="#top">Retour en haut de la page</a>

Une touche, qui ne sert strictement qu'à ça, est sur le clavier. Elle a été payée comme les autres : y'a pas de raison.

Et encore pire (ça s'est vu !) :

<a href="" onClick="window.open('une_page.html')">une page</a>

Encore une fois, il ne s'agit pas de se passer de JavaScript qui peut fournir d'excellents services (voir les boutons de la boîte d'édition de page de MediaWiki)

Oubliez les <target>

Avec les navigateurs récents c'est l'utilisateur qui choisis si le lien doit s'ouvrir dans la fenêtre courante, un nouvel onglet, ou dans une nouvelle fenêtre. Il fera surêment ce choix mieux que vous : laissez le faire.

N'essayez pas de cacher la source

Beaucoup d'auteurs de pages web, notamment chez les l33tz |-|4c|<3rZ, étant tout fier du code source HTML/CSS de leur page : il leur prend la besoin soudain de protéger leur création. A grand coup de javascript bloqueur de clic droits aussi inefficace que rigolos. N'oubliez pas que si l'utilisateur veut le code, du texte ou une image, il l'aura : le seul moyen de protéger un contenu est soit de ne pas le mettre sur internet soit de le faire en flash (ce qui au passage, revient presque à la même chose - voir après). Et encore, c'est même pas sûr : il reste la prise d'écran.

Oubliez Flash

Flash est certes une technologie très puissante. Mais elle n'est pas standardisée et propriétaire. Si vous utilisez flash : vous excluez de facto beaucoup d'utilisateurs car certains n'ont pas accès au dernières versions de flash. Vous excluez une partie des handicapés qui ne peuvent pas transformer ce contenu dans un format accessible. Alors que l'usage d'HTML/CSS leur permettrait d'utiliser des logiciels de restitution vocale ou des tablettes brailles. Pensez à eux.

En plus de ça flash est techniquement très handicapant pour la naviagation : pas de prise en charge de de l'historique (donc pas de précedent / suivant) pas de clic droit (pour ouvrir dans une nouvelle fenêtre), pas d'url pour revenir à une page précise. Tout ça en plus de l'énorme consommation des ressources machines.

Au pire : n'utilisez flash que si c'est vraiment nécessaire : parce que le design doit être soigné etc... et si possible, par pitié, faire une version html (même simple, cachée et laide), à côté.

Idem pour Java.

Format

Voici une méthode simple pour choisir le bon format d'image. Si l'image est une photo : JPEG, PNG sinon.

Respectez les normes

Notamment en vérifiant que les pages passent le validateur du W3C. Ainsi si quelqu'un vous reproche que "ça ne marche pas chez lui", c'est lui qui est responsable d'un mauvais choix au niveau de son navigateur et vous pourrez répondre.

Fond sonore

Surtout pas. Voilà pourquoi :

• C'est une consommation de bande passante énorme, et elle n'est pas gratuite. A un taux de compression suffisant pour ne pas perturber la connexion, la musique ressenblera plus à une sonnerie de vieux téléphone portable.
• Il est très courant, pour un surfeur lambda, d'écouter de la musique en surfant. Il ne faudrait pas perturber cette écoute qui l'intéressera surêment beaucoup plus.
• Au contraire, d'autre veulent travailler/lire en silence.
• A moins d'utiliser une bidouille : le son sur la page se réinitialisera à chaque chargement. Relancant le son à chaque clic.
• les goûts et les couleurs...

Derniers conseils

Les conseils valables en programmation sont également valables en HTML/CSS : respecter l'indentation. NE PAS ECRIRE SES BALISES EN MAJUSCULES etc...

Testez vous même

Vous pouvez essayer de naviguer sur vos pages de la façon suivante :

• En désactivant JavaScript : la plupart des navigateurs le permette
• En désactivant CSS : (menu Affichage -> Style de la page -> Aucun style).
• En redimenssionant votre fenêtre en 800*600

Dans les trois cas vos pages devraient être fonctionnelles.