Après une refonte graphique du site au mois d'Aout, ca fait plusieurs semaines que je travaille à l'intégration d'effets scriptaculous. J'ai viré mon vieux menu en flash pour un menu CSS animé par javascript.

Je voulais avoir votre avis sur le design et l'ergonomie. N'hésitez pas balancez toutes vos critiques !

Le site : http://www.bothan-online.com
Bonjour aussi ...

Rapidement et en vrac :
- Le style va bien avec le genre je trouve.
- Juste le dessin qui ne colle pas trop ; perso, je verrais bien l'en-tête sans le dessin.
- Il me semble que les images d'en-tête sont un peu lourdes à charger.
- Est-ce utile de changer d'en-tête à chaque rubrique ?
- Bon point pour le menu qui est totalement déroulé si on désactive JavaScript.

Ha oui, certains en-tête ont un défaut sous safari : une sorte de bout d'écran apparaît à droite.

Test réalisé rapidement sous Safari (Mac OS 10.3.9)

@+
La structure des titres de section pourrait être assez largement améliorée (la page commence avec un des h3, puis un h2, puis une série de h3...).

Le poids de la page est un peu... hum...
Disons que certaines images ont vraiment besoin d'être optimisées (je pense qu'il y a moyen de passer de 270 Ko à 70 Ko... ou 100 Ko en prévoyant large).
Quant aux 116 Ko de script... disons que j'ai vu plus léger.

Les effets javascript d'affichage progressif me fatiguent, personnellement. J'aime les choses efficaces : je clique, la zone s'affiche, et on ne perd pas de temps avec un effet inutile.
Je trouve le menu de navigation particulièrement pénible sur ce point.

Résolution
- Les utilisateurs en 800x600 n'ont qu'à bien se tenir...
- Même en 1024x768, on n'a pas intérêt à légèrement réduire la fenêtre.

Gros problème d'accessibilité : pour toute résolution inférieure à 1024px de large, le menu de navigation positionné en absolu est soit partiellement caché, soit complètement invisible. Et impossible de faire défiler la page pour aller cherche ce menu (vive le positionnement absolu...).

Ah tiens, je n'avais pas repéré non plus le centrage du conteneur principal via la technique à éviter du positionnement absolu + marge négative. Utiliser les marges automatiques est une bien meilleure idée.

Agrandissement du texte
Ç'aurait pu être pire, mais c'est pas un bon résultat pour autant. La preuve en image (attention, dans les 100 Ko) :
upload/2043-bothan.jpg
Qui donc a eu l'idée de travailler avec autant de hauteurs fixes ? Smiley lol

Sinon, pour le design je vais laisser les plus calés que moi commenter là dessus. Personnellement, je ne suis pas fan du bandeau d'en-tête, qui mêle d'une manière peu heureuse trois styles graphiques : « technologisant » avec le dégradé arrondi du cadre, photo science-fiction kitch, et dessin. Je trouve que le dessin s'intègre mal au fond.



Bref, c'est pas trop mal mais il reste du boulot. Smiley smile

PS : un décalage entre l'en-tête et le contenu principal, en fonction de la taille du texte.
Merci pour vos conseils, ca fait plaisir d'avoir l'avis de professionnels Smiley cligne . Et ca me permet d'avancer !

J'ai donc repris ce qui n'allait pas. Je pense que la résolution des écrans ne devrait plus poser de problème maintenant, même en dessous de 1024 on peut désormais faire tout défiler. L'agrandissement des caractères ne pose plus de problème non plus, j'ai passé toutes les hauteurs en em et non plus en px.

J'ai un peu acceléré le déroulement du menu, je comprends que ca puisse agacer.

Enfin pour la taille, j'ai fait ce que j'ai pu mais avec le nombre d'images que j'ai par page... Et SPIP ne me sort que des PNG lorsque je lui fait travailler des images (arrondissement et reflets).

Enfin pour la bannière du haut, désolé que le dessin ne s'intègre pas mais c'est la mascotte du site et je ne peux pas l'enlever, elle fait partie de l'identité du site (et pis Star Wars c'est pas kitch, hein ?!? Smiley langue ).

J'ai juste un problème de bordure ou marge d'image qui s'élargit avec la taille du texte, je ne sais pas trop d'où ca vient.
bothanspy a écrit :
J'ai donc repris ce qui n'allait pas. Je pense que la résolution des écrans ne devrait plus poser de problème maintenant, même en dessous de 1024 on peut désormais faire tout défiler.

Déjà bravo pour ça, c'est un progrès non négligeable. Juste en passant, je signale qu'un compromis intéressant serait d'avoir un corps de page de 760px, et un menu rejeté à la périphérie, ce qui permet de voir tout le contenu (hors menu) en 800x600. Ici, le bloc principal fait 850px de large, soit 80px de trop. Je ne dis pas qu'il faut refaire la mise en page de ce bloc, mais tu peux y penser pour une prochaine réalisation. Smiley cligne

bothanspy a écrit :
L'agrandissement des caractères ne pose plus de problème non plus, j'ai passé toutes les hauteurs en em et non plus en px.

Disons que tant que le texte prévu pour être sur une ligne reste sur une seule ligne, c'est parfait. Avec un agrandissement un peu trop grand, le texte passe sur deux lignes et on voit des chevauchements. L'idéal est vraiment de prévoir une extensibilité totale en hauteur (pas de hauteur fixe, même en em), et de prévoir que certains blocs (par exemple celui des prochaines sorties) devront pouvoir s'allonger en hauteur en fonction de leur contenu.
Petit exemple de comment faire ça :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Même remarque que précédemment : c'est déjà très bien comme ça, mais on peut faire mieux, et tu peux par exemple y penser pour une prochaine réalisation.

bothanspy a écrit :
J'ai un peu acceléré le déroulement du menu, je comprends que ca puisse agacer.

Effectivement, c'est bien mieux comme ça.

bothanspy a écrit :
J'ai juste un problème de bordure ou marge d'image qui s'élargit avec la taille du texte, je ne sais pas trop d'où ca vient.

Peut-être du fait qu'une image est un élément de type en-ligne, comparable à un caractère de texte, et que le bas de l'image se place sur la ligne de base du texte (en dessous, reste l'espace pour les hampes des lettres et les signes diacritiques comme la cédille).

La FAQ du forum (lien ci-dessus dans le menu) a plus de renseignements là-dessus, je te laisse chercher le point précis (cherche dans la rubrique Décalages, marges, bugs divers).
Oui c'était bien ca le problème des images. En forcant l'affichage en block le problème a été résolu. Merci beaucoup Smiley biggrin