<C²: webløg />

Courriel - email address

Avatar Denis

mercredi 02 juin 2004
par Denis Boudreau

Mise en ligne du nouveau CAMO

Logo du CAMO - Comité d'Adaptation de la Main-d'Oeuvre pour personnes handicapéesAprès quelques jours d'attente nous ayant permis de tester la robustesse du produit, c'est avec un plaisir non-dissimulé (mais nerveux tout de même de m'exposer ainsi les flancs à vous) que je vous annonce la mise en ligne du nouveau site du CAMO. Je vous en avait brièvement parlé la semaine dernière, sans trop vous donner de détails. Je dois avouer que dans l'ensemble, mon équipe et moi-même en sommes énormément satisfaits, ce qui est déjà beaucoup, compte tenu de ma tendance naturelle à me tanner de l'interface des projets sur lesquels je travaille.

Vous savez ce que c'est ; à force de dormir, boire et manger un site Web, à tous les jours sans relâche, même les projets les plus stimulants finissent par devenir lassants. Dans un tel contexte, je vous épargne mon opinion sur C², dont le design date de plus d'un an.

Pour plusieurs raisons par contre, dans le cas du CAMO ce fut différent. Le fait que la refonte du site soit entièrement conforme XHTML 1.0 strict, avec mise en page complètement gérée par CSS-2 et rencontrant les exigences en matière d'accessibilité de priorité 1 et 2 (plus certains éléments de priorité 3) n'y est sans doute pas étranger. Doublement normal me direz-vous, lorsqu'on sait que ce site représente un important organisme Québécois pour l'intégration à l'emploi des personnes handicapées.

Nous n'avons pas encore eu l'occasion de tester sur une plateforme autre que Windows, donc je ne sais pas encore à quel point le design s'y préserve convenablement. Je sais toutefois que dans les vieilles versions d'Internet Explorer, c'est un petit désastre, grâce à la déficience du modèle de boîte du navigateur de Microsoft. Comme je suis généralement contre l'utilisation des hacks, je n'y ai pas recouru encore, mais tout porte à croire que j'aurai à le faire dans un avenir plus ou moins lointain.

Je suis présentement à la recherche d'une solution intermédiaire satisfaisante. Encore une fois, c'est un comble de constater que l'on peut produire quelque chose de 100% respectueux des normes et quand même se faire servir n'importe quoi par un logiciel préhistorique incapable de traiter correctement l'information. "It's 1997 all over again", comme dirait Zeldman.

Comme toujours, je vous invite à me dire ce qui cloche... Même si je n'ai pas forcément le goût de l'entendre. ;-)

Denis Boudreau | 2004.06.02 @ 22:12

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2004.06.03 @ 05:02 par ElMoustiko

Le site semble fonctionner correctement sous linux (mozilla 1.1) a part peut etre en taille minimale ou le 'Recherche AtomZ' est coupé car decalé vers le haut et la gauche, donc illisible.Je n'ai remarqué aucun autre bug du point de vue de l'affichage. Je ne pourrais plus tester personnelement sur linux parceque c'est mon dernier jour à la fac pour cette année (Yippeee vive les vacances ! ) donc je retournerais sur mon bon vieux nid à virus. (ca pourrait faire un bon <acronym title='bon vieux nid à virus'>Windows</acronym> ! )
Voilà, en esperant avoir aidé !

@++

Haut retour au début de la page

2004.06.03 @ 06:13 par kty

Je voudrais soulever un petit problème:
J'ai consulter le site du CAMO sous Opéra 7.11 PC.
Et lorsque je veux changer la taille de la police par l'option proposée, voila le message qui s'affiche:
Redirected to


Generated by Opera ©

Mais je n'ai rien qui se passe. Je pense que ca doit venir du fait de l'import de css et c'est un peu génant du coup.

Voila ma contribution

Kty

Haut retour au début de la page

2004.06.03 @ 07:29 par Gilbert Paquet

Beau boulot !

Message clair, contenu bien organisé/structuré/pertinent/informatif, design 'lean and crisp' qui met bien en valeur le propos du client tout en informant le néophyte, téléchargement rapide, standards bien appliqués... Pas de quoi être gêné, au contraire. Mon seul petit bémol : l'espace dévolu à l'entête, en fait tout ce qui précède ton <div class='contenu'>, que j'émincerais. Mais bon, pas de quoi fouetter un chat. L'usage et les commentaires des utilisateurs de ce site vous donneront l'heure juste. L'occasion d'une seconde itération, en somme.

Encore une fois : 'nice job'.

Haut retour au début de la page

2004.06.03 @ 08:39 par ElMoustiko

Petite mise a jour de mes tests, je suis (toujours à la fac ! ) sur windows ... NT il me semble avec Mozilla 1.2.1 et j'ai une page d'erreur avec redirection sur clique d'un lien dans un cadre rouge vers : http://www.camo.qc.ca/sit... le message que me disant que j'utilise Netscape 5.0 (le même moteur que mozilla 1.2.1 ? ) et quand je regarde le screenshot je vois que ce que j'avais tout a l'heure sur linux (mdk version ? ) ne correspond pas tout a fait, il manque le menu horizontal du haut, et une partie du logo.

Voilà pour les tests sur linux mdk, mozilla 1.1 et windows NT mozilla 1.2.1. Sinon avec internet explorer 6.0 aucun soucis. (sauf que le lien http://www.camo.qc.ca/sit... me dis que j'utilise Microsoft Internet Explorer 4.0, alors que dans le 'a propos' c'est bien la version 6.0.

@++

Haut retour au début de la page

2004.06.03 @ 09:03 par thomas

Bonjour Denis,

Je suis sous Windows ME + Mozilla 1.6, et la mise en page de Camo n'est pas du tout bonne :o(...

Je reçois le message d'erreur 'Vous avez été dirigés vers cette page parce que le navigateur que vous utilisez (Netscape 5.0) n'est pas en mesure de pleinement supporter les standards Web qui composent la structure technologique de notre nouveau site Internet.'

Difficile de te préciser ce que je vois. La barre de menu (gris métallisé) apparaît verticalement au lieu d'horizontalement, et les sous-rubriques sont placées en escalier.

Haut retour au début de la page

2004.06.03 @ 09:05 par Eric Daspet

Je vais soulever un détail mais qui est important pour moi. J'ai le désagrément d'être très légèrement dislexique. Pas assez pour que ça perturbe ma lecture mais assez pour ressentir plus qu'un autre les problèmes de concentration nécessaire lors de la lecture.

J'ai donc par habitude voulu augmenter la taille des polices avec les boutons sur le coté. Quand je clique ma première impression a été 'où ai-je aterri ? pourquoi ai-je changé de page ?'

En fait le problème c'est que quand je suis en haut de la page je vois verticalement 3 éléments qui prennent chacun un tiers de l'écran :
- le bandeau avec logo et titre du site
- le bandeau avec les grosses images
- le début du contenu

Le premier bandeau est fait pour être identique sur toutes les pages. Le dernier était écrit trop petit pour moi et est beaucoup plus dense avec du texte. Du coup, ce qui m'a servi de référence visuelle c'est le bandeau du milieu avec les images. Quand en cliquant les images changent l'impact direct c'est 'je viens de changer de page'.

Je te propose quelques modifs (si ce n'est pas trop tard pour tout chambouler) :

- réduire la taille des deux premiers bandeaux. Les deux tiers de l'écran sur un 1024*768 c'est trop (les sous-pages sont beaucoup plus claire en partie grace à la diminution du bandeau intermédiaire)

- ne *pas* faire changer les images visibles ou pas quand on recharge la même page, et surtout pas quand on clique sur un lien qui n'est pas sensé faire changer de page (je peux admettre que ça change quand je rafraichi, mais pas quand je souhaite juste augmenter la taille des caractères)

- mettre plus en valeur le 'là où je suis' et le 'cette page parle de quoi'. Une solution c'est faire passer le titre de la page ('Actualités : Communiqués') dans le premier bandeau tout en haut (avec le titre du site). Mettre plus en valeur le 'Vous êtes ici :' peut aussi être utile.

Ce que je dis peut paraitre du détail mais j'ai réellement été perdu, pourtant je suis loin d'être inexpérimenté coté navigation Web. Je n'ose même pas penser à celui qui a de réelles difficultés.

Haut retour au début de la page

2004.06.03 @ 11:33 par Titus

Beau design, par contre j'ai un petit problème pour le changement de taille de police, ça m'envoie sur fontresizer.php?fontsize=5 mais après ça me redirige pas alors il faut que je revienne à la racine du site à la main (pas super pratique ;)

Config : WinXP + Firefox 0.8

Haut retour au début de la page

2004.06.03 @ 11:51 par Denis

Merci tout le monde pour les commentaires, je prend note de tout. N'hésitez pas à envoyer ce qui vous semble des problèmes, ou même des captures d'écrans, nous analyserons vos interventions unes à unes.

Haut retour au début de la page

2004.06.03 @ 12:15 par Benoit Piette

C'est drôle, puisque les commentaires que j'ai à donner ne sont pas au niveau du code qui est ma spécialité. Enfin, peut-être que c'est d'être de l'autre côté de la clôture. A prendre avec un grain de sel donc.

Ma plus grosse critique est du côté ergonomique, mais c'est subjectif je l'admet, je n'aime pas la métaphore du menu principal. En effet, lorsque quelque chose est cliquable (cursor:pointer), je m'attends à changer de page, ou à la limite à changer l'état de la page. La métaphore 'menu démarrer windows' n'est pas souvent utilisée sur le Web, du moins de cette manière (avec le l'élément parent à cliquer/sélectionner pour que les éléments enfants soient visibles). Enfin, cela a comme effet que deux cliques/sélections sont nécessaires pour changer de page. Je soupçonne qu'il y a une bonne raison pour que ce soit comme cela (Est-ce qu'une action sur un 'hover' est problématique pour certains handicapés ? Cela expliquerait l'absence d'événements sur la plupart des 'hover' sur les liens. Si oui, je vais avoir appris quelque chose aujourd'hui....)

Il y a aussi la hauteur de la section de haut qui change entre la page d'accueil et les autres pages. Le texte peut dépasser les boîtes lorsque la grandeur des textes est au maximum. J'utilise (Firefox sur Win2000 Pro)

Derniers commentaires, je trouve qu'il y a un peu trop d'images avec peu de signification sur la page d'accueil et que le slogan prend un peu trop de place.

Sinon, très beau site et félicitations!!!!!
Voir un site pour qui quelqu'un a payé valider XHTML Strict m'émeut, c'est beau... sniff :-)

Haut retour au début de la page

2004.06.03 @ 14:41 par Gloom

Même problème que ElMoustiko et thomas.

Je suis sous WinNT et, j'ai le problème avec Mozilla 1.6 et Opera 7.23, mais pas avec MSIE 6.0.xxx.

J'ai été voir par curiosité et je n'ai pas vraiment testé, comme le problème était évidant, j'ai laissé ce commentaire.

Haut retour au début de la page

2004.06.03 @ 16:46 par Emmanuel

Pour ma part, deux choses particulièrement me dérangent sur ce site :
- le choix d'une maquette rigide prévue pour 1024x768 (qui malgré cela fait apparaitre les informations trop bas dans la page à mon goût) ;
- le comportement des menus déroulants : je n'ai pas compris immédiatement qu'il fallait recliquer sur l'item pour fermer le menu. D'ailleurs je n'ai pas non plus compris qu'il s'agissait d'item à sous-menu car le survol simple ne faisait rien apparaitre.
- menu déroulant (bis) : celui du bas est à mon sens inutile, et, bien que son traitement visuel soit identique à celui du haut, il n'active pas de sous-menu.

Que n'as-tu fait en exposant ce travail à la critique Denis :-) C'est courageux.

Haut retour au début de la page

2004.06.03 @ 22:45 par Laurent Denis

Belle réalisation !

Quelques remarques constructives cependant ;) :
- le alt='Logo du CAMO...' : pourquoi ce 'logo du' qui n'apporte aucune information utile et s'avère vite lassant de page en page ? Il n'y a pas plus de raison de l'utiliser, AMHA, qu'il n'y en aurait de commencer chaque autre alt par 'Image représentant...'
- l'ancre id='primaire' devrait se trouver après les images, et non avant. Le contenu intéressant commence en effet juste après ;)
- la structure du label du formulaire de recherche : le label étant explicite (présence d'un for=), il ne devrait pas inclure les éléments du formulaire. Avec la structure actuelle, il y a un risque que le label soit considéré comme implicite et appliqué incorrectement au bouton submit en plus du champ de saisie (http://www.blog-and-blues...)
- Fournir un accès plus direct à la liste des accesskeys (sans le paragraphe d'introduction de la politique d'accessibilité). Un document spécifique, limité à un titre et à la liste.
- l'accesskey 'A' pour la politique d'accessibilité supplante le racourci clavier utilisateur : du coup, accès impossible au menu Affichage d'IEWin au clavier.
- Politique d'accessibilité, justement : 'un témoin inoffensif est déposé dans l'ordinateur de l'utilisateur'. Utilisons un langage directe et simple, et appelons un chat un chat : c'est un cookie, autant le dire.
- Je n'ai pas creusé, mais sur la page http://www.camo.qc.ca/sit... avec le javascript désactivé et Opera 7.50, je me suis retrouvé bloqué sur le formulaire de recherche en parcourant les liens avec la touche tab : impossible d'aller ailleurs que dans le formulaire.
- les rel des liens relatifs auraient avantage à utiliser autant que possible le vocabulaire normalisé HTML pour être mieux reconnus : 'start', 'section', 'help' en particulier.
- la table des matières (http://www.camo.qc.ca/sit... par exemple) devrait être donnée avant le contenu et non après, ou alors un lien devrait y donner accès en début de page. En l'état, il faut avoir parcouru ou écouté tout l'article pour la découvrir ;)
- J'ai eu un 'Vous avez été dirigés vers cette page parce que le navigateur que vous utilisez ( Opera 7.5) n'est pas en mesure de pleinement supporter les standards Web qui composent la structure technologique de notre nouveau site Internet.' Préciser peut-être qu'il faut aussi que les feuille de styles soient activées dans les navigateurs en mesure de supporter... Sinon, l'avertissement surprend ;)

Haut retour au début de la page

2004.06.03 @ 22:51 par Laurent Denis

Une dernière : sauf erreur de ma part, il manque un <link rel='schema.DC' href='http://purl.org/DC/elemen...' />

Haut retour au début de la page

2004.06.04 @ 00:10 par Laurent Denis

Décidément, ça tourne à la persécution, mais tu l'as bien cherché ;)
Je voulais relire justement un des excellentes ressources du CAMO, 'How Assistive Software Supports Web Accessibility'. Mais impossible de retrouver cet article en suivant le lien 'documentation' à partir de
http://www.camo.qc.ca/sit...
La recherche m'a sauvé, heureusement.
(Au passage, le template Atomz peut être manipulé assez finement, et notamment rendu valide XHTML1.0 transitionnel ou même strict (voir http://search.atomz.com/s...), si l'investissement est jugé valable)

Du coup, je suis un peu perplexe, et perdu, entre http://www.camo.qc.ca/hom...
et
http://www.camo.qc.ca/sit...
je suppose que c'est temporaire et lié au passage d'une version à l'autre ?

Bon, allez... Je te fiche la paix ;)

Haut retour au début de la page

2004.06.04 @ 04:42 par levy

alors sur mac os9 avec ie 5.1.2 c'est la pagaille

Les liens du haut (haut dessus du moteur de recherche) sont à peine visible (juste le trait de soulignement)

L'image de fond du header est transparent, on recupere les fonds des colones à la place.

Les images sont complètement en désordre les unes au dessus des autres au lieu d'être en ligne l'une derriere l'autre.

Il y a içi et là des problème de marge et de padding

Beaucoup plus génant le menu de navigation de la colone de droite se retrouve tout en bas de la page

Il y a une erreur javascript au chargement et lors de l'utilisation de la fonction de changement de taille de typo qui d'ailleur provoque des chevauchement quand on choisi le taille la plus grande

Derniere chose je critiquerais le menu du bas en image alors que c'est du texte arial qui aurait tres bien put etre stylé en css


Haut retour au début de la page

2004.06.04 @ 07:39 par Olivier

Problèmes aussi sur IE 5.2.3 sur Mac OS X. Liens du haut réduits à des traits. Menu de doite rendu en bas. Images n'importe où. Meus 'clic-déroule-clic' (je sais pas trop comment appeller ce nouveau concept) trop larges (la boîte va jusqu'à la droite de la page) et trop bas.

Ceux qui ne sont pas handicappés le deviennent en utilisant ce site avec un navigateur un peu trop ancien...

Il est encore trop tôt pour faire des sites en XHTML-CSS2 je pense, Ca fout trop de bordel dans les navigateurs anciens imparfaits (et il y a plus de gens qui les utilisent que d'handicappés qui ont besoin du XHTML-CSS2). Je ne comprends pas du tout la réaction de Benoît 'Voir un site pour qui quelqu'un a payé valider XHTML Strict m'émeut, c'est beau... sniff :-)'

Haut retour au début de la page

2004.06.04 @ 09:19 par Denis

Merci encore pour les commentaires tout le monde et tout particulièrement Laurent qui a fait une analyse assez poussée de la chose. Les problèmes observés au niveau de l'interface (particulièrement au niveau du Mac) concernent principalement le modèle de boite de IE. Faudra que je m'y attèle, question de passer les hacks nécessaires... Ce sont les mêmes problèmes qui sont observés dans IE 5.0 et 5.5 Win.

Les problèmes au niveau du JavaScript me surprennent par contre, faudra voir comment les régler (c'est particulièrement surprenant pour le trapping fait sur Opera qui redirige vers une version texte (pas terminée d'ailleurs) avec explication (pas plus terminée non plus). Mais pour tout ce qui est programmation JavaScript et PHP, comme je ne suis pas le cerveau derrière le code, je ne peux me commettre pour le moment.

Mais vous avez raison, je l'ai bien cherché. ;)

J'avais envie de le faire, ne serait-ce que pour montrer que dans une certaine mesure il est possible de faire quelque chose de pas mal sur un premier jet, qui soit accessible et conforme, tout en ayant un design le moindrement complexe. Avec les efforts nécessaires, nous allons rattrapper les faiblesses des vieux navigateurs et essayer (dans la mesure du possible) de satisfaire tout le monde.

Ainsi pour te répondre Emmanuel, j'ignore si c'étit courageux ou inconscient mais chose certaine, je savais que les critiques ne tarderaient pas à venir, compte tenu du niveau de compétences qui traine par ici ! :)

Dès que l'occasion le permet, je regarde tout ça, question d'améliorer le plus possible les résultats. Merci pour les remarques constructives ! C'est à la hauteur de ce à quoi je m'attendais de vous. :)

Tout ce qui touche aux éléments d'interface, c'est une question des choix du designer, que je voulais respecter au maximum, justement pour pouvoir dire que tout est possible à réaliser. MAi c'est clair qu'il y a un certain nombre de choses qui m'ont causé tracas (et certaines me dérangent encore comme vous pouvez vous en douter).

Répéter le menu en bas de page est simplement afin d'éviter le retour en haut de page pour naviguer et l'absence de sous-menu est également une considération technique.

Bon, assez causé... à bientôt.

Haut retour au début de la page

2004.06.04 @ 10:21 par Stéphane C

Bonjour Denis,

La mise en page semble être ignorée par mon Firefox. C'est un peu bizarre car tu as certainement dû tester. Alors, le problème est peut-être de mon côté ou ai-je vu une version intérimaire.

J'ai appris cette semaine l'existence de services qui donnent un aperçu de ce qu'a l'air une certaine page Web sous différents navigateurs et systèmes d'exploitation. Il suffit d'aller à ces adresses:
http://www.danvine.com/ie...
http://www.danvine.com/ic...

Haut retour au début de la page

2004.06.05 @ 15:56 par Nicolas Krebs

Vous pouvez remplacer tous les liens /site/apropos/index.php par /site/apropos/, donc sans le « index.php » final, si le serveur http est bien réglé. Les deux liens à droite dans la première page (-a href='http://www.camo.qc.ca/sit...' title='Données statistiques sur le fonds d'intégration'-http://www.camo.qc. ca/site/fonds/ fonds_04.php-/a-) sont ils des erreurs ? (-a href='http://www.camo.qc.ca/sit...' -Données statistiques sur le fonds d'intégration-/a-)

Remplacer « Homme ayant une déficience visuelle » par « Aveugle » comme texte décrivant http://www.camo.qc.ca/sit... ( http://www.w3.org/WAI/Ref... ) ?

Haut retour au début de la page

2004.06.09 @ 13:36 par Stéphane C

C'est encore moi qui a des problèmes avec Firefox 0.8. J'ai téléchargé l'extension User Agent Switcher (http://www.chrispederick....) et j'ai simulé quelques autres navigateurs.

Avec IE 5.5 ou 6, Netscape 7 et Opera 7.23, tout est beau! Les feuilles de styles /site/css/structure.php et /site/css/menuDropdown.css sont importées.

Je retrouve le moins beau rendu avec Netscape 4.8. Il semble qu'il y ait une détection du navigateur que j'utilise (Firefox 0.8 sur Windows NT4 dont l'userAgent affiché dans le source est:
<!-- Mozilla/5.0 (Windows; U; WinNT4.0; fr; rv:1.6) Gecko/20040206 Firefox/0.8 -->)
et qu'il soit associé à un vieux Netscape. Je veux bien admettre que mon vieux NT4 date un peu mais mon Mozilla est de la dernière version! ;-)

À vérifier!

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)

Carnet: Lancement de site: CAMO
Extrait: Le chat sort du sac! C'est Denis et son équipe les responsab...
Weblog: Dive The Web
Traqué le: 2004.06.03 @ 07:40