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

Bonjour,

Alors j'ose

Voilà. Je suis prof de français et j'ai fait un site il y a près de trois ans ( http://www.ralentirtravaux.com ) .

Cela fait maintenant un an et demi que j'apprends le HTML et le CSS. J'ai donc abandonné les logiciels type Rapidweaver ou Sandvox (sur Mac) pour un logiciel comme Coda afin d'écrire mon site avec les moyens du bord (livres, tutoriels çà et là).

À l'exception du Javascript ou du (peu de) flash, j'ai tout fait moi-même. Ça vaut ce que ça vaut... Il y a - je le sais, je m'en suis rendu compte au fur et à mesure que je faisais le site et que j'apprenais - un certain nombre d'erreurs. J'aimerais bien en corriger quelques-unes. Je n'en ai pas toujours le temps, mais petit à petit, ça se fait.

Peut-être aussi auriez-vous aussi des idées concernant la navigation, la facilité d'utilisation, bref l'ergonomie.

Merci d'avance à vous tous.

Yann
Modifié par Hermann (12 Jan 2010 - 21:19)

Bonjour,

82 erreurs de code avec un doctype transitionnel c'est à revoir d'urgence.

Bonjour,

82 erreurs... Profil bas

Bon, je savais qu'il y en avait.

Je suis retourné voir (http://validator.w3.org). J'en ai corrigé quelques-unes, mais il m'en reste. Je pourrai en corriger d'autres quand j'en aurai le temps. Malheureusement, celles qui me posent vraiment un problème concernent le code que je n'ai pas écrit moi-même, comme celui fourni par Google pour le moteur de recherche. Et pour ça, je ne sais vraiment pas quoi faire.

Quelqu'un pourrait-il me donner un coup de main ?

Merci d'avance.

Yann

Salut,

pour les erreurs tu y verrais déjà plus clair en remplaçant les & par des & dans les liens.

Sinon dans le désordre :

* en tant que prof de français je ne doute pas que la sémantique te préoccupe... or un document html doit justement la respecter : il faut donc utiliser des titres, des listes, etc.

* tu utilises du JavaScript intrusif : si ton visiteur n'en dispose pas il ne peut tout simplement pas naviguer. Lire à ce sujet : comment bien coder en JavaScript.

* d'une manière générale il faut concevoir un document html... en html ! Cela signifie que les images, le css, le JavaScript ne sont que facultatifs. Donc le contenu pour être accessible doit se trouver dans le code html (et il faut penser à l'attribut alt pour les images). En l'état la catégorie "Piqûres de rappel" par exemple est un désastre.

* l'autre très gros problème concerne la navigation : tu t'es fait plaisir avec le JavaScript mais au-delà du fait qu'il peut être désactivé il m'a fallu un bon moment pour comprendre qu'il fallait cliquer sur les images pour les faire défiler... Et plus simplement : comment je reviens au menu ? Comment je reviens à l'accueil ? Mystère !
Modifié par Heyoan (13 Jan 2010 - 15:34)

Merci de répondre (et merci pour les liens fort intéressants) Mais il va falloir m'expliquer certaines choses (enfin, si tu veux bien).

Heyoan a écrit :
Pour les erreurs tu y verrais déjà plus clair en remplaçant les & par des & dans les liens.

C'est-à-dire ???

Heyoan a écrit :
il faut donc utiliser des titres, des listes, etc.

Tu dis ça à cause du JavaScript ?
Au reste, tu as raison. Je me suis fait plaisir, mais ce n'était peut-être pas l'idée du siècle ! Au fait, le JavaScript est-il si souvent désactivé ?

Heyoan a écrit :
En l'état la catégorie "Piqûres de rappel" par exemple est un désastre.

Que me suggères-tu ? Ce sont les images qui ne vont pas (question d'accessibilité) ? En tout cas, je vais ajouter les attributs alt.

Merci encore.

Yann
Modifié par Heyoan (13 Jan 2010 - 16:31)

y@nn a écrit :
C'est-à-dire ???

Cela signifie que l'esperluette (&) est un caractère particulier en html puisqu'il sert à distinguer les entités (é &quote; etc.) et que pour signifier une vraie esperluette il faut la noter &

y@nn a écrit :
Tu dis ça à cause du JavaScript ?

Non je dis qu'un document html doit être structuré (de la même façon qu'un document papier) et qu'il faut utiliser les éléments à bon escient (relire l'article cité plus haut).

y@nn a écrit :
Au fait, le JavaScript est-il si souvent désactivé ?

Pas particulièrement souvent chez les internautes qui ont le choix mais :
* tout le monde n'a pas le choix
* tous tes "visiteurs" ne sont pas des internautes
* etc.
(relire l'article cité plus haut).

y@nn a écrit :
Que me suggères-tu ? Ce sont les images qui ne vont pas (question d'accessibilité) ? En tout cas, je vais ajouter les attributs alt.

Oui : lorsqu'une image porte une information elle doit être dans le code html (élément IMG) et pas en background css (ça c'est fait) mais il faut également prévoir une alternative textuelle en cas d'images désactivées / indisponibles avec l'attribut alt
Modifié par Heyoan (13 Jan 2010 - 16:42)

Bien bien ! Merci.

Mais... où as-tu vu ces esperluettes dans mon site ? Je crois me souvenir que je ne les utilise que pour ces entités dont tu parles. Évidemment, je peux me tromper

Et que faire pour le code fourni par Google ?

Il me reste 23 erreurs à corriger et un bon nombre proviennent de ce code !

y@nn a écrit :
Mais... où as-tu vu ces esperluettes dans mon site ? Je crois me souvenir que je ne les utilise que pour ces entités dont tu parles. Évidemment, je peux me tromper

Et que faire pour le code fourni par Google ?

2 questions et 1 seule réponse : je parle justement des & présents dans les urls de google.

Par exemple il faut remplacer &key par &key

@ Heyoan

Quelle concision !

Il reste désormais 20 erreurs ; mais c'est déjà mieux !

y@nn a écrit :
Il reste désormais 20 erreurs ; mais c'est déjà mieux !

Hem... je ne pensais pas utile de te le préciser mais c'est bien sûr valable pour tous les & présents dans les urls(&v, &hl, ...) .

Eh bien, je n'aurais pas pensé que je pouvais toucher aux URL !

Ainsi &v devient &v et &hl devient &hl, etc.

C'est bien ça ?

y@nn a écrit :

C'est bien ça ?

oui

Alors merci à vous, car vos remarques m'ont poussé (et surtout, permis en fait) à corriger l'ensemble, et il n'y a plus de fautes. La page est validée

Évidemment, si vous avez d'autres remarques, je suis preneur

C'est pas mal vous n'avez que 2 erreurs en XHTML strict:

> supprimer language="JavaScript" des élément script, c'est un attribut obsolète.
> Supprimer le dernier br : le body ne peut avoir comme enfant direct que des éléments de niveau block et script (pour ce qui est des éléments les plus utilisés).

C'est le souk en fin de code (des nbsp; des br de partout...)
Les nbsp; ne sont pas fait pour ajouter un espace mais pour empêcher une coupure de ligne (none breaking space > espace insécable) présents avant les ":" par exemple.

Je n'ai pas le temps de commenter le design dans sa globalité mais je vous conseil pour commencer de remplacer la Times New Roman par une Georgia (spécifiquement conçu pour une lecture écran), de passer la Baskerville en 2ème choix dans ta pile de police, d'augmenter un peu le corps du texte courant, des tes titres.

Ceci dit la Times peut convenir pour la titraille mais ne jamais risquer de mélanger 2 typos de même nature (2 typos à empattement dans ce cas) si vous ne maitrisez pas la typographie.

> Essayer éventuellement de remplacer la typo serif des titres par une typo batôn (Trébuchet, Arial...) pour amener un peu de diversité.
En revanche une typo serif pour le texte courant est un bon choix, non pas pour son niveau de lisibilité mais pour ses connotations littéraires...

> Éviter d'avoir des lignes de texte trop longues (essayer de rester dans l'intervalle suivant : 45 à 75 signes par ligne, les signes comprenant les espaces et signes de ponctuation, ou de vous en rapprocher le plus possible.
Modifié par Hermann (13 Jan 2010 - 22:37)

Bonjour,

D'un point de vue esthétique, l'ensemble est fade et manque de structure.

Fade : pas de logo, pas de couleur, pas d'élément graphique qui pourrait distinguer votre site dans ce parterre fleuri que constitue le Web. Entendons-nous, il ne s'agit pas de concevoir une interface graphique chargée au prétexte d'apporter une emprunte personnelle à votre œuvre mais d'ajouter ça et là quelques éléments atypiques.

Manque de structure : certaines règles qui s'appliquent au format papier sont d'autant plus vraie sur le web, celles régissant l'organisation du contenu particulièrement. Il est primordial d'utiliser tout l'espace disponible de prime abord (avant le scroll) de manière à y afficher le plus d'informations pertinentes possible, dans le cas du média Web, il ne s'agira pas forcément de contenu brut mais par exemple de moyens de navigation (liens, formulaire de recherche, ..).

Nota : l'expérience utilisateur est grandement affectée par la taille du site, il est important de garder à l'esprit que chaque visiteur à un profil différent de par son périphérique d'affichage (écran d'ordinateur, ..) ou son navigateur.

Concrètement, 1200px de large c'est 210 de trop s'il l'on considère que beaucoup d'utilisateurs emploient encore des résolutions allant de 1024*768 à 1280*1024 (format 4:3 les plus répandus sur CRT)

De ce point de vue voici comment est est utilisé votre espace :

Un premier screenshot dans ma résolution native (1920x1080) afin d'illustrer les problèmes que j'évoquais plus haut, l'ensemble paraît désespérément vide :

http://omicronlab.net/upic/4b4ea654-ce1.png
Cliquer pour agrandir

Un second dans une résolution usitée (1024x768) :

http://omicronlab.net/upic/4b4ea75f-b5a.png
Cliquer pour agrandir

Constat : en 1024x768 un scroll (ascenseur) horizontal apparait, on dit que le "design déborde du viewport" (sort de la zone d'affichage utile), c'est à éviter.

// Début du chantier

D'emblée, fixer la largeur de l'ensemble à 990px et celle du contenu à 950px :

http://omicronlab.net/upic/4b4eb145-1cea.png
Cliquer pour agrandir

Laissons l'aspect structurel de côté un instant :

Akhilleus a écrit :
Un site web c'est avant tout [..] une logique organisationnelle. Avant de passer à l'étape de développement et de conception graphique, il y a toute une étape de réflexion quant à l'organisation du contenu, puis une autre liée à la présentation de ce dernier.

Cette réflexion commence par la question fondamentale : "À quoi va servir le site que je vais concevoir pour la personne qui m'a confié cette mission (toi en l'occurrence) ?" et "À quoi va servir ce site pour les visiteurs ?". Ces questions sont fondamentales car elles vont déterminer la façon dont tu vas hiérarchiser ton contenu et mettre au point la navigation au sein de celui-ci.

Il y a actuellement dans votre site un ÉNORME problème de cohérence au niveau de la navigation :

Edit (20/01/10) : petit contre-temps, disons qu'une réponse avant la fin de cette semaine me semble plus plausible

(je n'ai pas le temps de continuer l'analyse maintenant, j'y reviens dès que j'ai instant)
Modifié par Akhilleus (20 Jan 2010 - 10:32)

Merci à vous tous pour vos remarques. Elles me sont utiles.


@Hermann

C'est vrai que c'est le souk en fin de code. Je corrigerai tout ça (à dire vrai, j'en avais conscience, mais j'ai laissé les choses en l'état... ) ! Les observations sur la typographie sont intéressantes. J'avais déjà lu quelque part qu'il était plus confortable de lire des lignes n'excédant pas 70/80 caractères, ce qu'on observe dans la presse en ligne.
Si je comprends bien utiliser Georgia, augmenter le corps du texte (ce qui correspond à line-height en CSS ?) apporterait davantage de lisibilité ?

@ Akhilleus

Je sais bien que c'est fade

C'est le premier site que je fais et, une fois encore, j'ai fait avec les moyens du bord (l'écueil étant mes limites en matière de design, de CSS...). En revanche, je tenais à essayer de me rapprocher du support papier (le design tente d'être mimétique de ce support), c'est-à-dire des textes qu'on étudie en classe. Mais c'est fade, c'est vrai Alors comment apporter "quelques éléments atypiques" ? Je ne suis jamais parvenu à pondre un logo qui ne soit pas une indicible horreur !

Pour la taille du site, je m'incline. J'ai bêtement fait mon site d'après une résolution de 1680x1050. Une fois terminé, j'ai constaté benoîtement que j'avais fait une connerie. Je m'attellerai à la tâche dès que possible, mais je n'en ai pas encore eu le courage. Pourtant, il faut avouer qu'être obligé de scroller est assez agaçant.

@yann : les infos arrivent jeune padawan (je mets à jour ce post à mesure que j'ai le temps d'y ajouter des infos)

Comme vous l'avez souligné, il s'agit de votre premier site.

Il est possible de remédier à la plupart de ces problèmes de manière assez simple donc ne perdez pas courage. Vous avez pris l'initiative d'apprendre le Html/Css, ce serait dommage de renoncer si près du but. En matière d'autodidaxie plus qu'en toute autre, les leçons tirées des inévitables erreurs commises permettent un élèvement des compétences
Modifié par Akhilleus (14 Jan 2010 - 21:32)

y@nn a écrit :

Si je comprends bien utiliser Georgia, augmenter le corps du texte (ce qui correspond à line-height en CSS ?) apporterait davantage de lisibilité ?

Non font-size, line-height c'est pour l'interlignage Avec la propriété raccourcie vous pouvez l'écrire comme ceci :

font: 1.2em/1.5 Georgia, Baskerville..., Serif

le premier chiffre correspond au font-size et le deuxième au line-height.
Ne pas oublier la famille de police générique en fin de pile (Serif ici) ou cas ou aucune des polices déclarées dans la font stack n'est installée sur le système de l'utilisateur.
Augmenter le line-height par défaut qui varie en gros entre 1.1em et 1.3em (110% à 130%).
Un valeur comprise entre 1.4em à 1.6em donne de bons résultats en général (l'unité em n'est pas nécessaire pour line-height).

D'autre part éviter de vous servir des br pour ajouter une marge entre deux paragraphes (par exemple). A l'inverse du nbsp, le br (break) ne devrait servir qu'à forcer une coupure de ligne à l'intérieur d'un texte. Utiliser de préférence les marges verticales.
Modifié par Hermann (14 Jan 2010 - 23:02)

@ Akhilleus

Je suis tout à fait d'accord avec vous. Il n'y a pas d'apprentissage sans erreurs.
En venant ici, le mot "critique" prend tout son sens (elle est positive et négative). Il est vrai qu'il faut avoir une bonne dose d'humilité pour accepter les remarques qui sont faites (je pense à tout ce que j'ai lu dans cette rubrique, pas forcément à mon propre cas).

Ce n'est donc pas une séance de flagellation, mais une véritable et rare occasion de progresser, et je vous en suis vraiment reconnaissant, car je ne sais pas où j'aurais pu obtenir les précieux conseils qui m'ont été donnés. La seule chose qui me chagrine est le tas sans cesse croissant de copies qui s'agglutinent sur mon bureau et qui ne me permettront pas avant un moment de modifier mon site comme je le voudrais.

Il y autre chose. Je vois combien mon "savoir" est incomplet (il y a un tas de choses dont je n'avais jamais entendu parler). Il faut que je comble les lacunes (si vous avez quelques idées de lecture, je suis intéressé : tutoriels, livres...). Mais quand bien même cela sera fait, il restera une question assez épineuse pour moi : comment réaliser un bon design ? J'ai voulu être minimaliste (aurais-je pu faire autrement d'ailleurs ?), mais n'est pas minimaliste qui veut. On se retrouve vite confronté au vide ou (et) à la fadeur.

Vous parliez d'ÉNORME problème au fait... Dites-moi tout.


@ Hermann

Pardon de montrer tant d'ignorance, mais qu'appelle-t-on le corps exactement ? 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.

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)