Pierres Lyriques en Béarn des Gaves

Bonjour à tous !

Je viens de créer un site pour l'association d'un ami, comme le site parle d'art ... j'ai essayé de le faire dans les règles de l'art !

Mais les outils automatiques de vérification de la sémantique et de l'accessibilité ne me semblent pas très pertinents, ne prenant pas en compte les compromis qu'il faut souvent faire .
Je préfère donc interroger des êtres humains !

Merci de me donner votre avis sur mon site concernant :
- sa sémantique,
- son accessibilité,
- sa lisibilité,
- sa logique de navigation ...
Mais je suis ouvert à toute remarque concernant :
- son comportement en fonction du navigateur (je n'ai que Firefox, Opéra et IE sous la main),
- sa vitesse de chargement sur les petits débits,
- et bien sûr : son design !

Voilà l'adresse : http://pierreslyriques.free.fr

Cliquez sans crainte ! Mon site est valide XHTML Strict et CSS, sans pop-up ni pub !

Merci à tous !
Modifié par VirtualFred (14 Jul 2006 - 14:41)

Bonjour,

Je vais te donner mon avis au niveau du design. Il y a un certain nombre de points qui ne me plaisent pas trop :

- Je trouve ton bandeau un peu grand, avec le gros titre rouge en dessous ça fait beaucoup. J'aurais peut-être mis le nom de l'association sur le bandeau au même niveau que le logo et pas forcément en rouge.

- je n'aime pas trop le gris du fond de ta page, je le trouve trop triste.

- le raccord entre le bandeau, le pied de page et le corps de la page c'est pas top. On voit l'ombre du bandeau et du pied de page qui s'arrête net, ça fait pas terrible. Je crois que tu devrais mettre une couleur différente pour le body background et le fond de ton corps de page. La continuité entre ton bandeau le corps de page serait plus sympa.

Voilà ma première impression.

Amicalement.
Modifié par Otto Didact (09 Jul 2006 - 19:05)

Bonsoir à tous !

Merci de me donner ton point de vue, le rouge et le noir sont les couleurs de l'association, j'ai réussi à convaincre le directeur de ne pas avoir un fond noir ... alors je ne peux pas lui enlever le rouge !
A l'origine la partition manuscrite servait de fond à toute la page, mais pour avoir une belle qualité d'image pour ceux qui ont une forte résolution d'affichage, je me retrouvais avec un fichier énorme, insupportable pour ceux qui ont des bandes passantes raisonnables .
Le choix du gris, c'est un compromis de lisibilité et je le trouve reposant ... j'ai essayé autant que possible de rendre les pages plus chaudes avec un texte coloré et de nombreuses photos.

D'autres avis concernant ma requête initiale ?
Modifié par VirtualFred (14 Jul 2006 - 14:41)

bonjour,
Trois petites choses sur ce site :
- l'absence de signature : on ne sait pas quel est le champ d'intervention de cette association. D'ailleur à ce jour je n'ai pas bien compris ce que faisait cette dernière ???
- le deuxième point concerne l'ergonomie/design : ton menu supérieur gagnerait à être intégré dans ton image d'en-tête (c'est-à-dire l'image du parchemin). Actuellement la séparation "visuelle" entre le menu et l'en-tête me parait incongru.
- Le choix du traitement du titre de chaque section me semble peut heureux ; revenir à plus de simplicité améliorerait l'ensemble.


Voilu
Modifié par fredmac (10 Jul 2006 - 00:29)

Salut,

Visuellement, je trouve ca un peu trop brut.
Dans le sens de lecture de la page :
- Le fond: le gris utilisé est triste, tu peux mettre un gris un peu plus coloré histoire de pas être aussi terne, mais un peu plus convivial.
- Le menu : Avec ses boutons gris il n'est pas trop intégré au graphisme parchemin/partition développé plus loin. Pourquoi ce orange au survol ? Quel rapport a-t-il avec la couleur du logo ?
- la bannière : trop haute, ne contient aucune information quelconque sur le but du site, le titre du site, etc., le logo ne parlant pas de lui même.
- Le titre : compliqué et dur à lire en rouge sur gris avec cette ombre noire, le tout dans une typo difficile à lire naturellement.
- "L'association Pierres Lyriques en Béarn des Gaves est heureuse de vous accueillir sur son site" : C'est bien trop gros, pour une information dont tout le monde se moque ! L'internaute est accueilli sur tous les sites par ce genre de formule, la mettre discrètement oui, mais la placarder de façon si ostentatoire ne présente pas de réel intérêt.
- La photo qui suit : Comme la bannière, elle est trop haute, et même si elle donne une ambiance, ce qui est une bonne chose, mais elle n'apporte rien et ne justifie donc pas cette grande taille.

Petit récapitulatif à cet endroit de la page, je suis en 1280x960, je n'ai PAS ENCORE lu une seule information susceptible d'attirer réellement mon attention, et je suis obligé de faire défiler le site pour en savoir un peu plus savoir de quoi il s'agit... C'est un peu désagréable.
Je continue :

Le texte en dessous : Très gros, les lignes sont interminables, et encore je ne surfe pas sur mon 1600x1200... Il serait bon de faire des lignes plus courtes, histoire de créer de vrais paragraphes, et de ne pas obliger au lecteur à suivre la ligne des yeux en revenant vers la gauche pour aller à la suivante.
Le plan du site : pas mal, mais encore une typo trop grosse.
Le footer : Même remarque que pour la bannière, c'est bien trop gros et visuellement trop présent, alors que ca ne contient aucune information quelconque.
Les infos de bas de page. Ne pourraient elles pas être présentes sur le footer au lieu d'être en dessous, créeant alors un espace à fond gris identique au fond du site au dessus ? Visuellement ca renforce encore ce footer déja trop présent.

Pour conclure, je pense que ton site manque d'une structuration graphique plus forte, ton graphisme et ton contenu doivent intimement se lier et non s'affronter comme présentement.
De plus, tes textes sont bien trop gros, il est bien de songer aux gens qui ont des difficultés, mais il ne faut pas pénaliser pour autant les gens qui n'en ont pas et qui s'y retrouve par la présence d'un texte bien trop gros. Le tout est une question d'équilibre entre la taille et le contraste, pour que la lisibilité soit optimale pour la plupart des gens.

Concernant la taille de la bannière, suite à la remarque d'Otto Didact, j'ai resserré un peu le haut mais je ne souhaite pas trop en rajouter sur la partition pour lui laisser son côté "vrai".

Pour ce qui est de tes remarques, Fredmac, ton idée du menu intégré à la partition me semble excellente ... bien que là aussi, elle serait dénaturée ... je garde précieusement ton idée sous le coude !
Le "champ d'intervention de cette association" est expliqué dans les 5 premières lignes de la page "Présentation" ... mais ta remarque souligne qu'il faudrait une petite phrase de présentation sur l'accueil.
Mais pour mon choix de traitement du titre, si tu parles bien du texte rouge en relief et ombré, c'est nettement plus joli qu'avant, à mon goût du moins ... ce texte image est doublé du même texte en alternatif au cas où ...

Au fait, dois-je comprendre que mon site est compatible avec ton navigateur sur MacIntosh ?

Merci pour vos avis ... personne pour la sémantique etc ... ?
Modifié par VirtualFred (14 Jul 2006 - 14:41)

Tiens c'est bien que tu parle de code :

a écrit :
<a href="partenaires.php" title="Nos partenaires" accesskey="40">Nos partenaires</a>

Tu as un clavier mieux que le mien, j'ai pas de touche "40" sur mon clavier...
De plus c'est bien beau de mettre des accesskeys, mais il serait bien de les divulguer aux internautes qui ne sauront pas les deviner à moins d'aller farfouiller le code, mais bon tout le monde n'a pas forcément l'âme de l'explorateur en quête de déchiffrer ce genre de code...

a écrit :
<style type="text/css">
body
{
}
</style>

Ca tu peux le virer, en l'état ca ne sert pas ^^

a écrit :
<meta name="description" content="L'association Pierres Lyriques en Béarn des Gaves créé des spectacles lyriques professionnels et des stages de formation vocale" />

Ca ca mériterait d'être dans le site dans le contenu de la page d'accueil.

Sinon pour le reste, ca semble assez propre.
Modifié par Mikachu (10 Jul 2006 - 01:07)

Les esprits critiques sont là ! Très intéressant tous ces avis, il n'est pas toujours facile de prendre du recul ...

Concernant les accesskeys, franchement j'ai honte parce que ce sont des tabindex que j'ai cru mettre !!! D'ailleurs, seraient-ils utiles vu la structure de mon site ?

La balise body vide c'est un reste que je remplis avec un background pour certaines pages ... promis, je vais nettoyer tout ça !

Le problème de la taille de la police est plus génant ... en fait, je pense que le problème vient du fait que la 1ère police est la "Monotype Corsiva", plus petite elle est difficilement lisible, mais elle est surtout apparement très rare ... la police suivante est alors utilisée mais est nativement plus grosse, d'où le résultat exagéré.
Il faut donc que je trouve un jeu de polices de taille homogène ... c'est noté !

Bien compris pour la phrase de présentation visible sans scroller ... j'en fais une priorité !

Merci pour toutes ces critiques ... même si ça fait mal ... quel soulagement quand je lis en fin de message :

a écrit :
Sinon pour le reste, ca semble assez propre.

Modifié par VirtualFred (26 Jul 2006 - 17:09)

Difficile d'ajouter quelque chose après le passage de Mikachu mais je vais quand même dire ce qui me dérange le plus.

Premièrement, le design du menu n'a rien à voir avec le reste du site et est mal placé; il devrait être juste après ton header.

Ton header et ton footer sont comme plaqués là comme deux images distinctes dans la page sans une réunion harmonieuse entre les deux. De plus, les deux parties prennent trop de place et ne devraient surtout pas s'agrandir lorsqu'on étire le cadre de la fenêtre.

Finalement, je trouve moi aussi que les textes sont bcp trop gros.

Puisque je m'emmerde un peu ce soir, pour m'amuser, j'ai pris quelques minutes pour mettre en image ce que j'ai dite plus haut http://img250.imageshack.us/img250/2447/sanstitre17kw.png

Bonjour à tous !

Tout d'abord Largowin, j'applaudis l'effort ! Ta mise en image a été un choc pour moi : c'est exactement mon projet initial ! A part que moi, j'ai la partition originale et que le menu restait au sommet, détails plus bas.

Cela dit, voilà pourquoi j'ai abandonné ce design :

- les portées en arrière-plan, même avec un contraste fortement atténué, rendaient le texte difficilement lisible,

- je sais que le 800x600 est encore présent de nos jours, mais je ne voulais pas pénaliser tous les autres parce que, à mon goût, je vois trop régulièrement des designs qui n'occupent que 40% à 60% de l'espace des résolutions modernes... ma priorité dès le départ était donc de faire un design 100% extensible (c'est un parti pris ),

- je n'ai pas réussi à faire un fond extensible en background ... et avec une image, je me suis trouvé face à un triple problème : la taille du fichier pour garder un beau fond en grande taille, échec d'ajustement du texte sur l'image avec certains navigateurs et sur les pages avec beaucoup de hauteur de texte, l'image trop courte avec donc un texte qui descendait plus bas que le fond.

Concernant le menu, je suppose que ton navigateur ne supporte pas le position:fixed, parce que j'ai voulu un menu qui reste au sommet de la fenêtre quand on descend dans la page afin d'éviter de scroller pour y avoir accès (hack !important pour IE6).
Reste effectivement à le personnaliser davantage ... je l'ai honteusement pioché sur AlsaCréations !

J'ai déjà corrigé quelques erreurs soulignées par Mikachu ... mais pour le reste il faudra que je repense tout le design en reprennant du départ ... à suivre !

Merci pour tout ce temps passé !

Je reste ouvert aux autres remarques ...
Modifié par VirtualFred (14 Jul 2006 - 14:42)

J'oubliais : j'adore ce que tu fais Largowin ... même si c'est un peu étroit à mon goût !
Modifié par VirtualFred (14 Jul 2006 - 14:42)

Salut,

a écrit :
Bien compris pour la phrase de présentation visible sans scroller ... j'en fais une priorité smile !

Je pensais plus à voir un peu plus du contenu du site sans scroller, pas que cette phrase la !

a écrit :
Le problème de la taille de la police est plus génant ... en fait, je pense que le problème vient du fait que la 1ère police est la "Monotype Corsiva", plus petite elle est difficilement lisible, mais elle est surtout apparement très rare ... la police suivante est alors utilisée mais est nativement plus grosse, d'où le résultat exagéré.
Il faut donc que je trouve un jeu de polices de taille homogène ... c'est noté ravi !

J'avais pas regardé ca dans ta feuille de style, mais :

a écrit :
font-family:"Monotype Corsiva", Pristina, "Microsoft Sans Serif", serif;

Il y'a quelque chose qui me dérange quand dans ta liste tu propose des typos serif et d'autre sans... Il faut que tu choisisse un des types mais pas les deux, sinon en cas de substitution, à taille égale ces polices ne se lisent pas du tout pareil, et visuellement ca ne rendra pas non plus pareil.
Je reste toujours fidèle à mon idée que les typos serif n'ont pas vraiment de place sur nos ordinateurs, car si elle se lit assez agréablement sur papier, il n'en est rien avec la luminosité de nos écrans. Il fait d'ailleurs partie des points de controles de l'accessibilité comme priorité de niveau 2
le fait d'utiliser des typo sans serif. .

A propos des polices, et la certains me reprendront peut être, je ne sais pas, mais en regardant ta feuille de style, je vois que tu respécifie des jeux de polices différents au fil de ta feuille de style... Il me semble plus logique de la spécifier une fois pour toute au début de ton document, de choisir une famille et une seule (et aussi quelques polices spéficiques de cette famille), et de s'y tenir tout au long du document. Ajouter des jeux de familles différents, c'est augmenter le risque de voir arriver encore plus de polices de substitution en cas d'absence de ces polices sur l'ordinateur de l'utilisateur. Cela va très vite dénaturer totalement l'aspect du site.
Modifié par Mikachu (10 Jul 2006 - 11:56)

Bonsoir ,

En me renseignant, j'ai pu voir que le choix des polices, contrairement à ce qu'on pourrait penser, ce n'est pas si simple !

J'ai suivi ton conseil, Mikachu, je suis revenu à des polices plus conventionnelles et polyvalentes ... à regret d'ailleurs !
Mais je suis bien d'accord : il ne sert à rien d'utiliser une police dont une minorité d'internautes profitent, surtout quand les autres en patissent.
J'en ai profité pour revoir la taille du texte à la baisse ...

Les couleurs du site sont rappelées dans le menu ... même si je m'attends à des remarques du genre : "C'est trop sombre !"

Un texte de présentation est maintenant lisible sans "scroller" même en 800x600 .

Pour le reste, comme ça sous-entend d'abandonner mon idée de base (100% extensible, design léger ...) je m'y attaquerai plus tard .

Toujours à l'écoute de vos avis ...
Modifié par VirtualFred (14 Jul 2006 - 14:42)

J'ai apporté une petite modification touchant au menu en Javascript : les sous-menus disparaissent lorsque la souris redescend sur le corps de la page ...
Modifié par VirtualFred (14 Jul 2006 - 14:43)

Bonjour,

J'ai essayé de rendre mon site accessible, l'ordre de navigation via la touche "tab" me parait logique, les images ont toutes leurs textes alternatifs, le menu est doublé dans la page pour ceux qui ne peuvent l'utiliser à cause du Javascript ...

Mais j'aimerai connaitre l'avis de ceux qui utilisent un lecteur d'écran ... alors, Laurent Denis, si tu me lis et si tu en as l'envie ... j'attends impatiemment ton commentaire avisé !

Merci.

Edit : J'ai créé un post dans la rubrique "Accessibilité du Web et handicap" qui me parait plus adaptée : http://forum.alsacreations.com/topic-6-16168-1-Mon-site-estil-accessible--Quel-comportement-sous-navigateur-vocal-.html
Modifié par VirtualFred (14 Jul 2006 - 15:22)