Pages :
(reprise du message précédent)

Salut AymericJ,

Je répond ici car les messages privés sont limités en nombre de caractères : impossible d'y écrire un roman. Smiley cligne

____________________________
SANS FEUILLE DE STYLE
* Le site est bien lisible. On trouve cette hiérarchie :
résumé -> évitement -> bannière -> menu -> fil d'Ariane -> contenu -> menu -> pied de page
L'idée de placer ce résumé tout en haut est intéressante, mais quel genre de contenu accueillera-t-il ?

* Si je désactive et les images et la CSS, le contenu alternatif de la bannière ne me donne pas le nom du site : "le logo - bannière" ; peut-être que "bannière AJCREA"...

____________________________
CSS ACTIVÉES
* Je trouve les liens d'évitement un peu compacts. On a presque l'impression qu'ils constituent une seule phrase. Peut-être faudrait-il légèrement espacer leurs LI ou intercaler un caractère quelconque (ex : & middot;).

* Si on pense accessibilité et handicaps, il ne faut pas oublier ceux moteurs, les personnes ayant du mal à bouger leurs membres et ou à coordonner leurs mouvements (et donc à cibler des zones trop réduites).
C'est pour ça qu'il est utile dans un menu de ne pas limiter la zone d'action au texte, mais de l'étendre quelque peu.
Si je passe ma souris entre un lien du menu et une barre verticale (en pointillé), c'est une zone d'espace vide. Agrandir le champ d'action des liens en leur conférant une zone cliquable plus large (s'étendant jusqu'aux barres gauche et droite) serait un plus.

* Je ne vois pas encore de comportement au survol sur les liens divers (évitement, menu...). C'est à venir ? (Même si c'est quelque chose de léger, ça évite de donner l'impression qu'un lien est "mort".)

* Il faut espacer quelque peu le dernier paragraphe qui se trouve trop près du menu inférieur. Un peu d'espace blanc en plus. Même chose entre le menu inférieur et le pied-de-page : ils semblent trop collés.
Une page trop dense perdra en lisibilité (malgré la taille et le contraste des caractères).

* La navigation par tabulation ne pose pas de problème. Il faudra tester avec le contenu ensuite.

* Pour la partie lisibilité pour les personnes souffrants de déficiences visuelles, ça me semble bon au niveau de la taille et du contraste. Mais pour le reste, mieux vaut un test par une personne directement concernée.
Pour se faire une petite idée, on trouve ici une barre d'outil façon web developper pour IE : http://www.visionaustralia.org.au/info.aspx?page=614

(Elle est moins complète ou pratique pour l'analyse de la structure d'un document, mais elle présente quelques fonctions sympas, commes celles simulants divers problèmes de vues : glaucomes, cataractes, perception réduites, daltonisme (plusieurs formes), rétinopathie diabétiques... et une vue façon lynx (sympa pour ceux qui ne l'ont pas installé).
(Mise en garde : chez moi, il y a une ou deux fonctions de simulations qui font déconner IE. Genre "daltonisme" doit ouvrir une nouvelle fenêtre, mais essaye d'en ouvrir sans cesse - reste plus qu'à virer le processus IE.)

* Peut-être faut-il un peu plus de contrast entre le blanc du contenu et le bleu clair du fond du BODY (qui gagnerait à être un peu plus foncé).

* Le problème précédent sur la phrase à moitié mangée est corrigé.
Si j'agrandis d'un point la taille du texte (sous Firefox toujours), une barre "blanche" apparaît sur l'entête au niveau de la base de la bannière.



Voilà ! Pour le moment, je ne sais plus quoi ajouter. Smiley smile
(Edit -- Je me suis quelque peu assoupi devant la télé... Smiley confused )
Edit 2 - J'avais oublié de bien relire, ce qui n'est pas gênant pour les petites fautes, mais j'avais utilisé un mot à la place d'un autre...
test -> texte :
a écrit :
C'est pour ça qu'il est utile dans un menu de ne pas limiter la zone d'action au texte, mais de l'étendre quelque peu.

Modifié par Smiley neko (19 May 2006 - 10:39)
Hello Neko,
Oops j'avais loupé ce message.
Merci d'avoir pris le temps de triturer le "truc".

Désolé pour les autres pour la comprehension, j'ai juste soumis à neko une page "test" de construction, si vous ne comprennez pas, ne vous inquiétez pas, c'est normal, dés que le "truc" est finalisé je le poste, promis juré. Smiley cligne

neko a écrit :

____________________________
SANS FEUILLE DE STYLE
* Le site est bien lisible. On trouve cette hiérarchie :
résumé -> évitement -> bannière -> menu -> fil d'Ariane -> contenu -> menu -> pied de page
L'idée de placer ce résumé tout en haut est intéressante, mais quel genre de contenu accueillera-t-il ?


En fait, la logique initiale de ce travail repose sur une reflexion tant technique qu'en terme de lisibilité/efficacité du contenu d'un document électronique en y intégrant l'idée que l'oeil choisit plus rapidement le contenu qui l'interesse que la main ou un lecteur d'écran/synthétiseur vocal, grâce à sa faculté de s'orienter dans l'espace et de filtrer l'information.
Je pense que tout type de page, quelle que soit l'information qu'elle vehicule devrait contenir un titre et un résumé explicite.
Après se pose la question de la barrière technique.

neko a écrit :

* Si je désactive et les images et la CSS, le contenu alternatif de la bannière ne me donne pas le nom du site : "le logo - bannière" ; peut-être que "bannière AJCREA"...


En fait initialement, il ne s'agit qu'un gabarit de page "brute", le contenu du alt est plus là à titre de "commentaire", le début d'ajout d'éléments graphique est juste là pour montrer une version (actuellement en construction) plus "finalisée" pour montrer que l'on peut greffer vrai design malgrés la construction initiale.

Je suis à 100% d'accord avec tes remarques au niveau de la mise en page, pour l'instant je n'ai travaillé que la partie technique, je vais essayer de finaliser une mise en page plus digeste pour terminer mon étude.

neko a écrit :

(Edit -- Je me suis quelque peu assoupi devant la télé... Smiley confused )


La télé c'est l'opium du peuple, c'est bien connu. Smiley cligne

En tous cas, merci encore, il me reste pas mal de boulot, mais j'y crois.
++
Aymeric
WoW que de travail effectué sur ce site ma fois très bien sous tout les aspects...

J'espère arriver à un tel niveau de comptence pour mon site perso ^^


J'aurai une question concernant la taille du site dynamique en fonction de la taille...

Comment ca marche ?
Cocci_uk a écrit :
WoW que de travail effectué sur ce site ma fois très bien sous tout les aspects...
J'espère arriver à un tel niveau de comptence pour mon site perso ^^
J'aurai une question concernant la taille du site dynamique en fonction de la taille...
Comment ca marche ?


Merci pour les compliments, ça fait toujours du bien et ça relance souvent l'enthousiasme. Smiley smile

Pour la question de taille de site "dynamique", il existe plusieurs sortes de designs appelés "fluides".
La méthode le plus fréquemment utilisée consiste à attribuer des tailles en % et non pas en px aux conteneurs (marges et autres joyeusetés) de façon à ce que ces conteneurs s'adaptent à la taille de l'écran, on les couple souvent avec des tailles minimums (exemple : min-width:780px;) et maximums (exemple : max-width: 1500px; ) qui elles sont en valeurs fixes pour délimiter les distortions maximales que l'on autorise à son design.

Pour mon site, j'ai préféré faire un design "fluide" qui s'adapte aux tailles de polices choisies par l'utilisateur, j'ai donc, plutôt que de prendre des pourcentages (%) pris des valeurs relatives en taille de police (em).

Si tu regardes la feuille de style de mon site :
http://www.aj-crea.com/inc_style.css

Tu verra que la plupart des largeurs (width), hauteur (height) marges extérieures (margin) et intérieures (padding) sont définies en xxem.

Les seuls paramètres en px sont ceux que je ne veux absolument pas voir modifiés par l'agrandissement des polices.

Personnellement je préfère ce type de design fluide mais ça n'engage que moi.

A savoir, je le trouve quand même difficile à mettre en oeuvre :
L'unité em porte bien son nom de valeur relative car l'espace pris par une unité em dépends de plusieurs choses :
- la police initiale utilisée
- La taille globale de la police utilisée : là c'est compliqué mais en gros :
Si je prends par défaut une taille de police em de 1em, je ferais un site d'a peu pres 47em de largeur, si je prends une taille de police de base de 0.7, il faudra passer la valeur a 68em.
- Il faut repenser tes images et fonds de façon à ce qu'ils restent logiques quand le site est agrandi, donc tu as au final des fonds plus grands que ce qui est visible par défaut.
- Pour finir, ça demande de travailler souvent avec des conteneurs imbriqués, on a tendance à vite entrer dans la divite aiguë.
Smiley smile

Wala wala
++
Aymeric, et j'ai pas fini de me prendre la tête.
Modifié par AymericJ (19 May 2006 - 17:25)
Merci pour ton explication soigné !!!

En faite l'lément principal qui me manquait c'était les min-width: et max-width !! Je les avait oublié !

Sinon il est vrai que la capacité d'adaptation au EM n'est pas très facile !

J'ajouterai qu'en plus des polices (type, taille.. etc) le type d'OS joue également.. Windows et Mac OSX par exemple n'ont pas les meme tailles (enfin il semble !!)
Exact, l'OS joue également.

Cecit dit, si on a bien blindé sa construction, on a certes des changements de taille du site, mais la structure ne change pas réellement.

J'ai fait le test en changeant la taille de police globale, en changeant la police utilisée, et globalement ça tient la route.

Pour rappel, il y'a un tutoriel AlsacréationS sur les design fluides :

http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions
Modifié par AymericJ (19 May 2006 - 17:20)
Pages :