Ecodir[point]fr - site d'un standiste

Voila je soumets a vos critiques le site d'un standiste en voie de finalisation.

http://www.ecodir.fr/beta/

Je prends toutes les critiques (même les plus acerbes ).

Si vous pouviez noter :
- compréhesion de l'activité
- codage (en particulier legerté du code)
- accessibilité of course
- organisation logique de l'offre de la société
- design

Merci a tout ceux qui prendront le temps de donner quelques avis.

Salut,

Je ne comprend pas, ce dans quoi tu t'aventures dans la page d'accueil c'est quoi ???

Une mise en forme humoristique et distanciée par rapport au concept très WEB2.0 de nuage de tag ?

Ou bien une adhésion complète à cette déclinaison improbable, et au passage complètement ridicule, du "new so hype marketing way of life in the definitely real world of WEB2.0" ?
... ...
... Ouè, ouè, je sais, c'est beau comme du brainstorming


Pas été voir plus loin (code source, autres pages, contenu)


Mais bon t'inquiètes pas trop de ce commentaire, t'as surement raison de faire comme ça.
Modifié par Christian Le Bouler (17 Apr 2007 - 22:21)

Salut,

Pour ton menu en haut tu mets :

<p id="menu">
<a href="index.php?page=10">Accueil</a> |
<a href="index.php?page=20">Stand tradionnel</a> |
<a href="index.php?page=30">Communication mobile</a> |
<a href="index.php?page=60">Signalétique</a> |
<a href="index.php?page=50">Structure évenementielle</a> |
<a href="index.php?page=40">Processus client</a> |
<a href="index.php?page=90">Contact</a>
</p>

C'est pas très sémantique tout ca. D'ailleurs tu mets un ID qui s'appelle "menu" à un paragraphe... Ca t'as pas choqué ? Normalement un menu c'est plutôt avec une liste comme ca :

<ul id="menu">
    <li><a href="#">Item 1</a> | </li>
    <li><a href="#">Item 2</a> | </li>
    <li><a href="#">Item 3</a> | </li>
    <li><a href="#">Item 4</a></li>
</ul>

Pour la suppression des puces et la disposition en ligne tu gères en CSS avec :

ul#menu
{
    list-style: none;
}

ul#menu li
{
    display: inline;
}

__________________________________________

J'aime pas trop les <br /> qui encadrent des tes paragraphes. Mieux vaut gérer ça en CSS en mettant des marges.

__________________________________________

Pour ta rubrique "contact", t'utilises un tableau pour structurer ton formulaire. Là aussi il y a un problème de sémantique. Un tableau n'est pas destiné à la mise en forme. De plus tu n'utilises pas de label pour tes champs... Pour ton formulaire inspire toi des différents sujets du forum traitant de cela (tu devrais trouver avec une petite recherche).

__________________________________________

Je viens à l'instant de voir que tu n'as pas de H1 dans ton code source...
Pas terrible pour le référencement et l'architecture de la page. Ton H1 devrait être :

<h1>Ecodir, optimisez votre présence</h1>

et non :

<p><img src="image/head4.jpg" alt="optimisez votre présence" title="ecodir optimisez votre présence" /></p>

Mieux vaut passer ton image "head4.jpg" en background de h1 dans ton CSS et mettre le texte hors du champ de vision de l'internaute.
__________________________________________

+1 pour le "nuage de mots-clé" sur la page d'accueil. Quelle est l'utilité de mettre une image ??? Ce genre d'outil est généré dynamiquement sur les sites Web2.0 comme le dit Christian...
__________________________________________

Je ne me suis pas penché sur le contenu ni sur l'activité... d'autres le feront sûrement s'ils voient des choses particulières.

++

predator93 a écrit :
C'est pas très sémantique tout ca.

Hmm c'est à dire ?

predator93 a écrit :
D'ailleurs tu mets un ID qui s'appelle "menu" à un paragraphe... Ca t'as pas choqué ? Normalement un menu c'est plutôt avec une liste comme ca :

Attention à ne pas tomber dans le panneau de la facilité : il n'y a pas de norme à ce sujet.
En règle générale, il paraît plus logique d'employer une balise de liste pour... une liste de liens. Mais il ne faut surtout pas imposer automatiquement cette manière de procéder : cela dépend du contexte et chaque cas est différent.


Dans le cas présent, effectivement, j'aurais employé une liste

a écrit :
Mieux vaut passer ton image "head4.jpg" en background de h1 dans ton CSS et mettre le texte hors du champ de vision de l'internaute.

Hmm pas forcément :
- un titre en image est actuellement impossible à rendre accessible partout
- une <img> (avec alt) contenue dans un <h1> sera bien plus accessible.
Modifié par Raphael (18 Apr 2007 - 10:18)

Hello,

+1 pour les remarques de Raphaël.

predator93 a écrit :
Je viens à l'instant de voir que tu n'as pas de H1 dans ton code source...
Pas terrible pour le référencement et l'architecture de la page. Ton H1 devrait être :

<h1>Ecodir, optimisez votre présence</h1>

J'ajouterais qu'il n'y a pas de règle pour l'utilisation de h1 (voir l'article de Laurent Denis à ce propos).
Modifié par Julien Royer (18 Apr 2007 - 11:04)

Raphael a écrit :

En règle générale, il paraît plus logique d'employer une balise de liste pour... une liste de liens. Mais il ne faut surtout pas imposer automatiquement cette manière de procéder : cela dépend du contexte et chaque cas est différent.

Oui, mais en précisant néanmoins ceci : l'utilisation des liste pour une série de lien est une excellente pratique, et pas seulement une pratique vaguement logique.

Pourquoi ?

Tout simplement parce que les lecteurs d'écran (je me réfère ici à Jaws) ont la très bonne idée de donner "en amont" le nombre d'item que comprend ladite liste. Donc s'il n'y a que deux ou trois liens alors ce n'est pas très grave, mais si le menu comporte un nombre conséquent de lien alors il n'y a pas photo, les listes c'est mieux.

Il y a donc trois choses :

. Les normes
. La logique de bon sens
. Un minimum de veille technologique pour produire quelque chose d'optimal dans un environnement. Dans le cas précis, l'interprétation de tel ou tel code par des agents utilisateurs spécifiques.

a écrit :

un titre en image est actuellement impossible à rendre accessible partout

Mmm... N'exagérons rien On peut effectivement dire que cela pose rapidement des problèmes insurmontables. Mais comme telle la phrase me parait trop radicale.

Julien Royer a écrit :

J'ajouterais qu'il n'y a pas de règle pour l'utilisation de h1

LOL

Bien sur que si il y en a, ne serait que le fait qu'il en faut

Là où il n'y a pas de règle c'est sur les modalités de l'usage :

. N'en faut il qu'un, ayant un niveau de généralité "super global" par rapport au document.

. Peut on en mettre plusieurs, chacun ayant un niveau de généralité pour diverses sections du document toutes ancrées à sa racine, si j'ose l'expression, ce n'est qu'une image.
Modifié par Christian Le Bouler (18 Apr 2007 - 12:39)

Christian Le Bouler a écrit :
Mmm... N'exagérons rien On peut effectivement dire que cela pose rapidement des problèmes insurmontables. Mais comme telle la phrase me parait trop radicale.

Je ne trouve pas. Je n'ai jamais vu de solution de remplacement de texte par une image totalement accessible.

Christian Le Bouler a écrit :
Bien sur que si il y en a, ne serait que le fait qu'il en faut

Ma remarque était maladroite, mais l'article de Laurent est assez clair à ce sujet. Et du point de vue des spécifications HTML 4.01 du W3C, je maintiens qu'il n'y a pas de règles au sujet de la succession des éléments hn.

Julien Royer a écrit :
Je n'ai jamais vu de solution de remplacement de texte par une image totalement accessible.

Oui mais comme j'estime pour ma part y être arrivé, cf mon site : ccs actives, images inactives, ctrl + 6 fois (firefox), réduction de la fenêtre à 800*600. Alors je dis que ce n'est pas la peine d'être aussi radical. Sans nier la moultitude de cas où effectivement il y a de très gros soucis ou même des impasses.
Modifié par Christian Le Bouler (18 Apr 2007 - 13:40)

Christian Le Bouler a écrit :
Oui mais comme j'estime pour ma part y être arrivé, cf mon site : ccs actives, images inactives, ctrl + 6 fois (firefox), réduction de la fenêtre à 800*600.

Ca n'est valable que parce que ton image est assez grande et le texte alternatif pas trop long, si je ne m'abuse. Et puis ça introduit déjà des limitations. Pour moi, ça suffit à justifier la phrase de Raphaël.

Mais bon, revenons au sujet d'origine...

Julien Royer a écrit :
Et du point de vue des spécifications HTML 4.01 du W3C, je maintiens qu'il n'y a pas de règles au sujet de la succession des éléments hn.

Il y a juste en note une petite mention du sujet :

a écrit :
Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped.

Source : http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

Traduction : certaines personnes considèrent que sauter des niveaux de titres est une mauvaise pratique. Elles acceptent H1 H2 H1, mais n'acceptent pas H1 H3 H1 puisque le niveau de titre H2 est sauté.

Edit : faut quand même que je réponde aux questions originelles, quoi.

- compréhension de l'activité : On comprend, mais il faut faire un effort. Le pseudo nuage de tag perturbe un peu la lecture, et je n'ai pas l'impression que la canette aide vraiment;

- codage : c'est plein de <br /> qui ne servent à rien. Et si on vire les images, (au moins sur la page d'accueil, il ne reste pas grand chose. Sinon rien d'extraordinaire à noter. (Juste un conseil au passage, les URL du style /index.php?page=10 c'est le moyen le plus direct pour se retrouver en résultats complémentaires sur google. Réécriture d'URL conseillée).

- accessibilité of course : heu j'ai pas trop de leçons à donner là dessus, mais comme dit plus haut, si on vire les images, on perd énormément d'informations sur la page d'accueil. Et effectivement, ça manque de titres (h1, h2, h3...). Les textes alternatifs des images ont tendance à se répéter et n'apportent pas grand chose : "notre expertise a votre service"... on s'en fiche un peu.

- organisation logique de l'offre de la société : "processus client" arrive un peu comme un cheveu sur la soupe alors que le reste est plus ou moins un catalogue.

- design : peut mieux faire , ça flotte un peu tout ça.
Modifié par Lanza (19 Apr 2007 - 15:55)

Lanza a écrit :
Traduction : certaines personnes considèrent que sauter des niveaux de titres est une mauvaise pratique. Elles acceptent H1 H2 H1, mais n'acceptent pas H1 H3 H1 puisque le niveau de titre H2 est sauté.

Plus informatif que ça, tu meurs.

Mais comme je le disais, recadrons le sujet, sinon Gilles va nous en vouloir.

<edit>Désolé, je t'attendrai la prochaine fois.
Modifié par Julien Royer (19 Apr 2007 - 16:35)

Ai recadré, mais si tu postes en même temps que j'édites ...

J'ai noté toutes vos remarques et je vous en remercie.

- En particulier le faux web 2.0 qui va virer de même que toute la page d'accueil en fait. C'est pas du tout accessible en plus d'être moche. Surtout la canette de coca qui n'a rien a voir avec l'activité.

- Je vais virer les br ils n'encadrent que des images ou le pied de page donc ca va pas être trop long.

- Pour le menu je vais effectivement le passer en liste ca serait bien plus logique pour mon cas. Ce qui est bizarre c'est que d'habitude je fais toujours une liste mais pas la.

- Effectivement je n'ai pas de h1. Je le mettrai sur le header. J'ai vu votre débat (qui ne me dérange pas du tout et que j'ai lu avec attention).
J'avais retenu qu'on n'était pas obligé de mettre les hn par ordre chrono (on pouvait sauter les étapes). Mais au lire de vos posts il semble logique quand on a un h2 de mettre un h1.

- pour le url c'est fait exprès comme je suis sur une beta je ne veux pas que les robots m'indexent sans être obligé de perdre du temps avec un robot.txt (surtout pour le robots pas standards)

- je jettent un coup d'oeil aux textes alternatifs et je me penche sur les accesskey.

Merci à tous en tout cas d'avoir passer un peu de temps pour la relecture.

ce qui me gene le plus au niveau du design, c'est que tu ne mets pas assez en avant l'identité de la société.
à part sur la page d'accueil, il n'y a nulle part de banniere ou logo propre à Ecodir... avec à la place un slogan.
perso j'aurais fait l'inverse, le slogan à l'accueil et un logo sur toutes les pages...

+ le cadre du contenu sans bordure et avec des coins carrés ne fait pas fini.
+ le contenu (police noire sur fond blanc simple) n'est pas mis en valeur
+ on ne sait pas sur quelle page on navigue

juste un petit up pour la version a priori définitive

www.ecodir.fr

merci a tous
Modifié par gilles6975 (16 May 2007 - 19:00)