Bonjour,
Première chose à faire : corriger les
19 erreurs de validation sur la page d'accueil (et toutes celles qui pourraient se trouver sur les autres pages).
Graphiquement, le site s'essaye au style web 2.0 (des arrondis partout, des ombres portées...) sans réellement parvenir à un résultat si 2.0 (clareté, légerté...). L'interface est lourde, très lourde, on a l'impression que tout a été comprimé de peur de prendre trop de place : il faut donner plus d'espace pour que les éléments puissent respirer.
Les textes sont difficile à lire car en plus d'un contraste faible avec le fond blanc, leur interlignage semble être réduit par rapport à celui par défaut. Les liens deviennent imbuvable car leur soulignement se cole aux lettre de la ligne suivante !
Je ne suis pas fan des couleurs, autant j'aime beaucoup le prune, autant le vert pourrait éventuellement passer avec le prune (bien qu'un peu trop contrasté à mon goùt), autant l'ajout de l'orange déséquilibre la palette.
D'un point de vue accessibilité:
* La navigation au clavier est partiellement impossible puisque les focus ont été supprimés sur les éléments du menu déroulant principal...
* Les textes sont impossibles à redimensionner sous IE6 et 7 car leurs tailles sont précisés en unité fixe (px, généralement) et non relatives (em ou %) comme cela est recommandé un peu partout.
* Les liens vides, sont des liens qui peuvent être supprimés, puisqu'il sont vide ; après, qu'on y ajoute une image de fond, de surcrois, porteuse de contenu, est très certainement la pire erreur d'accessibilité actuelle. Pour faire simple : les images qui ont du texte dessus doivent TOUJOURS se trouver dans le code HTML avec un attribut alt duement remplis, sinon en cas de problème (serveur incapable d'afficher les images, utilisateur de lecteur d'écran, navigateur ne supportant pas les images, robot...) pas d'image = pas de lien = pas de contenu référençable. En gros sur ton site, la quasi totalité des titres sont absent.
Pour le code pur :
* La meta keyword est totalement inutile et inutilisée par les moteurs de recherche, elle peux donc être supprimée.
* Une meta robots à index, follow, all est tout aussi inutile, puisque ce sont les valeurs par défaut...
* La meta description n'est pas des plus atrayante, il faudrait la rendre plus sexy (et bien évidement unique pour chaque page) afin d'attirer les visiteurs depuis les pages de résultats des moteurs de recherche.
* Quand je vois ça :
<noscript><a href=http://deluxe-menu.com/>Javascript Menu by Deluxe-Menu.com</a></noscript>
Je me pose des questions sur la robustesse du menu... Est-il absolument nécessaire de préciser aux gens qui n'ont aps JS que le menu JS est conçu par tel site ?
* Les scripts JS devraient tous se trouver dans des fichiers externe et devraient tous être appelés en fin de document afin de ne pas ralentir le chargement des éléments les plus importants de la page : le contenu.
* Un peu de révision sur les fondamentaux :
<a href="/restaurants/cuisine_savoyarde_c20/Autour_de_la_Daurade_31000_l14/ambiance_conviviale_a5/LES_FONDUES_DE_LA_DAURADE_restaurant_70.html" title="Restaurant LES FONDUES DE LA DAURADE à TOULOUSE, Ils sont fondus de fondues la Daurade..."><img src="/photos-restos/54.jpg?filter=scale&w=163&h=110" alt="Restaurant LES FONDUES DE LA DAURADE à TOULOUSE, Ils sont fondus de fondues la Daurade..." /></a>
Title
peut être utiliser sur un lien pour apporter une information utile et necessaire à la bonne navigation du visiteur, il ne
doit pas être utiliser pour paraphraser l'intitulé du lien (dans le cas d'un lien image, cet intitulé est le alt de l'image). Alt
doit être utiliser pour rapporter fidèlement le contenu porté par une image (dans le cas de cette image le contenu est "" ou éventuellement le nom du restaurant). Aucun des deux ne doit être utiliser pour rajouter du contenu caché aux visiteuurs. Dans le cas de ce liens, il y a juste après l'image le nom du restaurant, porteur du même lien avec le même title ; ceci pose un problème énorme : la redondance, il faut donc élaguer tout ça. Je conseillerais de ne garder le lien que sur le nom en texte ou de n'utiliser qu'une seule balise a pour l'image et le texte.
* La hiérarchie du site est totalement fausse (au début, je la croyais inexistante, puis j'ai vu un h4 perdu dans la masse de code...). La hiérarchie des titres est très importante pour deux raisons : 1. Raison qui va t'interesser le plus : le référencement ; 2. Raison qui va interesser ceux qui en ont besoin : cette hiérarchie de titres est utilisée par les utilisateurs de lecteurs d'écran pour naviguer plus facilement dans les pages, bien sûr cela ne fontionne que si la hiérarchie est correcte. Une hiérarchie de titres correcte commence toujours par h1 et ne comporte pas de sauts (h1 ne peut pas être directement suivi de h3, il doit y avoir un h2 entre). Cette hiérarchie peut être comparée à celles des titres sous n'importe quel logiciel de traitement de texte.
* Tu manque beaucoup de sémantique :
<b>Les 4 petits cochons</b> (04-11-2009)<br/><br/>
<p> "<em><strong>Les 4 petits cochons</strong></em>" à découvrir ou redécouvrir.</p><p>Annoncez vous de la part de notre site et bénéficiez d'un apéro offert en bienvenue.</p><p> </p><p><strong><em><u><a target="_self" href="http://www.toulouseresto.com/restaurants/cuisine__c$resto.cuisine.CUIS_ID/Autour_de_Lardenne_31100_l30/ambiance_cosy_a4/LES_4_PETITS_COCHONS_restaurant_108.html">Voir la fiche du restaurant </a></u></em></strong><br /></p><br/><br/>
Ce qui ressemble des titres et que tu graisse devraient se trouver dans un hn ; si tu n'y tiens vraiment pas, ils devraient au minimum se trouver dans un p. L'utilisation de br après un p est particulièrement déconcertante, quand on sait qu'il suffit d'augmenter la marge après le p pour éviter ces br...
Je m'arrête là parce que je dois y aller, mais je suis sûre qu'il y a encore beaucoup à dire.
