Demande d'avis à propose de la-nuance.be

Bonjour à tous !

Voilà un petit temps que je consulte les forums d'Alsacreations ainsi que toutes les autres ressources qui sont mises à dispositions. Je vous remercie plus que tout pour les aides précieuses que ça m'a apporté.

J'ai déjà réalisé plusieurs sites, mais jamais je n'avais osé demander un avis et/ou critique fasse au codage et au design de ces derniers. Sûrement par peur de trop de critiques ... Mais je vais prendre sur moi car si critiques il y a, elles ne pourront qu'être bénéfiques pour le projet et mes autres à venir.

Voici donc l'adresse temporaire avant lancement officiel du site : http://www.biloduo.be/la-nuance

Merci d'avance en tout cas,
biloduo

Bonjour,

C'est je trouve graphiquement assez réussi, en adéquation avec le sujet du site, les tons choisis, l'agencement, l'ambiance générale qui se dégage.

Toutefois si le code est assez propre, l'utilisation d'image d'arrière-plan css pour véhiculer des informations importantes, me semble à revoir. En premier lieu le titre du site et les titres principaux de chaque page. Pourquoi ne pas mettre ces images directement dans le code si elles ont une utilité qui te fait utiliser un niveau de titre ?
Le logo du site, s'il était clicable çà serait bien, personnellement j'ai instinctivement cliqué dessus sans effet .

D'autre part à quoi peut bien servir le titre de niveau h3 "contenu" sur chaque page systématiquement affublé de la classe "invisible" qui correspond à un vilain "display:none" ?

Tu as également sur chaque page une citation qui serait mieux servie en utilisant la balise "blockquote" qui sert aux blocs de citation.

Plus généralement je pense que tu confies beaucoup trop de choses à ta feuille de style, là où tu n'en as pas besoin et qui relèvent du contenu.
Ta feuille de style comporte également beaucoup d'"id", là où des classes seraient suffisantes, ou plus sûrement en se contentant de l'héritage des propriétés de styles.

ps: faut pas avoir peur

bonsoir ...

meme impression de mise en page réussie , tout en 'nuances' ...

je mettrai quelques bémol sur les images choisies , comme celle sur la page d'acceuil qui fait penser plus à un site sur le mariage (2 mains , 1 bague), ou les
couleurs pour la photo de la maison ..

Je n'aime pas trop l'intitulé et la typo "Menu" qui ne s'intègre que moyennement .

Concernant le texte du chapitre (mon parcours) , je trouve l'approche assez légère avec des mots comme 'par hazard' "se documenter" qui pourrait laisser penser à une maitrise 'superficielle' du métier de masseuse ...(mettre plus en avant ses compétences ), avec une meilleure accroche ..

mais c'est vraiment une 'lecture' très personnel
Et le site en lui-meme rend bien cette ambience de quiétude
Modifié par kzone (01 Feb 2007 - 03:32)

Bonjour Igor et kzone,

Tout d'abord, merci pour les félicitations et critiques faites ... J'ai essayé de toujours réfléchir à ce que je mettais dans mon code et je vais essayer d'expliquer certains de mes choix. Je ne dis pas que c'est peut-être la meilleure façon de faire, et s’il y a erreur de ma part je n'hésiterai pas à me corriger ...

a écrit :
l'utilisation d'image d'arrière-plan css pour véhiculer des informations importantes, me semble à revoir.

J'utilise se système car j'estime que pour une personne n'ayant pas de navigateur visuel, si on place des images comme le logo ou les images en h2, ils ne pourront pas accéder à l'information. De même si on utilise un navigateur à synthétiseur vocal. D'ailleurs, il me semble que Alsacreation.fr et de nombreux autres sites utilisent aussi cette technique.

a écrit :
Le logo du site, s'il était clicable çà serait bien

Entièrement d'accord! Petit oubli de ma part, je vais y remédier !

a écrit :
D'autre part à quoi peut bien servir le titre de niveau h3 "contenu" sur chaque page systématiquement affublé de la classe "invisible" qui correspond à un vilain "display:none" ?

Je n'arrive pas à retrouver le site expliquant cette technique, mais elle est de nouveau utilisée pour les navigateurs non visuels. Il s'agit de titrer le texte qui suit pour signaler s’il s'agit du contenu, du menu, des signatures du site, ...

a écrit :
Tu as également sur chaque page une citation qui serait mieux servie en utilisant la balise "blockquote" qui sert aux blocs de citation.

C'est pas con, et je n'y avait pas pensé ! Je transforme ça au plus vite ! Merci

a écrit :
Ta feuille de style comporte également beaucoup d'"id", là où des classes seraient suffisantes

Il me semblait que dans la différence entre id et class c'est que les id doivent être utilisé dans le cas où c'est un bloc unique et les class pour des mises en forme utilisée de manière répétitive dans une page. Ici les id corresponde toujours à une zone unique ... Est-ce que le fait d'utiliser id par rapport à des class est plus néfaste ou plus lourd ???

a écrit :
je mettrai quelques bémol sur les images choisies , comme celle sur la page d'acceuil qui fait penser plus à un site sur le mariage (2 mains , 1 bague), ou les couleurs pour la photo de la maison ..

Je n'avais pas imaginé cette interprétation pour la photo d'accueil. À la base cette photos était prévue pour la page contact et une photo de massage était prévue pour l'accueil ... Serait-ce mieux?

a écrit :
Concernant le texte du chapitre (mon parcours) , je trouve l'approche assez légère avec des mots comme 'par hazard' "se documenter" qui pourrait laisser penser à une maitrise 'superficielle' du métier de masseuse ...(mettre plus en avant ses compétences ), avec une meilleure accroche ..

Ce n'est pas faut, je vais voir avec la personne s'occupant du texte pour y remédier ...

a écrit :
mais c'est vraiment une 'lecture' très personnel

C'était bien le but en soumettant le site aux critiques et chaque impression que pourrait avoir un futur utilisateur est importante à mes yeux!

Merci encore pour vos deux avis,
biloduo

Salut,

J'aime bien l'élégance et la sobriété de ce site mais certaines choses me choquent un peu.

Comparé au contraste voulu léger dans la totalité du site, je trouve que les photos sont très crues, hyper saturées et prennent beaucoup le pas sur la lecture du site. En effet, les couleurs sont tellement vives que l'oeil va indéniablement les regarder et occulte le texte.
Il faudrait les décontraster un peu, pour qu'elles répondent à l'esprit du site, notamment dans les rouges. Quand on montre de la peau, il faut éviter que ça apparaisse la saturation rouge (qui fait penser à de la viande), et la saturation jaune (qui fait penser à la maladie), et trouver un juste équilibre.

La proportion ainsi que le contraste entre la typo "menu" et le guillemet ouvrant dans la colonne droite est un peu étrange, car ton guillemet est plus gros et plus foncé que la typo "menu". Peut être faudrait-il le réduire et lui donner la même couleur que la typo "menu" pour diminuer sa présence visuelle.

Le lien vers la page remarque passe presque inaperçu, j'ai vu la page 3 fois avant de me rendre compte qu'il s'agissait d'un lien. Pourquoi lier cette page par un lien aussi discret en bas de page, alors que cela semble important quand on la lit ? Ne faudrait-il pas soit avoir un lien dans la colonne à droite, soit un lien plus évident en bas de page ?

Bon sinon, j'y ajouterai une discrète couleur de contraste, car même si les photos ont des couleurs assez chaudes, et même si tu les désature un peu, je pense qu'il est bien d'ajouter une couleur chaude très discrète dans le texte pour le rendre plus attractif.

Attention, dans la page remarques il y a une faute :
"Il est contre-indiqué de se faire massé en cas de :" il faudrait écrire "masser".

biloduo a écrit :

l'utilisation d'image d'arrière-plan css pour véhiculer des informations importantes, me semble à revoir.

J'utilise se système car j'estime que pour une personne n'ayant pas de navigateur visuel, si on place des images comme le logo ou les images en h2, ils ne pourront pas accéder à l'information. De même si on utilise un navigateur à synthétiseur vocal. D'ailleurs, il me semble que Alsacreation.fr et de nombreux autres sites utilisent aussi cette technique.


Oui, les textes HTML masqués via CSS et remplacés visuellement par des images CSS ont été à la mode, hélas.

Mais le résultat est amusant pour l'utilisateur ayant, par exemple, coché l'option d'accessibilité "désactiver les couleurs" dans son navigateur graphique

(Pour essayer dans IE: menu Outils > Options Internet > Accessibilité...)

En revanche, les images HTML dotées de l'attribut alt correctement renseigné sont précisément faites pour être accessibles quelque-soit le contexte utilisateur.

Les astuces CSS de remplacement par des background sont à proscrire. Définitivement.
Modifié par Laurent Denis (01 Feb 2007 - 10:30)

Coucou Mikachu et Laurent,

Les remarques faites sont très intéressantes !

J'ai déjà changé pas mal de choses dans mes pages dans ce sens, mais il me reste certaines questions ...

a écrit :
Comparé au contraste voulu léger dans la totalité du site, je trouve que les photos sont très crues, hyper saturées et prennent beaucoup le pas sur la lecture du site. En effet, les couleurs sont tellement vives que l'oeil va indéniablement les regarder et occulte le texte.
Il faudrait les décontraster un peu, pour qu'elles répondent à l'esprit du site, notamment dans les rouges. Quand on montre de la peau, il faut éviter que ça apparaisse la saturation rouge (qui fait penser à de la viande), et la saturation jaune (qui fait penser à la maladie), et trouver un juste équilibre.

Voilà j'ai modifié les contrastes des photos et leur saturation en rouge et jaune ... qu'en penses-tu maintenant ?

a écrit :
La proportion ainsi que le contraste entre la typo "menu" et le guillemet ouvrant dans la colonne droite est un peu étrange, car ton guillemet est plus gros et plus foncé que la typo "menu". Peut être faudrait-il le réduire et lui donner la même couleur que la typo "menu" pour diminuer sa présence visuelle.

J'avais remarqué le problème de couleurs différentes, mais à mon grand étonnement c'était bien la même couleur !!! Donc j'avais laissé ... mais comme tu fais la remarque et que je l'avais également notée, j'ai foncé la typo de "Menu" pour qu'elle paraisse aussi foncée que les guillemets. Pour ce qui est de la taille de ces derniers, je l'ai modifiée également comme tu l'avais fais remarquer et c'est vrai que ça donne mieux!

a écrit :
Le lien vers la page remarque passe presque inaperçu, j'ai vu la page 3 fois avant de me rendre compte qu'il s'agissait d'un lien. Pourquoi lier cette page par un lien aussi discret en bas de page, alors que cela semble important quand on la lit ? Ne faudrait-il pas soit avoir un lien dans la colonne à droite, soit un lien plus évident en bas de page ?

Le lien a été ajouté dans le menu comme dans la toute première version bêta que vous n'avez pas vue ...

a écrit :
Bon sinon, j'y ajouterai une discrète couleur de contraste, car même si les photos ont des couleurs assez chaudes, et même si tu les désature un peu, je pense qu'il est bien d'ajouter une couleur chaude très discrète dans le texte pour le rendre plus attractif.

Là par contre je ne comprend pas du tout ce que tu veux dire ... . Désolé ... Pourrais-tu me l'expliquer ?

a écrit :
Attention, dans la page remarques il y a une faute :
"Il est contre-indiqué de se faire massé en cas de :" il faudrait écrire "masser".

Merci

a écrit :
En revanche, les images HTML dotées de l'attribut alt correctement renseigné sont précisément faites pour être accessibles quelque-soit le contexte utilisateur.

Les astuces CSS de remplacement par des background sont à proscrire. Définitivement.

Merci pour cette information, je n'étais vraiment pas au courant de ce problème ... Par contre ça me pose un autre problème ... Ici, je considère que "La Nuance - Massage sensoriel" est le titre principal de la page d'où un h1. Seulement, je ne veux pas qu'il s'affiche comme cela mais sous forme de logo.
Maintenant que je sais que ça pose problème, comment faire pour garder ce h1 ? Car si je mets l'image du logo puis un alt sur l'image, il ne sera jamais considéré comme titre principal de la page (h1) ... Ou alors il existe peut-être une astuce ... des idées ?

<h1>
  <img... alt="La Nuance - Massage sensoriel">
</h1>

est un titre <h1> parfaitement correct et interprété comme tel n'importe où par n'importe quel agent utilisateur.

Suis-je bête ... n'avais pas pensé à mettre l'image dans le h1 ...

Merci

J'ai un petit reproche qui n'a rien à voir avec les standarts (quoique c'est éventuellement une question d'ergonomie) :

Quand je suis arrivé sur le site, je me suis dit :

a écrit :
Chouette, un site sur un professionnel du massage, si c'est pas trop loin j'en aurais bien besoin

Sauf que, a part en allant directement dans les pages renseignement ou contact je n'ai pas l'info. Ce type de site s'adresse à un public plutot local, il est donc, a mon humble avis important d'informer le lieu de la prestation sans que le visiteur soit obliger de chercher l'info dans le site

* Cela ne sert pas à grand chose de "garder" un visiteur qui ne sera du coup pas potentiellement interessé par ce qui est vendu par le site
* Pour le visiteur, cela lui permet de savoir très rapidement qu'il devra effectuer sa recherche recherche ailleur.
* c'est meilleur pour le référencement (exemple je recherche "massage à Wavre", le site sortira théoriquement plus facilement

Par exemple, si tu regarde sur le site pro d'alsacreations, tu es tout de suite au courant que l'agence est à Strasbourg

Salut Dadou et merci pour ta remarque !

Je vais voir comment formuler le tout avec la personne s'occupant du contenu !

Voilà la question de la ville est réglée Dadou !!! Comme ça plus besoin de fouiller ...

Pour les photos c'est déja bien mieux, mais cela pourrait être encore mieux. Il faudrait aussi égaliser les teintes entres toutes.

a écrit :
Bon sinon, j'y ajouterai une discrète couleur de contraste, car même si les photos ont des couleurs assez chaudes, et même si tu les désature un peu, je pense qu'il est bien d'ajouter une couleur chaude très discrète dans le texte pour le rendre plus attractif.

Là par contre je ne comprend pas du tout ce que tu veux dire ... sweatdrop . Désolé ... Pourrais-tu me l'expliquer ?

Si on ne prends pas les photos en compte, la couleur dominante du site est gris vert, ce qui fait partie des couleurs froides (bleu, vert, violet). Il faudrait une couleur de contraste de la gamme opposée des couleurs chaudes (jaune, orange, rouge), qui reste malgré tout discrète, pour apporter un contraste.
Ce contraste permet de guider la lecture ou la navigation, car l'oeil est naturellement guidé vers la couleur d'opposition, car il ne la voit qu'en un ou plusieurs points très précis. Pas besoin donc d'en mettre beaucoup, ni qu'elle soit très vive, elle ressortira naturellement du fait de son opposition ton froid / ton chaud.
J'espère que çà te semblera plus clair.
Modifié par Mikachu (01 Feb 2007 - 15:41)

Mikachu,

Tu mettrais donc certaines partie du texte avec d'autres couleurs comme les mises en évidence qui ont déjà été faites ?
Ou plutôt de changer toute la couleur de fond de texte?
Ou encore de changer toute la couleur du texte ?

Laurent Denis a écrit :

Oui, les textes HTML masqués via CSS et remplacés visuellement par des images CSS ont été à la mode, hélas.

Mais le résultat est amusant pour l'utilisateur ayant, par exemple, coché l'option d'accessibilité "désactiver les couleurs" dans son navigateur graphique

J'ai fait la vérification sur mon site et je ne vois pas où est le problème. Donc je continue à penser que c'est gérable.

<edit hors sujet>
Par contre j'adore le look de ce genre de manip sur IE, une mise en page qui flotte comme ça on dirait persque un tableau
</edit>
Modifié par clb56 (01 Feb 2007 - 17:51)

biloduo a écrit :

Tu mettrais donc certaines partie du texte avec d'autres couleurs comme les mises en évidence qui ont déjà été faites ?

Oui, comme par exemple les titres, ou les mots en gras, ou certains soulignements (des liens) ou décorations (des titres) dans le contenu. L'essentiel c'est que cette couleur soit utilisée avec parcimonie.

o a écrit :
Ou plutôt de changer toute la couleur de fond de texte? Ou encore de changer toute la couleur du texte ?

Non et non.