Votre avis sur http://www.ralentirtravaux.com

(reprise du message précédent)

y@nn a écrit :

Pardon de montrer tant d'ignorance, mais qu'appelle-t-on le corps exactement ?

C'est moi qui m'excuse, j'ai employé ce terme un peu machinalement mais c'est un peu normal que vous ne le connaissiez pas. C'est la taille du caractère.

y@nn a écrit :

Et j'ai une autre question. C'est de la curiosité : qu'a-t-elle de particulier cette Georgia qui la rend préférable à une autre pour la lecture sur écran ? Évidemment, ça se voit mais je ne pourrais pas l'expliquer.

Bonne question. C'est un combinaison de plusieurs facteurs : une chasse (largeur) de caractère plus large, une approche globale (espace entre les caractère) et une hauteur d'œil ( http://fr.wikipedia.org/wiki/Œil_(typographie) ) plus importantes, et des caractéristiques formelles dont je ne connais pas le secret
Mais la lisibilité et le confort de lecture c'est aussi une histoire de composition, d'interligne, de justification (dans le sens largeur de colonne), de niveau de contraste, etc.

Un outil à connaître pour tester la lisibilité (entre autre) : http://csstypeset.com/

EDIT : J'oubliais un autre point à prendre en compte pour améliorer le confort de lecture :
éviter le contraste maximum (noir sur blanc ou inversement). Le gris clair que vous avez choisi convient bien avec un texte à color: #444 par exemple.
Modifié par Hermann (16 Jan 2010 - 13:57)

@ Hermann

Bonjour,

Merci pour les liens.

J'ai fait un essai avec Georgia, mais ça me paraissait un peu gros.

Du coup, j'ai adopté ça :

font: 1em/1.4 Baskerville...Serif

En fait, j'hésite encore. Il faut que je fasse des essais.

Il me faut aussi trouver une police pour les titres afin de varier comme vous le suggériez (mais je dois d'abord éliminer tout ce qui est entre <b></b> pour mettre de véritables titres).

Reste également à proscrire le noir sur blanc (ça non plus je n'y aurais pas pensé, ça paraît pourtant évident finalement).

Ah ! et faire la chasse au <br /> ! Mais là il faut que je reprenne tout, car j'en ai vraiment abusé.

En fait, ces changements peuvent paraître mineurs. Ils affectent en réalité une grande partie du site.

Et je manque toujours cruellement de temps

y@nn a écrit :

J'ai fait un essai avec Georgia, mais ça me paraissait un peu gros.

Mieux vaut que ça soit un peu gros que pas assez, ça parait plus gros que le Times ou la Baskerville car sa hauteur d'œil est plus importante avec une taille identique

y@nn a écrit :

font: 1em/1.4 Baskerville...Serif

En fait, j'hésite encore. Il faut que je fasse des essais.

Attention la Baskerville n'est pas installée en standard sur Windows, donc je te conseil de placer la Georgia en 2nde position.

Bonjour,

Je voudrais avoir votre avis. J'avais, dans une version précédente du site, un menu déroulant, que je n'ai finalement pas gardé. Pensez-vous que ça aide à mieux naviguer dans un site ou que c'est inutile ?

Autre question : pensez-vous qu'il faille indiquer à l'internaute l'endroit où il se trouve, le chemin en somme (par exemple : Accueil > Forum > Questions diverses ?).

Merci

Y@nn

Salut,

y@nn a écrit :
J'avais, dans une version précédente du site, un menu déroulant, que je n'ai finalement pas gardé.

Très bonne initiative selon moi. De mon point de vue ça n'est jamais utile et on peut toujours faire autrement mais surtout cela pose de gros problèmes d'accessibilité.

y@nn a écrit :
pensez-vous qu'il faille indiquer à l'internaute l'endroit où il se trouve

Oui toujours ! Cela passe généralement par un onglet de menu marqué comme "actif" et/ou d'un titre de section approprié. Dans le cas d'une hiérarchie de site un peu complexe (plusieurs "sous-dossiers") un fil d'ariane me semble tout à fait pertinent. Penser également à un plan du site.

Sinon je ne suis sans doute pas très objectif mais je trouve la navigation de http://www.alsacreations.com/ très réussie (et sans menu déroulant).
Modifié par Heyoan (09 Feb 2010 - 23:59)

D'accord, je n'avais pas pensé aux problèmes d'accessibilité. Et ça m'évitera de refaire à la fois un menu et une bêtise. Parfait !

a écrit :
Cela passe par un onglet de menu marqué comme "actif"

Je rougis d'avoir à le demander, mais je ne sais pas comment le faire...

a écrit :
un fil d'ariane me semble tout à fait pertinent

Et tu verrais ça comment ? Une série de liens ?

y@nn a écrit :
Je rougis d'avoir à le demander, mais je ne sais pas comment le faire...

Voir cette astuce.

y@nn a écrit :
Et tu verrais ça comment ? Une série de liens ?

Oui. Par exemple :

<p>Vous êtes ici : <a href="/index.php">Accueil</a> | <a href="/caregorie/index.php">Catégorie</a> | Article en cours</p>

Bon, apparemment, je n'ai pas fini de rougir, Heyoan.

J'ai suivi l'astuce dont tu parlais, ajouté un id dans le fichier CSS afin de marquer la page en cours dans le menu :

#en-cours {
color: #4ec2ff;	
}

mais ça ne marche pas.

Je suppose que quelque chose vient empêcher que ça marche, quelque part dans mon menu, mais je ne parviens pas à isoler le coupable :

#menu {
background-image: url(images/site/menu.png);
width: 1100px;
height: 35px;
line-height:35px;
margin: 0px;
margin-bottom: 70px;
padding: 0px;
text-align: center;
font-family: Baskerville; 
font-size: 15px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style:none;
}

#menu ul li {
display:inline;
width : 80px;
}

#menu li      
{ 
float : left; 
margin:auto; 
padding:0px;
}

#menu ul a {
color: #fcffff;
text-decoration: none;
}

#menu,  #menu a:hover  {
color: #4ec2ff;
}

#en-cours {
color: #4ec2ff;	
}

Merci d'avance.

Ben c'est un bon début de déclarer une couleur différente pour l'élément ayant un id #en-cours mais si tu n'affectes pas cet id au bon lien ça ne sert à rien.

Par exemple :

<li><a href="../actualite/index.php" title="Actualité" id="en-cours">Actualité</a></li> 

Bah si ! C'est ce que j'ai fait. Mais, je n'ai pas pensé à le signaler

<ul>

		<li><a href="actualite/index.php" title="Actualité">Actualité</a></li> 

		<li id="en-cours"><a href="index.php" title="Lettres">Lettres</a></li>

		<li><a href="http://ralentirtravaux.forums-actifs.com/index.htm" title="Forum">Forum</a></li>

		<li><a href="voir/index.php" title="Voir (Photos et vidéos)">Voir</a></li>

		<li><a href="liens/index.php" title="Liens">Liens</a></li>
		
		</ul>

Mais ça ne marche pas ! Comprends pas. Comprends pas

y@nn a écrit :
Bah si ! C'est ce que j'ai fait.

Ce n'est pas le cas sur ton site en ligne... Quoi qu'il en soit et au vu de tes déclarations css ce n'est pas au LI mais au A qu'il faut l'affecter (comme dans mon exemple).

Décidément, j'oublie tout !

Je fais mes essais sur ma machine, en local.

Et puis j'ai successivement essayé d'affecter l'id aux éléments <li> et <a>, mais en vain

Il doit y avoir un truc qui gêne dans ma feuille de style, car si je place dans l'élément <a> du menu le style :

style="color: #4ec2ff;"

Alors ça marche.

Si j'utilise un identifiant :

id="en-cours"

Ça ne marche pas.
Modifié par y@nn (10 Feb 2010 - 14:49)

Essaies avec

#menu #en-cours {
	color: #4ec2ff;	
}

et pour les explications voir http://openweb.eu.org/articles/cascade_css/

Bingo !
Merci, merci, merci

Je déterre ce sujet parce que le site a sensiblement évolué, et que je sollicite à nouveau votre avis.


J'en profite pour dire encore que vos conseils m'ont été vraiment utiles. Merci

Salut,

Je n'étais pas là la première fois, donc je me fie à ce que je vois là :

- a priori, c'est mieux au niveau code que ce que c'était : il y a des erreurs, mais des trucs que tu peux corriger facilement : des balises auto-fermantes oubliées (hr, link, ce style de trucs). tu dois les écrire <hr /> et non <hr> cat ton doctype nécessite la fermeture de toutes les balises (donc on en auto-ferme certaines, comme les hr, br & co). Tu as aussi des & à transformer en &amp; pour que le valideur passe dessus.
- sinon, tu as trop de fichiers javascripts (jusqu'à 17 dans la homepage), essaie de les regrouper. Vois également à compresser en gzip les contenus texte (html, css, et js) pour diminuer le poids transmis à l'internaute.

Les <hr> m'avaient échappé. Merci !

Tu parles des & à transformer en &amp; Tu en a trouvé sur la page d'accueil ? Je croyais qu'il n'y en avait plus.

Et il est vrai qu'il y a pas mal de JavaScript, mais essentiellement sur la page d'accueil !

Merci pour tes remarques.

En flânant sur le forum, j'ai découvert l'existence du site GTmetrix. J'obtiens des C à deux reprises (YSlow Grade et Page Speed Grade) : http://gtmetrix.com/reports/www.ralentirtravaux.com/PntIhkYu.

La seule chose que j'ai comprise est que ma page est trop lourde. Le reste, je n'y comprends pas grand-chose. Que faudrait-il faire d'autre à votre avis ?

P.-S. Promis, j'arrête de poser des questions à tort et à travers, après.