Code plus léger et critiques esthétiques ?

carobee a écrit :


Et puis, dans le code html, les menus passent après le contenu texte, ca peut dérouter certains ?.

C'est un peu réducteur... La question des positions du contenu et des menus dans l'organisation générale linéaire d'un document est une question récurrente dès qu'il s'agit d'accessibilité. Elle reste d'ailleurs non tranchée.

carobee a écrit :

Lors de ma formation, on m'a dit d'essayer de ne pas dépasser 35ko (pour les gens qui n'ont pas l'adsl).

C'est un peu léger comme limite...sauf si tu parles uniquement des données textuelles.

Zeke a écrit :


C'est un peu léger comme limite...sauf si tu parles uniquement des données textuelles.

non, non : 35ko = le poids total de la page (accueil).
Je t'avoue que dans la pratique, je serais plus vers les 60ko.....

Bonjour,

J'allais dire 60ko avant et 70ko maintenant ("chiffre communément admis" mais ça ne veut rien dire)
D'après Opquast, recherche du mot poids

Projet:Accueil : quantité totale à télécharger inférieure à 100Ko
Projet:Multimédia : pas d'objet de plus de 50Ko sans avertissement ou affichage progressif (càd 1 objet seul)
Référentiel 1.0:Navigation : quantité totale à télécharger pour une page inférieure à 150 Ko (hors page d'accueil où il ne peut y avoir d'avertissement préalable) et sinon avertissement


Ah euh plutôt: Les bonnes pratiques
La quantité de données à télécharger pour afficher intégralement la page d'accueil est inférieure à 100 Ko.
Aucun objet multimédia de plus de 50 ko (image ou autre) n'est envoyé sans avertissement préalable, prévisualisation ou affichage progressif.
Sauf avertissement préalable, la quantité de données à télécharger pour afficher une page est inférieure à 150 Ko.

Bonjour,
Personnellement je n'ai jamais entendu parlé de 35ko mais plutôt et souvent 50ko pour une page d'accueil mais bon ce poid est évolutif.
Il vaut mieux t'en tenir aux donnéss de Felipe.
Si tu connais flash et si ton but n'est pas d'avoir la meilleur accessibilité,
je te conseillerais pour ne pas trop compromettre l'identité graphique de te tourner vers une anim flash qui te permettrait d'avoir une barre de préchargement, sinon il faudra ruser avec la découpage des images et leur meilleur optimisation.

Le fond de ton site est original et assez sympathique, cecit dit ça pêche un peu au niveau des texte que ce soit le paragraphe ou les menus:
> Le paragraphe n'est pas assez lisible et les espaces inter-mot sont
trop larges (tu peut peut-être le régler avec la propriété word-spacing de CSS mais à tester),
> le texte mériterais d'être légèrement plus gros car il se trouve sur un fond graphique et d'un couleur se rapprochant du noir pour avoir plus de contraste avec le fond ou sinon eclaircir le fond.
> la typo du menu n'est pas assez lisible et pas très esthétique et les puces n'apportent rien.
> Le texte de la zone de copyright (manquant!) passerait mieux en blanc ou un couleur clair.
Modifié par Hermann (01 Mar 2006 - 15:03)

Merci à tous pour vos remarques (pertinentes)

Il est vrai que j'avais mis de coté le probleme "poids total de la page" et je vais m'y pencher histoire d'alléger tout ça

Cependant la question ne portait pas vraiment la dessus !
Mais plus au niveau de la feuille de style et de son codage : en effet le code pour le menu me parait lourd et j'aurais voulus savoir si il y avait moyen de coder ça autrement.
En sachant qu'il y a des puces remplacé par des images, les textes des menus idem et un background pour le tout ... J'avais éventuellement pensé à la technique de menu défilant avec une seule image (style porte coulissante ) .Est-ce une bonne voie ?

Merci encore pour vos suggestions diverses meme si elle sont parfois incisives( Hermann)
Modifié par barbe douce (01 Mar 2006 - 19:32)

Pour qu'on te répondent au niveau du codage du menu, il vaudrait
mieux que tu laisse le code correspondant (CSS et XHTML)

a écrit :
Merci encore pour vos suggestions diverses meme si elle sont parfois incisives( cligne Hermann)

Désolé si mes conseils peuvent paraître un peu tranchant mais
la mise en forme du texte me semble imporante pour sa lisibilité qu'il ne
faut d'ailleurs jamais négliger.
Personnellement je trouve que la lecture du paragraphe n'est pas facilitée
par sa mise en forme.
Modifié par Hermann (01 Mar 2006 - 20:37)

		<div id="gauche01">

			<ul id="menugauche01">

				<li class="ke"><a href="index.htm"><span>Kecesé</span></a></li>
				<li class="lc"><a href="cours.htm"><span>Les cours</span></a></li>
				<li class="ls"><a href="stages.htm"><span>Les stages</span></a></li>
				<li class="la"><a href="animations.htm"><span>Les animations</span></a></li>
				<li class="cr"><a href="creations.htm"><span>Créations</span></a></li>
				<li class="ph"><a href="photos.htm"><span>Photo</span></a></li>
				<li class="vi"><a href="videos.htm"><span>Video</span></a></li>
				<li class="lsp"><a href="spectacles.htm"><span>Les spectacles</span></a></li>
				<li class="li"><a href="intervenants.htm"><span>Les intervenants</span></a></li>

			</ul>
		
		</div>

		<div id="gauche02">

			<ul id="menugauche02">

				<li class="ne"><a href="news.htm" .htm=""><span>News</span></a></li>
				<li class="co"><a href="contact.htm" .htm=""><span>Contact</span></a></li>
				<li class="pr"><a href="presse.htm" .htm=""><span>Presse</span></a></li>
				<li class="lie"><a href="liens.htm" .htm=""><span>Liens</span></a></li>

			</ul>

		</div>

/*--- M E N U ---*/

#gauche01, #gauche02 {
	position: absolute;
	left: 30px;
	width: 170px;
}
#gauche01 {
	top : 275px;
	height: 386px ;
	background: url(images/bg_menu01.gif) no-repeat;
}
#gauche02{
	top : 570px;
	height: 173px;
	background: url(images/bg_menu02.gif) no-repeat;
}

#menugauche01, #menugauche02 {
	list-style-type : none;
	margin : 40px 0 0 0;
	padding: 0;
}
	#menugauche01 li, #menugauche02 li {	
		display: inline; 
	}
	#menugauche01 a, #menugauche02 a {
		display: block;
		height: 18px;
		color : #000000;
		text-decoration : none;
	}
	
	.ke a:link, a:visited {
	margin: 0 0 7px 35px;
	background: url(images/ke.gif) no-repeat;
	}
	.ke a:hover, a:active {
	margin: 0 0 7px 35px;
	background: url(images/ke_trans.gif) no-repeat;
	}
	
	.lc a:link, a:visited {
	margin: 0 0 7px 34px;
	background: url(images/lc.gif) no-repeat;
	}
	.lc a:hover, a:active {
	margin: 0 0 7px 34px;
	background: url(images/lc_trans.gif) no-repeat;
	}
	
	.ls a:link, a:visited {
	margin: 0 0 7px 34px;
	background: url(images/ls.gif) no-repeat;
	}
	.ls a:hover, a:active {
	margin: 0 0 7px 34px;
	background: url(images/ls_trans.gif) no-repeat;
	}
	
	.la a:link, a:visited {
	margin: 0 0 7px 30px;
	background: url(images/la.gif) no-repeat;
	}
	.la a:hover, a:active {
	margin: 0 0 7px 30px;
	background: url(images/la_trans.gif) no-repeat;
	}
	
	.lsp a:link, a:visited {
	margin: 0 0 7px 22px;
	background: url(images/lsp.gif) no-repeat;
	}
	.lsp a:hover, a:active {
	margin: 0 0 7px 22px;
	background: url(images/lsp_trans.gif) no-repeat;
	}
	
	.cr a:link, a:visited {
	margin: 0 0 7px 28px;
	background: url(images/cr.gif) no-repeat;
	}
	.cr a:hover, a:active {
	margin: 0 0 7px 28px;
	background: url(images/cr_trans.gif) no-repeat;
	}
	
	.li a:link, a:visited {
	margin: 0 0 7px 22px;
	background: url(images/li.gif) no-repeat;
	}
	.li a:hover, a:active {
	margin: 0 0 7px 22px;
	background: url(images/li_trans.gif) no-repeat;
	}
	
	.ph a:link, a:visited {
	margin: 0 0 7px 24px;
	background: url(images/ph.gif) no-repeat;
	}
	.ph a:hover, a:active {
	margin: 0 0 7px 24px;
	background: url(images/ph_trans.gif) no-repeat;
	}
	
	.vi a:link, a:visited {
	margin: 0 0 7px 22px;
	background: url(images/vi.gif) no-repeat;
	}
	.vi a:hover, a:active {
	margin: 0 0 7px 22px;
	background: url(images/vi_trans.gif) no-repeat;
	}
	
	.ne a:link, a:visited {
		margin: 0 0 7px 25px;
		background: url(images/ne.gif) no-repeat;
	}
	.ne a:hover, a:active {
		margin: 0 0 7px 25px;
		background: url(images/ne_trans.gif) no-repeat;
	}
	
	.co a:link, a:visited {
		margin: 0 0 7px 27px;
		background: url(images/co.gif) no-repeat;
	}
	.co a:hover, a:active {
		margin: 0 0 7px 27px;
		background: url(images/co_trans.gif) no-repeat;
	}
	
	.pr a:link, a:visited {
		margin: 0 0 7px 29px;
		background: url(images/pr.gif) no-repeat;
	}
	.pr a:hover, a:active {
		margin: 0 0 7px 29px;
		background: url(images/pr_trans.gif) no-repeat;
	}
	
	.lie a:link, a:visited {
		margin: 0 0 7px 29px;
		background: url(images/lie.gif) no-repeat;
	}
	.lie a:hover, a:active {
		margin: 0 0 7px 29px;
		background: url(images/lie_trans.gif) no-repeat;
	}

Voila pour le code ...

Et Hermann je disais incisive mais aussi constructive donc tres interessante (si tu rejette un coup d'oeil à la page tu verras que j'ai suivi quelque uns de tes conseils ...)

Merci encore à tous ceux qui prennent le temps de nous lire !