Bonjour,
Rien de plus à dire pour le design (par contre j'insisterais sur les contrastes insuffisants (logo, menu) qui rendent les textes très difficiles à lire).
Pour ce qui est du code :
* Horreur ! Les pages n'ont pas de title ! Ca fait longtemps que je n'avais plus vu ça... Il faut donner à tes pages un titre, si possible unique pour chaque page, c'est plus simple pour les utilisateurs qui veulent ajouter une page en favoris. Niveau bonne pratique, l'idée c'est d'avoir un titre du genre : "Titre de la page - Nom du site" (ou l'inverse, mais je préfère dans ce sens (sauf pour l'accueil), l'utilisateur a ainsi comme première information celle qui est la plus importante (où se trouve-t'il ?)).
* Toujours dans les meta, une meta description serait un plus, pas réellement pour ton référencement, mais c'est très lié. En effet, le contenu de la balise description sera utilisé par les moteurs de recherche (google du moins
) pour afficher une courte description de la page sous le titre de la-dite page. Avoir une description "sexy" et parlante c'est un atout pour le clic de l'utilisateur (et potentiel visiteur). Actuellement, tu constatera que la
description de ta page d'accueil n'est pas des plus "sexy" (la date, le visiteur, ça ne l'intéresse pas).
* Ton site manque de hiérarchie, sur la page d'accueil, je ne vois pas un seul Hn. Pas même pour le titre du site ou le titre de la page... Ce n'est pas génial, ni pour la logique de ton site, ni pour son référencement. Personnellement, pour la page d'accueil, j'utilise h1 pour le nom du site et h2 pour le titre de la page ; et sur les autres page le nom du site est dans un simple div comme tu l'as fait et le titre de la page passe en h1.
* Attention à l'utilisation abusive de title sur les liens :
<a href="presentation.html" title="Présentation"><img src="img/1pix.gif" alt="Présentation" /></a>
Le but de title (pour les liens) est d'apporter des information
supplémentaires à propos du lien concerné. Quelle information supplémentaire apporte ici "Présentation" par rapport à "Présentation" ? title n'est pas un attribut obligatoire, innutile de faire du zèle et de l'utilier à tout va.
* L'image transparente, qui me rappelle fortement les années 90 est-elle nécessaire ?
<div class="clear"><img src="img/1pix.gif" alt="" /></div>
Un div vide (ou un hr, ou un span...) fera tout aussi bien son travail.
* Pour les listes de bas de page, est-il vraiment logique de mettre les séparateurs dans des items de listes rien que pour eux (si pour des raison visuelles tu avais besoin de mettre de l'espace autours de ces séparateurs, je comprendrait la logique (pas forcément bonne), mais ce n'est pas le cas). D'ailleurs est-ce que toutes les informations de ces listes sont réellements des éléments de liste ? Je ne suis pas convaincue (à part pour la dernière avec les liens). Je pense que ceci est à revoir.
* Si la page présentation et index sont les mêmes, pourquoi ne pas l'indiquer dans le menu ? C'est confus pour moi.
* Attention aux incohérence dans le formulaire :
<input type="radio" name="civilite" id="mademoiselle" class="gauche radio" value="madame" /> <label for="madame" class="lab">Mlle </label>
Si je précise que je ne suis pas mariée (et donc une demoiselle), j'apprécierais moyennement de me faire appellet "Madame" en réponse à mon mail. D'ailleurs pour les label, il serait plus confortable pour les utilisateurs de lecteurs d'écran de mettre les civilités en toute lettre (même si c'est utilisateurs sont habitués aux abréviations).
* L'odre de lecture (dans le code) des éléments du formulaire n'est pas logique et pas cohérent avec le rendu visuel. La navigation au clavier, entre autre, sera de fait, illogique (pour les bien voyant qui auront un chemin inattendu par rapport à ce qu'ils verront) et perturbant (pour les moins bien voyant qui utiliseraient un lecteur d'écran).
* Bien que l'astérisque soient générallement reconnu comme symbole de champs obligatoire à remplir dans un formulaire, le signaler n'est jamais un luxe, et toujours une bonne pratique.
* Attention aux <br> qui coupent une phrase :
<p class="text"><span class="bleu">CONTACT / DEMANDE DE DEVIS</span> - Pour toutes demandes, vous pouvez me laisser votre message en remplissant le formulaire ci-dessous ou directement<br />
par mail : <a href="mailto:contact@siecreation.com"><strong>contact[at]siecreation.com</strong></a> ou par téléphone : <strong>06 84 69 08 90</strong></p>
Visuellement, su grand écran, c'est moche...
* Il est dommage d'utiliser de temps en temps des styles CSS dans le code :
<p style="margin-left: 600px;">
L'utilisation d'une classe serait plus propre.
* Il y a quelques erreurs de code à corriger (du moins sur l'accueil).
Bonne continuation,
Edit :
mecho a écrit :
Certaines puces de tes listes sont gérées en html (- tiret) ; elles doivent être déclarées dans ta feuille de style.
Cela m'avait également intriguée, donc j'ai vérifié. Les listes sont bel et bien utilisée, mais sans puces avec le tiret dans le code HTML.
L'utilisation de puces et la suppression des tirets serait visuellement plus belle.
Modifié par Laurie-Anne (15 Sep 2009 - 13:54)
