3246 sujets
Critiques de vos sites: code et design
Moi j'aime bien. C'est joli.
* On ne comprend pas où c'est au premier abord. Le nom de domaine n'est pas en *.ch, et l'adresse indiquée ne contient pas "Suisse", 'faudrait placer un drapeau, une carte ou "Suisse" quelque part. Ce n'est pas du chauvinisme, c'est pour situer le visiteur.
* Une langue, ce n'est pas un pays... Je pense que représenter les langues par des drapeaux (surtout pour la Suisse) est malvenu ou du moins, discutable. fr ou français pour le français et de ou deutsch pour l'allemand. D'ailleurs pourquoi passer un site en français.. en français ? Il suffit de mettre français sur les pages en allemand et inversément, non ?
@+, HoPHP
* On ne comprend pas où c'est au premier abord. Le nom de domaine n'est pas en *.ch, et l'adresse indiquée ne contient pas "Suisse", 'faudrait placer un drapeau, une carte ou "Suisse" quelque part. Ce n'est pas du chauvinisme, c'est pour situer le visiteur.
* Une langue, ce n'est pas un pays... Je pense que représenter les langues par des drapeaux (surtout pour la Suisse) est malvenu ou du moins, discutable. fr ou français pour le français et de ou deutsch pour l'allemand. D'ailleurs pourquoi passer un site en français.. en français ? Il suffit de mettre français sur les pages en allemand et inversément, non ?
@+, HoPHP
Bonjour,
Le graphisme est simple et efficace, juste un détail ou 2
Le dégradé de ton header n'est pas régulier et la liaison avec le contenu est délimité par une zone un peu jaune clair, c'est voulu ?
Ensuite il n'y a plus de bordure bottom colonne de droite et sur les pages courtes je cherche a scroller vers le bas par reflexe visuel.
Coté code, c'est propre, juste quelque <h2 style="clear:right"> qui devraient se trouver dans le CSS.
Sinon c'est tout bon, voilou
Le graphisme est simple et efficace, juste un détail ou 2
Le dégradé de ton header n'est pas régulier et la liaison avec le contenu est délimité par une zone un peu jaune clair, c'est voulu ?
Ensuite il n'y a plus de bordure bottom colonne de droite et sur les pages courtes je cherche a scroller vers le bas par reflexe visuel.
Coté code, c'est propre, juste quelque <h2 style="clear:right"> qui devraient se trouver dans le CSS.
Sinon c'est tout bon, voilou
bonjour,
Bon j'aime bien le site par son efficacité qui provient de sa sobriété.
Toutefois je trouve que la typo est un peu tristounette en noir, uniquement, et qu'il serait bon de la mettre en couleur, enfin du moins les diférents niveaux de titre, pour le texte ce n'est pas géneant par contre.
Sinon, je trouve que le bloc de titre avec les deux licornes et le fond dégradé marron fait quand même un peu "cheap", ca serait pas mal de le travailler un peu plus, sans pour autant faire un bandeau disco qui n'irait pas en adéquation avec le site.
Une petite remarque de syntaxe, dans la page d'accueil, il conviendrait mieux de dire : "Trouver la tranquillité tout en s'imprégnant d'une époque historique mouvementée (maison du chirurgien Abraham Gagnebin, visite de Jean-Jacques Rousseau), c'est ce que procure un séjour dans l'une des 7 chambres de l'hôtel.", car séparée l'adjectif du nom par une si longue parenthèse ca rend difficile la compréhension.
Sinon de manière générale, il y'a des fautes un peu partout qu'il faudra corriger.
Bon j'aime bien le site par son efficacité qui provient de sa sobriété.
Toutefois je trouve que la typo est un peu tristounette en noir, uniquement, et qu'il serait bon de la mettre en couleur, enfin du moins les diférents niveaux de titre, pour le texte ce n'est pas géneant par contre.
Sinon, je trouve que le bloc de titre avec les deux licornes et le fond dégradé marron fait quand même un peu "cheap", ca serait pas mal de le travailler un peu plus, sans pour autant faire un bandeau disco qui n'irait pas en adéquation avec le site.
Une petite remarque de syntaxe, dans la page d'accueil, il conviendrait mieux de dire : "Trouver la tranquillité tout en s'imprégnant d'une époque historique mouvementée (maison du chirurgien Abraham Gagnebin, visite de Jean-Jacques Rousseau), c'est ce que procure un séjour dans l'une des 7 chambres de l'hôtel.", car séparée l'adjectif du nom par une si longue parenthèse ca rend difficile la compréhension.
Sinon de manière générale, il y'a des fautes un peu partout qu'il faudra corriger.
HoPHP a écrit :
Moi j'aime bien. C'est joli.
* On ne comprend pas où c'est au premier abord. Le nom de domaine n'est pas en *.ch, et l'adresse indiquée ne contient pas "Suisse", 'faudrait placer un drapeau, une carte ou "Suisse" quelque part. Ce n'est pas du chauvinisme, c'est pour situer le visiteur.
Il est prévu d'avoir un domaine en .ch
HoPHP a écrit :
* Une langue, ce n'est pas un pays... Je pense que représenter les langues par des drapeaux (surtout pour la Suisse) est malvenu ou du moins, discutable. fr ou français pour le français et de ou deutsch pour l'allemand.
J'hésite... J'ai mis des drapeau pour que ce soit plus visible. Il m'est arrivé plusieurs fois d'arriver sur des sites (suisse, donc généralement en trois langues) et de chercher où se trouve le lien pour passer dans les autres langue. Mais c'est vrai que dans ces cas-là, les liens était dans des endroits totalement opposé au menu.
Bon, de toute façon je redirige le visiteur vers sa langue (langue du navigateur) à son arrivée sur le site, donc ce lien devrait peu servir.
Je vais suivre ton conseil.
D'ailleurs pourquoi passer un site en français.. en français ? Il suffit de mettre français sur les pages en allemand et inversément, non ?
C'est pas bête ça. Je n'y avais même pas songé
Angelik a écrit :
bonjour,
un petit prob
sous ie6 :
- dans "reservations", le champ "message" du "commentaire/question" est decale vers la droite.
juste le carre orange/marron.
sous firefox ca marche.
a+
C'est juste, merci de me le rappeler. J'avais posé la question ici http://forum.alsacreations.com/topic.php?fid=4&tid=13593&s= mais je n'ai pas eu de réponse. Je ne comprends pas pourquoi ce champ est placé comme ça
ghost a écrit :
Bonjour,
Le graphisme est simple et efficace, juste un détail ou 2
Le dégradé de ton header n'est pas régulier et la liaison avec le contenu est délimité par une zone un peu jaune clair, c'est voulu ?
Je ne vois pas ce que tu veux dire pour la zone un peu clair, je ne vois rien
Peut-être un effet dû à la compression jpg ?ghost a écrit :
Ensuite il n'y a plus de bordure bottom colonne de droite et sur les pages courtes je cherche a scroller vers le bas par reflexe visuel.
ghost a écrit :
Coté code, c'est propre, juste quelque <h2 style="clear:right"> qui devraient se trouver dans le CSS.
Je vais corriger ça.
Mikachu a écrit :
Sinon, je trouve que le bloc de titre avec les deux licornes et le fond dégradé marron fait quand même un peu "cheap", ca serait pas mal de le travailler un peu plus, sans pour autant faire un bandeau disco qui n'irait pas en adéquation avec le site.
Ca doit être un manie chez moi, déjà sur mon site El Floridita ( http://www.elfloridita.net ) c'est déjà le cas je trouve
, mais ici moins à mon avis.Mikachu a écrit :
Une petite remarque de syntaxe, dans la page d'accueil, il conviendrait mieux de dire : "Trouver la tranquillité tout en s'imprégnant d'une époque historique mouvementée (maison du chirurgien Abraham Gagnebin, visite de Jean-Jacques Rousseau), c'est ce que procure un séjour dans l'une des 7 chambres de l'hôtel.", car séparée l'adjectif du nom par une si longue parenthèse ca rend difficile la compréhension.
Sinon de manière générale, il y'a des fautes un peu partout qu'il faudra corriger.
Un relecture est en cours.
Bonjour,
D'abord, je ne suis pas d'accord avec HoPHP :
Le lien entre un pays et sa langue est souvent immédiat : Japonais-Japon, chinois-Chine, allemand-Allemagne... ce lien existe également entre les couleurs d'un emblème et la langue présupposée associée.
Aussi, utiliser ces emblèmes comme référence pour les langues associées n'est pas gênant. Mieux, c'est visuellement plus explicite et lisible que tout contenu textuel. Si les "FR", "EN", "CH" nous sont familier, ce n'est forcément le cas des visiteurs lambdas. Alors qu'un drapeau allemand permet de faire clairement pour tous ceux qui le connaissent le lien avec la langue.
Comme toujours, on... je pointe surtout ce qui ne va pas (à mon sens), car on pourrait certainement en dire autant sur les bons cotés, mais ce ne sont pas les critiques les plus utiles ici.
________________________________________
APPARENCES...
L'ensemble donne une image un peu dépassée. La typographie utilisée n'est pas assez travaillée par rapport au sujet et souffre d'un manque de personnalisation.
* La couleur du menu n'est pas en accord avec la palette du site, il n'est donc pas intégré dans la composition.
En regardant la photo de la bâtisse, on voit une palette de couleurs qui aurait pu être utilisée : les tons de bruns du bois, le blanc et le jaune pâle des enduits, le carmin des parasols...
* L'entête manque un peu de force. Il doit pouvoir identifier clairement le site. Comme l'a dit ghost, le dégradé de l'entête n'est pas en accord avec le fond du contenu et on peut voir cette fameuse "ligne jaune". C'est peut-être volontaire, mais le fait qu'elle soit au niveau du bloc menu ne va pas alors.
* Le bouton d'envoi n'est pas en accord avec les couleurs du formulaire.
* page chambre : les silhouettes http://licorne.elfloridita.net/img/icones/lits_1.gif sont plus grande que la hauteur de texte. Peut-être faudrait-il diminuer quelque peu leur taille.
* Les titres et sous-titres manquent de relief : utiliser les balises Hn est bien, mais les personnaliser est encore mieux. C'est particulièrement dommage sur la page Activités ou le titre "hiver" manque de punch.
________________________________________
ERGONOMIE - ...
*La zone d'action du menu, limitée à la taille du texte des liens est trop réduite. Puisque le menu est un peu plus large, on peut facilement l'agrandir.
*Les contrôles PHP sur le formulaire de contact sont bons (même si les textes pour le sujet et le texte ne sont pas précis). La mention de l'erreur en rouge sur le champ concerné est mieux qu'une boîte d'alerte qu'il faut en plus fermer. Pourquoi ne pas virer la partie javascript du contrôle ?
Le champ texte ne fait qu'une quarantaine de caractères en largeur. C'est peu. D'autant que la case est plus courte que celle des autres champs.
Le bouton d'envoi est décalé à gauche du reste du formulaire.
La différence de couleur entre champs actif ou non n'est pas énorme. Faire varier également la couleur du texte pourrait renforcer cela.
* page réservation : je rentre mes coordonnées, je vois "voir la liste des prix", je clique. Je consulte les prix, je clique sur le lien me ramenant en arrière, sur la page réservation : tout ce que j'ai entré a disparu.
Il faudrait garder en mémoire les valeurs de ces variables. Au minimum, sachant que le visiteur ne va pas forcément utilser la touche "retour en arrière" de son navigateur, on peut lui fournir un lien-javascript qui le fasse, ce qui permet de conserver les données déjà entrées.
* Chose curieuse, alors qu'il existe un raccourci clavier "N" permettant d'aller au contenu et pouvant servir à remonter, rien ne l'indique - sauf erreur. Un de ces liens pointant le haut des pages serait nécessaire sur certaines.
* la page liens : on ne sait pas où pointent les liens. Un petit contenu explicatif ne serait pas de trop.
* page restaurant, carte traditionnelle : les noms ne sont pas suffisamment explicatifs du contenu de l'assiette : d'ailleurs, qu'aura-t-on dans l'assiette du jour ? Qu'est-ce qu'un jambon röstri... un petit texte explicatif, entre parenthèses par exemple, ou une photographie pourrait éviter certaines interrogations.
* page "activités" : le nom du menu n'est pas explicite. Je m'attendais, je ne sais pourquoi, à quelque chose concernant l'activité du logis de la Licorne. Peut-êtres que loisirs serait plus significatif ici.
Il faudrait différencier les liens externes au site et indiquer la langue de la page.
"Chemins pédestres" est certainement juste, mais "randonnées pédestres" aura plus de sens pour les visiteurs.
Location de vélos est trop vague. Les vacanciers ont souvent des budgets précis : indiquer les tarifs de location leur serait utile. De même qu'une petite photographie d'un ou de l'ensemble des vélos permettrait de se faire une idée. (Si le tarif et les vélos sont attractifs, peut-être que certains vacanciers qui ont l'habitude d'emporter les leurs les laisseront chez eux...)
Juste en passant sur la page : "Ski de fond et raquette". Sans S à raquette, ça s'adresse aux unijambistes.
(De même que : "Renseignement[ ] complémentaires")
* Je ne sais pas si la version française du site est destinée uniquement aux visiteurs Suisses francophones, mais "FR 25", je n'ai pas compris tout de suite que c'était un prix. Surtout quand je vois ça : "Fr. 85.-", "10.-Fr.". Il faudrait conserver une même logique.
* page situation : un petit extrait de carte routière serait un plus.
* page photos : il faut supprimer le lien associé à "Accueil de l’album" qui pointe sur la page. (Une erreur d'inattention courante : j'avais fait la même chose dans un fil d'ariane, en mettant un lien sur le dernier nom de page, celui qui identifie celle en cours...)
* page galerie : associer aux grandes images un lien javascript de type "retour" serait utile et permettrait de revenir en arrière en cliquant dessus (on peut aussi indiquer ce comportement dans le titre du lien : "Cliquez sur l'image pour revenir en arrière").
Certaines images portent leur propre légende, mais d'autres en auraient besoin.
* le contenu du site est déja conséquent : un plan du site peut servir.
* puisqu'il y a un raccourci clavier, pourquoi ne pas étendre ça et organiser une politique d'accessibilité. (Je ne sais pas si la lettre N est un bon choix pour le lien vers le contenu.)
* L'ALT des drapeaux devrait reprendre le title ; ici, il n'est pas assez significatif.
________________________________________
BALISAGE-CSS
Pas grand chose à dire sur le code, peut-être :
* ajouter des commentaires permettant de situer le menu, les débuts et fins des blocs div...
* supprimer les doubles balises BR des coordonnées dans le menu, et organiser ça avec des balises P.
* placer les scripts javascript dans des fichiers externes au balisage et les lier dans le HEADER.
* Bien que tu utilises la balises LABEL, ici elle ne sert pas. Plutôt ceci :
Voilà. C'est ce que j'ai principalement noté... ou remarqué.
Modifié par
(08 May 2006 - 13:41)
D'abord, je ne suis pas d'accord avec HoPHP :
a écrit :Une nation n'est pas définie que par sa langue, comme la Suisse qui en reconnaît quatre officielles, mais c'est un élément important. Le drapeau, l'emblème d'une nation, est une autre caractéristique.
Une langue, ce n'est pas un pays...
Le lien entre un pays et sa langue est souvent immédiat : Japonais-Japon, chinois-Chine, allemand-Allemagne... ce lien existe également entre les couleurs d'un emblème et la langue présupposée associée.
Aussi, utiliser ces emblèmes comme référence pour les langues associées n'est pas gênant. Mieux, c'est visuellement plus explicite et lisible que tout contenu textuel. Si les "FR", "EN", "CH" nous sont familier, ce n'est forcément le cas des visiteurs lambdas. Alors qu'un drapeau allemand permet de faire clairement pour tous ceux qui le connaissent le lien avec la langue.
Comme toujours, on... je pointe surtout ce qui ne va pas (à mon sens), car on pourrait certainement en dire autant sur les bons cotés, mais ce ne sont pas les critiques les plus utiles ici.
________________________________________
APPARENCES...
L'ensemble donne une image un peu dépassée. La typographie utilisée n'est pas assez travaillée par rapport au sujet et souffre d'un manque de personnalisation.
* La couleur du menu n'est pas en accord avec la palette du site, il n'est donc pas intégré dans la composition.
En regardant la photo de la bâtisse, on voit une palette de couleurs qui aurait pu être utilisée : les tons de bruns du bois, le blanc et le jaune pâle des enduits, le carmin des parasols...
* L'entête manque un peu de force. Il doit pouvoir identifier clairement le site. Comme l'a dit ghost, le dégradé de l'entête n'est pas en accord avec le fond du contenu et on peut voir cette fameuse "ligne jaune". C'est peut-être volontaire, mais le fait qu'elle soit au niveau du bloc menu ne va pas alors.
* Le bouton d'envoi n'est pas en accord avec les couleurs du formulaire.
* page chambre : les silhouettes http://licorne.elfloridita.net/img/icones/lits_1.gif sont plus grande que la hauteur de texte. Peut-être faudrait-il diminuer quelque peu leur taille.
* Les titres et sous-titres manquent de relief : utiliser les balises Hn est bien, mais les personnaliser est encore mieux. C'est particulièrement dommage sur la page Activités ou le titre "hiver" manque de punch.
________________________________________
ERGONOMIE - ...
*La zone d'action du menu, limitée à la taille du texte des liens est trop réduite. Puisque le menu est un peu plus large, on peut facilement l'agrandir.
*Les contrôles PHP sur le formulaire de contact sont bons (même si les textes pour le sujet et le texte ne sont pas précis). La mention de l'erreur en rouge sur le champ concerné est mieux qu'une boîte d'alerte qu'il faut en plus fermer. Pourquoi ne pas virer la partie javascript du contrôle ?
Le champ texte ne fait qu'une quarantaine de caractères en largeur. C'est peu. D'autant que la case est plus courte que celle des autres champs.
Le bouton d'envoi est décalé à gauche du reste du formulaire.
La différence de couleur entre champs actif ou non n'est pas énorme. Faire varier également la couleur du texte pourrait renforcer cela.
* page réservation : je rentre mes coordonnées, je vois "voir la liste des prix", je clique. Je consulte les prix, je clique sur le lien me ramenant en arrière, sur la page réservation : tout ce que j'ai entré a disparu.
Il faudrait garder en mémoire les valeurs de ces variables. Au minimum, sachant que le visiteur ne va pas forcément utilser la touche "retour en arrière" de son navigateur, on peut lui fournir un lien-javascript qui le fasse, ce qui permet de conserver les données déjà entrées.
* Chose curieuse, alors qu'il existe un raccourci clavier "N" permettant d'aller au contenu et pouvant servir à remonter, rien ne l'indique - sauf erreur. Un de ces liens pointant le haut des pages serait nécessaire sur certaines.
* la page liens : on ne sait pas où pointent les liens. Un petit contenu explicatif ne serait pas de trop.
* page restaurant, carte traditionnelle : les noms ne sont pas suffisamment explicatifs du contenu de l'assiette : d'ailleurs, qu'aura-t-on dans l'assiette du jour ? Qu'est-ce qu'un jambon röstri... un petit texte explicatif, entre parenthèses par exemple, ou une photographie pourrait éviter certaines interrogations.
* page "activités" : le nom du menu n'est pas explicite. Je m'attendais, je ne sais pourquoi, à quelque chose concernant l'activité du logis de la Licorne. Peut-êtres que loisirs serait plus significatif ici.
Il faudrait différencier les liens externes au site et indiquer la langue de la page.
"Chemins pédestres" est certainement juste, mais "randonnées pédestres" aura plus de sens pour les visiteurs.
Location de vélos est trop vague. Les vacanciers ont souvent des budgets précis : indiquer les tarifs de location leur serait utile. De même qu'une petite photographie d'un ou de l'ensemble des vélos permettrait de se faire une idée. (Si le tarif et les vélos sont attractifs, peut-être que certains vacanciers qui ont l'habitude d'emporter les leurs les laisseront chez eux...)
Juste en passant sur la page : "Ski de fond et raquette". Sans S à raquette, ça s'adresse aux unijambistes.
(De même que : "Renseignement[ ] complémentaires")* Je ne sais pas si la version française du site est destinée uniquement aux visiteurs Suisses francophones, mais "FR 25", je n'ai pas compris tout de suite que c'était un prix. Surtout quand je vois ça : "Fr. 85.-", "10.-Fr.". Il faudrait conserver une même logique.
* page situation : un petit extrait de carte routière serait un plus.
* page photos : il faut supprimer le lien associé à "Accueil de l’album" qui pointe sur la page. (Une erreur d'inattention courante : j'avais fait la même chose dans un fil d'ariane, en mettant un lien sur le dernier nom de page, celui qui identifie celle en cours...)
* page galerie : associer aux grandes images un lien javascript de type "retour" serait utile et permettrait de revenir en arrière en cliquant dessus (on peut aussi indiquer ce comportement dans le titre du lien : "Cliquez sur l'image pour revenir en arrière").
Certaines images portent leur propre légende, mais d'autres en auraient besoin.
* le contenu du site est déja conséquent : un plan du site peut servir.
* puisqu'il y a un raccourci clavier, pourquoi ne pas étendre ça et organiser une politique d'accessibilité. (Je ne sais pas si la lettre N est un bon choix pour le lien vers le contenu.)
* L'ALT des drapeaux devrait reprendre le title ; ici, il n'est pas assez significatif.
________________________________________
BALISAGE-CSS
Pas grand chose à dire sur le code, peut-être :
* ajouter des commentaires permettant de situer le menu, les débuts et fins des blocs div...
* supprimer les doubles balises BR des coordonnées dans le menu, et organiser ça avec des balises P.
* placer les scripts javascript dans des fichiers externes au balisage et les lier dans le HEADER.
* Bien que tu utilises la balises LABEL, ici elle ne sert pas. Plutôt ceci :
<label for id="leNom">* Nom :
<input class="long" name="nom" type="text" id="leNom"/></label><br />
Voilà. C'est ce que j'ai principalement noté... ou remarqué.
Modifié par
(08 May 2006 - 13:41)________________________________________
APPARENCES...
Tu me conseillerais quoi par exemple ? Ce n'est pas la première fois que j'ai des problème avec la typo, en particulier pour les titres.
C'est ce que j'ai tenté, brun de l'en-tête pour le bois, teinte légèrement jaune du fond pour les enduits et le bleu du menu pour les volets.
J'ai réussi à voir votre fameuse ligne jaune, mais pour cela j'ai du mettre le contraste de mon écran au max et la luminosité assez élevée. Normalement le bas dégradé devrait être de la même couleur que le fond de la page.
En lisant ta remarque, je n'étais pas convaincu, je me suis dit "et si l'utilisateur affiche le texte plus grand". J'ai quand même essayé et c'est vrai que ça rend mieux
________________________________________
ERGONOMIE - ...
Je l'ai étendu à presque 100% de la largeur du menu.
J'ai changé le texte pour le sujet et le texte. Simple erreur de variable PHP, c'était le label qui s'affichait. Et j'ai viré la partie JS.
J'ai changé la largeur des champ. Apparement il y avait un problème de largeur du textarea sous IE, avec d'autres navigateurs je n'ai pas constaté de problème. Bon, maitenant c'est ok partout.
J'ai augmenté la différence de couleur.
Juste, mais comment faire si l'utilisateur désactive le JS ?
J'ai ajouté la combinaison raccourci pour le cas où le n'avigateur de supporte pas les CSS. Est-il nécessaire d'afficher ce raccourci si les CSS sont supporté et donc le menu visible assez haut dans la page ?
C'est vrai que je pourrais aussi utiliser ce raccourci pour remonter.
Il faut que je demande au patron de l'hôtel, il ne pensait pas nécessaire de mettre une carte complète.
Je suis d'accord que assiette du jour c'est un peu vague.
Qu'est-ce qu'un jambon rösti ? Pour un Suisse la question ne se pose pas. Alors, pour 4 personnes ... http://fr.wikipedia.org/wiki/R%C3%B6sti
Le site est pricipalement destiné au visiteurs de la région mais je vais en discuter avec le patron.
pour la langue des lien, seulement ajouter l'attribut lang ? Ou quelque chose de plus visible ?
Fotes d'eautaugraf corrigées
Pour le reste je vais voir avec le patron
J'ai mis CHF, comme ça impossible de se tromper
Je dois avoir ça quelque part. Un petit coup de scanner et hop.
Corrigé
C'est bon pour le lien de retour. Je compléterai les légendes
________________________________________
BALISAGE-CSS
Pas grand chose à dire sur le code, peut-être :
Quand faut-il ou ne faut-il pas utiliser la balise BR ?
j'utilise PEAR et Quickform (http://pear.php.net) pour générer les formulaires. C'est lui qui génère le JS. En modifiant la template il doit être possible de faire qqch. Mais comme j'ai viré la vérification JS, ce n'est pas utile
C'est Quickform qui ne gère pas (encore) les label correctement. Je vais chercher si je ne pourrais pas contourner le problème d'un manière ou d'un autre.
En tout cas merci pour toutes ces remarques
EDIT : Il y a des quote qui ne passent pas, je ne vois pas pourquoi
Modifié par JuTs (08 May 2006 - 23:39)
APPARENCES...
neko a écrit :
L'ensemble donne une image un peu dépassée. La typographie utilisée n'est pas assez travaillée par rapport au sujet et souffre d'un manque de personnalisation.
neko a écrit :
* Les titres et sous-titres manquent de relief : utiliser les balises Hn est bien, mais les personnaliser est encore mieux. C'est particulièrement dommage sur la page Activités ou le titre "hiver" manque de punch.
Tu me conseillerais quoi par exemple ? Ce n'est pas la première fois que j'ai des problème avec la typo, en particulier pour les titres.
neko a écrit :
* La couleur du menu n'est pas en accord avec la palette du site, il n'est donc pas intégré dans la composition.
En regardant la photo de la bâtisse, on voit une palette de couleurs qui aurait pu être utilisée : les tons de bruns du bois, le blanc et le jaune pâle des enduits, le carmin des parasols...
C'est ce que j'ai tenté, brun de l'en-tête pour le bois, teinte légèrement jaune du fond pour les enduits et le bleu du menu pour les volets.
neko a écrit :
* L'entête manque un peu de force. Il doit pouvoir identifier clairement le site. Comme l'a dit ghost, le dégradé de l'entête n'est pas en accord avec le fond du contenu et on peut voir cette fameuse "ligne jaune". C'est peut-être volontaire, mais le fait qu'elle soit au niveau du bloc menu ne va pas alors.
J'ai réussi à voir votre fameuse ligne jaune, mais pour cela j'ai du mettre le contraste de mon écran au max et la luminosité assez élevée. Normalement le bas dégradé devrait être de la même couleur que le fond de la page.
neko a écrit :
* page chambre : les silhouettes http://licorne.elfloridita.net/img/icones/lits_1.gif sont plus grande que la hauteur de texte. Peut-être faudrait-il diminuer quelque peu leur taille.
En lisant ta remarque, je n'étais pas convaincu, je me suis dit "et si l'utilisateur affiche le texte plus grand". J'ai quand même essayé et c'est vrai que ça rend mieux
________________________________________
ERGONOMIE - ...
neko a écrit :
*La zone d'action du menu, limitée à la taille du texte des liens est trop réduite. Puisque le menu est un peu plus large, on peut facilement l'agrandir.
Je l'ai étendu à presque 100% de la largeur du menu.
neko a écrit :
*Les contrôles PHP sur le formulaire de contact sont bons (même si les textes pour le sujet et le texte ne sont pas précis). La mention de l'erreur en rouge sur le champ concerné est mieux qu'une boîte d'alerte qu'il faut en plus fermer. Pourquoi ne pas virer la partie javascript du contrôle ?
Le champ texte ne fait qu'une quarantaine de caractères en largeur. C'est peu. D'autant que la case est plus courte que celle des autres champs.
Le bouton d'envoi est décalé à gauche du reste du formulaire.
La différence de couleur entre champs actif ou non n'est pas énorme. Faire varier également la couleur du texte pourrait renforcer cela.
J'ai changé le texte pour le sujet et le texte. Simple erreur de variable PHP, c'était le label qui s'affichait. Et j'ai viré la partie JS.
J'ai changé la largeur des champ. Apparement il y avait un problème de largeur du textarea sous IE, avec d'autres navigateurs je n'ai pas constaté de problème. Bon, maitenant c'est ok partout.
J'ai augmenté la différence de couleur.
neko a écrit :
* page réservation : je rentre mes coordonnées, je vois "voir la liste des prix", je clique. Je consulte les prix, je clique sur le lien me ramenant en arrière, sur la page réservation : tout ce que j'ai entré a disparu.
Il faudrait garder en mémoire les valeurs de ces variables. Au minimum, sachant que le visiteur ne va pas forcément utilser la touche "retour en arrière" de son navigateur, on peut lui fournir un lien-javascript qui le fasse, ce qui permet de conserver les données déjà entrées.
Juste, mais comment faire si l'utilisateur désactive le JS ?
neko a écrit :
* Chose curieuse, alors qu'il existe un raccourci clavier "N" permettant d'aller au contenu et pouvant servir à remonter, rien ne l'indique - sauf erreur. Un de ces liens pointant le haut des pages serait nécessaire sur certaines.
J'ai ajouté la combinaison raccourci pour le cas où le n'avigateur de supporte pas les CSS. Est-il nécessaire d'afficher ce raccourci si les CSS sont supporté et donc le menu visible assez haut dans la page ?
C'est vrai que je pourrais aussi utiliser ce raccourci pour remonter.
neko a écrit :
* page restaurant, carte traditionnelle : les noms ne sont pas suffisamment explicatifs du contenu de l'assiette : d'ailleurs, qu'aura-t-on dans l'assiette du jour ? Qu'est-ce qu'un jambon röstri... un petit texte explicatif, entre parenthèses par exemple, ou une photographie pourrait éviter certaines interrogations.
Il faut que je demande au patron de l'hôtel, il ne pensait pas nécessaire de mettre une carte complète.
Je suis d'accord que assiette du jour c'est un peu vague.
Qu'est-ce qu'un jambon rösti ? Pour un Suisse la question ne se pose pas. Alors, pour 4 personnes ...
http://fr.wikipedia.org/wiki/R%C3%B6stiLe site est pricipalement destiné au visiteurs de la région mais je vais en discuter avec le patron.
neko a écrit :
page "activités" : le nom du menu n'est pas explicite. Je m'attendais, je ne sais pourquoi, à quelque chose concernant l'activité du logis de la Licorne. Peut-êtres que loisirs serait plus significatif ici.
Il faudrait différencier les liens externes au site et indiquer la langue de la page.
"Chemins pédestres" est certainement juste, mais "randonnées pédestres" aura plus de sens pour les visiteurs.
Location de vélos est trop vague. Les vacanciers ont souvent des budgets précis : indiquer les tarifs de location leur serait utile. De même qu'une petite photographie d'un ou de l'ensemble des vélos permettrait de se faire une idée. (Si le tarif et les vélos sont attractifs, peut-être que certains vacanciers qui ont l'habitude d'emporter les leurs les laisseront chez eux...)
Juste en passant sur la page : "Ski de fond et raquette". Sans S à raquette, ça s'adresse aux unijambistes.
pour la langue des lien, seulement ajouter l'attribut lang ? Ou quelque chose de plus visible ?
Fotes d'eautaugraf corrigées
Pour le reste je vais voir avec le patron
neko a écrit :
* Je ne sais pas si la version française du site est destinée uniquement aux visiteurs Suisses francophones, mais "FR 25", je n'ai pas compris tout de suite que c'était un prix. Surtout quand je vois ça : "Fr. 85.-", "10.-Fr.". Il faudrait conserver une même logique.
J'ai mis CHF, comme ça impossible de se tromper
neko a écrit :
* page situation : un petit extrait de carte routière serait un plus.
Je dois avoir ça quelque part. Un petit coup de scanner et hop.
neko a écrit :
* page photos : il faut supprimer le lien associé à "Accueil de l’album" qui pointe sur la page. (Une erreur d'inattention courante : j'avais fait la même chose dans un fil d'ariane, en mettant un lien sur le dernier nom de page, celui qui identifie celle en cours...)
Corrigé
neko a écrit :
* page galerie : associer aux grandes images un lien javascript de type "retour" serait utile et permettrait de revenir en arrière en cliquant dessus (on peut aussi indiquer ce comportement dans le titre du lien : "Cliquez sur l'image pour revenir en arrière").
Certaines images portent leur propre légende, mais d'autres en auraient besoin.
C'est bon pour le lien de retour. Je compléterai les légendes
________________________________________
BALISAGE-CSS
Pas grand chose à dire sur le code, peut-être :
neko a écrit :
* supprimer les doubles balises BR des coordonnées dans le menu, et organiser ça avec des balises P.
Quand faut-il ou ne faut-il pas utiliser la balise BR ?
neko a écrit :
* placer les scripts javascript dans des fichiers externes au balisage et les lier dans le HEADER.
j'utilise PEAR et Quickform (http://pear.php.net) pour générer les formulaires. C'est lui qui génère le JS. En modifiant la template il doit être possible de faire qqch. Mais comme j'ai viré la vérification JS, ce n'est pas utile
neko a écrit :
* Bien que tu utilises la balises LABEL, ici elle ne sert pas. Plutôt ceci :* Plutôt que de placer un "span style", ce qui ne va pas avec un balisage strict, créer une vraie classe "rouge" (span class="rouge"). (Idem pour d'autres choses : "h2 style="clear:right", div class="captionFloatR" style="width:300px;"... je ne sais pas pourquoi, mais j'ai l'impression que c'est dû un un éditeur de code wysiwyg...)<label for id="leNom">* Nom : <input class="long" name="nom" type="text" id="leNom"/></label><br />
C'est Quickform qui ne gère pas (encore) les label correctement. Je vais chercher si je ne pourrais pas contourner le problème d'un manière ou d'un autre.
En tout cas merci pour toutes ces remarques
EDIT : Il y a des quote qui ne passent pas, je ne vois pas pourquoi
Modifié par JuTs (08 May 2006 - 23:39)
a écrit :
Juste, mais comment faire si l'utilisateur désactive le JS ?
En PHP, il faudrait enregistrer les variables pour les ressortir. Ou alors, ne pas envoyer sur une autre page avec le lien, mais l'ouvrir dans une pop-up javascript. Bien sûr, dans ce cas, on limite le contenu au strict nécessaire.
a écrit :Pas toujours, c'est certain. Mais l'ajouter ne nuit pas à l'accessibilité. Au pire, il est en trop : il ne servira ni ne gênera, au mieux, il sera utile à certain visiteurs.
Est-il nécessaire d'afficher ce raccourci si les CSS sont supporté et donc le menu visible assez haut dans la page ?
a écrit :C'est ce que j'ai cru comprendre en voyant le format des prix. Dans ce cas, ma remarque sur la carte du menu est inutile.
Le site est pricipalement destiné au visiteurs de la région mais je vais en discuter avec le patron.
a écrit :On peut utiliser une balise BR pour forcer un retour à la ligne, mais il ne faut pas s'en servir pour simuler des paragraphes en les doublant pour forcer un saut de ligne :
Quand faut-il ou ne faut-il pas utiliser la balise BR ?
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Sed lectus. Pellentesque cursus, orci id interdum rutrum, nulla nisl vestibulum
sapien, ut malesuada nisl ante ut lacus.[#red]<br /><br />[/#]
Morbi convallis nisl eu nisi. Aliquam erat volutpat.</p>
->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
Sed lectus. Pellentesque cursus, orci id interdum rutrum, nulla nisl vestibulum
sapien, ut malesuada nisl ante ut lacus.</p>
<p>Morbi convallis nisl eu nisi. Aliquam erat volutpat.</p>a écrit :Peux-tu retoucher le code ? (et corriger ses petits écarts ?)
C'est Quickform qui ne gère pas (encore) les label correctement.
a écrit :
Tu me conseillerais quoi par exemple ? Ce n'est pas la première fois que j'ai des problème avec la typo, en particulier pour les titres.
Deux solutions : une facile, jouer avec les propriétés CSS. Tester pour les titres une police avec empattements (serif : Times, Georgia, Garamond, etc.), jouer avec les font-variant, avec la couleur (le bleu est apparenté aux liens, restent les tons de bruns). Il est possible d'utiliser une seule couleur pour tous les titres, mais en modifiant sa luminosité (Un texte de niveau 1 peut être lourd dans une mise en page, une couleur plus claire peut l'affaiblir un peu.)
Seconde solution, remplacer les titres principaux (genre H1/H2) par des images : ça laisse toute latitude pour les travailler (en reprenant par exemple la police de l'entête).
Seul impératif, chercher la méthode de remplacement d'image garantissant la meilleur accessibilité possible. Il en existe une, totalement accessible et demandant un peu plus de code que les autres : la seule contrainte est de ne pas utiliser d'image transparentes (car son fonctionnement ferait apparaître le texte destiné à l'accessibilité par transparence). (Méthode LEVIN.)
a écrit :Peut-être manque-t-il les balises fermantes qui ont pu passer à la trappe - [/ code].
Il y a des quote qui ne passent pas, je ne vois pas pourquoi
Au fait, j'avais pas fait gaffe au bleu des volets... (quelle h...). Mais je ne sais pas pourquoi, le menu ne me paraît pas bien intégré.
Si je regarde une page : je vois trois niveaux sur le site : niveau 0, le body (avec le fond) ; niveau 1, la page et le contenu ; niveau 2, le menu. Ce sont les ombres en encadrement qui font ça...
Je ne sais pas, peut-être que ce bleu irait bien avec du blanc...
Modifié par
(09 May 2006 - 01:59)neko a écrit :
En PHP, il faudrait enregistrer les variables pour les ressortir. Ou alors, ne pas envoyer sur une autre page avec le lien, mais l'ouvrir dans une pop-up javascript. Bien sûr, dans ce cas, on limite le contenu au strict nécessaire.
une pop-up javascript ne va pas changer le problème si le javascript est désactivé
.Je pourrais faire une pop-up CSS (en m'inspirant de ceci : http://marcarea.com/tuto/menu01.php ). Mais un navigateur dont je ne citerai pas le nom ne supporterait pas
a écrit :
C'est Quickform qui ne gère pas (encore) les label correctement.Peux-tu retoucher le code ? (et corriger ses petits écarts ?)
J'ai réussi en modifiant la tamplate par défaut.
a écrit :
Au fait, j'avais pas fait gaffe au bleu des volets... (quelle h...). Mais je ne sais pas pourquoi, le menu ne me paraît pas bien intégré.
Si je regarde une page : je vois trois niveaux sur le site : niveau 0, le body (avec le fond) ; niveau 1, la page et le contenu ; niveau 2, le menu. Ce sont les ombres en encadrement qui font ça...
Je ne sais pas, peut-être que ce bleu irait bien avec du blanc...
Tu veux dire le fond de la page en blanc ?
J'ai essayé de ne pas mettre d'ombre mais je trouve que ça fait un peu "plat". Quoique...
Une question concernant les <label>. Sur la page Réservation j'ai deux boutons radio :
comment dois-je organiser les labels ?
Remarque il me semble que quickform gère l'attribut for="id" dans le cas d'un groupe de plusieurs champ (radio, checkbox).
J'ai tenté une modification de la template.
a écrit :
Dans la chambre des parents ?
O oui
O non
comment dois-je organiser les labels ?
Remarque il me semble que quickform gère l'attribut for="id" dans le cas d'un groupe de plusieurs champ (radio, checkbox).
J'ai tenté une modification de la template.
Encore deux essais, qu'en pensez-vous ?
J'ai intégré la forme de l'enseigne qui se trouve sur la façade. Le menu a été placé un peu plus bas. J'ai aussi supprimé l'ombre du menu et je l'ai remplacé par une bordure noire (opacité à 50%).
J'ai résolu le problème du textarea dans le formulaire de réservation. Le champ était décalé vers la droite dans IE. Il est placé correctement s'il se trouve dans un label
. Encore un bug étrange de IE. Modifié par JuTs (10 May 2006 - 23:37)
Bonjour,
Tes essais d'entêtes sont propres, mais il manque un je-ne-sais-quoi... ils font un peu simples.
As-tu essayé de les travailler à partir de photos de la bâtisse ?
Garder la licone comme élément de logotype est bien sûr une bonne idée, mais en mettre deux n'est pas la meilleure solution ici. Mieux vaut en laisser une, mais avec une identité plus forte, une qui soit plus travaillée. (On peut facilement en refaire en partant de photos de chevaux qu'on modifient.)
Essaye de faire des essais sur le papier, en dessinant. Ça pourra peut-être t'apporter des idées que tu n'aurais pas en travaillant directement sur ordinateur.
Tes essais d'entêtes sont propres, mais il manque un je-ne-sais-quoi... ils font un peu simples.
As-tu essayé de les travailler à partir de photos de la bâtisse ?
Garder la licone comme élément de logotype est bien sûr une bonne idée, mais en mettre deux n'est pas la meilleure solution ici. Mieux vaut en laisser une, mais avec une identité plus forte, une qui soit plus travaillée. (On peut facilement en refaire en partant de photos de chevaux qu'on modifient.)
Essaye de faire des essais sur le papier, en dessinant. Ça pourra peut-être t'apporter des idées que tu n'aurais pas en travaillant directement sur ordinateur.
Re-essai
neko est-ce que tu as des indications concernant ma question au sujet des champs radio ( http://forum.alsacreations.com/topic-18-13956-1-Logis-de-la-Licorne-en-test--httplicorneelfloriditanet-.html#p108912 ) ?
Et pour les infos des liens (langues, externe) ? Ok, c'est facile à faire en CSS mais bien évidement, IE n'aimerait pas (m'énerve celui là)
neko est-ce que tu as des indications concernant ma question au sujet des champs radio ( http://forum.alsacreations.com/topic-18-13956-1-Logis-de-la-Licorne-en-test--httplicorneelfloriditanet-.html#p108912 ) ?
Et pour les infos des liens (langues, externe) ? Ok, c'est facile à faire en CSS mais bien évidement, IE n'aimerait pas (m'énerve celui là)
Bonsoir,
celui qui lit le titre de ton bandeau en noir sur marron foncé à intérêt à avoir un bon contraste sur son écran. ^^
Sur mon écran de travail ca passe, mais sur mon écran secondaire qui me sert pour les outils, et qui estdu coup un peu moins terrible, je peine à voir quels sont les mots écrit en haut.
Et je ne réglerai pas mon écran pour ton site, je pense comme beaucoup d'utilisateurs.
Il serait bon d'améliorer ca. Un bon conseil, quand tu cherche à t'assurer que le contraste entre une typo et un fond est bon, tu cligne à moitié des yeux, sans non plus les fermer, et tu regarde si la masse du texte se discerne par rapport au fond. Sans pour autant lire.
Si tu vois pas ou peu la différence de couleur, c'est que tu peux changer le contraste, comme présentement.
Allez courage tu vas y'arriver à faire ta bannière, t'as passé que plusieurs jours dessus ^^
celui qui lit le titre de ton bandeau en noir sur marron foncé à intérêt à avoir un bon contraste sur son écran. ^^
Sur mon écran de travail ca passe, mais sur mon écran secondaire qui me sert pour les outils, et qui estdu coup un peu moins terrible, je peine à voir quels sont les mots écrit en haut.
Et je ne réglerai pas mon écran pour ton site, je pense comme beaucoup d'utilisateurs.
Il serait bon d'améliorer ca. Un bon conseil, quand tu cherche à t'assurer que le contraste entre une typo et un fond est bon, tu cligne à moitié des yeux, sans non plus les fermer, et tu regarde si la masse du texte se discerne par rapport au fond. Sans pour autant lire.
Si tu vois pas ou peu la différence de couleur, c'est que tu peux changer le contraste, comme présentement.
Allez courage tu vas y'arriver à faire ta bannière, t'as passé que plusieurs jours dessus ^^
Et là est-ce que c'est mieux ?
http://www.logis-de-la-licorne.ch/template_photo2.jpg
Modifié par JuTs (12 May 2006 - 09:52)
http://www.logis-de-la-licorne.ch/template_photo2.jpg
Modifié par JuTs (12 May 2006 - 09:52)