Demande d'avis sur le fond du site...

Bonjour,
Voila je développe un nouveau design pour mon site, pour le moment il n'est pas finalisé au niveau design propre, par contre le code de la page CSS et XHTML est définitif.
C'est la dessus que je demande votre avis.
Donc voici la page:
http://bbjess.free.fr/dev/
Je demanderai l'avis sur le reste plus tard.
Indiquer moi pour l'instant si la structure du site est propre.
Pas d'utilisation abusive de DIV, ou de choses comme ca et si je respecte les standards.
Je précise que la page est valide XHTML 1.0 transitional et CSS aussi valide.
Voila j'attends vos commentaire.
Merci beaucoup

Salut,

Je pense que tu es content de ta réalisation mais, si ton site est une maquette comme tu le dis, ce n'est pas une maquette de site standard et sémantique.
Je devrais, si cela l'était, trouver toute la structure du document en H1...hn. Au lieu de ça c'est une structure de design toute en div (gentiment appelée Divite galopante). Voir la faq pour une ordonnance.

Le fait que la page soit valide n'est que le minimum syndical pour le code mais ne vient pas valider une structure qui n'a pas de sens.

Si on désactive la css, tous les liens sont en haut de page et on doit s'en taper une kyrielle avant d'accéder au contenu qui, malgré tout, reste le but de la visite de ton site. Imagine un lecteur vocal, une visite avec Linx ou une navigation au clavier.

J'espère t'avoir éclairé, ne soit pas découragé, le design vient supporter une structure et non l'inverse. Va voir CSS Zen Garden, la structure est unique et après sont venus les designs.
Modifié par papyjo (08 Jan 2007 - 21:34)

Les titres bleu-violet sur fond gris moyen sont peu lisibles (de plus, il n'est pas interdit de jouer sur la taille de texte pour mettre en valeur un titre... parce que là c'est un peu plat).

L'effet au survol des menus latéraux est assez perturbant : en général, un effet aussi flagrant est réservé à une zone active (lien, fonctionnalité), pas à un simple conteneur. Pas de problème pour les effets de survol des liens, par contre.

Le survol des liens à la souris leur attribue un style spécifique (changement de couleur du texte), mais l'équivalent lors de la navigation au clavier (avec la touche TAB) ne donne rien. Il faudrait doubler les a:hover par des a:focus (ainsi que par a:active pour IE, qui ne comprend pas a:focus, mais comprend a:active comme si c'était a:focus... qu'on ne me demande pas pourquo !).

Positionnement en absolu des menus latéraux : gros problème si on augmente la taille du texte (note : toujours penser à tester le rendu d'une page lors de l'augmentation de la taille du texte !!!). Il y aurait un moyen simple pour corriger ça : ne pas positionner en absolu chaque petit menu, mais faire un conteneur positionné en absolu pour les deux menus de gauche, et un conteneur positionné en absolu pour les menus de droite. À l'intérieur de ces deux conteneurs, les menus sont positionnés en statique.

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: [b]11px[/b];
}

Argh et re-argh. Cf. cet article : Typographie web : gérer la taille du texte avec les « em ».
L'ensemble de l'article devrait être intéressant. Penser à jeter un oeil sur la partie (vers la fin) qui parle de la nécessité de choisir une bonne famille de polices (ce qui n'est pas le cas ci-dessus).

C'est ce que j'attendais comme style de commentaire et il est vrai que j'ai oublier les balises H pour le moment.

papyjo a écrit :
Je devrais, si cela l'était, trouver toute la structure du document en H1...hn. Au lieu de ça c'est une structure de design toute en div (gentiment appelée Divite galopante).

Pfiou, j'étais passé à côté.
Je suis naïf moi, je crois toujours que les gens ils sont gentils et ils ont bien utilisé des titres de section pour structurer leur documents et les rendre plus accessible. Du coup j'oublie de vérifier...

Tant que j'y suis, c'est normal que l'image de l'en-tête dise « PHP Script, le meilleur des scripts » ? Parce que c'est son contenu HTML.

Au fait, si tu souhaites garder les menu en premier, il serait intéressant d'implémenter des liens d'accès rapide ou bien un lien d'évitement.

Pour le liens non je ne souhaite pas particulièrement qu'il reste en premier, je vais structurer mon site.
Mais c'est vrai que je me demande comment je vais faire pour mes boites et leur liens

Salut,

<font color="#9999CC">Titre!</font>

Et çà, tu peux désormais bannir et utiliser ceci :

<hn style:{color: #99c}>Titre</hn>

ou mieux

[b]code html[/b]
<hn>Titre</hn>

[b]code css[/b]
hn 
color: #99c
}

Ca sera plus propre en séparant le fond et la forme, et permettra de ne pas utiliser la balise dépréciée <font>

<b>.::Titre::</b>

Pareil pour çà, une balise de type <hn> serait plus adaptée. <b> étant dépréciées aussi et remplacé par la balise en ligne <strong>
Modifié par Mikachu (08 Jan 2007 - 21:56)

Lol oui je sait tout ca! C'est juste que c'est un vieux design ressorti du tiroir que je recycle en nouveau, et j'ai pas encore eu tout le temps pour enlever toutes les petite bricoles comme ceci

Edit: Mais vous remarquerez que je corrige en live pour les petite erreurs vite fait
Modifié par cerede2000 (08 Jan 2007 - 22:00)

mpop a écrit :
Positionnement en absolu des menus latéraux : gros problème si on augmente la taille du texte (note : toujours penser à tester le rendu d'une page lors de l'augmentation de la taille du texte !!!). Il y aurait un moyen simple pour corriger ça : ne pas positionner en absolu chaque petit menu, mais faire un conteneur positionné en absolu pour les deux menus de gauche, et un conteneur positionné en absolu pour les menus de droite. À l'intérieur de ces deux conteneurs, les menus sont positionnés en statique.

J'ai fait ce que tu a dit seulement ca ne résout pas totalement le problème de grossissement
Je veut dire par la que si on grossie trop les boites sur le cote rentre dans le contenue on a un moyen de contourner cela?

Edit: Autre problème avec IE6 étant donné que j'ai spécifier un min-width pour mes boites, et bien ca ne fonctionne pas! Et la je ne peut pas utiliser la méthode expression dont on a parlé dans l'autre topic
Modifié par cerede2000 (08 Jan 2007 - 22:30)

cerede2000 a écrit :
Je veut dire par la que si on grossie trop les boites sur le cote rentre dans le contenue on a un moyen de contourner cela?

As-tu forcément besoin d'avoir des largeurs fluides pour ces deux boites ?
Ce n'est pas plutôt le site dans sa globalité (et le contenu) qui doit être fluide ?
Ne veux-tu pas en faire un peu trop ?

Raphael a écrit :
As-tu forcément besoin d'avoir des largeurs fluides pour ces deux boites ?
Ce n'est pas plutôt le site dans sa globalité (et le contenu) qui doit être fluide ?
Ne veux-tu pas en faire un peu trop ?

+1
Si les colonnes sur les côtés ont une largeur fixe (en pixels, à priori), ça n'a rien de catastrophique.

Je veut juste arriver a un site le plus parfait possible

Alors et maintenant?
Je vous remet le lien: http://bbjess.free.fr/dev/
Dites moi...

Edit: Est ce que pour les .:Titre:: et ::Titre:. je peut les mettes en h3?
Je sait que c'est possible mais est ce que ca respecte les règles?
Merci
Modifié par cerede2000 (09 Jan 2007 - 18:20)

Salut,

Voila une structure qui parle.

Pour les h3, c'est toi qui voit mais, si les div conteneurs droite et gauche étaient dédiés à un thème qui serait h2 alors les titres des menus seraient en h3. Exemple : si à gauche <h2>Cinéma</h2> sous menu <h3>Français</h3> et l'autre <h3>Américain</h3>.

Le h3 tel que je l'entends dans ton propos serait choisi pour une autre raison que sémantique

papyjo a écrit :
Salut,

Voila une structure qui parle.

Pour les h3, c'est toi qui voit mais, si les div conteneurs droite et gauche étaient dédiés à un thème qui serait h2 alors les titres des menus seraient en h3. Exemple : si à gauche <h2>Cinéma</h2> sous menu <h3>Français</h3> et l'autre <h3>Américain</h3>.

Le h3 tel que je l'entends dans ton propos serait choisi pour une autre raison que sémantique

Ca ne pourrai pas etre h3 et h4?

Pourqoi ?

Tout dépend du flux de ton document. On est ici à la limite de la maquette. Essaie de la rendre plus parlante avec de vrais textes, tu jugeras alors.

Ok sinon donc niveau structure il est parfait ?

Salut,

Comment parler d'un site parfait quand il est vide de tout contenu ? Sa structure ne devrait être qu'une présentation logique et sémantique de l'information qu'il est censé diffuser.

Ben pour dire vrai c'est ca qu'il me manque, le contenue j'ai des idées et ca va venir.
Mais je voulait partir sur une bonne structure.