Bonjour,

Mon prénom est jean-marc, je suis débutant en html/css, j'ai appris le code lors d'une formation au cours de l'été 2010 et en lisant CSS2 le livre de Raphael.
Je viens de faire un site pour un ami qui compte faire des stages de cuisine au Maroc.

Je soumet le site à votre expertise.

N'hésitez pas à critiquer tout ce qui vous semble mauvais.
La route est longue sur le chemin de la perfection Smiley confus


Merci

http://www.cuisine-vacances.com
Modifié par jeanmarc (17 Mar 2011 - 21:07)
euh,

désolé pour le smiley qui n'en est pas un Smiley biggrin ,

j'ai du faire une fausse manip, c'est mon premier sujet posté.
Bon site dans l'ensemble, Tant au niveau accessibilité, design, contenu et codage. Un Bémol : une adaptation serai intéressant pour les petites résolutions (smartphones).
Salut salut et bienvenu sur Alsacreations ^^

Alors moi ma première impression c'est que c'est un site très chargé, alors qu'en fin de compte il n'y a pas tant de contenu que ça, j'imagine que c'est la présence d'image et le traitement de celle-ci qui me donne cette impression.

Au niveau des couleurs personnellement je n'aime pas trop, mais c'est totalement subjectif, mais je te conseil quand même l'outil Kuler, exellent pour choisir une gamme colorimétrique.

Au niveau du code : pour placer tes images, tu as cru bon d'insérer pleins de div j'imagine car il y en a pas mal, dont des qui ne servent à rien (dans les premières page du livre : la divite aigüe !! ^^), comme par exemple le div de navigation, le ul suffit pour la mise en forme.

Je pense aussi qu'il y a quelques lacunes au niveaux du positionnement, en effet tu utilises exclusivement le margin, comme par exemple pour ton calendrier, c'est tellement plus propre un positionnement absolute dans un conteneur relatif, je te renvoies aux livres pour ses notions (ou même sur ce site).

Tu as également écris en majuscule dans ton HTML, hors le CSS sert à cela, ca ne change pas grand chose en soit, mais au temps adopter la même démarche jusqu'au bout en modularisant la structure et la présentation.

Au niveau de ta balise head, sur ta page d'acceuil ca va encore, mais par exemple quand j'arrive sur le programme de la semaine, j'aperçois une profusions de script, je ne sais pas si c'est juste pour ton image qui défile en bas de page, mais si c'est le cas il y a des façon beaucoup plus propre de s'y prendre, par exemple ne pas mettre cette image qui n'apporte pas grand chose, qui augmente la charge cognitive pour rien. Tu as même des script que tu appels en local, bref à revoir.

Tu utilises également des meta qui sont déprécié comme celle pour les mots clé, il y en a peut être d'autres, il faudrait que tu vérifies ^^

La méthode que tu utilises pour ton fond n'est, elle, pas non plus optimal. Il suffit qu'un utilisateurs ai une grande résolutions pour que l'image soit collée en haut à gauche (ou qu'il dézoome un peu). Comme solutions alternative, tu peux prendre 1px en longueur de ton image et la repetter sur l'axe x, et ensuite mettre la couleur de fond qui se trouve en bas de ton image comme couleur pour ton div conteneur, comme cela, c'est totalement transparent.

Et enfin, ta déclaration de police, commence par Arial qui est suivit par helvetica. Helvetica n'est pas sur windows donc ca ne change rien pour ces utilisateurs. Mais pour Mac, les deux polices sont présentes, hors le navigateurs prendra la première de l'instruction, qui se trouve être Arial, en bref, jamais Helvetica ne s'affichera sur ton site, pour que ce soit le cas, il faut la mettre en première position.

Et enfin petit problème d'accessibilité sur ton formulaire de contact, tu as bien utilisés un label, mais malheureusement il est mal associé à sont input, c'est avec l'attribut id que le for est lié. Donc ici ils n'ont aucun effet. Je pense aussi qu'il y a un petit problème au niveau de l'envois, car chez moi il m'ouvre mon client mail, il ne se sert donc pas du formulaire. Et il y a une absence total de gestion du feedback.

Voila mon humble avis, ca vaut ce que ca vaut Smiley langue

A bientôt !
Modifié par Gili (10 Feb 2011 - 20:11)
Bonjour,

Merci pour les réponses.

@doc mcFly
Je suis entrain de me pencher sur une version mobile, mais je ne sais pas encore comment m'y prendre. Des idées?

@Gili

Oui je dois avoir choppé une divite, j'essaye de me soigner à suivre Smiley smile )

Pour le positionnement effectivement je me sens plus à l'aise en float, je vais regardé de prés pour un positionnement absolute dans un container relatif.

Pour les scripts effectivement c'est pour la p'tite animation flash en bas de la page programme
bon ben oui c'est pas top, j'envisage de changer cette partie;

Meta surement à améliorer, mais j'ai du mal à mis retrouver, quel est le meilleur compromis "mystére"? et oui je n'ai pas pu m'empécher de mettre la meta mots-clefs.

Pour le fond je n'ai pas compris Smiley confus , quel fond? html?body?
je ne comprends pas le 1px repeat en x, le fond n'est pas uniforme (enfin à voir lequel)

Encore merci pour vos remarques

A plus tard
Bonjour,

Tes pages sont excessivement lourdes à charger... Le simages inutiles et les scripts y sont certainenent pour quelquechose...

Le design, soyons clair, est à revoir : les images détourées à Larache©, les images de fond lourde qui n'apportent rien sauf du bruit visuel, le manque d'espace, l'absence de travail sur les polices...

Le code, idem :
* La meta keyword ne sert à rien, à part prendre de la place, du poids et te faire perdre du temps lors de sa rédaction.

* Ta meta description est trop longue, elle ne sera jamais affichée en entier sur les pages de résultats des moteurs de recherche (qui est sa seule utilité).

* Le alt de l'image ne doit pas décrire l'image mais son contenu, pour le changement de langue, "Drapeau Anglais" n'est pas approprié pour l'image (même si c'est le drapeau anglais qui y est représenté), car ce n'est pas le contenu que l'on souhaite véhiculer. Le alt devrait indiquer la possibilité de changer de langue. Accessoirement, le drapeau anglais exclu tous les anglophones non anglais Smiley ohwell

* Cacher des portions de texte dans une page n'est pas vraiment apprécié des moteurs de recherche.

* Ta div nav est inutile, puisqu'elle ne contient QUE la liste navigation.

* Tes titres de section ne sotn pas corrects : "Au coeur de la Médina d'Essaouira "Mogador" le riad Saadi vous propose des séjours découverte de la "Cuisine Marocaine Traditionnelle"." n'est absolument pas un titre de section de niveau 2, c'est un paragraphe...

* Les images décoratives doivent avoir un alt vide.

*
@Laurie-Anne

merci pour le feedback

Pour les images, c'est une volonté de mon copain, bon à suivre quand même.

Au sujet du design, non les detourages ne sont pas fait à Larache Smiley smile , mais tu as raison ils sont à refaire (fournie par mon copain).
Une aeration des pages serait à envisager.
qu'entends tu par "absence de travail de police"?

Je vais enlever la meta key-words.Y a t'il des meta importantes à mettre??

Je vais revoir les alt, ainsi que les alt des images décoratives.

En fait le paragraphe maroc qui est caché doit être enlevé, mais pour l'instant quand je le vire la page se transforme en champ de bataille.Mais je vais finir par réussie à l'enlever Smiley rolleyes

je dois transférer la div nav dans ul, est ensuite l'enlever.

le paragraphe en h2 sera corrigé.

En tout cas encore merci pour tes lumiéres

Normalement je devrais pouvoir m'atteler aux corrections durant le prochain Week-end, affaire à suivre.

Bonne fin de semaine

à bientôt