Critique de site, design en général

Bonjour,

On m'a demandé de faire un petit site, pourriez vous me donner votre avis avant que je le mette en ligne.

http://cyril.dnsalias.com:81/lagneau/

C'est le premier projet complet que j'ai fait depuis que je m'interesse à CSS, donc j'aimerais savoir si mes facons de faire sont correctes, idem pour la sémantique du code, niveau accessibilité j'y connais pas grand chose, donc si vous pouver me donner 2,3 conseils


Merci beaucoup pour vos avis

Salut CyrilCS !

Juste au passage, perso, j'utiliserais un preload sur les images du menu.

http://forum.alsacreations.com/topic.php?fid=1&tid=3709#p33354

En effet c'est une bonne idée, je vais regarder ca
Merci

Sinon au niveau design général ? c'est parfait ?

J'ai survolé comme ça et relevé deux trois bricoles, faudrait prendre plus de temps mais je suis crevé là

- Tu utilise des span pour masquer le contenu textuel de tes liens, titres... afin d'afficher du graphisme à la place. Mais en utilisant display:none tu rend le contenu textuel inaccessible aux lecteurs ecrans. Il voudrait mieux utiliser une autre technique tel qu'un clip (voir FAQ), ou bien un visibility:hidden + text-decoration:none + line-height:1px + font-size:1px, ou enfin un text-indent: -5000px (ou plus) pour ce dernier cas il me semble que ça ne fonctionne pas bien sur Safari anciennes versions (à confirmer).

- Sur tes liens le title correspond en général au texte du lien, exemple :

<a href="contact.htm" title="Contact" accesskey="6"><span>Contact</span></a>

Il n'y a pas d'interet à faire ça, tes titles devraient contenir une description plus précise et logique, exemple :

<a href="contact.htm" title="Nos coordonnées et formulaire de contact"Contact" accesskey="6"><span>Contact</span></a>

- Sur cette page, l'exemple type de la popup (beurk) pas bien conçu car ne fonctionnant pas sans javascript et n'autorisant pas l'utilisateur à l'ouvrir dans la fenètre courante si il le souhaite :

http://cyril.dnsalias.com:81/lagneau/vignoble.htm

De plus rien n'indique que ce lien va ouvrir une popup (j'ai mis un moment à comprendre que c'etait un lien d'ailleur).

Plus d'infos sur les popup intelligentes et accessibles :
http://www.openweb.eu.org/articles/popup/

Merci pour tous ces commentaires, j'avais pas pensé qu'en mettant display:none, les lecteurs d'ecrans n'affichaient pas le texte ... je croyais que les lecteurs d'ecrans ne prenait pas en compte css

pour ce qui est des title inutile, en mettant rien que ca, j'etais pas sur de leur utilité, mais tu confirmes mon idée

pour ce qui est du lien pour agrandir les images dans une popup, je ne vois pas comment on peut dire le fait que ce soit un lien qui agrandit l'image ?

pour l'instant j'ai juste mis une couleur de bordure differente, l'utilisation d'un cursor serait il utile ?

Vite regardé.

-Tu devrais spécifier lang="fr" en plus de "xml:lang=fr".

-Dans la page contacts, tu devrais peut-être utiliser un formulaire de contact ou coder l'adresse mail, les risques de spam sont certains. Il existe également un élément <address> pour les coordonnées de l'auteur du contenu.

-Pour les title des liens même remarque que jb, son utilisation devrait préciser la nature du lien qui va être ouvert, sa fonction.

-Pour l'ambiance générale des pages, en rapport avec le sujet, je trouve les couleurs assez fades, je m'attendrais à des couleurs de vin un peu plus chaudes (genre #aa0000 ou plus profondes) et peut-être une utilisation des photos plus franches pour le côté chambres d'hôtes. La photo du bandeau est peut-être un peu trop compressée, l'utilisation de détails de photos quitte à prendre un peu de poids me plairais assez.

Voilà pour le moment, sinon j'ai de la famille qui produit du Brouilly, du Côte-de-Brouilly et du Régnié (à consommer avec modération) et ça me donne des idées de summer fresh

Merci pour vos remarques,

j'ai donc mis les popups accessible, remplacé le display:none par un visibility:hidden etc... pour remplacer le texte par les images.

aprés renseignement sur la balise address

a écrit :

The address element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

j'ai donc mis cette balise la ou elle aurait du être

pour les couleurs du texte, j'ai fait quelques modifications, mais ca je demanderais à la personne qui veut le site ce qu'elle en pense

Par contre quand tu dis :

Igor a écrit :

La photo du bandeau est peut-être un peu trop compressée, l'utilisation de détails de photos quitte à prendre un peu de poids me plairais assez.

Tu parles bien de la qualité des photos au niveau de la compression ?
j'ai augmenté la qualité du beandeau (passé de 50% de compression à 66%) soit de 30ko et 50ko (je crois) pour les photos je mettrais une taille de 600x450 dans la popup

d'ailleurs à propos de ca, pour vous c'est quoi la limite niveau poid pour un bandeau ? je pensais 40ko max ?

Et vous avez une idée pour montrer que l'on peut cliquer sur les photos ? sur IE (qui sera certainement le navigateut le plus utilisé pour aller sur le site, vu qu'il s'adresse pas particulierement à des connaisseurs) j'ai un petit effet avec le filter:DXTransform est ce que selon vous cela suffirait ?

Enfin derniere question en ce qui concerne xml-lang et lang

deja la difference entre les deux ? pourquoi il y a deux attributs au lieu d'un seul ?

et mieux vaut utiliser lang="fr-fr" ou lang="fr" ? et dans quelle cas vaut mieux utiliser l'un plutot que l'autre ?

Il me reste juste le preload d'image que je ferais plus tard

PS : Désolé pour tous ceux qui ont essayé d'aller voir le site mais Wanadoo

CyrilCS a écrit :
pour ce qui est du lien pour agrandir les images dans une popup, je ne vois pas comment on peut dire le fait que ce soit un lien qui agrandit l'image ?

pour l'instant j'ai juste mis une couleur de bordure differente, l'utilisation d'un cursor serait il utile ?

Je pensais simplement à ajouter un commentaire dans le title du lien par exemple : title="description (nouvelle fenètre)"


Entre lang="fr" et "xml:lang=fr", le premier est un attribut HTML le second XHTML/XML. Je pense que l'interet d'avoir les deux est pour la compatibilité avec les users agents ne comprenant pas xml:lang. Et garder xml:lang pour respecter ton doctype (XHTML). A confirmer...
Modifié par jb_gfx (12 Jun 2005 - 05:21)

CyrilCS a écrit :

j'ai remplacé le display:none par un visibility:hidden etc... pour remplacer le texte par les images.

auquel cas tu auras le même problème avec les lecteurs d'écran


Pour en savoir plus

juste une minu scule remarque de rien du tout : dans ton texte alternatif tu a oublié le "e" ==> "notre cave voutéE" et non "notre cave vouté"
...voilà...bye

Salut,

j'aime bien l'ambiance générale. Personnellement, je supprimerais les tirets au niveau du menu, à gauche; ils n'apportent rien à mon sens, et se retrouvent décalés lorsque tu augments la taille des caractères.
D'autre part, supprime les (nombreuses) fautes d'orthographe!

Pour les fautes d'orthographe, j'ai repris textos ce que les proprios m'ont donné, le texte n'est encore pas finalisé ainsi que quelques photos, donc don't panick pour les fôtes d'orthographe

par contre pour les tirets c'est pas volontaire, sur le "serveur" que je vous ai montré ils y sont mais pas en local sur mon portable

bref, surement pas la meme version du CSS, je mettrais ca a jour des que j'ai 5min

Salut chèr Collègue ! Techniquement ton site en bien foutu, mis à part les images des liens qui jouent à cache-cache avec le pointeur de la souris...Facile à naviguer, bien présenté.
Par contre, j'ai relevé pas mal de fautes de français, ce qui n'est pas négligeable pour un site qui se veut une vitrine :
Sauf erreur de ma part :

1)Accueil :
Vigneron"s"de tradition avec un "s".
2eme Beaujolais avec une majuscule.
Ecrire hectare en toutes lettres en non ha.

2)Chambres:
"Découvrez" avec un "z" et non un "r".
chambre d'hotes: met un "d" minuscule et un accent circonflexe sur le "o" du deuxieme mot "hotes".
Accès avec "è" et non "é". (je suis pas sur mais je crois)
appr"é"cier avec un "é"(je suis pas sur mais je crois)
commence avec 2 "m"!!!!
ya pas un accent quelque part sur "forêt"?
cave vouté"e"
vue étendu"e"
jusqu'AU val de Saone (ya un "à" en trop)
pittoresque"s" au pluriel
terroir sans "e" à la fin(je suis pas sur mais je crois)
"possibilité" de garer sa bagnole et non "disponibilité"
le beau "villages" de regnié: vire donc le "s" (tu as arreté le français au CE2 pour aller faire webmaster directement ???lol )
la chambre se compose","de deux lits ainsi que ... vire la virgule
"de" sanitaires et pas "des" sanitaires
pareil pour les autres chambres jasmin et genet
person"n"e avec deux "n" (miam !je me régale)
la suite genet est "à" 210€: "à" avec accent
tables d'hotes : accent circonflexe sur le "ô"
j'hesite si il ne faut pas écrire "les lundi 's', mardi 's' " au pluriel avec un "s"... Je suis même sûr que l'on rajoute un "s".

3)Vignoble
rajoute une vigrule apres Gerard et Didier Lagneau.
Rajoute un point à la fin de la phrase: "dans notre cave."
réguli"è"rement avec "è"
texte alternatif : notre cave voutéE" et non "notre cave vouté"
"XVIème siècle" avec un "è" sur le "e" de siècle. Le "16", écris le en chiffres romains.
"eux-mêmes" avec un tiret entre les deux mots
cave en pierre vouté"e" avec un "e" en plus! (j'hésite si on écris pas voûté avec ,un "û" à accent circonflexe?)(mais on n'est plus à une faute près lol )

4)Nos vins: ce vin "a" passé un an : et non ce vin "est" passé ... écris le "1" en toutes lettres. Vire aussi la virgule a la fin de phrase.
les vignes sont agé"e"s avec un "e" qui manque!Rajoute un point à la fin de la phrase!

5)Plan d'accès :
acc"è"s et non acc"é"s (a corriger 2 fois : dans le lien et a la fin du paragraphe)
...voilà...bye et bonne correction!
Modifié par Ralfman68 (20 Jun 2005 - 13:33)

Rien que ca ???

En tout cas un grand MERCI pour ces corrections que je ferais ce soir !

Mais tu le fais quand tu veux !