3246 sujets

Critiques de vos sites: code et design

[Pro] Un site pour des tailleurs de pierre

Bonjour,

Tout d'abord, le site : Saint Jean des Quatre Couronnés

La mention "pro", c'est pour la finalité du site (of course), pas pour le type qui l'a créé Smiley cligne ...

Donc, nous avons un site "vitrine" WP, créé à partir d'un ensemble de codes issue de mon expérience, que j'ose appeler un framework Smiley smile , et auquel j'ai donné un nom : Scriptura.

Donc, en critiquant ce site, vous critiquerez en grande partie ce framework. N'hésitez pas à donner votre avis.
Salut,

Après rapide analyse, c'est globalement du bon travail ; mais, il y a encore des points à améliorer :
* au niveau du formulaire de recherche, il manque un élément label (l'attribut placeholder, pour rappel, n'en est pas un remplaçant) et l'élément button est dépourvu de contenu textuel exploitable par les lecteurs d'écrans ou en cas de non-chargement des CSS ;
* dans le slideshow, je mettrais chaque lien « Lire la suite » dans un paragraphe (tout contenu textuel ne devrait pas être enfant direct d'un div) ;
* dans les encarts sous le slideshow, je renforcerais visuellement la distinction des liens « Lire la suite » qui, vu qu'ils utilisent la même couleur que le h2 qui les précède, risquent de ne pas être spontanément identifiés comme des liens (ajoute le soulignement ou change les couleurs de texte et de fond) ;
* l'élément section n'est pas pertinent pour le conteneur de classe "content" (un div est mieux approprié).
Bonjour,

Un joli site ! Classique, conventionnel, mais soigné, sans excès techniques, construit avec goût.

Des petites réserves sur l'effet d'ombre sous le nom et les blocs. À atténuer pour éviter ce rendu très sombre entre les blocs.

Quand je clique sur une rubrique, par exemple "La vie au foyer", le hover sur le titre (texte noir, halo blanc" est too much. Trop d'effet tue l'effet. Le fond est peut être un peu sombre ou il faut éclaircir les textes qui en vieux rose et en petit manquent un peu de lisibilité.

Le fil d'ariane pourrait rester sur un fond de couleur, même pour la page affichée. Par exemple sur la page "La vie au foyer", ce sont les pages en amont qui ressortent le plus sur le fil d'ariane, ce qui n'est pas logique.

Dans certaines rubriques, comme "Nos réalisations" il manque un texte de présentation. Présenter les travaux, même avec une légende, me semble un peu court.

La bande du haut pourrait être un peu plus claire, plus tranchée. À tester.

Avez-vous testé avec un background plus clair et neutre (beige… ) ?
Le titre et le logo se calent sur le haut ce qui créé un léger déséquilibre avec le titre collé sur la bande du haut et du vide en dessous. Avez-vous essayé un centrage vertical ?

Voilà pour moi.
En attendant la suite ? Smiley smile
@Victor : merci pour ton message, toujours apprécié. Je suis particulièrement attentif à ta remarque sur le formulaire de recherche. Mais... le label est-il obligatoire pour un input de type "search" ? Les lecteurs ne sont-ils pas en mesure de comprendre la fonction de l'input sans ce paramètre ?

Je peu remplacer le placeholder par un label, exactement en lieu et place... mais je ne sais pas encore le cacher si l'input est en cours de remplissage...

Pour ce qui est de section.content... effectivement... cela n'est peut-être pas le plus approprié. Il faut que j'y réfléchisse, et voir si je penche en faveur d'une div.

@Spongebrain : Merci. J'ai effectué quelques modif's selon quelques unes de vos remarques que j'ai trouvées pertinentes. Pour les couleurs, j'ai beau être bénévole... j'ai quelques contraintes de la part des commanditaires.

Pour ce qui est du contenu, j'en avais produit une page ou deux, maintenant je passe la main aux commanditaires du site. La page "À propos" devrait être une priorité pour le responsable du site. Je le lui avais déjà dit... Les gens sont véloces pour faire des remarques, mais quand il faut produire du contenu, il y a déjà moins de monde Smiley cligne .
Edit : j'avais un chevauchement de Hn, mais dans mon cache uniquement.
Donc tout est parfait Smiley smile
Modifié par Manhattan (09 Jan 2014 - 22:16)
Oui, j'ai souvent changé de code. Afin d'éviter au visiteur à avoir à vider son cache il faudrait faire du versioning sur le fichier... Avec WP je trouve cela gonflant, surtout pour un site qui n'en aura bientôt plus besoin.

En attendant je peux rajouter sur le lien un truc du genre :
echo date(dmyi);

Le paramètre "i" c'est pour les minutes...

Ce qui donne au final un lien de ce type :
a écrit :
style.min.css?10011422

... Et qui, donc, change à chaque minute.
Modifié par Olivier C (10 Jan 2014 - 07:25)
Tu peux garder l'attribut placeholder, dont le rôle est d'indiquer un exemple de saisie attendu. Quant à l'élément label, ajoute-le, même pour un input de type "search", sachant que tu peux le masquer par positionnement absolu.
Victor BRITO a écrit :
Quant à l'élément label, ajoute-le, même pour un input de type "search" sachant que tu peux le masquer par positionnement absolu.

Merci pour cette info évidente Victor, mais pour laquelle de n'avait pas pensé... J'opte pour cette solution.

J'avais pensé à un truc avec un sélecteur adjacent, genre ça :
.search input:focus + label,
.search input:active + label,
.search input:visited + label {
    display: none;
}

Ça marche très bien pour focus et active (à condition de mettre le label sous l'input, sinon l'input risque de ne pas être cliquable à la souris), mais le problème, c'est qu'il n'y a pas d'état visited pour un input...
Modifié par Olivier C (17 Jan 2014 - 06:51)
Sujet clos
Aller à