Http://coxdream.free.fr - Nouvelle interface (page 2,message du 13/07)

(reprise du message précédent)

Benjamin D.C. a écrit :
La meilleure manière? Se faire l'oeil. Regarder, regarder, regarder. C'est le meilleur conseil que je puisse donner.

Ca n'avance pas beaucoup missGG.
Essaye un peu de te mettre à sa place : quand on se prend une critique aussi dure dans la figure, il faut au moins quelques éléments constructifs, quelques pistes pour avancer. Au minimum une analyse détaillée de ce qui ne plait pas.
Tu lui dit que son graphisme te rebute, mais tu ne précises absolument pas pourquoi. Qu'est-ce qu'il a ce dégradé ? Trop large ? Trop violent ? Mal placé ? QU'est-ce qu'elles ont les couleurs ? Trop vives ? Trop pâles ? Mal assorties ? Trop tristes ? Trop vives ? Et ce logo, qu'est-ce qui cloche ? Est-ce le style, est-ce la réalisation ?
En l'état, ta critique ne sert pas à grand chose, si ce n'est à décourager son destinataire.
Allez, tu peux faire mieux que ça

Benjamin D.C. a écrit :
Je me suis décidé à réagir régulièrement dans cette partie de forum que je boude depuis mon inscription; je sens que je ne vais pas me faire beaucoup d'amis mais bon...

Au contraire, si tes critiques permettent à ses destinataires d'améliorer leurs sites, ils t'en seront très reconnaissants.
Modifié par zapman (27 Apr 2007 - 22:37)

LooL
Bonjour à tous,
Ne vous inquiétez pas, les critiques de Benjamin D. C. ne m'affectent pas plus que ça. Bien qu'elles ne me paraissent pas très constructives, en effet, car à part la dépréciation du tout, rien ne me permet de rebondir dessus et d'améliorer ce qui ne va pas, à part supprimer tout mon site, ce que je ne ferais pas.
Si j'ai posté un message ici, je m'attendais à ce genre de critique, qui sont aussi les miennes au passage.
Ce qui peut faire rire cependant, c'est que j'ai plus de connaissances en design qu'en prog (J'ai été un temps graphiste-webdesigner, mdrrr). Et que, pour ce site, j'ai voulu privilégier la prog au détriment du design, car je n'y connaissai rien en prog et me sentais incapable d'adapter un design sympa à ma prog de débutante.
Aujourd'hui, j'ai pas mal appris sur le tas en prog, mais bloque à fond sur le design. Quand c'est pour moi, et que je n'ai pas de contraintes de départ (à part mes capacités), j'y arrive pas.
Donc, voilà.
Mon site est minimaliste niveau design, les couleurs sont criardes (au passage, c'est la couleur de ma cox, c'est pourquoi, je l'avais adopté). Les dégradés sont bateaux. Et mon logo a été fait en deux secondes mais je pense le garder car il est désormais reconnu par ses pairs.
Pour info, j'ai créé d'autres design plus aboutis, mais qui ne me plaisent toujours pas. Donc, j'ai gardé le tout moche.
Voilà, donc si vous avez des idées de design en rapport au site ou de couleurs, je suis ouverte aux propositions car je sèche.

Pour réponses aux critiques constructives :

Epy a écrit :
- Je suis en train de chercher pourquoi tu as cette bordure sur le lien de la bannière, et j'ai remarqué que tu as une deuxième CSS juste pour la page rassemblement ? 'Stylesrass.css'
Il y a les mêmes choses que dans la principale, autant en profiter pour n'en mettre vraiment qu'une de partout
(avantage du 'langage CSS': une seule feuille de style = une seule ligne à changer pour changer sur toutes les pages)
Là tu aurais la page rassemblements qui n'aurai plus la même tronche et t'obligerait à aller aussi changer la même chose dans l'autre feuille.

- Pour la bordure sur le lien, déjà ça pourra aider si c'est une erreur dans la feuille de style
ensuite, je me trompe peut être, mais ça ne serait pas border="0" plutôt que "none" (dans ta balise img)?

- Tu devrais pouvoir dire à ta classe ban de ne prendre aucune bordure.. mais il faudrait mieux comparer les différences de code HTML et CSS entre les deux pages (et donc, ne mettre qu'une seule feuille pour tout le site)

J’ai fait une CSS au lieu de 2 (et gardé l’alternative pour IE<7), ce qui corrige les problèmes de soulignement…et mis un style spécial pour les pages de rassemblement pour ne pas avoir de fond.

Epy a écrit :
Par contre au niveau du graphisme je ne suis pas fan du "degradés" vert... peut être une autre couleur ? ou même essayer sans dégradé ?

Ben ça, ça rejoint le design en général et comme je l’ai dis plus haut, l’inspiration n’est pas là.

Quand j’aurai trouvé mon design, je règlerai plusieurs problèmes cités plus haut :
- couleurs de typo (trop criardes…)
- dégradés (qui ne plaît pas et qui s’interromps quand on descend)
- photos gif du haut (pas intégré et trop lourd)

Donc, je ne vous demande pas de faire le design de mon site à ma place, mais peut-être de m’apporter quelques idées de départs(des contraintes disons) afin de m’aider à trouver un peu d’inspiration, si ça vous dit.
Car je pense que mon site est intéressant pour un certain public, et qu’il est complet.
Le design peut cependant en rebuter certains, j’en ai conscience.

Merci d’avance.

Bonjour à tous,

Je cherche depuis plusieurs mois à faire une nouvelle interface. Mais n'y arrive pas.
Hier, je me suis un peu énervée et pense avoir fait qqch de moins moche, mais peut-être pas abouti.
J'aimerai vos avis (Je sens que ça va encore être ma fête, lol).
Si vous voulez comparer avec l'ancienne interface ou avec les essais que j'avais fait, j'ai tout mis dans ma rubrique news.

Merci d'avance.
Modifié par MissGG (13 Jul 2007 - 07:02)

Voilà aujourd'hui, j'ai refait le menu avec une planche de surf en fond.
J'attends vos critiques.

MissGG a écrit :
Voilà aujourd'hui, j'ai refait le menu avec une planche de surf en fond.
J'attends vos critiques.

Bonjour,

Tu as bien noté que des éléments de ton menu son inaccessibles dans de faibles résolutions en hauteur puisque tes visiteurs ne peuvent pas scoller pour atteindre l'ensemble des item du menu .

Autre point problématique: que viennent faire ces "div" contenant un espace insécable dans les liens du menu. Pourquoi "foutre dieu" (désolé pour l'expression familère) passer par ces bidouilles, mettez une image dans ces <li>!

Bonjour Igor,

Igor a écrit :
Tu as bien noté que des éléments de ton menu son inaccessibles dans de faibles résolutions en hauteur puisque tes visiteurs ne peuvent pas scoller pour atteindre l'ensemble des item du menu cligne .

J'ai testé en 800*600 et la planche est coupée mais pas le menu. Bien sûr, j'ai enlevé certaines barres d'affichage comme la barre personnelle et la web developper toolbar sous firefox. Car, je pense que quand on programme, on est pas en 800*600.
J'ai déjà fait énormément de concessions pour les 800*600 avec un contenu extensible et une entête qui est centré pour eux.
Au pire, je peux remonté le menu, mais là, ça ferait vraiment tout centré en top left et rien en bottom et right.
Sinon, je dois opter pour des éléments non fixe, et c'est dommage car on voulais garder le header et le menu en fixe.
Que me proposes-tu?

Igor a écrit :
Autre point problématique: que viennent faire ces "div" contenant un espace insécable dans les liens du menu. Pourquoi "foutre dieu" (désolé pour l'expression familère) passer par ces bidouilles, mettez une image dans ces <li>!

Erf, ces bidouilles!!
En effet, cette partie m'a bien pris la tête. Et c'est la seule solution qui a marché. Mais, je suis d'accord qu'il faut l'améliorer, rien que pour la validation W3C. Si quelqu'un peut m'aider à rendre ce code plus propre, je lui en serais reconnaissant.
Voici mon code pour le menu :

	  <ul id="menu">
		<li><div id="hautmenu"> </div></li>
		<li><a href="/index.php" title="Accueil" class="menu"><div id="acc"> </div></a></li>
		<li><a href="/presentation.php" title="Présentation" class="menu"><div id="pres"> </div></a></li>
(...)
		<li><div id="basmenu"> </div></li>
	  </ul>

Et voici ma css:

/*MENU */
	#menu{
		background: #E5E7BC url(/img/gauche.png) repeat-y left top;
		position: fixed;
		top: 145px;
		left: 0px;
		width: 151px;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	a.menu{
		text-decoration: none;
		color: none;
		list-style: none;
	}
	a.menu:hover{
		text-decoration: none;
		color: none;
		list-style: none;
	}
	div#hautmenu{
		background: #E5E7BC url(/img/menu/hautplanche.png) no-repeat left top;
		width: 150px;
		height: 59px;
	}
	div#acc{
		background: #E5E7BC url(/img/menu/acc.png) no-repeat left top;
		width: 150px;
		height: 24px;
	}
	div:hover#acc{
		background: #E5E7BC url(/img/menu/acc.png) no-repeat left bottom;
		width: 150px;
		height: 24px;
	}
	div#pres{
		background: #E5E7BC url(/img/menu/pres.png) no-repeat left top;
		width: 150px;
		height: 24px;
	}
	div:hover#pres{
		background: #E5E7BC url(/img/menu/pres.png) no-repeat left bottom;
		width: 150px;
		height: 24px;
	}
(...)
	}
	div#basmenu{
		background: #E5E7BC url(/img/menu/basplanche.png) no-repeat left top;
		width: 150px;
		height: 60px;
	}

Le problème est que j'ai plusieurs images : l'image gauche.png de 1px de hauteur qui se répète, le haut et le bas de la planche, et pour chaque partie du menu, un morceau de la planche blanc pour le a, et un or & marron qui équivaut au a:hover.
J'ai essayé plein de codage différents, mais n'est pas trouvé comment obtenir ce rendu autrement à cause du hover.
Merci de m'éclairer.

salut!

á vu de nez je ferai plutot quelquechose du style:

<div id="menu_container">

<div id="hautmenu"> </div>

<ul id="menu">
    <li><a href="/index.php" title="Accueil" class="menu"></a></li>
    <li><a href="/presentation.php" title="Présentation" class="menu"></a></li>
(...)
</ul>    

<div id="basmenu"></div>

</div>

avec le css:

a.menu{
text-decoration: none;
color: none;
list-style: none;
display: block;
background: #E5E7BC url(/img/menu/acc.png) no-repeat left top;
width: 150px;
height: 24px;
}

a.menu:hover{
text-decoration: none;
color: none;
list-style: none;
background: #E5E7BC url(/img/menu/pres.png) no-repeat left bottom;
width: 150px;
height: 24px
}

désolé c'est un poil brut de décoffrage

Salut emiliodobrasil,

J'ai essayé ta méthode. Ca ne marche pas. Les images ne s'affichent pas.
Je ne comprends pas.

Voici le code :

  <div id="menu">
	<div id="hautmenu">&nbsp;</div>
	  <ul id="liensmenu">
		<li><a href="index.php" title="Accueil" class="acc">&nbsp;</a></li>
		<li><a href="presentation.php" title="Présentation" class="pres">&nbsp;</a></li>
(...)
	  </ul>
	<div id="basmenu">&nbsp;</div>
   </div>

Et le css:

#menu{
		background: #E5E7BC url(img/gauche.png) repeat-y left top;
		position: fixed;
		top: 145px;
		left: 0px;
		width: 150px;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	div#hautmenu{
		background: #E5E7BC url(img/menu/hautplanche.png) no-repeat left top;
		width: 150px;
		height: 59px;
	}
	ul#liensmenu{
		top: 145px;
		left: 0px;
		width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	a.acc{
		background: #E5E7BC url(img/menu/acc.png) no-repeat left top;
		width: 150px;
		height: 24px;
		text-decoration: none;
		color: none;
		list-style: none;
	}
	a:hover.acc{
		background: #E5E7BC url(img/menu/acc.png) no-repeat left bottom;
		width: 150px;
		height: 24px;
		text-decoration: none;
		color: none;
		list-style: none;
	}
	a.pres{
		background: #E5E7BC url(img/menu/pres.png) no-repeat left top;
		width: 150px;
		height: 24px;
		text-decoration: none;
		color: none;
		list-style: none;
		
	}
	a:hover.pres{
		background: #E5E7BC url(img/menu/pres.png) no-repeat left bottom;
		width: 150px;
		height: 24px;
		text-decoration: none;
		color: none;
		list-style: none;
	}
(...)
	div#basmenu{
		background: #E5E7BC url(img/menu/basplanche.png) no-repeat left top;
		width: 150px;
		height: 60px;
	}

J'avais essayé cette méthode avant de mettre les <div>, et les images liens ne s'affichaient pas, à cause du hover.
Je sais pas si c'est faisable sans les <div> en fait, et donc non valide W3C.

Bonjour à tous,

Ayez ça marche.

J'ai remplacé les <div> par les <span> et rajouté des display: block

Par contre, ça déconne sous IE6

http://coxdream.free.fr/ie6.jpg
De plus, le hover ne marche plus.

Pouvez-vous m'aider à trouver le problème?
Sachant que j'ai 2 css dont une spéciale pour IE<7.
Modifié par MissGG (18 Jul 2007 - 23:12)

Personne n'a une idée pour les IE<7? Pourquoi ce décalage?

J'aime beaucoup ce nouveau design ! (si je me souviens bien l'ancien était sombre). Chouette idée pour la tête du bonhomme sur la planche

Le site est très agréable à regarder.

(désolé, c'est pas très constructif comme réponse )

Ce qui est dommage dans la dernière version est que :
_ les images sont longues à charger (pour le menu) , celà provenant d'une page excédant les 190 ko, alors qu'il n'y a finallement que peu d'images intéressantes
_ même pas une photo de cox ! le comble quand meme pour un site qui en parle
_ le mariage caca d'oie avec le bleu cyan n'est pas du plus bel effet

Bonjour à tous,

Au contraire, c'est constructif, quartdocre, +1 pour la nouvelle version. Ca veut dire déjà que c'est mieux, lol.

quartdocre a écrit :
Chouette idée pour la tête du bonhomme sur la planche cligne

Merci pour la planche, j'ai quand même passé du temps à la faire, et surtout faire en sorte qu'elle semble réelle. Le bonhomme est un symbole connu dans le monde VW, je ne l'ai pas créé, juste modifié au niveau couleurs.

Gunner4902 a écrit :
les images sont longues à charger (pour le menu)

Comment faire pour en modifier le poids? Quelle qualité me conseillez-vous pour que ça reste de bonne qualité visuellement sans être trop lourd?

Gunner4902 a écrit :
alors qu'il n'y a finallement que peu d'images intéressantes

Ca, ça reste une histoire de goût. Mon site, étant ciblé, ces images sont des symboles bien connus des passionnés : planche de surf, bonhomme VW, fleurs, paint + la cox en néon (pour un visuel de la voiture).

Gunner4902 a écrit :
même pas une photo de cox ! le comble quand meme pour un site qui en parle

Il y a beaucoup de photos de cox sur ce site dans les rubriques notamment "Ma Cox" mais surtout "Concentr'". Pour te faire plaisir, j'ai mis notre cox en fond sur la page d'accueil, à l'essai. Ca ne me plait pas franchement. J'attends ton avis.

Gunner4902 a écrit :
le mariage caca d'oie avec le bleu cyan n'est pas du plus bel effet

Concernant cette remarque. A savoir si c'est une histoire de goût encore, ou si c'est confirmé par d'autres avis. Donc, j'attends d'autre avis. Je n'ai pour l'instant reçu que des avis favorables aux choix des couleurs. Que me propose-tu comme couleurs de remplacement? (sachant que le bleu cyan doit être présent quelque part car c'est la couleur de notre cox)

Merci à vous pour vos avis.
Modifié par MissGG (31 Jul 2007 - 20:49)

MissGG a écrit :
Mon site, étant ciblé, ces images sont des symboles bien connus des passionnés : planche de surf, bonhomme VW, fleurs, paint + la cox en néon (pour un visuel de la voiture). Il y a beaucoup de photos de cox sur ce site dans les rubriques notamment "Ma Cox" mais surtout "Concentr'". Pour te faire plaisir, j'ai mis notre cox en fond sur la page d'accueil, à l'essai. Ca ne me plait pas franchement. J'attends ton avis.

Autant pour moi, mais relatif aux rubriques, je n'y faisai pas allusion, puisque m'étant uniquement occupé de la page d'accueil
Ton image de fonc cox, altère la visibilité du texte, j'aime mieux sans. Par contre ton favicon est sympa, pourquoi ne l'intègres tu pas en petite image dans le design de ton site ?

MissGG a écrit :
Comment faire pour en modifier le poids? Quelle qualité me conseillez-vous pour que ça reste de bonne qualité visuellement sans être trop lourd?

Tu as 20 images sur ta page d'accueil (avec la cox en fond de page), Il serait possible de réduire considérablement celà en ne mettant pas de roll over sur la plance de surf (qui est très sympa et bien faite d'ailleurs) Tu pourrais mettre ta planche en background avec un changement en :hover de la couleur de police ou quelquechose du genre.

Réduire le poids de ta page est facilement faisable sur 3 points :
_ ton favicon pèse 14.8 ko, ce qui est très lourd, un favicon de 32 x 32 serait suffisant (au lieu de 48) et devrait peser moins de 4 ko.
_ les logos du W3C sont de 88 x 31 alors que tu les réduis par le code HTML à 57 x 20 ... en réduisant la taille de l'image sur Photofiltre tu gagneras facilement 1.5 ko par logo et surtout tu éviteras l'écueil du redimensionnement de l'image par le code contenant (voir les bonnes pratiques Opquast)


Concernant les couleurs, ce n'est pas que mon simple avis, puisque je prend en référence la roue chromatique
http://wellstyled.com/tools/colorscheme2/index-en.html