Pseudo Mot de passe
Mot de passe oublié ?
Accueil
Inscription
Fonctionnement
Informatique - Internet - Loisirs - Santé - Sciences et technologies - Vie courante
Enchères Boutiques
 
     
 
Par : charly57
Inscription d'une personne : Il y a 14 an(s)
Meilleures façons : 0
Ajoutée : 28/05/2008
Mots-clés : web  site  graphisme  qualité  regles  pratiques 
Connectez-vous pour évaluer !
Note :
Vue : 925 fois 3 évaluation(s)
Ajouter cette page aux Favoris
Envoyer à un ami
100 BONNES PRATIQUES DU WEB
100 Bonnes Pratiques du Web
quelques usages et astuces, pour certains biens connus et
incontournables, pour d’autres simplement utiles, et qui tous vous
aideront à construire un site de qualité.
Bien sûr, tous les sites ne sont pas régis par les mêmes règles.
Certaines de ces bonnes pratiques sont applicables pratiquement à
tous les sites, quels que soient leur style et leur finalité, d’autres
sont plus spécifiques. Dans l’ensemble, nos recommandations
s’appliqueront particulièrement aux sites dits ‘institutionnels’ ou
‘corporate’, quelle que soit leur envergure et la richesse de
l’information proposée. Une majorité de ces règles s’appliquent
également à des sites transactionnels tels que  à des sites de commerce.
Certes il y a une place sur le Net pour quelques sites ‘hors normes’,
qui misent précisément sur le décalage, sur le non-respect des
usages, pour construire leur image. Ils étaient beaucoup plus
nombreux, ces sites spéciaux, dans les années 1999-2001, où les
bonnes pratiques du web n’étaient pas encore arrêtées, et où
certains croyaient que ce monde n’avait pas de règles.
Mais il faut bien comprendre que les internautes visitent des
centaines de sites autres que le votre. Quand ils arrivent sur votre
site, ils n’ont pas envie de réapprendre la navigation du web :
chercher où sont les liens, chercher comment retourner à l’accueil,
luter pour arriver à lire un texte clignotant, s’exercer à cliquer sur
une image qui se déplace... Le strict respect des bons usages du
web les aidera à appréhender votre site dans la continuité.
Dans l’ensemble, le message le plus important est celui-ci : le
caractère unique de votre site doit s’exprimer plutôt par votre offre
de service que par le caractère particulier de sa navigation.
Nous vous disons que le logo se place habituellement en haut à
gauche. Vous pouvez le mettre en bas à droite, et assurément vos
visiteurs trouveront que votre site a quelque chose d’unique. Mais
bien souvent, ce n’est pas la meilleure façon d’être unique.

LES BONNES PRATIQUES...................................................................................................
SOMMAIRE ....................................................................................................................
LEGENDE........................................................................................................................
100 BONNES PRATIQUES ...................................................
GENERALITES ................................................................................................................
MISE EN PAGE.................................................................................................................. 9
LISIBILITE ..................................................................................................................... 11
NAVIGATION ET ERGONOMIE ............................................................................................. 13
LES URL ET LES LIENS .................................................................................................... 15
GRAPHISME................................................................................................................... 17
IMAGES......................................................................................................................... 18
FORMULAIRES ET SAISIES................................................................................................. 19
MULTILINGUISME ET LOCALISATION .................................................................................... 20
COMPATIBILITE ET TECHNIQUE .......................................................................................... 21
SUIVI, MONITORING, HEBERGEMENT................................................................................... 23
REFERENCEMENT ........................................................................................................... 24
Légende
1 Une simple recommandation, ou bien un usage général
du web, qu’il vaut mieux respecter, mais auquel on peut déroger le cas échéant.
 Une recommandation forte. Nous voyons de réels inconvénients, et peu d’avantage, à ne pas la respecter.Une règle absolue, qui ne souffre aucune exception.
Généralités
 Préoccupez vous des règles d’accessibilité. Que ce soit par respect
pour vos visiteurs handicapés ou bien parce que le respect des normes
d’accessibilité deviendra obligatoire pour de plus en plus de sites.
Le strict respect des règles d’accessibilité ne limite en rien la créativité
graphique de votre site, mais demande quelques efforts en termes de
montage. Nous ne détaillons pas ici les bonnes pratiques de l’accessibilité
car elles sont trop nombreuses.
 Evitez les « intros Flash », petite animation qui doit précéder la page
d’accueil. Les visiteurs ont autre chose à faire. Et même s’ils trouvaient
cela sympathique la première fois, ils en auraient assez à la troisième
visite. A la rigueur, réservez une intro Flash pour un événement
exceptionnel, l’espace d’une semaine.
 La page d’accueil doit déjà apporter du contenu pertinent, dire des choses utiles,
annoncer le contenu des rubriques. Cela fait plusieurs années déjà que les pages
d’accueil ont cessé d’être de simples menus vers les différentes rubriques du site. Ce n’est pas un effet de mode, c’est tout simplement le moyen de ne pas faire perdre son temps au visiteur.
Dès la page d’accueil, expliquez vite et bien quelle est votre offre.
C’est une évidence, qui pourtant est souvent oubliée. Si vous êtes
Renault, vous pouvez omettre de rappeler que vous êtes constructeur
automobile. Mais si vous êtes moins célèbre, n’oubliez pas que le visiteur
pourrait ne pas avoir entendu parler de vous. En quelques mots, au
centre de la page d’accueil, il doit savoir qui vous êtes et ce que vous lui
proposez.
Si vous n’avez pas les moyens de mettre à jour une rubrique d’actualité
une fois par mois, alors supprimez cette rubrique. La fraîcheur des
actualités est un des indicateurs qualité les plus faciles à lire pour
un site : si la dernière actualité remonte à plusieurs mois, le site est à
l’abandon, et c’est la crédibilité de l’entreprise, de l’institution, de
l’éditeur, qui est en doute.
 Pensez toujours à la hiérarchisation de l’information dans la page :
placez les informations essentielles à l’endroit où se porte le regard du
visiteur. A priori cette hiérarchie va du haut vers le bas de la page, et
bien sûr les informations qui sont sous la ‘ligne de flottaison’, c’est à dire
qui demandent un défilement vertical pour être vues, sont celles de
moindre importance. On parlait jadis de diagonale descendante, du
coin supérieur gauche vers le coin inférieur droit. Mais avec l’habitude, le
regard du visiteur va plutôt directement au coeur de page, fin de
premier tiers vertical, où les contenus les plus pertinents sont
généralement placés. Les colonnes de gauche et de droite sont
généralement le lieu d’informations complémentaires.
 Le logo du site se place en haut à gauche, à l’identique sur chaque
page du site. Un autre choix peut donner une personnalité particulière
au site, mais sera moins lisible pour le visiteur.
En cliquant sur le logo du site on retourne à la page d’accueil.
C’est un usage auquel les internautes sont habitués maintenant, et qu’il
serait dommage de ne pas respecter.
 Une « barre de progression », parfois appelée aussi « fil d’Ariane », ou
en anglais « breadcrumbs » (les miettes de pain du petit poucet !), située en dessous le
bandeau et au dessus du corps de page, permet de situer la page courante dans
l’arborescence du site, et de retourner à un niveau supérieur en cliquant sur son titre.
Attention, malgré le nom, il ne s’agit pas exactement du chemin parcouru (l’historique du navigateur), mais plutôt de la position de la page courante dans l’arborescence.
Si la colonne de gauche est le lieu habituel des autres options, c’est à dire
des choix de navigation de même niveau, la colonne de droite – si tant
est qu’il y en ait une – est l’emplacement habituel des liens de type ‘voir
aussi’, c’est à dire d’information connexe.
 N’indiquez pas que telle rubrique est « en chantier ». Si elle est trop
affreuse pour être présentable, autant ne pas en parler du tout. De même
si votre site n’est pas encore traduit, inutile de proposer la version
anglaise ou espagnole, pour finalement indiquer que la traduction n’est
pas disponible. Imaginez-vous un magazine qui laisse une page blanche
avec la mention « ici notre journaliste n’avait pas fini son travail à l’heure
du tirage » ?
N’affichez pas bêtement la date et l’heure, même dans le but de donner
une illusion de fraîcheur à l’information. Les visiteurs ne seront pas
dupes, et par ailleurs le bureau ou la barre de tâche de l’ordinateur
affichent déjà l’heure. Sans parler de la montre qui est au poignet du
visiteur. On ne vient pas sur votre site pour connaître l’heure.
 Faites des tests. Que ce soit pour le caractère intelligible du message
ou l’utilisabilité des processus de travail, faites de vrais essais, auprès
d’une variété d’utilisateurs, incluant des profanes complets (votre
mère, …). Montrez leur la page 5 secondes, pas plus, puis posez leur
quelques questions simples : comment s’appelle cette société ? Que
propose-t-elle ? Pourquoi est-elle plus intéressante que d’autres ? Où
dois-je cliquer pour en savoir plus ?
 Tout n’est pas virtuel en ce monde, n’oubliez pas de proposer aussi une
ou plusieurs adresses physiques, des plans d’accès, et des numéros de
téléphone.
Proposer une newsletter est un excellent moyen de fidéliser vos
internautes en leur rappelant votre existence de manière régulière.
Mais il faut une vraie légitimité à cela. Un site corporate
d’entreprise n’a en général pas vocation à diffuser une newsletter.
Seuls quelques sites ont une vraie vocation de portail généralistes. Si ce
n’est pas votre cas, alors inutile d’ajouter une carte météo, un fil
d’actus AFP, ou les cours de bourse (sauf bien sûr ceux de votre
entreprise, le cas échéant). Les internautes d’aujourd’hui savent trouver
la météo et les infos.
Si votre site collecte ou gère des données personnelles, vous devez faire
une déclaration à la CNIL. Il existe quelques dispenses (église, parti
politique, syndicat, activité artistique, …) mais en général la déclaration
est bien obligatoire. Des données personnelles ce n’est pas uniquement
les noms et prénoms, mais des informations permettant d’identifier une
personne. Une adresse e-mail est donc une donnée personnelle. La
déclaration peut se faire ‘en ligne’ sur le site de la CNIL.
 Si vous avez l’intention d’adresser des e-mails à des visiteurs qui
s’inscriraient sur votre site, il est impératif de recueillir leur adhésion
explicite. Le visiteur doit lui même cocher la case indiquant son accord, et non décocher une case pour signifier son refus.C’est ce que l’on appelle l’ optin.
Les informations légales, c’est à dire dont la présence est obligatoire,
concernent l’identité de l’hébergeur, de l’éditeur, et du Directeur
de la Publication. Il arrive qu’on y ajoute des ‘credits’, c’est à dire la
mention des prestataires qui ont réalisé le site.
C’est dans cette rubrique également que vous indiquerez les conditions
d’utilisation de votre site, c’est à dire ce que vos visiteurs sont supposés
accepter avant d’utiliser votre site.
On y indiquera également les mentions relatives au copyright.
Les informations légales ne sont pas les contenus les plus importants, et
sont donc généralement proposées en pied de page, plutôt que dans la
navigation principale.
Mise en page
20 Une mise en page ‘élastique’ permet de faire le meilleur usage des
écrans qui ont une meilleure résolution, sans pour autant pénaliser les
plus petits. Pour des sites qui présentent des articles longs, c’est la
meilleure pratique : les articles occupent l’espace disponible en largeur,
et le bas de page remonte donc, réduisant le défilement vertical. En
revanche, si le contenu de la page est constitué de petits items qui ne
pourront que s’éloigner les uns des autres, alors la mise en page élastique
pourrait donner une impression d’îlots séparés par du vide, flottants dans
la page. A l’heure actuelle, on choisira une mise en page élastique qui
présente un aspect optimal en 1024 de large, et de bonne qualité en 800
comme en 1280.
N’ouvrez pas des nouvelles fenêtres sans raison majeure. Si
l’utilisateur veut une nouvelle fenêtre, il saura l’ouvrir. Ouvrir tous les
liens externes en nouvelle fenêtre vous donne l’illusion de conserver votre
visiteur, mais s’il veut aller ailleurs, il le fera.
 Evitez d’ouvrir des fenêtres en popup. Elles sont maintenant associées à des contenus inopportuns, et de plus en plus d’internautes configurent leur navigateur pour les bloquer.
 N’oubliez pas que tous les visiteurs ne passent pas par la page d’accueil.
Avec les moteurs de recherche, les visiteurs arriveront souvent
directement sur des pages intérieures. Ils doivent immédiatement
savoir où ils sont et comment revenir à l’accueil.
24 Les frames, jeux de ‘cadres’ qui partitionnent la page en parties
indépendantes, sont abandonnées depuis plusieurs années, et il n’y a
pas lieu de les réhabiliter aujourd’hui. Les raisons sont multiples :
cohérence de la navigation, référencement, favoris, envoi d’une URL, etc.
Evitez également les iframes inutiles. Le défilement d’une partie de
page à l’intérieur d’une fenêtre découpée dans la page n’est pas dans les
usages du web.
 Avec l’abandon des frames, on regrette parfois que tous les éléments de
menus défilent en même temps que le reste de la page. Et une solution
parfois évoquée est de mettre un menu flottant, qui reste en place au
dessus de la page, à une position fixe par rapport à la fenêtre.
Nous ne recommandons pas cette technique un peu gadget.
Fondamentalement, il faut accepter le fait que le web est fondé
sur un paradigme de pages. C’est ce qui le rend simple et au comportement prévisible pour les internautes. Hauteur des pages. Si vous avez un contenu abondant, n’hésitez pas à
faire des pages plus hautes que la hauteur standard d’un écran. Jusqu’à deux ou trois écrans de haut sont acceptables. Les souris à molettes facilitent le défilement, et en outre un défilement vertical est beaucoup plus rapide et moins ‘impliquant’ pour le visiteur qu’un
clic sur un lien. La règle qui voudrait que tout le contenu tienne dans la
page sans défilement ne nous semble pas appropriée, sauf bien sûr s’il y a
peu de contenu.
Largeur des pages : il ne doit pas y avoir de défilement
horizontal de la page. Si vous avez opté pour une mise en page fixe,
non-élastique (voir # 20 ), alors vous êtes obligé de la calibrer pour une
largeur de 800 pixels (on peut maintenant faire l’impasse sur les largeur
de 640…), quitte à laisser beaucoup d’espace vide autour de votre page
sur les écrans récents.
Vérifiez bien l’absence de défilement horizontal sur une variété de
navigateur et y compris lorsqu’une barre de défilement verticale apparaît :
elle réduit la largeur utilisable, et souvent provoque l’apparition d’un
défilement horizontal.
Les tableaux Html sont bien pratiques, mais ne doivent pas être le seul
moyen de présenter des listes d’informations. Le tableau pose de
nombreux problèmes : lorsqu’il a trop de colonnes, il provoque un
défilement horizontal, les blocs de texte agrandissent démesurément les
lignes, etc.
Une suite de paragraphes bien structurés, sans colonage, peut être une bonne
alternative. Ils sont beaucoup plus flexibles, et permettent de gérer à la fois des petits et des grands champs d’information. Pas de tableau pour cette page extraite de Amazon.fr, pourtant chaque paragraphe répète les informations de titre, prix, etc.
Lisibilité
30 La lecture d’un texte sur un écran d’ordinateur est plus lente que sur
papier, de l’ordre de 25%. En conséquence l’écriture pour le web se
doit d’être plus synthétique.
31 Si vous importez du texte issu de documents ‘papier’ existants, alors il
est probable qu’il faille le ré-écrire pour produire une version plus
compacte.
32 Evitez les caractères clairs sur fonds foncés, ils sont plus difficiles
à lire. Réservez les à des titres bien spécifiques.
33 Evitez les clignotements, et tout ce qui bouge. Ils fatiguent le visiteur
et l’empêchent de lire. Avec la multiplication des bandeaux, le clignotement est au contraire le marqueur de ce qui n’est PAS l’information recherchée. Bien sûr, pour de vraies promos, des messages urgents, cela fonctionne encore, mais n’utilisez pas des images
animées à tord et à travers.
34 Les navigateurs modernes permettent de modifier aisément la taille
des caractères. C’est très pratique pour les mal-voyants, même légers.
Il ne faut pas interdire cette fonctionnalité.
35 Proposez une version imprimable des pages qui ont un contenu
important, susceptible d’être imprimé. La version imprimable peut
conserver le logo et la barre de positionnement, mais n’inclura pas les
éléments de navigation, bandeaux et menus, ainsi que les éventuels blocs
d’actualité répétés, sans corrélation avec le contenu.
Le texte en italiques est plus difficile à lire à l’écran. Utilisez le pour
appuyer quelques mots, mais évitez le pour des paragraphes entiers.
 Les fontes dites ‘sans-serif’, c’est à dire sans pieds (Arial, Helvetica,Verdana…) sont plus faciles à lire à l’écran. Pour les textes importants,préférez ce type de fontes. Gardez les autres (Times, Bookman, …) pour mettre un peu de relief dans les titres.
On utilisera aussi de préférence des fontes conçues pour l’écran : Georgia
plutôt que Times, Verdana plutôt que Arial. Fontes web. On ne peut pas savoir à coup sûr de quelles fontes dispose le navigateur de notre visiteur. La bonne pratique est donc de préciser différentes fontes, dans un ordre de préférence. Il existe quelques fontes
plus sûres, qui sont disponibles à l’identique au moins sur MacOSX et
Windows XP : Arial, Courier, Georgia, Times, Trebuchet, Verdana. Si
vous en utilisez d’autres, alors assurez vous au moins d’un replis sur
l’une de celles-ci.
 Un long bloc de texte compact est rebutant. Raccourcissez-le,
découpez le en pages, ou insérez des titres intermédiaires, qui
pourront reprendre quelques idées clés. Au minimum, séparez les
paragraphes proprement.
 Evitez les accroches inutiles de type ‘Bienvenue’ sur votre page
d’accueil. Les visiteurs ne sont pas là pour entendre des politesses.
Pourquoi pas « Vous prendrez bien quelques instants pour parcourir notre
site, et ainsi mieux connaître notre entreprise… » ? Non. On a dit :
« synthétique ».Navigation et ergonomie  Identifiez bien les éléments stables de la navigation, que le visiteur retrouvera de page en page. Entêtes, empieds, menus, outils
permanents : ils fournissent au visiteur un socle de stabilité rassurant et doivent être facilement identifiés.
 Liens connexes. Essayez de proposer au visiteur des informations susceptibles de
l’intéresser, en relation ou en complément de l’article courant.
La fonctionnalité de recherche sur le site est essentielle. Elle n’est pas réservée aux sites qui ont un fort volume de contenus, elle doit être offerte sur tous les sites. Les internautes de la ‘génération Google’préfèrent taper quelques mots dans une boite que de réfléchir à
l’organisation des rubriques dans votre site. La recherche simple doit être
offerte de manière systématique, bien en vue et disponible sur toutes
les pages. En revanche, la recherche avancée, c’est à dire permettant
une variété de critères, n’est pas nécessaires sur tous les sites ; elle est
rarement utilisée.
En revanche, évitez d’utiliser une recherche Google pour les
contenus propres à votre site. Vos derniers contenus ne seront pas
pris en compte avant quelques jours, et ce sera toujours invitation pour
vos visiteurs à aller voir ailleurs. Il y a suffisamment de solutions simples
et gratuites.
 Trois clics pour tout voir ? Ce n’est pas une règle absolue. L’essentiel
n’est pas le nombre de clics, mais que l’internaute (1) comprenne
immédiatement où cliquer, (2) qu’il n’ait pas à revenir sur ses pas parce
qu’il aura pris une mauvaise direction, (3) que les pages s’affichent
instantanément.
 N’utilisez pas trop les icônes pour signifier un lien tel que « plan du site »
, « s’abonner à la newsletter » ou bien « rechercher », car leur sens n’est pas
toujours compris par les visiteurs,
chaque site ayant sa propre symbolique. Sur l’exemple ci-contre, sauriezvous
dire le sens des troisième et quatrième boutons ?
Préférez des liens en simple texte.
Les menus déroulants ne sont pas une obligation. Ils sont utiles principalement lorsque des visiteurs réguliers ont le besoin de cheminer apidement d’un bout à l’autre du site. Un autre bénéfice est de permettre de se rendre compte rapidement de l’ensemble de « l’offre » des
rubriques du site. Néanmoins, un site avec des pages légères et servies
rapidement peut très bien se passer de menus déroulants. Et à l’inverse,
l’accès direct aux rubriques peut priver le visiteur de sommaires
intermédiaires qui pourraient présenter mieux la rubrique.
Attention aux menus déroulants qui obligent à suivre un chemin très précis avec sa souris. Beaucoup d’utilisateurs ont du mal à les utiliser. Le menu déroulant doit permettre une ‘trace directe’ de la souris, depuis l’intitulé d’une rubrique vers l’intitulé de la sous-rubrique.
Attention à certains menus déroulants « prêts à l’emploi » que l’on trouve en téléchargement sur le web. Certes, ils gèrent tous les cas de figure, mais pèsent 50 Ko et déroulent tellement de code Javascript à chaque affichage qu’il faut attendre plusieurs secondes avant de voir le menu s’afficher.
Si vous utilisez des menus « dépliants », c’est à dire qui s’ouvrent pour faire apparaître les rubriques de niveau inférieur, alors ils ne doivent se déplier qu’au clic et non au survol de la souris. Les menus qui se déplient au survol sont pratiquement inutilisables.
Tissez un maillage serré de liens internes, à la fois par les liens de navigation et par les liens connexes. Un maillage serré invite à la navigation et améliore le référencement.
Les URL et les liens Les liens hypertexte doivent être instantanément identifiés par le
visiteur, sans la moindre hésitation, sans avoir à tâtonner avec sa souris. Il faut donc de préférence souligner les liens hypertexte chaque fois qu’il peut y avoir ambiguïté, et en particulier dans le corps des textes.
On peut également définir un code typographique simple et standard, par
exemple fonte gras et bleu foncé pour identifier les liens hypertexte. Il
est ensuite impératif que ce code ne souffre aucune exception au travers
du site. Le visiteur ne doit jamais se demander si tel texte est un lien ou non. Et gardez toujours à l’esprit que votre visiteur ne parcourt pas que votre site : il n’a pas le temps d’apprendre des règles spécifiques.
Dans un menu, le caractère de lien peut être suffisamment clair, et donc il n’est pas nécessaire de souligner les liens. Il est rigoureusement interdit de souligner des mots sans lien hypertexte. L’utilisation du soulignement pour seulement renforcer une
expression ou un titre est à proscrire dans le web.
 Les liens visités changent de couleur naturellement. C’est un fonctionnement standard du web, et il est préférable de laisser cette fonctionnalité en l’état, car elle aide le visiteur à parcourir le site sans voir accidentellement la même page deux fois.
Les liens internes aux pages (ancres) sont d’une utilisation délicate du point de vue ergonomique, et sont globalement déconseillés. Nous recommandons plutôt de structurer les contenus en pages de taille raisonnable, puis de promouvoir une navigation de page en page, et non de paragraphe en paragraphe au sein d’une même page.
 Il existe une technique de mise en page utilisant un sommaire en haut de page, dont les liens permettent d’aller à tel ou tel paragraphe dans le corps de page, le paragraphe comportant un lien de type ‘retour au haut de la page’. Nous ne recommandons pas cette
approche.Si les paragraphes sont petits, et occupent moins d’une pageécran
de haut, alors leurs titres seuls permettront au visiteur de bien se repérer. Si les
paragraphes sont grands, alors ils méritent peut être une page chacun.
 Le bouton ‘page précédente’ des navigateurs est fondamental dans l’ergonomie du web. Il ne faut sous aucun prétexte empêcher son fonctionnement. Proposer d’autres liens ‘Retour’ ou bien ‘Précédent’ dans la page elle-même n’est pas très utile, mais est toléré.
 Bien entendu, un site doit chasser les liens cassés. Pour ce qui concerne les liens internes, les outils de gestion de contenu assurent généralement la cohérence. Pour les liens externes (sortants), il faut les vérifier périodiquement. Les URL doivent être lisibles et intelligibles, cela aidera les visiteurs et favorisera un bon référencement.
On évitera les URL qui référencent les pages par des codes
( www.monsite.com/content?articleid=12034), et les URL qui passent tellement de
paramètres de contexte qu’elles perdent toute lisibilité.
Les URL doivent être stables. Une URL copiée sur votre site et envoyée à un ami ou bien rangée en favoris, doit restituer la même page.On peut aussi viser des URL stables à l’échelle de plusieurs années, y compris au travers de refontes techniques. C’est ce qu’on appelle « permalink », ou lien permanent.  La parfaite uniformité du graphisme est un des premiers critères de qualité d’un site. Avec le temps, il est courant que des pages différentes, voire des rubriques entières hors charte, apparaissent sur le site. Il faut
leur faire la chasse. Les outils de gestion de contenu, et leurs système de
gabarits permettent d’assurer aisément cette harmonie graphique, à condition de bien les utiliser. Espaces colorés. Une vieille pratique du web : les menus bariolés dont
les couleurs se retrouvent dans les différents espaces du si te. Ce n’est pas rigoureusement à proscrire, mais pas aussi utile qu’on le croit. En réalité, les visiteurs ne feront pas
l’association « c’est bleu donc je dois être dans la rubrique ‘Finance’ ». Il
y a des moyens plus clairs de le leur rappeler.
La charte graphique doit aller jusqu’au coeur des pages. Il est courant que bandeaux et menus soient homogènes, mais que l’intérieur des pages soit hétérogène, tout simplement parce que les outils n’imposaient pas suffisamment la cohérence. Les titres intermédiaires,
espacement de paragraphes, présentation des tableaux, légendes
d’images, interlignes, etc… tous ces éléments de charte doivent être respectés strictement.
N’hésitez pas à mettre un peu de relief dans vos pages, à utiliser des fontes de grande taille à l’occasion, pour marquer des titres, des images brillantes pour rompre la monotonie.
 N’utilisez pas des changements de style au survol de la souris. A la rigueur, soulignement ou changement de couleur pour les liens hypertextes, mais les textes qui s’agrandissent ou deviennent gras quand la souris passe dessus – perturbant tout l’agencement de page – sont une horreur, sans intérêt au plan ergonomique.
Favicon, pourquoi pas ? Il s’agit de l’icône associée à votre URL dans
la barre d’adresse du navigateur, ainsi que dans vos favoris. Si votre logo
peut tenir dans un petit carré de 32 pixels de large, alors ne vous en privez pas !
Couleurs web ? On parlait il y a quelques années de « couleurs web »,
ou encore « web-safe », c’est à dire sûres pour le web. Il s’agissait de 216
couleurs, dont en pratique 22 seulement étaient vraiment assurées d’être
reproduites sans changement. Aujourd’hui, les écrans à 16 millions de
couleurs sont suffisamment répandus pour que l’on ne se soucie plus de
cette palette réduite.
Images
Les images doivent être exactement à la taille cible, elles ne doivent
jamais être redimensionnées par le Html.
La balise <img…> qui définit une image doit, si possible, spécifier les
dimensions de l’image, de sorte que le navigateur puisse ajuster la mise
en page avant d’obtenir l’image. Cela évite les redimensionnements en
cours de chargement de la page.
 Eviter les textes en images. Cela alourdit les pages, rend plus difficile la maintenance et le multilinguisme, nuit à l’accessibilité et au référencement. En outre on parvient généralement au même résultat avec les styles Html. Sauf bien sûr pour des fontes vraiment spéciales, essentielles au caractère du site.
 Evitez les images transparentes de positionnement, permettant de « caler » des éléments dans la page. Une vieille pratique du montage Html, aujourd’hui archaïque. Un bon usage des feuilles de style permet en général d’arriver au même résultat de manière beaucoup plus élégante.
Les images doivent être compressées au plus juste : en nombre de couleurs pour le Gif et le Png, en taux de compression pour le Jpeg.
Choisissez la compression la plus appropriée, un logo en Jpeg provoque souvent un halo très disgracieux autour des formes.
Les images doivent être si possible harmonisées en termes de tonalité,
contraste, luminosité, saturation.
Une bonne pratique est celle de vignettes très légères, qui permettent
d’accéder aux images plus grandes en cliquant sur l’image. C’est un bon
point d’équilibre entre l’objectif de légèreté des pages et de richesse
graphique.
Les images doivent avoir systématiquement une description en texte,
sous la forme d’une balise ‘ALT’, qui permet de fournir une information de
remplacement ou complémentaire par rapport à l’image. C’est également
une des obligations de base de l’accessibilité.
Formulaires et saisies
Ne redemandez jamais deux fois la même chose au visiteur. Il a
demandé un billet pour le 5 août et il demande maintenant une chambre ? Ne lui faites pas redire que c’est pour le 5 août.  Lorsque le contenu principal d’une page est un formulaire à remplir,la saisie doit pouvoir se faire au clavier dans le premier champ sans avoir à cliquer sur ce champ auparavant. Obliger le visiteur à cliquer dans le premier champ avant de commencer la saisie lui fait perdre du temps inutilement.  Marquez les champs obligatoires par une astérisque. C’est l’usage.
 Sur les formulaires courts, autorisez la validation directe par la
touche ‘ENTREE’. Cela évitera au visiteur de passer la main du clavier
à la souris pour valider.
 Le visiteur ne doit jamais perdre ce qu’il a saisi. Il est intolérable
qu’une saisie erronée ou incomplète provoque le retour sur un formulaire
vide.
N’abusez pas des listes déroulantes pour offrir un choix entre différents items. La liste déroulante demande 2 à 3 clics, alors que des boutons radio permettent de faire un choix en un seul clic. La liste déroulante ne permet pas de voir toutes les options possibles. Elle est pratique, mais à utiliser avec modération.
 Boutons et liens ne sont pas interchangeables. Les boutons servent à valider des formulaires, ou plus largement à commander des actions.N’utilisez pas la symbolique de bouton pour de simples liens hypertextes.Et réciproquement, n’utilisez pas le graphisme des liens hypertextes,soulignement en particulier, pour valider un formulaire.
 Pour une efficacité maximale, offrez la possibilité d’une saisie directe, à la place d’un choix dans une liste de valeurs possibles. Taper « France » peut être plus rapide que de sélectionner la France dans une liste de 150 pays. Il est vrai que dans ce cas, la saisie sera moins ‘structurée’ et donc un peu moins exploitable. Mais en contrepartie,
l’utilisation pourrait être plus rapide.
Si vous ajoutez une version étrangère de votre site, assurez vous que la langue maternelle du traducteur est la langue cible. Ne comptez pas sur tel collaborateur qui a passé un an aux Etats-Unis. Une traduction médiocre ou seulement maladroite véhicule une mauvaise image.
 Evitez les drapeaux pour signifier l’accès à une autre langue. Un Irlandais n’appréciera pas de cliquer sur un drapeau du Royaume Uni, un Autrichien sur un drapeau allemand, ou un Belge sur un drapeau français. Ecrivez plutôt le nom de la langue, dans la langue elle même
bien sûr.
 Pensez également à la localisation des contenus sur le fond :
adaptation aux marchés locaux, à la réglementation, aux usages et habitudes de consommation.
Pensez à la reconnaissance automatique de la langue. Les navigateur peuvent être configurés pour une langue préférée, et ils adressent cette information à votre serveur. Faites en bon usage, afin de parler à chacun dans sa langue. Bien sûr, proposez malgré tout la possibilité de changer de langue, pour le cas où son navigateur serait mal
Donnez vous pour objectif la compatibilité avec toutes les plateformes : Windows, Mac et même Linux. Ce n’est pas si difficile. Même si les Mac ne représentent que moins de 5% du parc, c’est toujours 5% de visiteurs de qualité dont il est stupide de se priver.
 En termes d’ancienneté des navigateurs, ne réclamez pas des navigateurs récents. D’autant que les fonctionnalités des navigateurs sont maintenant stabilisées, et diffèrent peu de ce qu’elles étaient il y a 3 ans. On peut prendre pour parti de fonctionner parfaitement sur des navigateurs de 3 ans d’age et moins.  Version de Flash. Soyez certains d’utiliser la version la plus ancienne possible par rapport aux fonctionnalités requises. Personne ne veut
installer un nouveau plugin Flash juste pour voir vos merveilleuses créations. Et a fortiori si en réalité elles n’utilisaient aucune fonctionnalité nouvelle de Flash.
 Evitez d’assurer la compatibilité par un amoncellement de tests de navigateur et de conditions en javascript sur les pages. C’est lourd et peu robuste, mais surtout, il y a aujourd’hui des moyens de faire de belles pages compatibles de manière plus sobre.
N’indiquez pas que « ce site est « optimisé pour » tel ou tel navigateur ».
Cela signifie clairement que vous n’avez pas testé ou pas su assurer la compatibilité avec les autres.  N’ajoutez pas un bouton vers le téléchargement de Internet Explorer ou d’un autre navigateur. Les gens savent trouver un navigateur s’ils le souhaitent.
Même chose pour la largeur de page. N’indiquez pas « ce site est optimisé pour un écran 800x600 ». Si vraiment votre site est impraticable ou bien très laid pour une autre résolution, il faut le corriger sans attendre. Si vous avez fait en sorte qu’il soit compatible avec différentes configuration d’écran, c’est bien, mais il ne sert à rien d’indiquer
l’optimum car personne n’a envie de changer sa configuration d’écran pour mieux voire votre site.
 N’utilisez pas d’applets, et encore moins d’ActiveX, pour des fonctionnalités simples comme le défilement d’un ‘fil d’actualités’.Privilégiez le Javascript, qui permet énormément de choses, et de manière beaucoup plus légère.
D’une manière générale les ActiveX sont à proscrire car incompatibles
avec les plateformes non Windows. Les applets apportent une meilleure
compatibilité, mais néanmoins avec des difficultés. C’est pourquoi s’il faut des fonctionnalités à forte interactivité, c’est le Javascript en premier lieu, le Flash sinon, qui sont recommandés aujourd’hui.
Si vraiment vous n’avez pas pu vous empêcher de mettre de la navigation
noyée dans du Flash ou du Javascript, alors ajoutez impérativement une
navigation alternative en pied de page, qui permettra au moins aux
robots d’indexation de parcourir votre site.
Poids des pages. Malgré la part grandissante du haut débit, le poids
des pages restera toujours un critère de qualité important. Même en
haut débit, le visiteur préfère une page qui se charge en 2 secondes à une
page qui se charge en 5 secondes. Il n’y a pas de règle absolue quant à la
taille cible, qui dépend de ce que l’on a à présenter. Néanmoins 80 KO,
tout compris, est une bonne taille. On peut souvent faire plus léger,
mais il est rare que l’on doive faire plus lourd. Surtout, il faut garder à
l’esprit qu’un sérieux travail sur le montage permet souvent de gagner 30
à 50% en poids, à résultat égal.
 Il faut rendre systématique l’utilisation des feuilles de style CSS. On ne doit pratiquement plus voir d’indication <font type=…> dans une page.
Il faut éviter les imbrications de tableaux à des fins de mise en page.
Les tableaux Html doivent être réservés à la présentation de données en tableau. Il faut surtout éviter les imbrications de tableaux sur plusieurs niveaux. Un usage intelligent des styles CSS permet souvent d’éviter les tableaux d’agencement de page.
 Les cookies. Il existe peu de sites transactionnels qui fonctionnent sans que les cookies soient autorisés. On peut donc à peu près considérer cela comme acceptable. En revanche, pour un site qui ne fait que servir des pages d’information, de requérir des cookies est un défaut de conception.
De la même manière, le support du javascript peut être considéré comme acquis. Pour les internautes prudents, les navigateurs permettent aujourd’hui de régler finement le niveau de sécurité, sans pour autant désactiver le javascript. Bien sûr, on s’attachera à ce que ce
javascript soit parfaitement compatible avec toutes plateformes, en particulier au niveau du modèle de document, c’est à dire la manière de faire référence aux objets de la page.
 Evitez de proposer des documents en téléchargement au format Word.
Utilisez plutôt un format Pdf (Adobe Acrobat), qui est plus léger et offre une meilleure compatibilité.
Si vous faîtes des copier-coller de texte à partir de Word, il faut impérativement que le dispositif comporte un nettoyage du Html.En effet, Word va coller des quantités de caractères spéciaux (quote droite et quote gauche, « trois petits points groupés », …), qui seront mal restitués sur la page.
 Evitez de fournir des adresses e-mail par un simple lien ‘mailto’.
Ces adresses sont récupérées de manière automatique par les émetteurs
de spam, qui les ajoutent à leurs fichiers. Préférez des formulaires
simples pour la prise de contact.
 Pour un niveau de sécurité plus élevé, interdisez la mémorisation
automatique des mots de passe par le navigateur, et forcez une vraie saisie.
Il est indispensable de consulter régulièrement les statistiques du
serveur. On y relèvera en particulier les erreurs 404, c’est à dire les
liens cassés sur votre site. Cela permet de contrôler les liens internes
incohérents, mais surtout les liens entrants, en provenance d’autres sites.
Pour ceux-ci, il convient soit de signaler le changement au site, soit de
mettre en place une redirection vers la page appropriée.
 Utilisez votre outil d’analyse d’audience pour voir quels mots clés ont été
saisis sur des moteurs de recherche par les visiteurs de votre site.
Vérifiez la correspondance de ces mots avec votre cible.
Utilisez un outil de surveillance et d’alerte (monitoring) pour suivre la qualité de service sur votre site : disponibilité 24/24 et stabilité du temps de réponse.
Outre l’audience globale, suivez attentivement le ratio de pages vues par visite. Il témoigne de la capacité de votre site à retenir le visiteur.
Toute dégradation doit être analysée. Elle peut traduire une mauvaise qualité de service, des pages trop lentes, une ergonomie moins lisible,etc… Suivez également le ratio des visites par visiteur, qui traduit la capacité à faire revenir vos visiteurs.
Vos visiteurs ne doivent pas être vos testeurs. Néanmoins, ils peuvent l’être à l’occasion. Proposez systématiquement un lien ‘webmaster’permettant de signaler un problème. Il peut parfois être réuni avec une page plus générale de ‘contact’.
Assurez vous que les prises de contact reçoivent toujours une réponse dans les 24 heures ouvrées. Pour cela, rien de mieux que de faire le test vous-mêmes. Répondez à tout le monde, faites en une question de principe, aux ennuyeux comme aux clients. Sauf aux
spammeurs bien sûr.
 En termes d’hébergement, votre serveur devrait avoir une bande passante meilleure que le mieux équipé de vos visiteurs. Pour un site haut de gamme, une bande passante de 1 ou 2
n’est plus suffisante. Testez votre site avec un accès très haut débit (>10mbps), et vérifiez que l’on n’attend jamais le chargement des images.
 Privilégiez la vraie pertinence, en écrivant de nombreuses pages de contenus pertinents pour votre site. L’avantage sera triple : (1) vous apporterez une vraie valeur ajoutée à vos visiteurs, (2) vous améliorerez votre référencement, et enfin (3) d’autres sites placeront des liens vers vos pages les plus riches, améliorant votre ‘page rank’, c’est à dire l’évaluation
de votre site par Google.
evitez les référencement trop bricolés, pages fantômes, fermes de liens, et autres pratiques peu déontologiques. Elles peuvent vous valoir d’être totalement blacklisté, déréférencé.
Bien sûr, si votre business est extrêmement lié à votre place dans Google,alors vous devrez sans doutes en passer par là. Mais assurez vous du moins d’avoir fait d’abord tout ce qu’il faut pour promouvoir votre véritable notoriété : contenus riches et pertinents, liens avec des sites partenaires, maillage interne…
 Réfléchissez bien au vocabulaire utilisé sur votre site. Les mots sont-ils les mêmes que ceux qui seront saisis par vos visiteurs dans les moteurs de recherche. Si vous ne parlez que de « platine laser » et que vos visiteurs cherchent « lecteur CD », alors il est clair qu’ils ne vous trouveront jamais. Rédigez la liste des mots-clés à utiliser et communiquez la à tous vos rédacteurs.Et consultez les logs pour trouver quels mots étaient recherchés par les
visiteurs arrivant sur votre site.
 Un formulaire, même une simple liste déroulante, bloque les robots d’indexation. Si vraiment vous devez en utiliser, il faut absolument une navigation alternative. A moins que le but soit précisément de bloquer les robots sur certaines parties du site. Mais dans ce cas, l’usage d’un fichier ‘robots.txt’ est plus pertinent.
Pour définir les titres de chapitres, utilisez les balises Html prévues à cet effet, H1, H2, etc. Utilisez ensuite des feuilles CSS pour définir la mise en forme de ces titres. Ainsi les robots d’indexation pourront identifier aisément vos titres, ce qui améliorera votre référencement. Et les outils d’ accessibilité pourront signifier au lecteur la présence d’un titre.
 Renseignez toujours le titre de page avec soin. Il apparaît à la fois dans l’entête de fenêtre, dans les favoris mémorisés, et dans l’intitulé d’une recherche Google. Par exemple, le titre de la page d’accueil ne doit pas être « Accueil » ou pire, « Homepage ». Ce titre a une grande importance dans le référencement. Avec un outil de gestion de contenus, le titre de page doit soit reprendre le titre de l’article, soit être défini spécifiquement.
 Les mots clés apparaissant dans la balise « keywords » de l’entête de page ne sont pratiquement plus utilisés par les moteurs de recherche. Inutile donc d’y bourrer des quantités de mots sans grand rapport avec le contenu. Utilisez les plutôt de manière sobre et intelligente, en particulier afin de les utiliser au mieux dans le moteur
de recherche interne.
Les mots porteurs de liens sont indexés avec la page vers laquelle pointe le lien, et avec une pondération relativement forte. Si vous définissez un lien tel que « les lentilles vertes du Puy, un trésor de santé »,les mots cités sont tous associés à la page pointée. Tandis que si vous définissez « les lentilles vertes du Puy, un trésor de santé [en savoir plus…] », seuls les mots « en savoir plus » sont associés à la page citée.

Commentaires
etrader (13 an(s))  
excelente  contribution  :)  bien  joué
 
 
Retour
 
 
Avertissement
Les Meilleures Façons proposées sur ce site sont rédigées par les membres inscrits au service et sont la propriété de leurs auteurs respectifs. BestMonde.com ne garantit en rien la fiabilité ou la qualité de ces conseils et n'endosse en rien leur contenu. BestMonde.com ne peut être tenue responsable d'éventuels dommages ou inconvénients, quels qu'ils soient, subis suite à leur application.