3253 sujets

Critiques de vos sites: code et design

[amateur] Renozecut - blog ciné / culture

Bonsoir / bonjour vous !

J'ai créé un thème wordpress pour le blog d'un ami. Ça fait 4-5 mois qu'il est en ligne, et donc que j'essaie de l'améliorer. Mais je n'ai pas fini à en croire GTmetrix (principalement du CSS inutilisé), et W3C (pas mal à cause des vidéos et plugin).

En ce qui concerne le CSS inusité, j'utilise CSS usage avec firebug, mais il m'indique du CSS en trop... que j'utilise Smiley ohwell . Donc, si vous pouviez m'éclairer...

Merci pour vos critiques et visites en tout cas.

J'ai failli envoyer sans mettre le lien... http://renozecut.kegtux.org/ Smiley lol
Modifié par Sans pseudo fix (05 Apr 2012 - 19:32)
Salut,

Quelques remarques :
— ta police principale est illisible. Evite au moins de l'utiliser pour des textes de petite taille comme dans le menu latéral du site (moi j'en changerais tout court parce qu'elle n'est pas très bien finie…). Le mélange Marker/Times est particulièrement incohérent ;
— il faudrait utiliser un peu les pseudos classes :hover, :focus et :active ! Aucun lien du site ne réagit au survol (sauf les boutons de la pagination en bas je crois). C'est un problème ergonomique majeur… ;
— sur Safari/Mac, le champ de recherche n'apparait pas (sur FF/Mac, je l'ai bien) ;
— il y a une petite incohérence : la liste des catégories WP située en haut du site utilise un ticket de ciné comme fond du bouton (au passage : élargir l'espace cliquable à tout le bouton au lieu du texte seul) tout comme les titres des éléments de la colonne latérale. C'est pas logique et du coup on a tendance à vouloir cliquer sur ces titres… ;
— tu abuses souvent des attributs title Smiley cligne Exemple avec les permaliens des titres <h2> des articles : l'attribut title est inutile car redondant avec le contenu. Il n'apporte donc rien et il est même source de bruit.

Sinon, je ne suis pas d'accord avec les choix graphiques. Le design est vraiment surchargé et je pense que ça irait beaucoup mieux avec un choix typo plus classique et plus cohérent. Marker, j'aime pas vraiment, mais si on utilise du Times pour le contenu à côté, la on peut objectivement dire que ça ne fonctionne pas.

Par contre, je trouve que le thème est pas mal fichu. Mention spéciale pour les résultats de recherche si l'on ne trouve rien Smiley lol ou encore la 404 Smiley ravi
Re,
Pour le champ de recherche qu'il n'apparaît pas, c'est dû au fait que tu donne une couleur similaire au fond du champ et à celui de <body>. Il faudrait au minimum donner une bordure de couleur différente à input#s pour ne pas faire reposer son affichage uniquement sur l'ombre portée du champ.


Sinon, une dernière remarque plus axée WordPress : il faudrait débroussailler un peu le contenu de la partie <head> de ton thème. C'est tout le problème de la fonction wp_head(). C'est obligatoire pour les plugins mais quand on en utilise beaucoup comme ici, ça devient vite la pagaille. Ton (petit) problème de perfs vient sûrement en bonne partie de là.
Toujours sur wp_head(), je te conseille de supprimer ce qui n'est pas nécessaire (voire dangereux, comme l'affichage de la version de WP utilisée) > Cleanup WP header Smiley cligne
Modifié par audrasjb (04 Apr 2012 - 09:34)
Merci pour ta réponse !

audrasjb a écrit :
Salut,

Quelques remarques :
— ta police principale est illisible. Evite au moins de l'utiliser pour des textes de petite taille comme dans le menu latéral du site (moi j'en changerais tout court parce qu'elle n'est pas très bien finie…). Le mélange Marker/Times est particulièrement incohérent ;

J'ai un gros problème avec les polices. Mais pour le menu, c'est aussi le choix de mon pote (et encore, au début, il y avait un petit texte-shadow pas piqué des hannetons Smiley lol ). Mais j'avoue que je l'aime bien cette police (je l'utilise pour mon site aussi...). Mais je suis d'accord que c'est pas très cohérent avec la police du contenu... Je vais essayer d'améliorer ça.

a écrit :

— il faudrait utiliser un peu les pseudos classes :hover, :focus et :active ! Aucun lien du site ne réagit au survol (sauf les boutons de la pagination en bas je crois). C'est un problème ergonomique majeur… ;

Ah ouais...carrément zappé ça.
a écrit :

— sur Safari/Mac, le champ de recherche n'apparait pas (sur FF/Mac, je l'ai bien) ;

Rah ?! sur safari/windows ça marche. Bizarre Smiley ohwell

a écrit :

— il y a une petite incohérence : la liste des catégories WP située en haut du site utilise un ticket de ciné comme fond du bouton (au passage : élargir l'espace cliquable à tout le bouton au lieu du texte seul) tout comme les titres des éléments de la colonne latérale. C'est pas logique et du coup on a tendance à vouloir cliquer sur ces titres… ;

Bien vu.
a écrit :

— tu abuses souvent des attributs title Smiley cligne Exemple avec les permaliens des titres &lt;h2&gt; des articles : l'attribut title est inutile car redondant avec le contenu. Il n'apporte donc rien et il est même source de bruit.

C'est à cause de Wordpress...
a écrit :

Sinon, je ne suis pas d'accord avec les choix graphiques. Le design est vraiment surchargé et je pense que ça irait beaucoup mieux avec un choix typo plus classique et plus cohérent. Marker, j'aime pas vraiment, mais si on utilise du Times pour le contenu à côté, la on peut objectivement dire que ça ne fonctionne pas.

Je sentais bien que c'était surchargé, tu me le confirmes.
a écrit :

Par contre, je trouve que le thème est pas mal fichu. Mention spéciale pour les résultats de recherche si l'on ne trouve rien Smiley lol ou encore la 404 Smiley ravi

Merci ! J'aime bien personnaliser au maximum les sites que je fais.

Merci pour la critique en tout cas.

Edit : merci pour le complément (wp_head).
Modifié par Sans pseudo fix (04 Apr 2012 - 09:46)
Sans pseudo fix a écrit :
C'est à cause de Wordpress…

Han ça c'est un peu facile Smiley lol
Non, c'est à cause de la personne qui a intégré le thème !

Pour générer ton titre, tu dois actuellement utiliser un truc comme :
<h2><a href="<?php the_permalink(); ?>" title="<?php the title(); ?>"><?php the_title(); ?></a></h2>

Il suffit de supprimer l'attribut title du lien, tout simplement !
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

C'est bien tenté d'accuser le CMS, mais c'est loupé Smiley ravi
Modifié par audrasjb (04 Apr 2012 - 09:42)
audrasjb a écrit :

Han ça c'est un peu facile Smiley lol
Non, c'est à cause de la personne qui a intégré le thème !

Pour générer ton titre, tu dois actuellement utiliser un truc comme :

Il suffit de supprimer l'attribut title du lien, tout simplement !


Je savais que ça n'allait pas passer ça ! Smiley lol
Et effectivement, c'est carrément ma faute ! j'avais zappé cette ligne de code, j'ai cru que c'était automatiquement rajouté par wordpress... j'ai pas le cerveau complétement connecté Smiley biggol
Modifié par Laurie-Anne (04 Apr 2012 - 09:58)
Modérateur
Bonjour!

Tu as un problème d'optimisation des images, elles sont en général plus grandes que ce que tu utilises, avec une mention spéciale pour la page 404 avec un batman.png de 1,8 Mo ...
Le redimensionnement par le navigateur peut donner des résultats très moyens, et dépendant du navigateur. L'image de tes tickets est de bonne qualité au départ mais donne tout crade à cause du redimensionnement.

a écrit :
Mais j'avoue que je l'aime bien cette police

Personnellement je la trouve horrible Smiley biggrin ! En dehors de cette considération, elle est utilisable pour du titrage, mais elle est très peu lisible. En clair sur foncé ça devient une sorte de long boudin. (je dois me rapprocher de mon écran et me concentrer pour déchiffrer ton menu)
kustolovic a écrit :
Bonjour!

Tu as un problème d'optimisation des images, elles sont en général plus grandes que ce que tu utilises, avec une mention spéciale pour la page 404 avec un batman.png de 1,8 Mo ...

Je viens de m'apercevoir que je n'utilisais pas WP Smush.it pour ce site ! ça devrait aller mieux après.
a écrit :

Le redimensionnement par le navigateur peut donner des résultats très moyens, et dépendant du navigateur. L'image de tes tickets est de bonne qualité au départ mais donne tout crade à cause du redimensionnement.

Merci pour les tickets, je les ai fait moi même, et comme je suis pas doué, ça fait plaisir Smiley lol
a écrit :


Personnellement je la trouve horrible Smiley biggrin ! En dehors de cette considération, elle est utilisable pour du titrage, mais elle est très peu lisible. En clair sur foncé ça devient une sorte de long boudin. (je dois me rapprocher de mon écran et me concentrer pour déchiffrer ton menu)

J'ai toujours eu des goûts incertains pour les polices (j'aimais bien Comic sans MS quand j'étais plus jeune Smiley biggol ), mais je vais voir pour les garder simplement pour les titres.
Merci !
Modifié par Sans pseudo fix (04 Apr 2012 - 10:03)
Re-salut vous !

J'ai fait quelques modifications sur le site :
- Élimination des attributs title inutiles.
- Effets sur les liens.
- J'ai changé la police (pour le bonheur de tout le monde Smiley lol ou pas). Je pense que c'est plus cohérent avec le content.
- Les tickets cinéma ont été réduits en nombre et dimensions.

Il me reste l'image de mon header à refaire. Et certainement quelques trucs par ci par là à vérifier.

Merci pour le temps passé à visiter le site et me répondre.
Modifié par Sans pseudo fix (15 Apr 2012 - 21:38)
Re-re salut !
Je continue mon monologue une dernière fois (si personne ne répond), pour vous présenter la dernière mouture du site.
Puisque j'ai autant de talent pour le graphisme qu'un escargot pour la course, cette partie a été délégué à un ami graphiste. C'est épuré.
Je me suis concentré sur l'intégration / développement, et comme je pense que c'est loin d'être parfait, vos critiques sont les bienvenues (plus au niveau du code en ce qui me concerne).
Vous constaterez surement que je n'ai pas utilisé wp super cache, parce qu'il me provoquait des erreurs. Donc, temps que je n'aurais pas trouvé le pourquoi...
Quelques liens comme Fb, liens et infos ne sont pas encore actif (dans la partie en haut à droite).
Mes seules contributions "graphiques" sont la page 404 et l'erreur de recherche.
Je remet le lien vers le site, parce qu'il a changé d'adresse : rnzct.com.
Merci Smiley smile
Sujet clos
Aller à