W w w.p e r s o - l a p l a g n e.f r | Avis et critiques

Bonsoir,

Comme il y a deux ans je profite du regard des forumeurs pour la création de mon site.

Cliquez pour voir la version en cours de création de mon site (pour comparer, la version actuelle est la racine).

Je vous prie de m'excuser de ne pas présenter quelque chose de fini, mais je suis en train de travailler dessus...

Merci d'avance de me donner vos avis, critiques et conseils !
Modifié par ARGo (13 Sep 2008 - 23:51)

Bonsoir,

Je n'aime pas trop les bordures noires autour du site.
Je trouve le menu un peu trop large trop étendu. Peut etre y aurait il moyen de diminuer un peu le nombre de liens ou de faire un autre menu.
L'image de montagne de la bannière est belle mais un poil classique, et je ne trouve pas qu'elle donne vraiment d'allure à ta page.
Et le logo n'est pas assez mis en valeur.

Voila pour mes critiques qui sont à prendre pour ce qu'elles sont (je suis loin d'être graphiste!) ^^

Bonjour,

Je trouve que l'ensemble manque un peu de dynamisme : le fond et la photo méritent à mon sens d'être un peu travaillés (dégradés, incrustations, etc...) pour relever un peu l'impression générale.

Comme soulevé par ThePatatoes, la bordure noire plombe un peu le tout, surtout que les couleurs choisies sont froides. Cela manque d'une couleur chaude pour relever le tout et égayer la page.

Si tu souhaite conserver ta bordure noire, je te conseillerais de lui en diminuer l'épaisseur et de supprimer le border-top et le border-bottom.

Dernière petite chose : je trouvais le menu précédent un peu plus fun et bigarré.

Hello,

juste quelques remarques :
* ta page contient 16 erreurs de validation.
* des titres (Hn) seraient les bienvenus pour structurer le document.
* si on désactive les images on ne voit plus ni titre du site, ni menu .
* il y a certainement mieux à faire que d'utiliser des LI remplis de   pour positionner tes sous-menus . D'ailleurs ces derniers sont inaccessibles si Javascript est désactivé.

A+

ThePatatoes > j'ai réduit de 11 à 9 le nombre de choix pour le menu principal, mais je ne pourrais pas faire moins...


Cygnus > Merci de ta réponse.

En fait la seule chose qui soit finie c'est le menu... La photo j'ai à peine travaillé dessus. Tu parles du menu de la précédente version ? Je fais le choix de passer en mode texte pour la simplicité de la modification. Je commençais à le trouver ma fichu et pas assez soigné... mais ça doit être mon regard qui fatigue alors... Aie...

Je suis bien d'accord pour les couleurs, mais le sujet invite à la fraicheur... je vais tacher de trouver de quoi mettre du orange ailleurs que pour le flux RSS !

Pour la bordure noire j'ai même pas songé à la modifier ! Je vais voir ça !

Merci !

Heyoan a écrit :
* ta page contient 16 erreurs de validation.

En fait la page elle-même est en plein chantier. Je suis allé voir hier les erreurs sur W3. Un peu rassuré d'ailleurs, car je n'ai bien sûr pas encore rempli mes ALT, et il y a des erreurs sur le diapo flash.

Pour les insécables je veux bien un coup de main...

ARGo a écrit :

Pour les insécables je veux bien un coup de main...

Si j'ai bien compris tu veux laisser un certain espace à gauche en fonction du sous-menu mais il n'y a pas de règle générale ? Du coup tu pourrais faire quelque chose comme :

<ul class="MenuSecondaire [b]SousMenuEnDirect"[/b]>

.SousMenuEnDirect { padding-left: 100px; }

(j'en ai profité pour remplacer l'id par une class car un id doit être unique dans une page).

En passant tu affectes la classe "Moyen" à tous les liens de tes LI. Ce serait plus simple de ne pas mettre de class et d'utiliser l'héritage en remplaçant

.Moyen {font-family: "Trebuchet MS", Arial; font-size: 16px; }
.Moyen a:link {	color: #000000;	border-bottom: 0.5px dashed #6C6C6C; text-decoration: none;}
.Moyen a:hover { color: #154090;	border-bottom: 0.5px dashed #154090; text-decoration: none;}

par

ul#Menu li a {font-family: "Trebuchet MS", Arial; font-size: 16px; }
ul#Menu li a:link {	color: #000000;	border-bottom: 0.5px dashed #6C6C6C; text-decoration: none;}
ul#Menu li a:hover { color: #154090;	border-bottom: 0.5px dashed #154090; text-decoration: none;}

Heyoan > Merci ! Je vais modifier !

Sinon j'ai retiré la bordure noire...et je trouve mon site un peu nu... Il faudrait au moins que je rajoute une ombre au moins...

Je voulais venir à ce que tu disais Cygnus > dynamisme = animation flash ?

J'ai modifié mon menu, mais ça alourdit considérablement mon CSS, puisque j'ai du définir le style MenuSecondaire 5 fois au lieu d'une, à moins que je n'ai pas compris...

Le padding marche bien... c'est plus correct comme ça en effet ! Merci !

ARGo a écrit :

à moins que je n'ai pas compris...

Effectivement : il y a un espace entre MenuSecondaire et SousMenuEnDirect. Du coup il n'y a qu'à définir le bon padding-left pour chaque sous-menu.

Plus globalement tu devrais (re)lire : Comprendre l'héritage et la parenté des styles CSS et les sélecteurs.

Biensûr...! Désolé !

Bon je suis décidément pas doué... Ca ne fonctionne pas...
J'ai du mal rédiger mon CSS...?

.MenuSecondaire
{
	height:35px;
	margin: 0 ;
	padding: 0 ;
	background: url(Sommaire2.png) repeat-x 0 -30px ; 
	list-style-type: none ;

}

.MenuSecondaire li
{
	float: left ;
	text-align: center ;
}

.MenuSecondaire li a
{
    width:auto;
	min-width:65px;
	padding: 0 7px;
	line-height: 30px ;
	font-size: 13px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
}

.MenuSecondaire li a:hover
{
	background: url(Sommaire2.png) repeat-x 0 0px ;
    font-size: 13px ;
	color: #000 ;
 
}

.Endirect
{	padding-left 100px;}
.Domaine
{	padding-left 180px;}
.Phototheque
{	padding-left 380px;}
.Collections
{	padding-left 470px;}
.Apropos
{	padding-left 690px;}

Tu as

<ul class="MenuSecondaire [b]MS[/b]Endirect">

mais

.Endirect { padding-left 100px;}

Sinon je viens de voir que tu as déjà 1 id affecté à chaque sous-menu donc tu peux faire directement

#MenuEndirect .MenuSecondaire { padding-left: 100px;}

sans rajouter la class MSEndirect.

Heyoan a écrit :

#MenuEndirect .MenuSecondaire { padding-left: 100px;}

sans rajouter la class MSEndirect.

Parfait ! Ça marche très bien !

Heyoan a écrit :
Tu as

<ul class="MenuSecondaire [b]MS[/b]Endirect">

mais

.Endirect { padding-left 100px;}

A ma décharge, et pour ne pas passer pour le dernier des abrutis, je précise que MS je l'ai écrit après avoir constaté l'erreur et posté ce message

Merci beaucoup de ton aide !

Salut,

Hop je ressors mon petit laïus sur l'ergonomie des menus déroulants.

Effectivement... je vais essayer une version en vertical pour voir ce que ça donne... Le seul défaut que je trouve aux menus verticaux c'est d'être trop classiques...

Mikachu > Puis-je te demander ton avis sur l'apparence générale ? Comme tu m'avais ouvert les yeux il y a deux ans...

Bon j'ai essayé le menu vertical et...je n'aime pas du tout... Hummm

Sinon j'ai fait des modifs dans ma version d'essai-pré béta

Merci de vos commentaires, ça ouvre les yeux !

ARGo a écrit :
Je voulais venir à ce que tu disais Cygnus > dynamisme = animation flash ?

Non, du tout.
Pour moi, le ski est un sport de vitesse, un peu grisant qui donne des sensations.
C'est pour ça, que lorsque je vois un site sur le sujet, je m'attends un peu à quelque chose qui m'y fasse penser. Et ce, en-dehors de la bannière ou de l'image de montagne...

Là, je trouve l'ensemble un peu trop froid. Même si je dois dire que ça passe quand même beaucoup mieux sans la bordure noire.

Pourquoi n'essayes-tu pas de travailler un peu ton arrière-plan ? Pour lui donner un peu de relief le rendre un peu plus punchy ?
La page est certes cadrée et centrée, mais ne trouves-tu pas cela un peu vide ?
Le contenu a des marges, les titres ont les mêmes, la typo est la même partout, tu n'utilises aucun soulignement ou encart...
Je trouve que c'est un peu vide.

Le pied de page aussi mériterait un traitement spécial. Pourquoi ne pas l'encadrer dans un bloc de footer pour le faire ressortir et le mettre en valeur ?

Voilà un peu ce que je pensais.
J'espère avoir été plus claire.

En fait j'insiste bien sur le fait que je progresse de haut en bas... Je n'ai encore que peu réfléchi à ce qui se trouve sous le menu.

Pour le moment seul la bannière et le menu sont en version quasi-définitive. La bannière pourrait peut être être plus haute...

Le fond restera blanc... mais j'ai essayé d'y incruster un fond neigeux...sans conviction

J'ai essayé comme sur ton blog une image en bas de page (magnifique !), mais ça fait trop avec la photo du haut...

Il y aura c'est sûr des photos miniatures avec ombres portées et effectivement des variations dans le contenu pour la police, la forme et la couleur. Je ne sais pas si le orange convient... J'aimerais bien avoir vos avis à ce sujet. Mais c'est certain que le tout est un peu statique...

Mais bon j'avance doucement grâce à vous, merci !
Modifié par ARGo (14 Sep 2008 - 14:34)

ARGo a écrit :
En fait j'insiste bien sur le fait que je progresse de haut en bas... Je n'ai encore que peu réfléchi à ce qui se trouve sous le menu.

Ok
Ceci dit, je reste sur mon idée de mise en relief de la bannière au moyen d'incrustation ou de fondu avec une autre photo.

Concernant le menu, je pencherais pour une légère différenciation du menu et du sous-menu, pourquoi par exemple ne pas tenter un ton de bleu un peu plus clair pour ton sous-menu ?

Et concernant le background, si tu compte conserver une couleur unie, essaye-voir de rehausser un peu le bleu.
Là, il tire un peu sur le vert alors que ta bannière et ton menu pas du tout.
Tu gagnerais en luminosité en l'alignant sur ces deux éléments.