Nouveau modele pour le site www.pyromaths.org

[Jérôme]

Bonjour,
Yves m'a demandé il y a quelques semaines combien de connexions il y avait sur le module pyromaths en ligne. C'est environ 6000 par mois. Il m'a alors fait remarqué qu'il serait plus logique que le module pyromaths en ligne soit plus visible sur la page d'accueil.
Ça me trotte dans la tête depuis et je suis en mesure de vous proposer un modèle pour le futur site pyromaths.org
Il ne s'agit que d'un brouillon, donc les liens ne sont pas fonctionnels. c'est juste pour avoir une idée précise. Le code xhtml et css est valide. Je ne l'ai vu que sous Firefox. Je suppose qu'IE va tout foutre en l'air, mais ça m'est égal.
J'aimerais que vous me fassiez part de vos remarques si vous en avez (ergonomie, lisibilité, etc).

[Yves]

Esthétiquement c'est très réussi. J'aime bien la sobriété et la clarté qui améliorent la lisibilité. Je pense que l'ergonomie est vraiment améliorée.
Parmi les améliorations à apporter, au premier coup d'oeil, je n'avais pas vu la corrélation entre la partie droite et la partie gauche de l'animation:



L'aspect du pied de page pourrait également être amélioré, je trouve qu'il dénote un peu avec le reste de la page.

[Jérôme]

Merci Yves pour tes remarques. J'ai tenté d'y répondre au mieux. J'ai mis à jour le lien du premier post.

[Yves]

J'ai vu que tu as inversé presentation_gauche et presentation_droite. Par contre, comme maintenant je connais le principe de fonctionnement, je ne peux pas te dire si c'est mieux ou pas pour quelqu'un qui découvre le site. De mon côté, j'ai aussi réfléchi à une idée, rajouter une flèche dans l'image case_a_cocher.png pour obtenir quelque chose comme ça:



Je préfère la version sans header.png (sans le dégradé). Pour le footer, je ne suis pas encore convaincu. Je crois que quelque chose de plus sobre serait mieux.

Mes remarques concernent des détails et je trouve que ce modèle pour le futur site est vraiment excellent ! Bravo Jérôme pour ton travail

[Jérôme]

Merci Yves. Tu la fais comment la flèche ? Je la trouve très esthétique.

[Yves]

Avec Skitch qui n'existe malheureusement que pour Mac OS X. En rajoutant 50 pixels à gauche de case_a_cocher.png, voilà ce que ça peut donner :

[Jérôme]

Super ! Est-ce que j'abuse si je te la demande en png ?

[Yves]

L'image est déjà en png

[Jérôme]

Ah oui. Je n'avais pas activé les javascripts et je n'avais donc pas accès à la version "taille large". D'où ma question. Merci beaucoup. Je vois ce que je peux en faire.

[Jérôme]

J'ai vu que tu as inversé presentation_gauche et presentation_droite. Par contre, comme maintenant je connais le principe de fonctionnement, je ne peux pas te dire si c'est mieux ou pas pour quelqu'un qui découvre le site. De mon côté, j'ai aussi réfléchi à une idée, rajouter une flèche dans l'image case_a_cocher.png pour obtenir quelque chose comme ça:

Je ne parviens pas à ajouter la flèche, car l'image est en background et la flèche sort du cadre, donc n'est pas affichée. Si quelqu'un à une solution pour mon css, je suis preneur. Cela dit, j'aime bien la version menu à gauche et ça me semble assez clair.

Je préfère la version sans header.png (sans le dégradé).

Pas moi

Pour le footer, je ne suis pas encore convaincu. Je crois que quelque chose de plus sobre serait mieux.

Hum. J'aimais bien. Cela dit, je ne sais pas trop quoi mettre dans le footer, à part les 2 infos déjà écrites. C'est un peu court, non ?

Mes remarques concernent des détails et je trouve que ce modèle pour le futur site est vraiment excellent !

Merci beaucoup Yves.Ça fait plaisir. Je n'avais jamais autant bossé sur les css. C'est laborieux mais intéressant.

[Yves]

Je ne parviens pas à ajouter la flèche, car l'image est en background et la flèche sort du cadre, donc n'est pas affichée. Si quelqu'un à une solution pour mon css, je suis preneur.

En utilisant les propriétés padding-left et margin-left, ça fonctionne :

Code : Tout sélectionner

.presentation_droite{
  width:50%;
  float:right;
  overflow:hidden;
  height:345px;
}

.presentation_gauche{
  border:1px solid #ffa628;
  width:49%;
  height:345px;
  float:left;
  position:relative;
}

.presentation_droite_haut{
  position:relative;
  line-height:24px;
 
}

.presentation_droite_haut h2{
  margin-left:60px;
}

.presentation_droite_haut a{
  padding-left:60px;
  background:transparent url(img/case_a_cocher.png) no-repeat right top;
  display:block;
  text-decoration:none;
}

.presentation_droite_bas{
  padding-left:60px;
}

[Jérôme]

Merci Yves. En effet, ça fonctionne. Je crois que je n'avais pas assez agrandi mon cadre (50% maintenant). C'est mis à jour et je suis convaincu.

[Arnaud]

C'est joli, et il y a du jquery !
C'est de toi ou tu as récupéré le code ?
J'effectuerais encore un léger grossissement de la description que tu as déjà mise en gras ( le h2 de diapo_contenu ).

Au niveau du header, tu sais déjà que j'aime les dégradés, mais ce gris là me parait mal choisi, cela terni trop la page.
Il y a trop d'espace entre les blocs de navigation et les contenus, et le logo est trop petit.
Pour ce dernier, on peut envisager beaucoup de solutions qui le mettent en évidence sans trop prendre de place.

Le footer, ça va pas, tout simplement

[Arnaud]

Et les border-bottom dans nav + presentation sont inutiles et alourdissent le tout.
On peut obtenir un résultat aéré sans trop de marges, à condition de ne pas surcharger de traits partout

[Jérôme]

Salut Arnaud,
merci pour toutes ces remarques. Le jquery (je savais que ça te plairait) n'est pas de moi. Je dois même avouer que je n'y comprends rien. Mais ça fonctionne et c'est joli.
Je ne sais pas ce que vous avez contre mon dégradé ! Chez moi, il est très discret.
Concernant l'espace entre le bloc nav et le reste, je suis d'accord. Par contre, le logo me semble joli à cette taille là, mais je veux bien faire un essai. J'attends donc tes nombreuses solutions
Le footer, ok. Mais j'ai besoin de votre aide là.
Enfin, les border-bottom, je suis tout à fait d'accord. C'était juste pour essayer de répondre à Yves. Mais il a trouvé nettement mieux depuis et j'ai oublié de les enlever.
J'ai modifié en conséquence. Dites-moi ce que vous en pensez.