3246 sujets

Critiques de vos sites: code et design

Vos avis - www.etsionparlait.com

Bonjour à tous !

C'est mon premier message sur ce forum néanmoins cela fait quelques temps que je le connais et que je le parcours et spécialement cette section (c'est toujours intéressant et inspirant de voir ce que les autres font Smiley smile )

Venons en au fait, je suis webmaster de EtSiOnParlait (ESOP) ouvert depuis 2 mois, et j'aimerais vos avis à propos de l'ergonomie, de l'accessibilité, du design,... bref tout remarque, critique ou conseil est bon à prendre.

Le site est (normalement) valide W3C et nous avons essayé de le coder le plus proprement possible (mais il reste sans doute du boulot Smiley smile )


Ha oui je tiens à prévenir (Laurie-Anne notamment Smiley smile ), que le site doit sans doute (je ne l'ai même pas testé) mal s'afficher avec IE6, c'est un choix de notre par que de consacrer le temps qu'il faudrait pour faire des feuilles de styles spécialement pour ce navigateur à autre chose.

J'oubliais, l'url du site : www.etsionparlait.com

A vos claviers!
J'aime beaucoup le design... à part que personnellement je mettrais bien une image de fond de ce genre dans le header : voir l'image 1 ou voir l'image 2
Je trouve que ca irait bien pour un site d'association à caractère "social".
(désolé pour la piètre qualité, j'ai fait ça en 2 minutes pour faire voir)

Pour IE6 ça passe globalement, du moins la page d'accueil (je n'ai pas testé le reste).
Pour l'accessibilité c'est dommage je ne peux pas changer la taille de police, et je ne trouve pas l'attribut de style au conteneur BODY.
Modifié par darkstar2023 (20 Dec 2009 - 05:19)
Bonjour,

Il est regrettable que le site ne passe pas la validation stricte, le transitional permet à peu prêt tout et n'importe quoi :

* des éléments de style directement dans les balises : border="0", align="left", align="justify", width="87" (pour un td) ..
* des liens avec target="_blank"
* une class="spacer" sur un <br /> (du très grand n'importe quoi)
* utilisation d'une map pour les liens Twitter et Facebook

D'horribles ..
<p>& nbsp;</p>
.. dans un seul but de mise en page.

Idem pour les ..
<br class="spacer" />
.. que j'évoquais plus haut.

Ensuite, plusieurs problèmes de constructions (provoqués notamment par la map).

Sur la page d'accueil, un effort pourrait être fait sur les textes alternatifs des trois images du menu (colonne de gauche). Idéalement, il faudrait leur attribuer la place qu'elles méritent : le background, elles n'apportent pas d'informations supplémentaires liées au contenu.

Étant donné que les blocs left1, left2, .. bénéficient séparément d'une mise en forme au survol, il est nécessaire que l'ensemble du bloc soit cliquable, pas juste le texte qu'ils contiennent. À noter que le contenu de ces divs aurait nettement plus de valeur sémantique dans une liste numérotée.

D'un point de vue sémantique, un seul h1 peut être présent par page, il serait bon de construire une vraie hiérarchie dans le contenu à l'aide de balises de titre de différents niveaux h1, h2, hn, .. (d'un point de vue SEO c'est également utile).

Lorsque les images sont désactivées, le site reste globalement lisible, c'est bien. Par contre, les textes blancs (onglet courant, pseudo, mot de passe) le sont nettement moins.

L'utilisation d'images pour les onglets "Le blog" et "Le forum" n'est pas pertinente puisque le style dont ils sont dotés pourrait être obtenu de manière plus gracieuse en CSS (ce qui au passage rendrait ces liens plus accessibles).

Absence systématique de fieldset et de labels pour les formulaires.

Les liens ne bénéficient d'aucune mise en évidence au survol ou au focus (soulignement par exemple), du coup, la navigation au clavier est rendue complexe, pour ne pas dire impossible.

D'un point de vue esthétique, les marges latérales du contenu sont trop grandes.
La marge supérieure des titres est quant à elle trop petite.

Le séparateur à droite de l'élément "statistique" dans le menu de navigation principal est superflu. Le-dit menu n'est pas centré par rapport à son background.
Modifié par Akhilleus (21 Dec 2009 - 14:21)
Merci darkstar2023 d'avoir passé du temps à refaire la bannière, c'est sympa.
Par contre je ne suis pas totalement convaincu par le fait de mettre un image dans le header surtout au niveau de la visibilité : le header étant la partie centrale (au niveau ergonomique) du site, c'est à partir de là qu'on à accès à tout. C'est pourquoi je pense qu'un fond uni permet de rendre le tout plus visible et moins fatiguant pour les yeux.
Après je peux me tromper Smiley smile .

"darkstar2023" a écrit :
Pour IE6 ça passe globalement, du moins la page d'accueil (je n'ai pas testé le reste).

C'est une bonne nouvelle ça (je pensais que ça aurait été un peu plus la pagaille), il faudrait que je le test moi même.


"darkstar2023 a écrit :
Pour l'accessibilité c'est dommage je ne peux pas changer la taille de police

C'est un point sur lequel on va travailler quand on aura un peu plus de temps (c'est pas la priorité pour le moment mais c'est vrai que ce serait une fonction utile)

"darkstar2023 a écrit :
(...)je ne trouve pas l'attribut de style au conteneur BODY.

Je ne suis pas sur de comprendre là ?


Malheureusement, comme tu le remarque Akhilleus, le site ne passe pas la validation stricte, du coup je pense que ce serait un bon objectif à atteindre Smiley smile mais il va falloir y aller petit à petit (il y a pas mal de choses à changer)

pour ce qui est des 
<p>& nbsp;</p>
et des 
<br class="spacer" />
il va falloir que je les changent quand j'aurais un peu de temps devant moi.

"Akhilleus" a écrit :
un effort pourrait être fait sur les textes alternatifs des trois images du menu (colonne de gauche)

C'est changé (un oubli de ma part).

"Akhilleus" a écrit :
il est nécessaire que l'ensemble du bloc soit cliquable, pas juste le texte qu'ils contiennent.

J'ai fait quelques recherches pour rendre un div "cliquable" et j'ai trouvé deux solutions :
en utilisant un display: block;
#bloc a {

width; largeur du div;

height: hauteur du div;

display: block;

}


ou alors en ayant recours au javascript (<div onclick="...">)
Seulement je me demande quelle solution serait la meilleure, un avis sur la question serait le bienvenu Smiley smile


"Akhilleus" a écrit :
D'un point de vue sémantique, un seul h1 peut être présent par page, il serait bon de construire une vraie hiérarchie dans le contenu à l'aide de balises de titre de différents niveaux h1, h2, hn, .. (d'un point de vue SEO c'est également utile).

Merci de l'avoir remarquer, je changerais ça aussi quand j'aurais un peu plus de temps.


"Akhilleus" a écrit :
Lorsque les images sont désactivées, le site reste globalement lisible, c'est bien. Par contre, les textes blancs (onglet courant, pseudo, mot de passe) le sont nettement moins.

Y aurait-il une solution à part changer la couleur de la police?


"Akhilleus" a écrit :
Absence systématique de fieldset et de labels pour les formulaires.

C'est modifier.

"Akhilleus" a écrit :

Les liens ne bénéficient d'aucune mise en évidence au survol ou au focus (soulignement par exemple), du coup, la navigation au clavier est rendue complexe, pour ne pas dire impossible.

C'est modifier.

"Akhilleus" a écrit :
Le séparateur à droite de l'élément "statistique" dans le menu de navigation principal est superflu. Le-dit menu n'est pas centré par rapport à son background.

C'est aussi modifier.
rom11111 a écrit :
Y aurait-il une solution à part changer la couleur de la police?

Doubler les images d'arrière-plan d'une couleur d'arrière-plan.
rom11111 a écrit :
ou alors en ayant recours au javascript (<div onclick="...">)
Vade retro satanas !

Il faut plutôt, comme tu l'as justement suggéré, styler un élément "a" en "display: block".
En utilisant une liste numérotée, ça pourrait donner ceci : CSS : menu vertical en liste

Edit : à côté des erreurs que tu as déjà corrigées, il faudrait absolument virer cette map pour les liens Twitter et Facebook.
Modifié par Akhilleus (27 Dec 2009 - 15:44)
"Akhilleus" a écrit :
Vade retro satanas !

Pourquoi tant de haine Smiley smile ? Le javascript peut être très pertinent et efficace utilisé à bon escient.

Enfin bon j'ai appliqué le changement avec un élément a en display:block et je dois avouer que le code est beaucoup plus claire comme cela.

"Akhilleus" a écrit :
à côté des erreurs que tu as déjà corrigées, il faudrait absolument virer cette map pour les liens Twitter et Facebook.

Je m'occuperais de cela dès que j'aurais un peu plus de temps et de motivation (car je pense que ça va être un petit peu prise de tête Smiley langue )
Bonjour,
il faudrait essentiellement améliorer le bandeau identitaire:

Globalement les éléments graphique et fonctionnels (menu, logo...) sont placés de manière trop hasardeuse. Même si tu n'utilises pas de grille de mise en page, pense à aligner les éléments entre eux, le non-alignement nécessitant une bonne maitrise des équilibres et tensions...

Ton logotype est trop simple, aseptisé et peu parlant, il te faudrait un emblème (inclu ou pas dans le nom) pour pouvoir véhiculer une idée, un état d'esprit...
Le mot "parlait" devrait au contraire être d'avantage mis en exergue que "et si on" ( voir l'exemple de Darkstar).
Penser à insérer une couleur plus chaude (plus chaleureuse), c'est un peu froid tous ce bleu vert.

Améliorer l'apparence du bouton GO et changer la typo (trop étendue)
Pseudonyme et mot de passe est écrit trop petit.

Pourquoi ne pas insérer les lien forme et blog (dont l'apparence actuelle ne suscite pas assez une possibilité d'action) à l'intérieur du menu? Tu devrais rassembler les élément ayant la même fonction au même endroit (navigation, identité visuelle...) en essayant de leur donner la même apparence.

L'espace sous les titres et leur présence visuelle sont trop importants (le bold est de trop).

Essayer d'uniformiser les blanc tournant (espace haut, bas, gauche, droite) d'un élément graphique ou textuel.

Le texte du footer n'est pas assez lisible (trop peu de contraste avec le fond) et le centrage du texte ne se justifie pas ici. Privilégie des texte au fer à gauche ou a droite.
Modifié par Hermann (21 Dec 2009 - 13:46)
rom11111 a écrit :
Le javascript peut être très pertinent et efficace utilisé à bon escient.
Assurément, mais l'exemple d'utilisation que tu en donnais était tout le contraire Smiley cligne
Modifié par Akhilleus (21 Dec 2009 - 14:20)
Mon petit avis (qui rejoins une partie de ce qu'à dit Hermann) c'est la disposition des éléments, du premier coup d'oeil je sentais une sorte de chaos, pense à harmoniser un peu le tout Smiley smile (par exemple l'encart pour se logger, placé un peu au pif on dirait)


Sinon bravo pour ton site qui est quand même bien Smiley smile
"Hermann" a écrit :
Pourquoi ne pas insérer les lien forme et blog (dont l'apparence actuelle ne suscite pas assez une possibilité d'action) à l'intérieur du menu?


C'est un choix que l'on a fait, on voulait dissocier ce qui concerne :
- le concept : tout ce qui se situe dans le menu du haut (sur fond vert)
- les outils communautaires : facebook, twitter, forum et blog
- le compte utilisateur : l'encart de connexion qui une fois connecté se transforme en "panel utilisateur"

Par contre il est vrai qu'il faut que je modifie les map sur les liens twitter et facebook et que je change visuellement les liens forum et blog


"Fabious" a écrit :
(par exemple l'encart pour se logger, placé un peu au pif on dirait)

C'est vrai que maintenant que tu le dis on peut avoir cette impression là, où le placerais tu ?


"Hermann" a écrit :
Améliorer l'apparence du bouton GO et changer la typo (trop étendue)

Il faut que j'en parle avec le designer.

"Hermann" a écrit :
Pseudonyme et mot de passe est écrit trop petit.

Ils sont maintenant en 12px, je pense que c'est suffisant non ?

"Hermann" a écrit :
L'espace sous les titres et leur présence visuelle sont trop importants (le bold est de trop).

Je suis d'accord avec toi, il va falloir que je revoie tout les titres tant au niveau design que sémantique (comme le remarquait Akhilleus).

"Hermann" a écrit :
Le texte du footer n'est pas assez lisible (trop peu de contraste avec le fond) et le centrage du texte ne se justifie pas ici. Privilégie des texte au fer à gauche ou a droite.

Je suis d'accord pour le contraste que l'on va revoir, par contre je comprends pas ce qui est gênant avec le fait que le pied e page soit centré.

Au final il y a pas mal de boulot, je m'y attaquerais dès que possible (surement après noël).
Salut,

Rapide avis sur ton design :

- Header beaucoup trop haut pour pas grand chose (il n'apporte rien graphiquement vu qu'il est vide de contenu visuel)
- La home est déséquilibrée, ta colonne gauche n'est pas assez haute. Tu pourrais ré-équilibrer en y collant les remontées du blog par exemple.
- Tes onglets "blog" et "forum" arrivent comme un cheveu sur la soupe, on a l'impression que ce sont des liens internes alors que c'est tout l'inverse : à revoir.
- De manière générale, tes onglets et ton bloc de login sont placés de façon hasardeuse : ça te fait perdre de la place et ça donne un sentiment d'éparpillement en plus d'être disgracieux.
- Ton bold est de la même couleur que tes liens, c'est très confusant.
- Les images dans ton contenu sont alignées de façon hétérogène.

Voilà pour moi Smiley smile
Salut,

Comme cela a été dit : globalement, ça manque de structure.

Et bien que le site soit communautaire par essence, le sentiment qu'il me laisse c'est que tout est tourné vers l'association (les responsables) :

- A propos de nous
- Nous suivre
- L'association
- Lien vers Twitter
- Lien vers Facebook
- Lien vers le blog + feed du blog en bas de la page d'accueil

Au final, je pense qu'il serait utile de regrouper "A propos de nous" + "Nous suivre" + "L'association" dans une seule et même page "A propos".

La page "A propos" linkerait vers une page de contact.

Les liens vers Facebook et Twitter trouveraient bien leur place dans le footer ou dans le contenu de la page d'accueil avec une explication (pour chacun des services) sur le type d'informations que vos membres seraient susceptibles d'y trouver.

Dans le footer, un lien vers une page de contact.

Mise en évidence des 3 liens "rejoins-nous", "ton badge", "mes copin's".
Et enfin, mise en évidence de la zone de login.

Bref, tout ceci + harmonisation des couleurs + réorganisation structurelle pourraient donner un truc dans le genre :

http://omicronlab.net/upic/4b3234a0-248a.png
Cliquer pour agrandir

Edit : ça manque d'un logo.
Modifié par Akhilleus (23 Dec 2009 - 16:17)
Sujet clos
Aller à