[http://www.aj-crea.com] Demande d'analyse

Bonjour à toutes et à tous,

Wala, wala, ayhé je craque.

Après une semaine de boulot pour refaire mon site "conforme" CSS/XHTML, j'ai enfin réussis à tout faire valider par ce satané W3C.

Allons rapidement à l'essentiel et ensuite je colle mes commentaires et explications de la demande.

[EDIT] Snip l'ancien site.

Le tout nouveau site plus zoli tout plein avec du zoli code tout propre XHTML stric et feuille de style CSS :
http://www.aj-crea.com
La feuille de style :
http://www.aj-crea.com/inc_style.css

[EDIT] j'ai édité les Urls, le site étant passé en exploitation, même si je vais continuer à l'améliorer.

Au passage ce fred va me servir de todo list parce que à force d'avoir la tête dans le projet j'en fini par oublier des trucs.

Navigateurs :
Fonctionne sous FF 1.5.0.1 et sous IE 6 (petit décalage au niveau du footer à regler).
Testé sous Opera par Vero sans problèmes notoires.
Testé sous Safari sur Mac sans problèmes notoires.

CSS :
Pour le moment ça fontionne, surement des trucs qui vous sembleront bizares (trucs en trop/ redondants, etc), je suis "novice" en la matière et me suis formé en chopant des sources à droite et à gauche et en bidouillant jusqu'a ce que j'obtienne le(s) résultat(s) voulu(s).
Au passage, je m'excuse d'avance du "pillage" mais y'a tellement de bouts pris à droite et a gauche et resaucés que je sais plus d'ou j'ai pris quoi.

Design général :
Pour le moment ça me convient, mais comme toujours je suis preneur de toutes critique/analyse.
[EDIT] La barre est plus ou moins finalisée.
Le look du formulaire est a finir et il va falloir que j'y ajoute un javascript pour effacer le contenu du champs cliqué.
J'etudie également les techniques d'habillage de blocs (principalement pour finaliser l'habillage des listes).
[EDIT]Traailler certains contrastes visuels (Mpock et Vero).

Argumentaire :
Je suis en train de recentrer mon activité et l'argumentaire de la homepage est loin d'être encore définitif, je viens de le refaire et va me falloir un peu de recul pour le repenser et le finaliser.
Idem toute idee/critique est la bienvenue.

Accessibilité :
La ça reste encore assez flou pour moi, j'ai essayé de faire le plus propre possible.
[EDIT] Les liens d'évitement à l'étude merci Vero again.

[EDIT] Arglll oui, euhh vous inquiétez pas pour les titres et autres métas, je ne les ai pas remis encore dans la new version. J'ai une référencement actuel assez interessant et son analyse fait partie de ma todo list avant de les refaire pour la nouvelle version du site.

[EDIT2]
Rajout à la todo list : une page de plan du site.


Wala, merci d'avance aux interneux de bonne volonté.

PS : oui c'est de l'asp vous ne rêvez pas, y'a encore des vieux cons qui ont appris le code avec ça. ^^ PHP ce sera quand j'aurais fini d'integrer les milliards de trucs en cours.
Modifié par AymericJ (06 Apr 2006 - 15:48)

Bon ok je vais me pendre. ^^

Non, non, ce serait idiot de se pendre pour ça !

Mais, au fait :

Bonjour !


Ca va ?

Bonsoir,

J'ai pas grand chose à dire, je trouve tout ça plutôt bien fait... (tant au niveau code que design)

Bon, alors en cherchant bien :
1) une erreur de syntaxe dans la page "creation_print" révélée par le validateur
(minuscule erreur d'inattention )

2) je pense qu'il faudrait que l'option en cours du menu principal en haut soit identifiée (par un changement de couleur), parce que là, on ne sait pas trop où on est (à part grâce au titre)

3) certains pourraient penser que le "slogan" (en haut de page à droite) en bleu sur fond vaguement bleu ne se voit pas assez (pbm de contraste)...
Mais là, c'est vraiment pour chercher qque chose à critiquer

AymericJ a écrit :


Lool, Oui oui ça va Vero, à part que je sors de 2 jours de jury de formation ou j'ai recalé 3 personnes, ce qui n'est pas évident à gérer.

Pas des heures pour poster tout ça.

C'était juste pour te dire que si nous nous étions croisés dans l'ascenseur, tu aurais sûrement engagé la conversation autrement :

Bonjour, pour commencer, cela passe partout (pas de risque majeur)...et cela ne prend pas des heures !

Sinon :

- Je n'ai noté aucun problème d'affichage sur Opéra (ni sous Konquéror)

- Je partage l'avis de Mpok concernant les contrastes

- Le slogan, sympa en passant, occupe en mon sens trop de place dans la bannière : un peu moins imposant, cela serait plus classe (c'est juste "un petit conseil"!)

- Pour l'accessibilité : rajouter des liens d'évitement, pour commencer, c'est facile.

Voilà, espérant avoir contribué à t'éviter la pendaison, je te souhaite une bonne continuation !

Modifié par Vero (06 Apr 2006 - 13:22)

Vero a écrit :


C'était juste pour te dire que si nous nous étions croisés dans l'ascenseur, tu aurais sûrement engagé la conversation autrement...

Tatatata, on sait comment ça se passe lorsque les gens se croisent dans les ascenceurs, un timide bonjour entre les dents, un ou 2 souris "forcés" pour au final verifier si on a pas un tache sur ses chaussure en faisant semblant d'apprécier la musique de richard clayderman le temps du voyage.

Vero a écrit :

Bonjour, pour commencer, cela passe partout (pas de risque majeur)...et cela ne prend pas des heures !

Bon ok, je vais revoir mes notions de politesse, j'avoue avoir eu un petit passage à vide au niveau du savoir vivre sur le coups, ceci dit à ma décharge, je me demande si à 1 heure du matin on dit bonjour ou bonne nuit.

Vero a écrit :

Sinon :
- Je n'ai noté aucun problème d'affichage sur Opéra (ni sous Konquéror)

Ok merci, ça me fait un soucis en moins.

Vero a écrit :

- Je partage l'avis de Mpok concernant les contrastes

J'y travaille, j'y travaille.

Vero a écrit :

- Le slogan, sympa en passant, occupe en mon sens trop de place dans la bannière : un peu moins imposant, cela serait plus classe (c'est juste "un petit conseil"!)

Petit conseil que je prends en compte de bon coeur, quelque chose me chagrinait et je n'arrivais pas à mettre le doigts dessus, c'est peut être ça, je vais tester d'autres versions (également au niveau du contraste comme Mpock me l'a signalé).

Vero a écrit :

- Pour l'accessibilité : rajouter des liens d'évitement, pour commencer, c'est facile.

Hop en rajout à la todo list.

Merci de m'avoir évité la pendaison j'etais sur le point de valider ma commande chez cordesetpoutres.com.

AymericJ a écrit :

Bon ok, je vais revoir mes notions de politesse, j'avoue avoir eu un petit passage à vide au niveau du savoir vivre sur le coups, ceci dit à ma décharge, je me demande si à 1 heure du matin on dit bonjour ou bonne nuit.

Bah, on essaie juste de respecter les règles du forum, que ce soit le jour ou la nuit ... Et c'est tellement plus convivial !

Modifié par Vero (06 Apr 2006 - 15:06)

J'ai édité mon message initial et je m'excuse platement de cet oubli.
Autre forum autre moeurs, j'avoue avoir en général l'habitude de forums ou une fois que l'on s'est présenté en arrivant (ce qui fut mon cas sur ce Fred, même si je souhaite souvent le bonjour à la fin de mes messages), et un tant soit peu participé, on finit par prendre des largesses avec les règles de politesses élémentaires se sentant un peu chez soi.

Mais fi de longs discours, promis à partir de maintenant je fais attention.
Modifié par AymericJ (06 Apr 2006 - 14:43)

Rebonjour les gens.

Suite a ce qui a été dit ici et ce que j'ai glané comme informations à droite et à gauche, j'ai retravaillé le site de plusieures façons :

- essayé de faire évoluer les parties d'accessibilité, principalement au travers de liens d'évitement et de raccourcis clavier.

- Je me suis basé sur la todo list de opquast.com pour retravailler au maximum en partant de bonnes pratiques.

Ce qui nous donne au final le site actuellement en ligne :
www.aj-crea.com
le css :
www.aj-crea.com/inc_style.css

Donc de nouveau si une ou des ames charitable passaient par là pour me dire si ce que j'ai fait au niveau de l'accessibilité est correct, j'en serais très heureux.

Vous remerciant d'avance,
Aymeric

a écrit :
Dans ma source, les textes sont en "dur" c'est à dire que globalement les lettres accentuées sont telles quelles (é et non pas é par exemple).
Sachant que ma cible est uniquement locale.française, veut'il tout de même, principalement pour des raison d'accessibilité repasser l'ensemble du texte en encodage ou cela n'a pas d'incidence particulière?

Bonjour,

Avec le charset utf-8, en tout cas, tu peux utiliser directement les caractères accentués.

Ok merci Thierry.
Pour le moment je suis en iso-8859-15, ça semble passer sur la plupart des navigateurs sans soucis. Je verais bien au cas ou à passer en utf8 si necessaire.

Bonjour les gens, ettt oui, me revoila.

Toujours dans ma démarche de recherche de qualité (standards et accessibilité) je suis passé à la phase 3 de modification de mon site :
Le design fluide.

Et franchement ce n'est pas une mince affaire.

j'ai choisi de me positionner sur une taille "fixe" du site, mais évolutive en fonction de l'agrandissement du texte.
C'est une démarche interessante car elle force à "repenser" son graphisme en fonction de différents agrandissements.
Jusqu'a une certaine limite, car on se trouve à un moment confronté à un problème de poids final de la page. (c'est pour cela entres autres que pour le menu principal je n'ai pas "agrandi l'image" mais répété le fond en verifiant que c'était lisible).

La site actuel :
http://www.aj-crea.com
La feuille de style :
http://www.aj-crea.com/inc_style.css

Ce que je voulais :
- Que le site s'agrandisse en fonction de la taille d'affichage des polices sans se "détruire".
- Réorganiser l'ordre d'affichage des contenus texte pour une lecture plus aisee avec des navigateurs texte, ou sans afficher les styles, ou avec un lecteur d'ecran. L'organisation que je desirais etait la suivante :
1 - liens d'evitements
2 - logo
3 - menu principal
4 - contenu "important de la page
5 - informations de droite
6 - Informations de gauche
7 - menu bas

Je n'ai pas mis le contenu "important" en premier, il est accessible rapidement via les liens d'evitements et le menu principal n'est pas très long.

- Alléger et "clarifier" ma feuille de style, il y reste encore 2 ou 3 bidouilles, mais elle me semble "propre", à moins qu'on me dise le contraire.

- Eviter la "divite" aigue pour la mise en page et utiliser plus profondement les possibilités de mise en page des "blocs".

- Garder un design "clair" et lisible quelle que soit la taille des polices.

- Toujours me conforter aux bonnes pratiques Opquast et autres.
- Rester valide Xhtml strict et css.
- Avoir le même rendu sous IE et FF.

Je pense sincèrement être arrivé à un résultat satisfaisant, mais à force d'être le nez dessus, on perd une certaine objectivité, c'est donc pourquoi je redemande très humblement des avis extérieurs.

Merci d'avance ,
Aymeric

Bonjour,

Une petite remarque sur le lien d'evitement "aller au contenu" si je navigue au clavier et que je tabule une fois le lien utilisé, le focus est pris sur le logo et non pas dans le contenu si un lien est présent.


Sur le page d'accessiblité l'action pour un web accessible dès maintenant n'est pas une initiative de web-pour-tous mais de sebastien billard (si mes souvenirs sont bon) et qui à été organisée et mise en forme sur le forum d'alsacréations.


EDIT:

Un scroll important en cas de redimensionnement de la police sous IE 2 fois.

aprés cela dépends de l'importance donnée aux informations qui se trouvent à droite.
Modifié par knarf (04 May 2006 - 13:17)

knarf a écrit :
Bonjour,
Une petite remarque sur le lien d'evitement "aller au contenu" si je navigue au clavier et que je tabule une fois le lien utilisé, le focus est pris sur le logo et non pas dans le contenu si un lien est présent.

Hmmm là j'avoue que je nage, si tu as une solution technique à me proposer, je suis preneur.

knarf a écrit :

Sur le page d'accessiblité l'action pour un web accessible dès maintenant n'est pas une initiative de web-pour-tous mais de sebastien billard (si mes souvenirs sont bon) et qui à été organisée et mise en forme sur le forum d'alsacréations.

Ahhh désolé, j'ai par défaut utilisé le lien en rapport avec le logo, encore une fois, si tu as une proposition de remplacement à me faire, je prends.

Merci à toi,
Aymeric

Pour le lien "aller au contenu" il suffit d'utiliser une ancre dans le bloc voulu et non pas l'id de ce bloc.

Utiliser cette syntaxe:

<a name="nom_ancre" href=""></a>

Sans le href vide IE patauge dans la semoule.

pour l'action peut être amener cela autrement sans préciser que c'est une initiative de web-pour-tous même si l'adresse tends vers celui-ci

knarf a écrit :
Pour le lien "aller au contenu" il suffit d'utiliser une ancre dans le bloc voulu et non pas l'id de ce bloc.

Utiliser cette syntaxe:

<a name="nom_ancre" href=""></a>

Sans le href vide IE patauge dans la semoule.

Checké, intégré, publié. Ca marche sans problèmes. Le pire c'est que j'avais testé un truc similaire à un moment, mais à cause d'un pb de validation j'avais laissé tomber. du coups ça marche et c'est valide.

Pour le redac, je vais retravailler ça un poil.
[Edit]J'ai changé le redac. Ca c'est fait.

Encore merci d'avoir pris le temps de vérifier ça.

Du coups j'ai vu un léger décalage sous IE pour la page presentations, je sens que ça va encore etre galere. ^^
Modifié par AymericJ (04 May 2006 - 14:11)

Bonjour,

a écrit :
Sans le href vide IE patauge dans la semoule.

C'est probablement parce que c'est un lien vide (ce qui est d'ailleurs déconseillé). L'alternative au href="" serait donc d'utiliser un "& nbsp;".
Modifié par (04 May 2006 - 14:16)

Attention, attention je lance le jeu d'enquète du jour. ^^

Vous avez du temps à perdre? Vous aimez les challenges? Alors ce jeu est pour vous.

sur le site AJcréa, y'a un bug, tout petit bug me direz vous (euhhh le premier qui dit que y'en a des tonnes bennn, voila quoi) mais qui m'ennerve au plus haut point :

Sur cette page :
www.aj-crea.com/presentation_ajcrea.asp
Y'a un tout petit pixel de decallage. si, regardez bien, là à droite.
Et sur celle-ci :
http://www.aj-crea.com/page_accessibilite.asp
On en voit plusieurs.

Bien sur uniquement sur IE (je suis sur IE6 sous win2k, ça fait pareil sous XP pro).

Sachant que tous les contenus des pages, hormis le central sont des includes, que ces includes sont les mêmes pour toutes les pages.
Que la structure est la même partout. Et que toutes les autres pages sont bonnes.

Je part à la recherche de l'origine de ce truc, si quelqu'un veut s'amuser à chercher de son côté, le premier qui trouve a droit à euhhh....toute ma consideration? ^^

Ahh oui je viens de voir 1 choses :
Pour neko, ce que voulais dire Knarf, c'est que sans l'ancre sur un href (vide ou non) IE se perd dans les ancres.

Pour knarf :

a écrit :
Un scroll important en cas de redimensionnement de la police sous IE 2 fois.

aprés cela dépends de l'importance donnée aux informations qui se trouvent à droite.

J'avais zappé cette remarque, en fait c'est un peu ce que j'ai désiré, que si la personne agrandit le texte, qu'elle ne se retrouve pas avec des textes enormes dans une structure etriquée, mais que le site s'étende en fonction, d'ou le scroll horizontal quand on agrandit les polices, mais le site grarde sa structure de navigation.

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.

____________________________
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.
(Edit -- Je me suis quelque peu assoupi devant la télé... )
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 (19 May 2006 - 10:39)