Avis sur un design sportif : www.citesport.com

C'est moi l'ouvreuse ?

Bonjour Djayp,

Comme l'a souligné STPo, ton design n'est pas intégré, hors, je cite :

Raphael a écrit :
Ce salon est prévu pour vos questions générales sur l'ergonomie d'un site ou d'un élément de site terminé

. Par terminé on entend implémenté avec du vrai code HTML dedans et un zest de CSS.

De plus, le site de base, même si ce n'est pas celui qui est sensé se faire juger est truffé d'erreurs de code. Certes les truffes valent une fortunes mais ici, on préfère les éviter.

Je te conseille donc de finaliser ce projet, ou tout du moins de nous proposer une maquette en HTML que nous pourront critiquer plus à loisir (surtout moi, j'aime bien critiquer le code).

Bonne continuation.

Salut,

Petite critique sur l'aspect général du futur site :
- Le menu de navigation n'est pas assez séparé du contenu de ta page, il manque un filet ou une autre couleur de fond
- Je dirais que tes gris ne sont pas assez foncés, j'ai peut être mon écran pas super bien calibé mais les zones ne sont pas assez bien définies
- Il manque un petit footer pour bien finir la page ^^

N'oublie pas d'intégrer ton design avant de le poster ici

Sinon pour moi, belles améliorations très sympa !! bonne continuation

Salut,

Ca y est j'ai intégré le design dans une page html validée W3C (sauf une erreur que je ne saurai tarder à corriger), en effectuant au passage diverses modifications suites à vos remarques.

Le résultat est ici : http://www.citesport.com/dev/design.html

Pour info :
- à la place du formulaire de connexion s'affichera le menu membre
- lorsque l'on passera la souris au-dessus de la flèche du menu sport, la liste complète des sports s'affichera
- la colonne de droite sera présente ou non, selon les pages (par exemple elle n'y sera pas pour les forums, ce qui gagnera de la place)

Voilà, à vos claviers pour vos remarques et critiques !

Merci d'avance !

Salut,

Après lecture du code, je trouve que c'est propre et bien organisé sémantiquement parlant.
Certains de tes alt ne sont pas très explicites 'orange' ou 'rouge', ça n'est pas très parlant .
Sinon il y a une erreur de w3c 'onerror'.

A la réduction la zone d'identification chevauche le logo, mais bon c'est pas très dérangeant.
En augmentant les polices dans le navigateur (sans passer par ton js), au bout d'un moment on ne vois plus rien ^^

Sinon dans l'ensemble ça me parait bien, il y a juste un problème sous chrome dans ton menu mais bon c'est pas une grosse part des internautes et ça ne gène pas la navigation

Salut,

Un petit up pour avoir quelques retours supplémentaires sur la version intégrée.

Merci d'avance !

Bonjour,

Graphiquement :
* Sous IE6 le site présente quelques défauts d'affichage.

* Les icones qui représentent les différents sports sont extrêment discrètes, elles font plus penser à de la déco qu'à des liens.

* Le sondage en vert choque sur une page où il n'y a que de l'orange (en plus du noir et blanc)

* Lorsque l'on réduit la taille de la page, le bandeau de connexion à l'espace perso chevauche le titre du site.

* Le contenu devient difficilement lisible après quelques agrandissements de caractères.


En ce qui concerne le code :

* Tu as beaucoup de balises meta inutiles : Keyword, distribution, author (celle-ci peut être concervée éventuellement pour y mettre ton nom), copyright, identifier-url, expires.

* Il faut remplir la balise meta desciption, elle ne favorise pas le réferencement, mais est utilisée par google et les autres pour afficher une description de ton site dans les pages de résultat. Il faut qu'elle attire le visiteur.

* Sans JavaScript, certaines fonctionnalités de ton site sont innactive (mais pas indiquée comme telles)

<a href="javascript:void(0);" onclick="augmenter_largeur();"

Il pourrait être intéressant de prévoir une alternative (en PHP).

* Les images porteuse de contenu ET de liens doivent absolument se trouver dans le code HTML

<div id="logo"><a href="http://www.citesport.com"><img src="design_fichiers/spacer.gif" alt="sport" class="logo-sport" border="0" height="85" width="290" /></a></div>

Quel est l'intérêt de mettre une image transparente sur une autre image ? Il serait plus simple de mettre dirrectement l'image porteuse de contenu dans le code HTML, et avec un texte alternatif un peu plus parlant, ici : "citésport.com"

* Domage d'utiliser des tableaux de mise en page

* Tes formulaires ne sont pas très accessible, il faudrait leur rajouter des labels, et surtout des intitulés. Même s'il est assez logique que le login se trouve avant le mot de passe, rien visuellement, ne permet de le savoir actuellement.

<input name="login" class="login" id="login" type="text" /> <input name="pass" class="login" id="pass" value="" type="password" />

* Les textes alternatifs qui doivent être vide, doivent être vide :

<img src="design_fichiers/coin-image-section.png" class="coin" alt="none" />

Utilises alt="" ça évitera que des "none" se baladent sans raison dans ta page. Tu pourrais également faire en sorte que les images décoratives se trouvent dans le CSS et non l'HTML.

* Attention au contenu de tes "title"

<a href="http://www.citesport.com/fr/athletisme.html" title="Athlétisme" class="icone"><img src="design_fichiers/athletisme_icone.png" alt="Athlétisme" border="0" height="30" width="30" />

l'attribut "title" doit être utilisé pour apporter plus de précision au sujet d'un lien, il n'est pas obligatoire de l'utiliser pour chaque lien, et d'autant moins nécessaire s'il doit copier l'intitulé du lien.

* Pense à bien baliser les changements de langue avec lang="en" (pour l'anglais, pe) :

<a href="http://www.citesport.com/fr/waterpolo.html">Water Polo</a>