Bonsoir à tous. Je vous présente le nouveau site du Team Kid Kart Hazebrouckois. Celui-ci donne toute l'actualité de ses deux pilotes qui pratiquent le karting de compétition en Nord-Picardie.

www.teamkkh.com

Le site est valide Xhtml et CSS, cependant le site ne fonctionne pas correctement sur IE6 mais celà résolu demain.

Merci.
Modifié par Sibiz (14 Jul 2009 - 20:03)
Bonjour,

En effet, le site ne s'affiche pas correctement sur IE6. J'espère que cela sera corrigé rapidement.

Graphiquement, sur le peu que je peux voir : Le site est propre et bien organisé, par contre les textes sont vraiment trop petits et impossibles de les aggrandir sous IE6/7 car spécifiés en px (sans même checker la CSS), il faut utiliser une unité relative (em, %) pour les tailles de fonte.

L'italique des textes rend d'ailleurs l'ensemble très chargé.

Les liens ne sont pas assez différenciés du reste du contenu, sur la page d'accueil du moins, ils sont rouges et ne se soulignent qu'au survol, il est difficile de les différencier des titres qui sont de la même couleur. Sur la page team, des éléments qui ne sont pas des liens sont souligné, c'est une très mauvaise pratique, il est conseillé de toujours réserver le soulignement aux liens.

Concernant le code :

* Il te manque une meta dans ton head :
<meta name="description" content="">
qui te permettra d'afficher une description de ton site dans les principaux moteurs de recherche, surtout pour ta page d'accueil qui a très peu de contenu. Cette description doit, dans le meilleur des monde, être unique pour chaque pas.

* Attention à tes alt :
<a href="http://www.dks-motors.com/dks/"><img src="index/images/commun/dks.gif" alt="DKS" title="Allez sur le site DKS"/></a>
Ici, il serait peut-être plus parlant de mettre le nom complet plutôt que l'accronyme du sigle.
<img src="preparateur/pubdks.jpg" alt="DKS"/> 
Cette image, qui se trouve sur la page "préparateur" est porteuse de beaucoup de texte, texte qui DOIT se retrouver dans le alt.

* La hiérarchie de titre de ta page n'est pas correcte. Sur ta page "home", le premier hn a apparaitre est un h5, ce devrait être un h1. Les utilisateurs de lecteur d'écran utilisent, assez souvent, la navigation par titres, il faut donc que la hiérarchie des titres d'une page soit complète, sans intéruptions.

* Pense à baliser les changements de langue :
<li><a href="index.html"><span class="mev">Home</span></a></li>
<li><a href="index/general/leteam.html">Le Team</a></li>
Utilise lang="en" sur le <a> si le lien ne contient de des mots anglais ou sur un span délimitant les mots étranger.

* Ceci :
<p class="p1"><br/>
ne devrait pas se trouver dans ton code, tu peux aisément le remplacé par un margin ou un padding définit dans le CSS.

* Quel est l'intérêt de ceci :
<a href="index/general/ficheseb.html" class="sebastien" title="Sébastien Belleval"></a>
Je suppose qu'une image de fond est définie en CSS, mais le lien est vide. L'image DOIT se trouver dans le code HTML lorsqu'elle est porteuse de contenu ou le support d'un lien.

* Utilise la balise acronym :
<a href="http://www.mvu.fr/" class="sponsor02" title="MVU"></a>
Toi, et les habitués de ton site, savez très certainement de que MVU veux dire, mais ce n'est pas le cas des visiteurs occasionnels. (Pour cette portion de code, la remarque de point précédent s'applique aussi, et donc l'utilisation de acronym n'est pas nécéssaire si dans le alt de l'image que tu va mettre dans le code tu met le nom complet de l'organisme).

* L'objet Flash qui génère le compteur n'est pas accessible pour un kopec :
<object type="application/x-shockwave-flash" data="index/compteur.swf" width="130" height="50">
  <param name="movie" value="index/compteur.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger.</a></p>
</object>
Il serait préférable de mettre le contenu du compteur dans le paragraphe alternatif, plutôt qu'une longue phrase avec un long lien qui vont déformer le design du site (si ils ne sont pas tronqués avant).

* Le tableau de la page "partenaires" n'est pas très approprié, mais le plus gênant est qu'il soit composé de th (table header) uniquement. <th> doit être réservé aux titres de colonnes et de lignes. Des élements flottants serait plus à leur place sur cette page.

* La page photo est absolument non navigable au clavier (impossible de sélectionner une valeur dans les listes déroulante car les formulaire sont validé dès la "sélection" qui s'oppère en appuyant sur la touche "bas". L'ajout d'un bouton "OK" pour laisser les gens valider ne serait pas de trop.



Bonne continuation
Merci beaucoup d'avoir pris le temps de consulter mon site et de me proposer des solutions. Je prend en compte tes remarques pour l'améliorer.