Bonjour,
Nous revoilà pour un nouveau site ! Pour rappel, nous sommes une équipe de 4 étudiants en informatique (DUT SRC à l'Isle d'Abeau (Isère). Le site cuisine étudiant est un site collaboratif de publication de recettes de cuisine par les étudiants. Chacun peut en poster une, en commenter, en noter, en imprimer, etc... En gros, un site fait par des étudiants, pour des étudiants.

Ce site a été réalisé à l'aide de Photoshop CS3 et il est basé sur xhtml & css ; php & mysql ainsi que javascript (xml/rss étant en cours de production).

Nous demandons votre avis critique, sur n'importe quel élément du site, qu'il soit visible, graphique, ou bien fonctionnel !
Nous vous remercions cependant de ne pas poster n'importe quoi dans les champs de formulaire (bien sûr, si vous souhaitez collaborer sérieusement, nous en serions très heureux ! Etant donné que la est le but du site ! Smiley cligne ), mais nous vous faisons pleinement confiance !

Merci d'avance !
Cordialement,
Insane Studio (désolé pour la pseudo-reprise d'un de nos message antérieur).
Modifié par InsaneStudio (09 Mar 2009 - 22:43)
Bonjour

Première constatation, sous IE, je ne peux pas aggrandir le texte (assez petit), vous utilisez donc des px pour spécifier les tailles de fonte, préférez des em ou % ça arrangera tout le monde.

La page d'accueil a également 5 erreurs (assez facile à corriger) de validation !

Graphiquement, le site est mignon, il ne m'évoque pas vraiment la cuisine cependant. Il est agalement très étroit, sur une résolution large, ça risque de faire petit. (et sur une petite résolution, il est quand même coupé, là c'est de suite plus gênant).

Passons au code :

* Attention au définition multiples d'un même élément :
		<link rel="shortcut icon" href="http://www.cuisine-etudiant.fr/images/favicon.png" />
		<link rel="shortcut icon" href="http://www.cuisine-etudiant.fr/images/favicon.ico" />

Vous devriez utiliser les commentaires conditionnel pour substituer l'ico pour IE, mais pas définir les deux direct...

* Je ne suis pas fan de votre utilisation du texte caché en lieu et place d'une image :
<h1><a href="http://www.cuisine-etudiant.fr/" title="Retourner &agrave; l'accueil &raquo;"><span>Cuisine pour les &eacute;tudiants</span></a></h1>

L'image de fond du H1 est porteuse d'information, elle devrait donc se trouver dans le HTML avec un texte alternative qui va bien. Dans l'état actuel de votre site, si les images sotn désactivées, mais pas les CSS, plus de titre.

* Les titles sur tous vos liens n'apportent rien, ils sont plus qu'inutiles, ils sont énervant :
<li><a class="m" href="http://www.cuisine-etudiant.fr/entrees/alphabetique/" title="Les Entr&eacute;es &raquo;"><span>Entr&eacute;es</span></a></li>
<li><a class="m" href="http://www.cuisine-etudiant.fr/plats/alphabetique/" title="Les Plats &raquo;"><span>Plats</span></a></li>
<li><a class="m" href="http://www.cuisine-etudiant.fr/desserts/alphabetique/" title="Les Desserts &raquo;"><span>Desserts</span></a></li>
<li><a class="m" href="http://www.cuisine-etudiant.fr/cocktails/alphabetique/" title="Les Cocktails &raquo;"><span>Cocktails</span></a></li>
<li><a class="m1" href="http://www.cuisine-etudiant.fr/rechercher/" title="Rechercher une recette &raquo;"><span>Rechercher</span></a></li>
<li><a class="m1" href="http://www.cuisine-etudiant.fr/ajouter/" title="Ajouter une recette &raquo;"><span>Ajouter</span></a></li>


* Quand on doit utiliser une classe "title" c'est qu'il y a un problème
<span class="title">Suggestion...</span>
les Hn sont là pour ça...

* Il est domage de créer 2 listes pour les ingrédients :
<ul class="ingredients_gauche">
	<li>6 belles tomates</li>	
	<li>basilic</li>	
	<li>1 pinc&eacute;e de sel</li>	
</ul>
<ul class="ingredients_droit">
	<li>125 g de mozzarella</li>	
	<li>4 cuill&egrave;res &agrave; soupe d'huile d'olive</li>	
	<li>1 pinc&eacute;e de poivre</li>	
</ul>

Alors qu'il serait simple d'obtenir la même présentation visuelle avec une seule liste (qui serait moins confusante pour les utilisateurs de lecteurs d'écran).

* Dans les recette, l'image "+" donne envie de cliquer dessus pour dérouler quelque chose, comme c'est d'ailleurs le cas sur les deux éléments de la page recette.

* Vu que le but du site est d'offrir des recette facile à faire a des étudiants fauchés, pourquoi ne pas rajouter (avec le temps de cuisson et la difficulté), un ordre de grandeur du prix de la recette (par personne) ?

* Il est également domage que de nombreuse photos soit d'aussi mauvaise qualité ; les pixels, ça ne donne pas faim ^^;

* Dans le forumlaire d'ajout de recette, la photo est un champs facultatif, cependant en voulant envoyer un formulaire vide, un message m'informant que la taille de l'image que je ne souhaite pas ajouter n'est pas bonne.

* Pour finir, il manque une page de condition générale sur votre site !
Salut,

Tout d'abord, je dirais que le design est sympa quoique la zone d'affichage n'est peut être pas assez large. Pour les fiches recettes, les icônes devraient être des images,vu qu'elles apportent des informations sur ce qui est en dessous, parce quand on désactive les images, on perd un peu le sens du texte en dessous...
Sinon votre méta description est trop longue, elle comprend dans les 5OO caractères, il ne faut pas en dépasser 250.
Les pubs sont peut être trop intégrées au site, par exemple sur la page d'accueil on peut facilement se faire avoir en cliquant dessus en croyant que c'est un lien interne au site. Peut-être en les mettant sur le côté celà séparerait le contenu du site de la pub, parce que les internautes ne veulent pas de la pub en plein milieu du contenu...

Petit problème dans la page recherche sous ie6, la mise en page part en cacahuète et quand on fait une recherche et qu'il n'y a pas de réponses, pas de message pour nous le dire, il serait alors sympathique de se retrouver avec des propositions de recette au hasard ou en fonction du type recherché ^^.

Voilà, bonne journée ^^

Sinon le reste me semble correct.
Bonjour, d'un point de vue ergonomique, l'espace utilisé/utilisable est trop petit. Ma résolution n'étant pas particulièrement grande (1280x1024), j'imagine facilement que le phénomène soit d'autant plus gênant que la taille de la résolution augmente.

Le texte est trop petit, il ne faut pas oublier que ce que vous mettez en exergue, c'est le contenu, pas votre design Smiley cligne

L'ensemble graphique me laisse un sentiment d'instabilité (et un mal de tête) : peu d'éléments sont droits, on ne sait pas où donner de la tête. Entre le favicon incliné qui oriente notre vue vers le haut, le crayon du logo pointant lui aussi vers le haut, le texte du logo superposé et non symétrique, les fleurs du background qui nous orientent vers l'extérieur et enfin le store nuancé de gris foncés qui bloque notre vue au niveau du header.

Il faudrait songer à varier vos thèmes de couleurs parce que vos visiteurs risquent vite de s'y perdre cf. http://www.lianis.net/

Je repasserai ce soir voir si ce mal de tête n'est pas indépendant du design Smiley smile

Edit : Non .. le mal de tête ne venait pas de mon rhume http://fc80.deviantart.com/fs16/f/2007/193/d/3/_killtwobirdswithonestone__by_arrioch.gif
Modifié par Akhilleus (10 Mar 2009 - 18:33)
Bonsoir tout le monde, je ne suis pas le même que celui qui a créé le topic, mais j'ai participé à la création du site, alors je me permets de répondre.

@Laurie-Anne :

Pour la taille du texte, tout à fait d'accord sur l'utilité des em plutôt que des px. C'est un peu tard pour corriger tout ça, mais agrandir le texte est possible sous les dernières version d'IE, je pense que tu parles de la 6 alors.

A priori les erreurs de W3C seraient surtout les target="_blank". C'est pourtant très utile, il y a peut être une alternative valide qu'on ne connaitrait pas?

Au niveau de la cohérence entre le contenu et le contenant, on y a pensé, mais on voulait rester dans le sobre, ce qui n'est effectivement peut-être pas judicieux pour un site sur la cuisine... Pour la largeur, c'est aussi un choix, pour donner une impression de "sans superflu", trop poussé sûrement. Au moins, ça passe sur un EeePC ;P

Pour le code de la favicon, on avait mis le .ico pour ce fameux IE qui a du mal avec les png, mais ça ne marche toujours pas avec la version 6, si tu connais l'astuce..?

A priori, d'après mon collègue, le texte caché serait un petit truc pour améliorer le référencement, ce que je veux bien croire, et après tout, même si ce n'est pas très "propre", ça ne crée aucun problème pour l'internaute.

Pour ce qui est des titles, on pourrait en effet les enlever.

Pour les class, c'est vrai que c'est du bidouillage, ça fait pas très pro, mais ne pose pas de problème en soi.*

En ce qui concerne les listes d'ingrédients, je suppose que c'était pour un problème d'affichage avec le php. Je peux pas trop en dire vu que ce n'est pas moi qui me suis occupé de cette partie. (par contre, qu'est-ce que tu entends par "lecteurs d'écrans"?)

Bien vu pour les "+" des titres, c'est pas intuitif, alors que c'est censé l'être, il faudra corriger.

Pour les prix, on y a pensé, mais renoncé, en se disant que les personnes qui ajoutent des recettes veulent faire ça rapidement, n'ont pas envie de se creuser la tête à calculer. Les prix dépendent aussi des marques, le prix de la recette entière peut jusqu'à doubler...

Les photos sont de la responsabilité de ceux qui proposent les recettes, et c'est vrai que les choix sont pas toujours terribles. On a modifié quelques photos, mais à part faire un travail de "modérateur", on peut pas y faire grand chose...

Pour les formulaires, d'ajout ou de recherche, c'est vrai que les messages d'erreur ne sont pas toujours adaptés. On est pas encore des pros, on a voulu créé le site à partir de zéro plutôt que d'un cms ou autre! On corrigera surement ces détails à l'avenir.

Idem pour les conditions générales, le droit c'est pas notre truc, on a juste pensé à mettre quelques règles lors de l'ajout. Peut-être qu'il existe des sortes de textes préfaits?


En tout cas merci beaucoup à toi pour ton décorticage minutieux Smiley cligne Ca fait plaisir des commentaires aussi structurés et constructifs!


@N-J :

Pour tout ce qui est de l'ordre des problèmes de compatibilité du genre désactivation de certaines fonctions, CSS, java, images, on a préféré considérer que les étudiants ont souvent des PCs qui tiennent la route, que ce soient chez eux, dans un cyber café, etc. Disons qu'on a pas poussé le vice aussi loin Smiley cligne

Pour la meta, merci du conseil, on ne savait pas (quels sont les problèmes lorsqu'elle est trop longue?). A priori, elle reprend dynamiquement le titre et les ingrédients notamment, du coup, on peut pas prévoir que la liste d'ingrédient dépasse tel nombre de caractères... A moins de fixer une limite, à voir avec mon collègue.

Au niveau des pubs, on a préfré ne pas en mettre beaucoup mais "bien" les intégrer. On est obligé d'en mettre pour payer l'hébergeur. C'est vrai que c'est rageant de se faire avoir, mais considérons cela comme un don, une aide de votre part..!

Le problème d'affichage de la page recherche sera réglé très bientôt. On l'a remarqué, mais après 4h à coder un algorithme de recherche en php, le css sous IE6, c'est moins important ^^


Merci à toi d'avoir pris le temps de regarder notre site!


@Akhilleus :


On est d'accord avec vous pour la largeur du site, mais maintenant ce serait trop compliqué de tout changer... Si notre projet marche très bien, on le fera peut-être...

Je vois que t'as un oeil plutôt esthétique. Peu de gens remarque ce que tu mets en valeur, moi compris. Je trouve que tu exagères un peu, c'est sûrement fait exprès bien sûr, mais à part la parti haute un peu "fofolle", le reste est tout droit, carré, plutôt bien cadré, etc. Disons qu'on voulait un site un minimum extravagant, et quelque chose de trop rigoureux risquait de le rendre banal et surtout pas attractif pour des étudiants. On prend note tout de même Smiley cligne

Pour les couleurs, on a fait plaisir à notre collègue qui a repris celles de son portfolio, mais les deux sites n'ont rien à voir. En tout cas ça fait plaisir que tu sois allé aussi loin dans la navigation!


Merci beaucoup à vous trois et à bientôt!


Alsacréativement vôtre,

Insane Studio.
Bonjour,

a écrit :
Pour la taille du texte, tout à fait d'accord sur l'utilité des em plutôt que des px. C'est un peu tard pour corriger tout ça, mais agrandir le texte est possible sous les dernières version d'IE, je pense que tu parles de la 6 alors.

Attention, ne pas confondre le zoom et l'agrandissement de la police du menu affichage, donc sur IE7 il est également impossible d'agrandir la taille du texte de cette façon.
a écrit :

A priori les erreurs de W3C seraient surtout les target="_blank". C'est pourtant très utile, il y a peut être une alternative valide qu'on ne connaitrait pas?

Oui, passer à un doctype transitionnal qui le permet (faire une recherche sur le site)
a écrit :

A priori, d'après mon collègue, le texte caché serait un petit truc pour améliorer le référencement, ce que je veux bien croire, et après tout, même si ce n'est pas très "propre", ça ne crée aucun problème pour l'internaute.

Une image avec un texte alternatif pour le h1 (comme conseillé par Laurie-Anne) aura exactement le même effet de plus cela évitera la perte du titre du site si les images sont désactivées.
a écrit :

Pour les class, c'est vrai que c'est du bidouillage, ça fait pas très pro, mais ne pose pas de problème en soi.*

Si je veux naviguer de titre en titre si, cela pose problème puisque ce n'en est pas un.
a écrit :
Pour ce qui est des titles, on pourrait en effet les enlever.

Pas obligatoirement dans l'absolu un title est là pour apporter une information supplémentaire mais pas pour doubler le texte du lien donc à traiter au cas par cas si vous estimez qu'une info supplémentaire (différente du lien) peut être utile.
a écrit :

En ce qui concerne les listes d'ingrédients, je suppose que c'était pour un problème d'affichage avec le php. Je peux pas trop en dire vu que ce n'est pas moi qui me suis occupé de cette partie. (par contre, qu'est-ce que tu entends par "lecteurs d'écrans"?)

Les lecteurs d'écrans sont utilisés par certains internautes (entre autre, déficients visuels) pour parcourir un site internet, ils sont généralement couplés à une synthèse vocale et/ou une plage braille.
a écrit :

Pour les formulaires, d'ajout ou de recherche, c'est vrai que les messages d'erreur ne sont pas toujours adaptés. On est pas encore des pros, on a voulu créé le site à partir de zéro plutôt que d'un cms ou autre! On corrigera surement ces détails à l'avenir.


Je rajouterai que les label sont mal implémentés.

Il faudrait qu'ils soient "explicites" c'est à dire liés à l'id par l'attribut "for" ce qui permet de cliquer dessus (par exemple) pour accéder directement au champs correspondant.

Également utile pour les lecteurs d'écrans


<label for="mon_champ">Mon label</label>
<input id="mon_champ" />


a écrit :
Idem pour les conditions générales, le droit c'est pas notre truc, on a juste pensé à mettre quelques règles lors de l'ajout. Peut-être qu'il existe des sortes de textes préfaits?

Pas spécialement besoin d'être calé en droit il suffit d'aller voir certaines pages mentions légales sur certains sites (alsacreationS par exemple).

D'une manière générale faites attention à vos images et la manière dont vous les utilisez (en dure dans le code ou via css)

Si elles sont porteuses de sens ne pas les utilisées via css, par exemple sur la page d'accueil je me retrouve sur la recette avec des temps qui ne correspondent à rien si les images sont désactivées.

Autre chose concernant les images de fonds, doublez les dans votre css par une couleur.

Si par exemple je les désactive, les liens "Classement par Nom", "Classement par date", "Ajouter une entrée" dans ls pages de recettes sont quasiment illisibles.
a écrit :

Pour tout ce qui est de l'ordre des problèmes de compatibilité du genre désactivation de certaines fonctions, CSS, java, images, on a préféré considérer que les étudiants ont souvent des PCs qui tiennent la route, que ce soient chez eux, dans un cyber café, etc. Disons qu'on a pas poussé le vice aussi loin cligne

Cela ne s'appelle pas du vice mais de la qualité web, il ne faut jamais préjuger de ce que peux faire ou est obligé de faire l'internaute.

Un mal voyant ou non voyant sera content si vous respectez certaines règles, un étudiant qui surf dans les transports en commun avec un débit plus que chaotique ou sur un poste ou javascript est désactivé pour des raisons de sécurité, pourra également bénéficier de toutes les mesures prisent en terme de qualité.

Qui vous dit qu'il n'y a que les étudiants qui vont visiter votre site peut-être que cela peux également intéresser monsieur machin qui n'as pas spécialement du 8M à disposition dans sa campagne.
Modifié par knarf (11 Mar 2009 - 16:20)
Re-bonjour,
Vous devriez essayer de sécuriser votre formulaire car vous risquez de vous faire mail-bomber et pour pas un sou !

Je me suis permis de donner la parole à Chuck pour illustrer le problème Smiley smile

Il existe des solutions de captchas facilement implémentables en PHP par exemple ou des solutions clé en main comme Re-Captcha Smiley cligne
Pour ce qui est du mail bombing (si par là tu entends par des robots), alors il est possible que l'on en souffre, cependant pour l'instant, le fait de cacher un champ de texte vide a toujours bien fonctionné... si jamais le robot arrive à passer outre alors nous y réfléchirons ! Mais merci du conseil et du lien !
Bonjour,
Le site vient d'être mis a jour en tenant compte de nombreuses remarques et en essayant de le rendre plus complet !
Nous attendons vos critiques !
Merci d'avance !
Cordialement

-http://www.cuisine-etudiant.fr/
Modifié par Felipe (08 May 2009 - 17:49)
Petite remarque en passant :

J'ai été assez dérouté de ne pas pouvoir classer les recettes par note. Et voir l'option classement par date juste au dessus des notes, ça fait bizarre aussi Smiley smile
Salut

comme indiqué par le validateur l'attribut alt est obligatoire pour les éléments IMG. Il doit être pertinent pour les images portant une information et vides pour les images purement décoratives (auquel cas elles pourraient peut-être se trouver en background css ?).

D'autre part le target="_blank" est invalide en Strict : soit il faut le supprimer, soit il faut passer en Transitionnal.
Ah et (désolé double-post), quand on veut ajouter une recette, dans la partie "Préparation détaillée", le texte pas défaut est "Ecrivez la préparation détaillée de votre recette".

Outre la tournure de phrase que je trouve assez moyenne, le "Ecrivez" est souligné en rouge (paaaas bô !) => Écrivez .
Nous venons de modifier les quelques éléments que vous avez relevés. Cependant, le tri par note, en raison de contraintes techniques, est trop difficile à mettre en place pour nous (pour le moment du moins).

Cuisine d'Etudiant