3246 sujets

Critiques de vos sites: code et design

Http://www.coinfoot.fr : Vos avis sur version quasi définitive !

Pages :
Bonjour !
Je vous soumets mon tout nouveau site web pour que vous me donniez votre avis sur certains points :
- accessibilité,
-contenu,
-design,
- bref, à votre première connexion, êtes-vous incité ou ressentez-vous l'envie de vous inscrire ?

Sinon qu'est ce qui cloche ?

Le site http://www.coinfoot.fr

Merci beaucoup ! Smiley smile
Hello Coinfoot,

comme indiqué dans l'annonce A lire avant de poster, les sites proposés doivent être respectueux des standards.

Or ton site a actuellement 206 erreurs de validation. En jetant un oeil au DOCTYPE j'ai vu que tu avais mis :
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<head>
à la place de :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
Sauf qu'en le corrigeant le nombre des erreurs monte à 627 !

Je ferme donc ton sujet le temps que tu fasses les corrections nécessaires. Lorsque ce sera fait, préviens un modérateur pour le rouvrir.

Bonne continuation. Smiley smile
Modifié par Heyoan (07 Sep 2008 - 08:03)
OK !

Eh bien l'ensemble est plutôt sympa à mon goût !

Quelques remarques :

* l'une des premières choses à regarder est la manière dont une page est structurée. Un bon moyen est de désactiver les images et les css (ce qui se fait très facilement avec l'extension de Firefox Web Developper) et de voir le rendu 'brut' qui est aussi celui des UA non graphiques et des moteurs de recherche. Pour ton site on voit qu'il n'y a aucun titre Hn qui feraient ressortir les parties importantes et que tu ne t'es basé que sur les images. A noter que quand une image porte une information (notamment une information importante comme le titre du site ou le titre d'un chapitre) elle ne doit pas être en background d'un élément mais directement dans la page (<img ... />) avec l'attribut alt correspondant qui servira à fournir l'information si les images sont désactivées. Pour te donner un exemple tu aurais pu faire 
<h1><img src="head.png" alt="Coinfoot.fr" /></h1>

* la police est un peu petite et comme la taille est fixée en px et pas en em on ne pourra pas l'agrandir sur tous les navigateurs (en particulier IE6). D'autre part elle n'est pas très lisible lorsqu'elle est sur fond gris.

Voili volià pour moi !
Modifié par Heyoan (07 Sep 2008 - 08:28)
Je me permet de commenter sur le design et le contenu:

- Le design je le trouve très beau, très clair. Ca m'a même donner envie de naviguer dans le site alors que je suis pas particulièrement fan de foot.
Juste, le menu est peut être un peu éclipsé à cause de sa taille et de l'imposante bannière au dessus.
- Pour le contenu, il manque peut être quelques rubriques pour que 'on reste vraiment longtemps sur ton site, mais ce qu'il y a pour l'instant est très bien je trouve. L'actu en permanence sur la gauche, un contenu clair et agréable à lire.

Félicitation!
Merci c'est sympa !

Pour le menu je pense le laisser comme il est, sinon ca ne respectera plus trop ma charte graphique, ca risquerait même d'être assez moche si je le grossissais, et puis il suffit juste de le trouver une fois pour toutes ! Smiley smile

Pour les rubriques, je recherche quelque chose d'original. je suis parfaitement d'accord sur le fait qu'il manque une rubrique plus attractive, qui ferait participer activement les membres. J'y réléfléchis ! Smiley cligne
Bonjour,
a écrit :
Pour le menu je pense le laisser comme il est, sinon ca ne respectera plus trop ma charte graphique, ca risquerait même d'être assez moche si je le grossissais, et puis il suffit juste de le trouver une fois pour toutes !


Ha! encore un petit jeune qui as 10/10 à chaque oeil.

Surtout que :

Heyoan a écrit :
* la police est un peu petite et comme la taille est fixée en px et pas en em on ne pourra pas l'agrandir sur tous les navigateurs (en particulier IE6). D'autre part elle n'est pas très lisible lorsqu'elle est sur fond gris.


Le formulaire est pour moi en partie illisible ainsi que la partie "coin foot c'est quoi"

La page home et le lien de retour du logo renvoient vers le formulaire je je vais donc cliquer 2 fois (une fois sur le logo une fois sur home) avant de comprendre que les premières infos se trouvent sur réactu, je ne trouve pas cela très simple d'utilisation.
Modifié par knarf (07 Sep 2008 - 15:03)
Merci pour ces remarques,

J'ai donc éclairci le background de la page d'accueil, agrandi le menu ainsi que d'autres éléments, et enlevé le lien "Home" du menu.

Voilà ! N'hésitez pas à continuer à faire des remarques (bonnes ou mauvaises hein !!)
Je me suis mal exprimé, ce n'est pas le fait qu'il y ai un lien home et un lien sur le logo mais le fait que la page d'accueil soit celle avec le formulaire.

Pourquoi ne pas mettre celle-ci ?

Sinon il est toujours impossible d'agrandir la police sous IE

Pour le formulaire c'est beaucoup plus lisible.
Modifié par knarf (07 Sep 2008 - 16:35)
En fait, ca a "longtemps" été celle que tu me proposes. Mais, je souhaite faire en sorte que les internautes comprennent que le but premier du site est qu'ils s'inscrivent, et qu'ils lancent des débats par eux mêmes.

Maintenant, c'est vrai que je pourrais peut être organiser cette page d'accueil autrement, avec une sorte de sommaire.

J'y réfléchirai, mais je souhaite conserver le formulaire sur la page d'accueil. C'est un peu le principe du site Netlog. Bien utilisé, il peut surement etre efficace.
Au fait, est-ce que la police arial comme je viens de mettre est bien ou est-ce qu'il vaut mieux que je me tourne vers le Trébuchet MS, comme je l'ai fait avant ?
merci d'avance !
Salut,

J'ai pas trop lu ce qu'on dit d'autres avant moi, peut être que je vais répéter.

Dans l'ensemble j'aime bien, c'est différent de ce qu'on a l'habitude de voir sur ce sujet, et c'est tant mieux !

Bon mais il y a quand même quelques petits reproches.

Accessibilité, désactive la CSS ou désactive le chargement des images, tu vas constater qu'il manque des informations, notamment les titres des rubriques !

Sémantique
Il n'y a pas de recherche en ce sens, beaucoup de <div>, de <p> et de <br />, l'information ne possède en conséquence aucune hiérarchie d'importance, et malheureusement ça se ressent au niveau visuel.
Des titres dans des balises <hn> apporteraient déja un minimum de cette hiérarchie défaillante.

Pourquoi sauter des lignes entre des liens à l'aide de balises <br />, ne serait-il pas plus simple d'éviter de surcharger le code html, et définir une bonne fois pour toute que les liens ont une marge inférieure de xx pixels ? Cela donnerait pourtant la même chose.

Graphisme
Je ne vais pas dire que j'adore, mais cela tient la route.

Les pointillés sous oranges et bleus sont trop présents par rapport aux titres qu'ils soulignent. Pourquoi ne pas trouver des teintes un peu plus atténuée, un bleu plus clair et un orange plus clair ? Cela mettrait les titres plus en valeur au lieu de les desservir.

Lisibilité de l'information
Voilà ce que je lis quand je regarde les zones de rubrique info :
Réactu DERNIERS TITRES
Pes/Fifa DERNIERS TITRES
Sur le web DERNIERS TITRES
Autrement dit, je ne vois que çà. Alors que l'information importante serait plutot celle qui apparait présentement en bleu moins contrasté que l'orange.
Il serait bien d'inverser les deux couleurs, pour mettre l'accent sur les titres de rubriques, et/ou avoir une taille de texte différente pour qu'optiquement les titres soient plus visibles et contrastés que la mention "derniers titres"

Les titres en gros détouré d'un filet, ça passe bien car le texte est gros. Quand le texte devient un texte d'information qui dépasse les 3-4 mots, il serait bon de choisir une typo plus lisible et moins trafiquée graphiquement. Enlever le détourage me parait un bon compromis (exemple pour "L'actu t'inspire,t'irrite ?...")

Les titres apparents des news :
07-09 - L'Autriche n'a pas volé sa victo (...)
06-09 - La Coupe du Monde, ça commence c (...)
04-09 - Pour ou contre l'instauration du (...)
03-09 - Larqué : 'Sonor est une pipe' !
02-09 - Robinho rejoint Manchester City (...)
Je n'ai aucune idée de quoi traitent les deux articles en gras, ça ne me donne pas envie d'entrer pour lire, j'aurais aimé avoir une information plus claire ici.
Cela passe par : afficher plus de texte de manière à en comprendre le sens, ou adapter les titres de manières à ce que les premiers mots renseignent très précisément sur le sujet : cela s'appelle un titre. Smiley cligne

Voilà, je suis peut être un peu dur, mais il le faut ! Smiley murf
Modifié par Mikachu (07 Sep 2008 - 17:35)
Salut !
Merci d'avoir pris le temps de t'intéresser à mon site.

Je ne partage pas toutes tes opinions (soulignage des rubriques par exemple qui à mon sens font partie intégrante du titre), mais certaines idées sont bonnes à prendre.

La redondance des "Derniers titres" me dérange depuis un moment mais je n'ai jamais pris le temps de régler ce problème étant donné que j'avais plus important à faire avant (correction du code, etc...).

Par contre il faudra que je me renseigne sur cette fameuse balise hn que je ne connais pas. Tu es le deuxième à me faire la remarque !

Merci encore pour ton commentaire !
Coinfoot a écrit :
Je ne partage pas toutes tes opinions (soulignage des rubriques par exemple qui à mon sens font partie intégrante du titre), mais certaines idées sont bonnes à prendre.

Désolé, je ne suis que graphiste, je ne suis pas suffisamment expérimenté au niveau mise en valeur de l'information. Je ne sais pas non plus que ce sont souvent les petits détails qui donnent à un ensemble toute sa finesse.

Un petit essai quand même, ça renie pas l'esprit graphique mais ça à le mérite d'être plus discret :
upload/3681-test.jpg

Coinfoot a écrit :
La redondance des "Derniers titres" me dérange depuis un moment mais je n'ai jamais pris le temps de régler ce problème étant donné que j'avais plus important à faire avant (correction du code, etc...).

Tu sais où sont les choses, normal il s'agit de ton site, pense à ceux pour qui ce n'est pas le cas, lors de leur première visite, et qui doivent chercher de l'oeil l'information. La première réflexion sera "pourquoi plusieurs fois derniers titres", avant que l'oeil ne remonte jusqu'aux titres qui les précèdent. L'internaute est par définition quelqu'un de pressé, même lorsqu'il passe des heures sur le net, autant éviter de lui faire perdre du temps non ?

Enfin bref tu es libre bien évidemment d'accepter ou non mes remarques, je n'ai pas vocation à m'opposer à l'esprit souvent fermé des amateurs de foot. A bon entendeur.
Mikachu a écrit :

Cela passe par : afficher plus de texte de manière à en comprendre le sens, ou adapter les titres de manières à ce que les premiers mots renseignent très précisément sur le sujet : cela s'appelle un titre. Smiley cligne

+1 Toujours penser à donner l'information essentiel au début du titres, d'autre part ceux-ci doivent avoir une sens autonome (suffisamment clairs, précis et compréhensible hors contexte)
J'approuve toutes les autres remarques des intervenants précédents.
Je rajouterais que "Derniers titres" est inutile et ou devrait être bien plus discret.
Le traitement graphique (ombres portées...) des intitulés de rub. de la colonne de gauche est trop lourd, cela nuit d'autant plus à leur lisibilité que le corps est petits.

> Les derniers titres de la colonne de gauche ne sont pas assez espacés verticalement >
leur surface cliquable est trop réduite (ce qui peut poser problème aux handicapés moteur notamment).

> Les signifiants visuels de ton "bloc" identitaire (logo...) ne font aucune référence au foot, même pas les couleurs...
La tagline du logo (l'actu foot, mais pas en pareil) n'est pas encore assez lisible.

> Le menu n'est pas assez rapidement identifié comme un menu, tu dois au minimum lui ajouter des séparateur visuelles entre chaque libellés de rubriques. Sa hauteur assez réduite fait que la cliqualibilité des rub. n'est pas optimale.
Penser à mettre en surbrillance la rubrique active dans le menu.

Pourquoi réactu et pas actu? Le nom de rub. "Sur le web" n'indique rien de
précis sur le contenus de la destination du lien, tu dois trouver un nom plus parlant Smiley cligne

a écrit :
Au fait, est-ce que la police arial comme je viens de mettre est bien ou est-ce qu'il vaut mieux que je me tourne vers le Trébuchet MS, comme je l'ai fait avant ?
merci d'avance !
L'arial n'est pas un police qui a été conçu pour une lecture écran contrairement à la Trébuchet MS, je te conseil donc d'utiliser plutôt la Trébuchet voire la Tahoma (une Verdana étroitisée en gros) si tu souhaites avoir une typo qui se rapproche plus de l'Arial.
Modifié par Hermann (08 Sep 2008 - 01:25)
Mikachu a écrit :

je n'ai pas vocation à m'opposer à l'esprit souvent fermé des amateurs de foot. A bon entendeur.


Tu n'es pas obligé de m'insulter. De plus :

- " l'esprit souvent fermé des amateurs de foot " est un préjugé.
- Quelqu'un qui croit en les préjugés a lui effectivement un esprit fermé.
- Conclusion : ne serais-tu pas amateur de foot ?

> Je sais que mon site n'est pas irréprochable. Mais il n'est pas non plus dédié à des gens comme toi... Enfin tu vois de qui je veux parler.

A Hermann :
Merci de t'être à ton tour penché sur mon site !
Je vais donc répondre à tes remarques Smiley smile :

- L'info au début des titres : le but c'est juste de mettre un lien pour faciliter la navigation vers le site. Je ne les trouve pas si insignifiants. Enfin bon je m'en souviendrai.

- Derniers titres en effet je vais le virer.

- Je vais voir ce que je peux faire pour l'espace vertical entre les titres

- Le style visuel de mon site n'a pas de rapport avec le foot : bingo, c'est ce que je trouve aussi. Mais si tous les sites en rapport avec le foot devaient être verts avec des ballons de foot en guise de "O" dans le logo...
Smiley smile J'ai voulu taper dans l'original. (J'ai fais de très nombreuses versions avant d'en arriver là)

- Pour le menu mettre en surbrillance je ne trouve pas ca utile puisqu'avec les tétières on voit bien dans quelle section on se trouve. Pour les séparateurs, oui pourquoi pas.

- et pourquoi réactu : un peu d'originalité que diable ! Réactu c'est la compression de réaction et actu Smiley langue our rappel le but du site est de réagir à l'actu.

- Merci pour ton avis sur la police. Moi aussi je préfere le Trebuchet en fait. Le Arial c'est pas top.

Voilà, merci pour le temps que tu as pris à analyser mon site ! Smiley cligne
Wouahou il claque ton site coinfoot.

- Une charte de la mort qui tue (rien à changer)
- Tout est compréhensible de suite
- Il ne posera aucun problème de navigation quelquesoit les réglages spécifiques de l'internaute (css désactivées, images désactivées, navigation de titre en titre, agrandissement de la police...) .
- Une hiérarchisation du contenu irréprochable (tu sais les hn dont tous le monde te parle)
- ...

Enfin bref, on se demande bien pourquoi tu est venu si c'est pour laisser la majorité des conseils donnés de côté.

Tiens au passage il n'y a pas de moteur de recherche.
Modifié par knarf (08 Sep 2008 - 02:50)
Coinfoot a écrit :

- Le style visuel de mon site n'a pas de rapport avec le foot : bingo, c'est ce que je trouve aussi. Mais si tous les sites en rapport avec le foot devaient être verts avec des ballons de foot en guise de "O" dans le logo...
Smiley smile J'ai voulu taper dans l'original. (J'ai fais de très nombreuses versions avant d'en arriver là)

Tu veux jouer la carte de l'"originalité", ok mais à quel prix? Au prix de défaillances identitaires, ergonomiques, etc.
Tu ne peux pas tout justifier au nom de l'originalité, ça na pas de sens.
Tu dois prendre un peu de recul sur le pourquoi de l'originalité et de ce que cela apporte réellement à l'utilisateur.
D'autre part personne ne te demande de mettre des ballons de foot dans les "O" du logotype mais certains codes visuels inhérent au foot comme le vert sont presque inévitables.

Coinfoot a écrit :

et pourquoi réactu : un peu d'originalité que diable ! Réactu c'est la compression de réaction et actu Smiley langue our rappel le but du site est de réagir à l'actu.

Smiley rolleyes Ça il n'y a que toi qui le sait! Pour un utilisateur lambda, Réactu voudrait dire réactualisation,
ce qui n'indique rien de très concret sur ll contenu que l'on va trouver derrière.

Coinfoot a écrit :

Pour les séparateurs, oui pourquoi pas.
Les tirets que tu as ajoutés ne font pas office de séparateurs,
il faut revoir ça, en l'état c'est pas encore au point Smiley cligne

Modifié par Hermann (08 Sep 2008 - 12:31)
Pages :
Sujet clos
Aller à