3246 sujets

Critiques de vos sites: code et design

Besoin d'un avis code+graphisme [url=http://www.laloue-patissier.com/

Bonjour à tous,

Je cherche des critiques "intelligentes" sur ce site : pâtisserie laloué C'est un site avec peux de trafic avec un public plutôt âgées.

A part une critique générale je cherche aussi des suggestions pour remplacer le système de scrollbar interne dans la liste gâteaux par éxemple.
Je trouve cela pas très ergonomique et obsolète.

Bonne visite.
Modifié par zicolas (29 Jun 2011 - 11:20)
Salutation à tous

Au niveau du code en javascript, juste au dessus du </head> de fermeture, il y a un script qui est ouvert 2 fois. Un peu de ce genre :


<sript tye="text/javascript">
 <script type="text/javascript">
   <!-- Les instructions -->
 </script>
 </head> <!-- et la fermeture de head -->


Évidemment c'est à vérifier, la colorisation syntaxique est absente à ce niveau du code.

Dans la rubrique « traiteur », tes contenus ne sont pas nécessairement ajuster. Parfois le texte (le prix en particulier) dépasse son conteneur. De même pour les padding surtout padding-top, qui souvent est trop proche du bord du conteneur.

J'ai vérifier avec IE8 et Firefox (dernière version).

En générale tu as un visuel qui s'affiche bien en fonction du sujet traiter, mais un peu faible sur la mise en page de façon globale. Un peut trop serré à mon avis et ne te laissant pas d'espace suffisant pour l'ajustement.

C'est tes instructions CSS que tu devras revoir, je ne crois pas que ton CSS a été conçu pour une utilisation simple et efficace (intégration de contenu en particulier). Il serait beaucoup mieux que tes conteneurs s'ajuste automatiquement au contenu.

Mais toi tu as choisis un « height » fixe pour tous les conteneurs. Ce qui brise l'utilisation lorsque nous voulons ajouter/supprimer du contenu. Tu dois sans cesse jouer avec le texte ou autre objet comme les images pour ajuster le contenu au conteneur.

Je sais qu'il n'est pas simple de tout comprendre, mais le but que tu devrais rechercher est l'ajout et/ou la supression de contenu (on peut dire modification aussi), et ce aisément, et sans autres ajustement.

Mais c'est un choix personnelle que tu as fait en voulant fixer la hauteur des conteneurs. Avec évidemment les conséquences qui s'y rattachent.
..
Modifié par zardoz (29 Jun 2011 - 14:59)
Merci pour vos réponses.

Je vais en tenir compte. Pour supprimer le height fixe je pense découper le fond en 3 images.
Le haut avec l'ombre, le milieu que je répete et le bas avec l'ombre.
De cette manière je vais supprimer la scrollbar. Vous en pensez-quoi ?

J'ai également un petit soucis avec la validation W3C sur mon menu.
Il m'indique 3 fois l'erreur :
"Element dl is missing a required instance of child element dd.
</dl>
Content model for element dl:
Zero or more groups each consisting of one or more dt elements followed by one or more dd"

Une idée?
Bonjour,

Les listes de définition : dl ne sont pas appropriées pour le balisage d'un menu. Il est préférable d'utiliser ul et li. Pour ce qui est de l'erreur rencontrée, un élément dl doit avoir au moins un élément dd et un élément dt, car son but est d'apporter une définition (dd) à un terme (dt).

Pour ce qui est du site :

Je trouve la page très sombre et manquant d'alignement (les blocs les uns en dessous des autres ne sont pas alignés sur la même ligne à gauche et/ou à droite). J'ai également un peu de mal à voir le rapport entre le fond "parquet" et les pâtisseries (mais bon c'est la mode l'effet bois...).

Le menu est partiellement impossible à naviguer au clavier (pas de déroulement et pas de liens sur "Desserts"). C'est un problème assez important et facile à résoudre en remplaçant tout ce qui concerne le hover par du focus.

Dans les pages de contenu, le cadre bleu autours des images cliquables est à supprimer.

Pour le code :
* La meta description est sensée décrire la page en cours et attirer le visiteur du moteur de recherche jusqu’au site. Le message « Bienvenue sur la page de.... » ne sert absolument pas ce but.

* La meta keywords ne sert à rien, à part prendre de la place dans le code.

* Il serait préférable de placer les scripts JS en fin de document (sauf, éventuellement, celui de GA qui est en chargement asynchrone).

* Il serait préférable de n’avoir qu’un seul fichier CSS à charger (il suffit de copier le contenu du second à la fin du premier fichier).

* Comme déjà dit, les listes de définitions ne servent pas à baliser un menu. Il est préférable d’utiliser <ul>.

* La hiérarchie des titres de la page n’est pas correcte, puisqu’elle commence à h2 sans h1. D’ailleurs il est tout à fait correct d’attribué un hn à une image.

* Attention aux textes alternatifs à tes images. « logo » n’est pas un texte alternatif, c’est un nom de fichier. Le texte alternatif d’une image doit reprendre fidèlement le contenu textuel se trouvant sur une image ou une explication du sens de celle-ci (quand il n’y a pas de texte). Dans ton cas, sur logo2.png, il devrait y avoir : « Didier Laloué ».

* L’utilisation de plusieurs <br> à la suite est souvent le signe qu’un nouveau paragraphe aurait du être créé.

* L’utilisation de micro-formats pourrait être intéressante pour les informations de contact.

* Attention au mailto, c’est un attrape spam.

+1 sur le commentaire de jb_gfx sur « l’optimisation », c’est ridicule.
zicolas a écrit :
Merci pour vos réponses.

Je vais en tenir compte. Pour supprimer le height fixe je pense découper le fond en 3 images.
Le haut avec l'ombre, le milieu que je répete et le bas avec l'ombre.
De cette manière je vais supprimer la scrollbar. Vous en pensez-quoi ?


Pas du tout. Tu as un manque sur HTML et BODY, des instructions importantes.
Pour ignorer les deux scrollbar's.


body { width:100%; overflow:hidden; /* et autres instructions */ }


ou encore : ignorer un seul scrollbar : de préférence horizontale, pour les scrollbar's des navigateurs. Évidemment ce genre demande au minimum de contrôler les objets sur la largeur.


body { width:100%; overflow:auto; /* et autres instructions */ }


Scrollbar du navigateur.

Il se peut cependant que la valeur de overflow soit :auto au lieu de :hidden. Avec la valeur :auto tu pourras contrôler uniquement la disparition du scrollbar horizontale, tandis qu'avec :hidden ce sont les deux scrollbar's qui disparaîtrons. La propriété overflow agit sur la zone sur laquelle l'instruction est appeler, dont les scrollbar's des navigateurs si la zone instruite est BODY. La valeur :hidden peut être utile pour les sites de type « onePage » où tout ce passe à l'intérieur d'une zone défini, et centré. Encore une fois cette zone peut être un élément DIV, mais aussi l'élément BODY.

Dans ton cas il s'agirait surtout d'un manque de contrôle sur la largeur. Comme Laurie-Anne le disait plus haut les objets visuels n'ont pas tous la même largeur, mais seront centré (sauf la navigation qui est trop à droite). Il est important en CSS d'avoir une vue globale, (donc une structure globale dès le départ). De bien définir l'ensemble, bref la zone qui contient tous les objets visuels. Oubli pas que la zone globale n'est pas nécessairement placer en visuel, celui-ci peut-être invisible mais présent par instructions.

Je suis allez voir ton fichier CSS que j'ai placer sur ma machine pour fin d'observation. Tu utilise abusivement de la négation pour les nombres (-120px) par exemple. En générale l'utilisation de négations pour les nombres, signale un manque d'expérience et un manque de technique en CSS.

Personnellement je te suggèrais de profiter des articles et tutoriels sur Alsacréations. Ceux-ci te seront profitables.

..
Modifié par zardoz (02 Jul 2011 - 04:41)
Sujet clos
Aller à