Bonjour,

Je soumet à votre critique un site que je viens de réaliser.
http://mentaycanela.free.fr/
Les textes seront ajoutés très prochainement.
Ce site a pour but de commencer mon portfolio pour ma nouvelle activité de web développeur.
Vos critiques sont donc importantes afin de savoir si un site de cette qualité peut jouer en ma faveur, ou inversement en ma défaveur, et dans ce dernier cas le rendre plus professionnel et esthétique.
Les technologies utilisées : (X)HTML, CSS3, PHP OOP.

Merci

Christophe
Modifié par Itachi (29 Mar 2010 - 11:23)
Bonjour,

Point de vue design, il y a un problème d'alignement sous IE6 qui rend le menu partiellement illisible (le contraste étant trop faible sur le fond noir) et le fait déborder sur le contenu.

Le corps de la page manque d'habillage, la succession titre, image, contenu est rébarbative et pas des plus esthétiques.

Le mélange de deux fontes à empatement n'est généralement pas une bonne idée (time new pour les textes HTML et l'autre pour le nom de la page).

Pour ce qui est du code :
* Chaque page du site devrait avoir un titre de page unique et dévrivant la page en cours.

* Il manque une meta description, qui elle également doit être unique pour chaque page et décrire la page en cours. La meta description, bien que d'aucune utilité pour ton référencement peut être très utile pour attirer les visiteur, en effet, c'est elle qui peut (si elle est présente et jugée pertinente par le moteur) être utilisée sous le nom de la page dans les page de résultats des moteurs de recherche (sinon ce sont les x premiers caractères de textes qui seront affiché, très souvent le menu).

* Pour ton header tu utilise une image de fond comportant du texte, cette image DOIT se trouver dans le code HTML avec un attribut alt correctement rempli (c'est-à-dire avec exactement le même texte que dans l'image). La technique que tu utilise (texte-indent) est une erreur (et pas une petite). Quand (et non "si", car cela arrivera c'est certains) l'image ne pourra pas être affichée (problème serveur, lenteur de connection (en belgique les connections sont bridées en cas de dépassement des quota, par exemple), de bloquage de images...) ton site perdra son titre principal (car en général, les CSS seront toujours appliqués).

* Les images que tu utilise sous les titres sont à mon sens purement décoratives, elles ne nécessitent donc pas d'attribut alt. Par contre, si elle étaient placée dans une galeries, les descriptions que tu leur a données serait parfaites.

* Que ton code HTML soit valide est très bien par contre l'afficher sur le site n'apporte rien au visiteur et ne donne pas vraiment une image pro (par contre, dans ton portfolio, il peut être judicieux de signaler que les pages que tu créé sont valides).

* Le tableau des horaires dans la page cours n'est pas bien aligné. Les éléments flotants doivent être placé avant les éléments dans le flux dans le code HTML. Il serait peut-être plus intéressant d'utiliser un tableau.

* Les zones à remplir de ton formulaire de contact sont à peine visible (deux bordure blanches sur fond ocre de 1px de largeur c'est trop peu) il faut qu'il se distinguent plus du reste de la page.

* L'envoi du formulaire renvoie une page d'erreur 404...

* Il pourrait être intéressant de démontrer tes talents en JS (même si tu n'en a pas Smiley langue ) en ajoutant à ce formulaire une vérification du remplissage des champs avant envoi.

* Rajouter l'indicatif de pays devant le numéro de téléphone est un plus ; d'autant que l'on ne sait absolument pas où se trouve cette école de flamenco.

* La présence d'adresse e-mail en clair dans la page risque de t'attirer beaucoup de spam.

* Et pour finir : attention aux droits d'auteurs sur les illustrations utilisée.
Salut Laurie-Anne,

Tout d'abord merci d'avoir pris de ton temps pour ces remarques.

Laurie-Anne a écrit :

Point de vue design, il y a un problème d'alignement sous IE6 qui rend le menu partiellement illisible (le contraste étant trop faible sur le fond noir) et le fait déborder sur le contenu.

Le corps de la page manque d'habillage, la succession titre, image, contenu est rébarbative et pas des plus esthétiques.

Le mélange de deux fontes à empatement n'est généralement pas une bonne idée (time new pour les textes HTML et l'autre pour le nom de la page).


Je ne dispose pas d'IE6 pour tester le rendu. Est-il possible de trouver des outils online qui le permettent?
Pour l'esthétique générale, il est vrai que même si je travaille ce point en ce moment (Smashing Book et autres ressources) cela ne vient pas naturellement et rapidement...
Pour ce qui est du mélange de deux fontes je ne comprend pas car je n'en ai pas spécifié dans le css donc il ne devrait que y avoir celle par défaut du navigateur, non?


Laurie-Anne a écrit :

* Les zones à remplir de ton formulaire de contact sont à peine visible (deux bordure blanches sur fond ocre de 1px de largeur c'est trop peu) il faut qu'il se distinguent plus du reste de la page.

* L'envoi du formulaire renvoie une page d'erreur 404...


Surement un autre déphasage visuel sous IE6 car le formulaire possède des champs colorés, et dont la couleur change avec le focus.
Le traitement du formulaire n'est pas terminée, j'ai oublié de le préciser.


Okay pour le reste je me lance dans les corrections

Je suis aussi preneur de conseils, astuces, sur le design (couleurs, layout, typo...).

Christophe

PS: je ne parviens pas à utiliser la balise quote :s
PS 2 : Okay c'est édité
Modifié par Itachi (29 Mar 2010 - 13:16)
Il y a actuellement un petit bug avec la balise quote, il faut ajouter =Nom de la personne avant le ] pour que cela fonctionne correctement.

Pour ce qui est d'IE6, le mieux est d'utiliser virtualPC (ou un autre logiciel du même genre) et une image de windowsXP avec IE6 (trouvable sur le site de Microsoft). Ainsi, tu es sûr d'avoir un vrai IE6 natif.