Bonjour,

je ne vois pas grand chose à rajouter par apport au titre donc j'attends vos commentaires et critiques.

web-pour-tous.org

PS:en fait si il y a quelquechose à rajouter la feuille de style principale est pour l'instant assez bordélique.
Modifié par knarf (07 Jul 2007 - 20:39)
Salut,

Quelques remarques en vrac:

Je ne suis pas convaincu par la couleur principale du texte (bleu clair sur bleu foncé), j'ai un peu de difficultés à lire sur mon écran de portable avec une luminosité un peu réduite. Cette sensation est renforcée sous Safari (sous windows) qui à tendance (chez moi) à augmenter la graisse des caractères.

Le logo (et ses déclinaisons de couleurs) gagnerait à être retravaillé, pourquoi pas avec une autre typo, il passe un peu inaperçu.

Les flèches des menus font penser à l'apparition de menus déroulant. Sur certaine rubriques (Initiation au web) ces flèches sont un peu trop présentes à mon goût, peut-être leur présence pour marquer la rubrique est-elle de trop.

Le formulaire de recherche mériterait un bouton de validation (ah SPIP et son formulaire de recherche Smiley smile .

L'ancre d'accès au contenu mériterait d'être améliorée:
<a name="contenu" href=""></a>

en

<a href="#contenu" id="contenu" name="contenu"></a>


pour des questions de reprises de focus sous IE.

Voilà c'est tout pour le moment. Smiley smile
Salut igor,

merci d'avoir pris un peu de ton temps Smiley cligne .

a écrit :
Je ne suis pas convaincu par la couleur principale du texte (bleu clair sur bleu foncé), j'ai un peu de difficultés à lire sur mon écran de portable avec une luminosité un peu réduite. Cette sensation est renforcée sous Safari (sous windows) qui à tendance (chez moi) à augmenter la graisse des caractères.


Je crois que c'est ce qui m'a posé le plus de problème, pas facile de trouver le juste milieu entre un contraste suffisant et un contraste pas trop important pour éviter une fatigue rapide lors de la lecture comme cela se produit par exemple avec un fond noir et une police blanche.

J'avais justement dans un premier temps essayé le blanc mais j'avais l'impression de me casser les yeux après un certain temps de lecture, puis je suis passé à un gris ou là j'avais l'impression inverse, une fatigue venant d'un manque de contraste et demandant une attention plus importante.

Comme il fallait bien trancher à un moment j'ai opté pour ce bleu que je trouvais être le juste milieu ni trop ni trop peu.

Il reste une autre possibilité inverser complétement les couleurs de liens et la couleur du texte mais à ce moment là je me retrouve devant le même problème, quelle couleur utiliser sur la partie bleu pour les liens du contenu.

a écrit :
Le logo (et ses déclinaisons de couleurs) gagnerait à être retravaillé, pourquoi pas avec une autre typo, il passe un peu inaperçu.


L'idée était de laisser un maximum de place au contenu et permettre d'en voir un maximum (menu compris) dans de petite résolution donc c'est pour cela que le logo est assez petit, je ne peux pas non plus trop m'étaler en largeur pour ne pas que la recherche chevauche le logo en cas de redimensionnement là je sais que le menu de confort, le logo et la recherche rentre dans du 800*600 ou dans du 1024*768 avec une barre latérale. Pour la typo je voulais quelquechose de simple et facilement lisible, mais effectivement c'est peut être un peu trop simple et trop petit à revoir donc en fonction d'autres retours éventuels.

a écrit :
Les flèches des menus font penser à l'apparition de menus déroulant.


Au début c'était juste des bordures et j'ai ajouté des flèches sur le hover et la rubrique active donc pour uniformiser le tout j'ai enlevé ces bordures et rajouter ces flèches cela ne m'avait pas du tout sauté aux yeux mais maintenant que tu le dit j'ai tendance à ne voir que cela je vais donc aller au plus simple et ne rien mettre du tout sur les liens au repos.

a écrit :
Sur certaine rubriques (Initiation au web) ces flèches sont un peu trop présentes à mon goût, peut-être leur présence pour marquer la rubrique est-elle de trop.


Ouais et puis il y a la couleur et le lien du menu pour marquer la rubrique, je vais essayé sans au moins sur la rubrique utilisateur pour permettre une comparaison (avec, sans) en attendant d'autres réactions.

Est-ce que tu as le même sentiment dans les listes situées dans les articles?

a écrit :
Le formulaire de recherche mériterait un bouton de validation (ah SPIP et son formulaire de recherche.


Ha oui là c'est complèment passé à la trappe Smiley cligne

Pour les ancres j'avoue que je ne comprends pas.

Pour moi le seul problème d'IE concernait la non présence d'un href vide sur l'ancre en elle même.

Après tests le seul problème que j'avais rencontré c'est que j'avais fait une erreur de dénomination entre le lien et son ancre dans les rubriques et articles mais je crois l'avoir réparer partout.


Je ferais les modifs nécéssaires d'ici 2 ou 3 jours il faut d'abord que je termine la mise en page du site d'un magasin bleu se trouvant pas loin de l'hotel d'Angleterre Smiley cligne
Salut Igor,

j'ai apporté des modifs

- Passage de la police en blanc (sauf sur les listes normalement)
- La recherche
- les flèches sur les menus et sur la rubrique utilisateurs (même chose sur le plan juste la rubrique utilisateurs) pour permettre de comparer avec les autres.
- J'ai également raccourci le menu et les liens de la rubrique en cours

Pour l'instant je n'ai rien changé sur le logo je n'ai pas eu trop le temps.

Mais bon, pas facile de se faire une idée sur tous ces changements, par exemple pour la police j'ai vraiment l'impression que cela me fatigue plus vite.
Salut,

knarf a écrit :
Mais bon, pas facile de se faire une idée sur tous ces changements, par exemple pour la police j'ai vraiment l'impression que cela me fatigue plus vite.

J'allais te dire, je suis pas très reposé et j'ai les yeux un peu fatigués ce matin, mais je lis à peu près normalement sur Alsa, mais pas sur ton site, où je peine à focaliser sur ce que je lis.

La police choisie joue effectivement, mais aussi son contraste par rapport au fond qui fait mal aux yeux.
Le texte en blanc lorsqu'il n'est pas en gras est souvent fatiguant, sauf en grande taille. Il vaut mieux l'avoir légèrement grisé ou coloré pour éviter celà.

Mais il n'empèche qu'un texte en défonce est toujours plus difficile à lire. Une solution serait d'agrandir systématiquement la taille de typo par rapport au même texte en noir sur blanc. Mais dans ton cas je trouve qu'elle est déja suffisamment grande.
a écrit :
Le texte en blanc lorsqu'il n'est pas en gras est souvent fatiguant, sauf en grande taille. Il vaut mieux l'avoir légèrement grisé ou coloré pour éviter celà.


C'est pour cela qu'au départ j'avais fini par choisir le bleu donc je suis revenu à cette couleur.

Pour la taille de typo effectivement je pense que je ne peux pas agrandir plus.

Pour la police sauf erreur de ma part il n'y as pas beaucoup de choix arial, verdana, Georgia, Trebuchet
Modifié par knarf (12 Jul 2007 - 11:52)
Salut Knarf,
dans l'ensemble ça à l'air assez propre mais j'aurais quelques remarques :

> l'emplacement non conventionnel du logo est son traitement graphique (dans une bulle, manque de contraste avant le fond, choix d'un typo à empattement non appropriée...) brouillent son identification comme logo du site. En gros son statut de logo n'est à mon avis pas assez évident.
Celui-ci doit en général apparaître en haut à gauche avant tout le reste.
Rien de t'oblige à te soumettre à cette convention mais son traitement doit au moins répondre aux critères formels qui permettent d'identifier instantanément son statut.

> le fond noir est un peu glauque je trouve.
> tes lignes de texte sont un peu trop longues, pour une lecture optimale, le nombre de caractères par ligne ne devraient pas dépasser 70 (une dizaine de mots environ), ceci dit c'est bien d'avoir pensé à interligner d'avantage.
> Comme l'explique Mikachu, choisir une couleur plus neutre pour le texte.
> tu devrais indenter un peu tes sous rub. (Les différents handicaps, etc.)
> le centrage de "Rechercher" en haut n'est pas très heureux et ne se justifie pas.

Bonne soirée Smiley cligne
Modifié par Hermann (12 Jul 2007 - 21:59)
Salut Hermann,

Dans l'absolu c'est le menu d'accessibilité qui doit être visible et atteignable en premier.

Comme j'en ai marre de voir des sites avec un menu carrement invisible ou presque, ou relègué je ne sais où avec une police minuscule, je m'étais fixé une contrainte.

Le menu à gauche en premier et bien visible.

C'est un site qui traite d'accessibilité donc la première chose que l'on voit c'est le menu d'accessibilité.

Il n'y a pas que les aveugles qui surfent sur le net, l'accessibilité est utile à tous et donc doit nettement être visible par tous.

Comme je ne voulais pas d'un menu rectiligne coincé tout en haut et qu'il est normalement convenu que dans le flux ce menu doit être en premier il n'était pas possible d'avoir le logo à cette place.

J'avais essayé avec le logo à gauche et le menu de confort juste après.

Je me retrouvais avec une navigation au clavier assez bizarre, confort au centre, logo à gauche et je me faisais jetter sur la recherche à droite, même en faisant en sorte que le focus soit bien visible (IE compris) je ne trouvais pas cela logique et pas facilement apréhendable.

Là j'ai une suite sur toute la ligne menu confort, logo, recherche.

J'avais la solution de mettre la recherche à gauche avec le menu pour minimiser cette effet, mais j'avais l'impression de me retrouver avec un agglomérat d'informations à cet endroit et une sensation de vide sur le coté droit.

Autre chose, qui a guidé mon choix pour cette disposition.

En admettant que je le fasse rectiligne ce menu centré et bien visible donc prenant une place tout de même conséquente et que cela me laisse la possibilité de placer le logo à une place conventionnel c'est à dire à gauche, cela fait redescendre la citation, et le menu, et je voulais garder un maximum d'infos présente sans scroll en 800*600 par exemple comme la citation et une bonne partie du menu.

là en 800*600 on doit voir la citation en entier et même qu'il existe un menu webmaster.

Mais je me fait peut être trop de noeuds à la tête ou pas les bons?

a écrit :
Rien de t'oblige à te soumettre à cette convention mais son traitement doit au moins répondre aux critères formels qui permettent d'identifier instantanément son statut.


Je me retrouve donc dans cette position, mais où il faut que je fasse un sérieux travail sur le logo.

a écrit :
le fond noir est un peu glauque je trouve.


Alors là je suis ouvert à toutes propositions, car c'est un choix de dépit après de multiples essais.

a écrit :
tes lignes de texte sont un peu trop longues, pour une lecture optimale, le nombre de caractères par ligne ne devraient pas dépasser 70 (une dizaine de mots environ), ceci dit c'est bien d'avoir pensé à interligner d'avantage.


Oui c'est une chose qu'il faut que je travaille en plus si tu est dans une assez grande résolution cela doit faire des lignes assez longues.

a écrit :
Comme l'explique Mikachu, choisir une couleur plus neutre pour le texte.


Je l'ai rapidement repassé dans une des couleurs que j'avais choisi au début #e1e1e0.

a écrit :
tu devrais indenter un peu tes sous rub. (Les différents handicaps, etc.)


J'ai doute là, tu parle bien de les aligner par rapport à mes titres?

Si c'est bien cela c'est fait.

a écrit :
le centrage de "Rechercher" en haut n'est pas très heureux et ne se justifie pas.


Rectifié.
Modifié par knarf (13 Jul 2007 - 15:06)
OK avec tout ce que tu as dis mais sache que la zone en haut à gauche est souvient dédié a l'identité graphique car c'est la zone la plus visible et en même temps un des moins accessible pour un contexte d'utilisation standard (avec souris).

knarf a écrit :

Je me retrouve donc dans cette position, mais où il faut que je fasse un sérieux travail sur le logo.

Oui une réale (typo à empattement triangulaire > Times, Georgia...) n'évoque rien de ce à quoi est destiné ce site.
Faire plutôt le choix plus standard d'une linéale (lettres bâton) universellement établie et reflètant la diversité... Ensuite bien penser au plus haut niveau de contraste possible entre le nom du logo et son fond.

knarf a écrit :

Oui c'est une chose qu'il faut que je travaille en plus si tu es dans une assez grande résolution cela doit faire des lignes assez longues.

C'est un des problèmes essentiels que posent les sites à largeur fluides.
Penses au colonnage.

knarf a écrit :
J'ai doute là, tu parle bien de les aligner par rapport à mes titres?

Pas forcément, tu aurais pu les décaler par rapport au titre
mais c'est bien comme ça Smiley cligne
Modifié par Hermann (13 Jul 2007 - 22:43)
Bonjour à tous,

j'ai rectifié certaines choses sur une page seule à cette adresse

http://cyraxel.ovh.org/testwpt/index.html


Le logo (police différente et couleur plus claire qui restera fixe)

La couleur de fond

J'ai limité la largeur avec un max-width et j'ai centré le tout pour éviter d'avoir un site collé à gauche et une partie droite toute vide.

Pour IE6 qui connais pas la langue j'ai utilisé un petit script trouvée sur alsa pour le simuler.

Pour limiter le fait que cette partie gauche soit plus difficile à atteindre j'ai augmenté la zone cliquable du menu d'accessibilité.

@>Hermann

Je n'ai pas mis la première version car moi non plus je ne trouvais pas le menu d'accessibilité terrrible placé ou il était.
Modifié par knarf (18 Jul 2007 - 05:38)
Salut knarf,

Je ne viens pas m'immiscer dans la conversation mais ton texte dans la page est peu accessible :
Phrases longues, mots compliqués, incises et digressions.

À qui s'adresse ton site ?
Que vas-tu apporter ?

Tout ce que je voudrais savoir sur la première page, de manière concise et directe pour ne pas être obligé de naviguer avec ma plage Braille ou ma loupe d'écran avant de me rendre compte que c'est pour des techniciens...
J'ai relevé deux fotes :
principaux intéressés
essayer d'aborder

Excuse mon interruption.
knarf a écrit :
Bonjour à tous,
J'ai limité la largeur avec un max-width et j'ai centré le tout pour éviter d'avoir un site collé à gauche et une partie droite toute vide.

Ok pour la diminution de la largeur même si la justification (largeur de colonne) est encore un peu trop élevée. Rien ne t'empêche de mettre une marge gauche plus importante même si celle-ci n'a aucune utilité concrète contrairement à un texte imprimé. Cela permet d'ouvrir un espace de respiration et d'introduire une dissymétrie.
Ceci dit la calage à gauche n'était pas gênant, bien au contraire puisque tu as un menu à gauche...

La mise ne forme de ton texte est encore défaillante sur au moins un points:
> l'ensemble est trop uniforme, pas suffisament accidenté par des points de focalisation (mis en exergue de certains mots, liens, etc).
Une première lecture d'un texte fonctionne en général par bonds successifs du regard.
Modifié par Hermann (18 Jul 2007 - 20:43)
En général, le choix d'un fond foncé et d'une police clair est faite pour privilégier la lecture des déficients visuels. Or le font-size est tellement petit que meme avec 10/10 aux 2 yeux je fatigue avant la fin du premier paragraphe ...
Dommage pour un site qui s'appelle web pour tous Smiley cligne
Bonjour Gunner,

a écrit :
Or le font-size est tellement petit que meme avec 10/10 aux 2 yeux je fatigue avant la fin du premier paragraphe ...


Le font-size est de 85% cela devrait donc donner une police relativement acceptable à part sous Opéra (j'ai pas encore trouvé pourquoi) ou effectivement le rendu n'est pas le même.

Tu as quoi comme config pour que cela te paraisse " tellement petit " ?
knarf a écrit :
Bonjour Gunner,
Le font-size est de 85% cela devrait donc donner une police relativement acceptable à part sous Opéra (j'ai pas encore trouvé pourquoi) ou effectivement le rendu n'est pas le même.


Opera pause en effet souvent quelques problèmes quand il s'agit d'obtenir exactement la même taille de police. Son système d'arrondi fonctionne différement.
Solution: trouver LE bon pourcentage pour que la taille s'aligne sur les autres navigateurs.
knarf a écrit :
Tu as quoi comme config pour que cela te paraisse " tellement petit " ?


Opera 9.22 en 1024 x 768 sur écran 17" ...
sous Opera sous 0.9 la police est vraiment fatiguante ... Smiley murf