[Refonte] Site éducation

Bonjour,

Je travaille à la maquette d'une nouvelle de www.lelutin.com un site dédié au monde de l'éducation.

J'aimerais avoir votre retour sur cette maquette. Elle est disponible ici :
http://lutin06.free.fr/spip/

Je souhaiterais vos commentaires sur :
- la chartre graphique
- le respect des standarts
- le bon affichage sous différents browser
- la prise en compte de l'accessibilité.
- l'ergonomie
- les différences entre l'ancienne et la nouvelle version

J'aimerais aussi de l'aide sur 2 problèmes majeurs que je n'ai pas encore résolus :

1- Dans les listes à puces <ul></ul> j'ai remplacé les puces par des icones css. Malheuresement je n'arrive pas à faire en sorte que le texte soit centrer en hauteur par rapport à l'icone.

2- J'ai un probléme avec mes collonnes CSS qui "bébordent" (par exemple sur : http://lutin06.free.fr/spip/article.php3?id_article=17)

Je vous remercie d'avance pour votre aide et vos conseils

Allez je me lance,
en ce qui concerne la charte graphique, c'est propre, j'aime bien. Le font vert donne un ptit dynamisme qui me plait beaucoup, peut un petit peu dommage qu'on retrouve pas ce ptit peps ailleurs. Dommage aussi que le détourage soit pas parfait.

Niveau respect des standards, je trouve rien a redire, mais en meme temps je suis pas suffisament calé à l'heure actuelle pour me permettre quelconque remarque.

Moi j'ai testé sous FF, avec une résolution de 1280*1024 en descendant jusqu'a 800*600, nikel chrome

Du fait du respect des standards, l'accessibilité est honnete.J'ai noté toutefois que certains attributs alt etait laissé vide, que tu n'avais pas utilisé d'accesskey dans ta css, mais globalement je pense que ça va, mais là encore je suis pas assez capé pour que mon opinion soit celle du St Pere.

Ptites astuces:
- pour ta liste à puce pour remplacer le point par défaut par une image de ton choix en ayant le texte bien centré, joue avec le padding.

background: url(../truc.gif/ no-repeat 2px 5px

où 2px et 5px serve à positionner ton image .

-astuce pour xiti, si tu veux pas qu'on voit leur logo mais toujours utilisé leur service (ce qui n'est pas tres cool j'en conviens), il te suffit de
mettre les dimensions de l'image à 1 à cette ligne

<div id="xiti-logo-noscript">
    Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv4.xiti.com/hit.xiti?s=26610&amp;p=" alt="Analyse d'audience" />
    </div>

voila ma ptite reponse, bonne continuation

Merci pour ce premier retour.

> pour les détourage : tu parles de quoi ???
> pour la liste à puce : je suis d'accord avec toi. Mais cela ne fonctionne plus dès que l'utilisateur change la taille de la police
> pour xiti : je connaissait l'astuce, mais je trouce pas cela fair-play. A l'inscription je me suit engagé à respecter les conditions d'utilisation. Je m'y tiendrais. Si le logo me plait, pas j'ai qu'a changé de service.
> pour les attributs alt : j'ai effectué les corrections.
> pour les acceskey : il faut que je me penche sur le problème.

Merci.

Bonjour,

Chouette design!
quelques points de détail:
- le logo Xiti casse un peu le bas de page, si tu veux le conserver au moins je lui adjoindrais une marge inférieure pour qu'il ne soit pas collé à l'extrémité basse de la page. On pourrait aussi le déplacer à coté du texte de bas de page
- la ligne "vous êtes ici" permet de se localiser efficacement mais j'aurais presque préféré voir directement la rubrique courante en rouge permanent (le même que celui du :hover) dans la barre de menu supérieure....je sais pas si je suis très clair là voir ex sur mon site http://carlaweb.free.fr (tiens d'ailleurs je suis aussi preneur de critiques design pour celui là, n'hésites pas!)
- déjà évoqué : les titres de liens ne sont pas en face des puces gif
mais la solution est donnée donc ça va se régler! J'ai eu le même pb que toi avec les tailles de polices et j'ai centré en me basant sur une taille moyenne de sorte que le décalage soit symétrique...y a ptêt mieux mais j'ai pas trouvé !
- le rendu de la mise en italique n'est pas toujours terrible, perso j'essaierais de limiter un peu son utilisation
- je regrette qu'il n'y ait pas un :hover pour les liens des ressources listées dans les pages (changement de couleur, suppression du soulignement ou indent par ex)
- et puis il subsiste quelques erreurs au validateur sur XHTML et css mais tu dois être au courant!
Bonne journée!
Modifié par zanzibar (25 Aug 2005 - 10:17)

Je parlais du détourage du lutin en fait, et précisément de son bonnet je crois qui n'est pas super supra propre, mais bon.
A oui niveau ergonomie, j'avais oublié de souligner la barre de navigation qui situe où on est, ça c'est bien pratique, bien vu!

Pour le changement de taille de police, je presume qu'il vient du fait que le site soit un CMS sous Spip, alors veille à maintenir une tite cohérence graphique malgré les différentes bidouilles que voudrons faire les redacteurs qui aiment toujours ecrire façon péroquet avec 4 couleurs et changer de typo une phrase sur deux....non je caricature un peu, mais c'est le risque, si tu peux restreindre certaine chose, le site gagnera en homogénéité, enfin c'est mon avis

a+

Merci à tous !

Pas d'autres critiques ??? Ne me dites pas que c'est parfait
Allez n'hésitez pas, même si c'est négatif !

J'ai bien : couleur, fraicheur.

Concernant le logo Xiti : personnellement, je le placerais centré, en bas et dans le div "copyright".

@broadcastor : sauf si gnome06 à corrigé l'image, personnellement, poussant l'agrandissement à 2000%, je ne trouve rien à redire à ce détourage.

Règle ton navigateur pour qu'il n'affiche pas les images...

On n'a plus d'info sur le menu et le texte à droite déborde...

...

La première fois que j'ai testé, je n'avais aucun texte au niveau du menu et rubrique=1, rubrique=2 dans la barre de statut, ce n'est pas très parlant (tu ne dois pas y être pour grand chose )

Sinon j'aime bien le graphisme...

Une question toutefois... Pourquoi le lutin baille dans la page des enseignants ?

ah le temps de faire un F5 et et je vois plus le meme lutin, celui là ne crillant plus à une manif comme l'autre, mais montrant du doigt, c'est pas mieux:! Bref, celui là en revanche est détouré avec un peu de pixel blanc en rab ou alors c'est moi qui suis un maniaque(possible aussi)??

broadcastor a écrit :
elui là en revanche est détouré avec un peu de pixel blanc en rab ou alors c'est moi qui suis un maniaque(possible aussi)??

Ok, ok : tous ne sont pas de la même qualité.
Mais j'ai vu "moins bien". Je reste "gentil" pour ne vexer personne, et surtout pas moi-ême

Merci à tous pour vos commentaires et remarques !

Pour les lutins : ils changent à chaque chargement de page de façon aléatoire. C'est une façon de dynamiser un peu le site. Quand au détourage il est vrai que certains mériterait un petit néttoyage.

Pour le logo XITI : je l'ai déjà dit, je me suis inscrit à ce service et engagé à rendre le maqueur visible. J'ai signé en toute connaissance de cause et par conséquant je continuerais à afficher le logo. En revanche je vais essayer de le bouger de place.

@h2o : tu n'es pas maniaque tu es perfectionniste. Et dans nos métiers ce n'est pas un défaut, bien au contraire. C'est ce genre de détails qui font la différence entre un amateur et un pro.

@Bob (MC Melun) : pour le problème du "texte à droite déborde..." je suis au courant. Je l'ai même mentionné dans mon post départ et signalé que je [u]cherchais de l'aide[/u] pour résoudre le probléme. Sinon pour la navigation sans image, effectivement il faut que je revoie ma copie. Enfin, si le lutin baille sur la page des enseignants c'est un pur hasard car le dessin est choisit aléatoirement à chaque chargement de page.

N'hésitez surtout pas à continuer à me faire part de vos remarques, critiques, conseils, astuces, etc... Je vais passer le site en prod dans les jours à venir alors c'est le moment.

Merci

tres bonne idée je trouve le changement de lutin. J'ai pas reregardé le source, c'est en JS ou php, parce que si c'est JS, certains diront que ça nuit à l'accessibilité....

broadcastor a écrit :
c'est en JS ou php, parce que si c'est JS, certains diront que ça nuit à l'accessibilité....

C'est bien évidemment du PHP !!! Rassuré ???

Bonjour,

un avis en 20 secondes: j'aime bien l'aspect général mais par contre la fonte Times New Roman (sous WinXP/FF en tout cas) n'est vraiment pas à mon goût (manque de lisibilité)