3246 sujets

Critiques de vos sites: code et design

Le site d'un artiste de jembé ivoirien

Bonjour,
j'ai refait entièrement le site d'un ami artiste ivoirien, avec les nouvelles contraintes du "responsive". La première version datait d'environ huit années, la fin de l'époque des écrans cathodiques !

Je vous le soumet :
http://mamoutou-kone.fr

Merci pour vos avis.
Cordialement.
Modifié par Bongota (04 Oct 2017 - 17:38)
Bonsoir.

Je regarde votre site sur un ordinateur de bureau avec un écran 17 pouce…

Ce qui me gêne le plus, ce sont ces textes rouges sur fond vert… aîe, surtout les petits textes de la liste du menu sur la gauche.

Quelques liens sont inclus dans la page d'accueil mais pour le reste, il faut faire l'effort d'aller dans le menu pour naviguer dans le site.

Pourquoi il y a autant d'espace entre « Mamoutou Kone, jembefola à Bouaké etc… » et chaque titre de la page ?

Je trouve que le site est un tout petit peu trop sobre vu le sujet sautillant et coloré.

Pour le reste… musiques sympathiques, dansantes.

Smiley smile
Bonsoir,

et merci pour vos conseils, ils sont toujours bons à prendre.

J'avoue que le site étant un peu tourné vers l'Afrique (et même exclusivement pour la page "Sonorisation"), j'ai privilégié les smartphones et les tablettes. En Afrique, c'est 75% de navigation sur smartphones et petites tablettes. Presque personne n'a de grands écrans. Conséquence, pour les grands écrans, j'ai négligé, à la fois les caractères et l'occupation de l'espace.

Il faut faire l'effort d'aller dans le menu pour naviguer sur le site.
Ce n'est pas le rôle des menus ? Doit-on mettre tous les liens sur la page d'accueil ?

Les liens en rouge, oui, à corriger. Sur fond vert, pas vraiment. C'est du darkslategray.

Pour le grand espace entre le titre principal et le sous-titre, même réponse. Sur un grand écran, je dois corriger ça. L'autre raison, c'est qu'en mode smartphone ou petite tablette, lorsque l'on passe en mode paysage, le menu et le sous-titre se rapprochent dangereusement du titre principal, au point de parfois le frôler. Avec un plus grand espace, je me protège de ce désagrément. Il y a peut-être mieux à faire de ce côté.

Je vous le répète, je dois travailler les grands écrans. Avant, bien plus important, je dois résoudre le problème du menu en mode smartphone. Une réponse m'a été donnée cet après-midi à ce sujet. A suivre.

La sobriété, je la cherche plutôt. J'insiste, en Afrique, ce sont des connexions 3G lentes. Question rapidité, je suis au top, d'après Dareboost. C'est bien ce qui m'importe. Alors, charger le site...

Cordialement.
Modifié par Bongota (04 Oct 2017 - 21:34)
Bonjour.

Bongota a écrit :

Il faut faire l'effort d'aller dans le menu pour naviguer sur le site.
Ce n'est pas le rôle des menus ? Doit-on mettre tous les liens sur la page d'accueil ?

La liste des liens du menu est assez longue… Je ne sais pas s'il faut mettre tous les liens sur la page d'accueil mais, a priori, quelqu'un d'intéressé va lire le texte de la page d'accueil. Pourquoi ne pas en profiter pour l'aider dans sa navigation de manière plus logique et plus élégante que d'aligner des liens dans un menu.

Bongota a écrit :

La sobriété, je la cherche plutôt. J'insiste, en Afrique, ce sont des connexions 3G lentes. Question rapidité, je suis au top, d'après Dareboost. C'est bien ce qui m'importe. Alors, charger le site...

Excellente raison. Néanmoins, dans tous les temps anciens où les connexions rapides n'existaient pas, des gens astucieux ont su trouver des solutions pour embellir les pages Web à moindre frais : utilisation d'images monochromes ou bichromes, répétition de motif grâce à background-repeat… Il y en peut-être d'autres.
Mais il est vrai que le plus important est le confort d'utilisation.

Smiley smile
Tu devrais revoir ta syntaxe pour que ton DOCTYPE soit 5.0
Ainsi en employant un éditeur type Notepad, tu sauveras tes PHP ou html
en UTF8 sans bome, et donc tu pourra écrire tout tes textes sans avoir a utiliser les "&"
Je ne reviens pas sur la couleur des liens horribles !
En Côte d'Ivoire ou j'ais dirigé pendant deux ans les services technique de la RTI, Ils ont leur style ,je le comprends, mais ils se sont profondément rapprochés de nos harmonies graphique.
A toi de voir.
Par ailleurs corrige le haut de ton Sitemap, je vois que tu ne l'a même pas testé

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0,9">
<url>
<loc>http://www.mamoutou-kone.fr/</loc>
</url>
<url>
<loc>http://www.monsiteamoi/page1</loc>
</url>

Tu as 29 pages référencées chez Google, bravo !
Bon courage
Bonjour,

et merci pour les conseils.

Pour ce qui est du DOCTYPE, je sais qu'avec le html5, on peut se contenter de simplement mettre <!DOCTYPE html>, mais je n'ai pas encore effectué le changement. Je ne savais pas qu'il était possible par ce moyen d'éviter de saisir le & pour écrire du texte.

La couleur des liens, c'est fait, ils sont en bleu maintenant, et ceux du bas soulignés.

Le "sitemap", oui, j'avais modifié l'ordre du site sans le corriger. Par contre, je ne vois pas ce qui est à corriger en haut. La date de modification est-elle inscrite par mes soins ou mise à jour automatiquement ? Et je ne savais pas que l'on pouvait tester ce ficher xml (et comment).

Tout ça fait partie des petits ajustements que j'effectue au jour le jour, mais venons au principal.

Quand tu parles d'harmonie graphique, je suppose que tu évoques surtout le choix des couleurs. Je viens également de changer celle du fond, qui était un peu lourde. On est cependant tous devant des choix multiples, tous aussi attrayants les uns que les autres. Il existe des outils en ligne pour vérifier le contraste des couleurs d'un site, mais je les trouve difficiles à exploiter.

Maintenant, si tu parles de la pagination globale du site, on aborde là un domaine parfois flou, où le phénomène de mode entre en jeu. J'ai appris beaucoup avec les tutoriels d'Alsacreations, entre autres. On y retrouve très souvent le schéma suivant - un header, un menu, un contenu et un footer. Il s'agit là d'une base minimale, mais mon propos n'est pas ici. Je veux surtout parler de la place du menu. Les partisans ou adversaires des menus horizontaux ou verticaux s'affrontent, sans qu'émerge un consensus, y compris à Alsacreations (si je regarde leur tutoriels). Pourtant, certains de mes visiteurs amis me reprochent mon menu vertical, sorte de gros bloc gênant et me disent de "faire comme" - Google, Facebook, Amazon, etc. C'est à dire de suivre la mode. Ce à quoi je résisterai fermement, contrairement aux conseils techniques et pratiques de ce forum que j'applique généralement très rapidement.

En Afrique, la luminosité est beaucoup plus grande qu'en Europe. Dans une grande ville comme Bouaké, tout le monde consulte les sites dans la rue, sur son téléphone portable. Le contraste des éléments qui s'affichent doit être très grand, par rapport à ici.

Cordialement.
Modifié par Bongota (06 Oct 2017 - 14:07)
Attention à ne pas transmettre des informations erronées (ça peut nous arriver à tous, hélas) :

Tu devrais revoir ta syntaxe pour que ton DOCTYPE soit 5.0 > le HTML 5.0 n’existe pas, le HTML5, si.

UTF8 sans bome > UTF-8 sans BOM (byte order mark).

"Pour ce qui est du DOCTYPE, je sais qu'avec le html5, on peut se contenter de simplement mettre <!DOCTYPE html>, mais je n'ai pas encore effectué le changement. Je ne savais pas qu'il était possible par ce moyen d'éviter de saisir le & pour écrire du texte."

Rien à voir avec le HTML5, ça dépend de l'encodage du fichier. Si tu enregistre tes fichiers avec l'encodage UTF-8, tu peux utiliser directement tous les caractères d'une police et donc te passer des "HTML entities". Ça améliore la lisibilité du code et ça réduit (un peu) le poids des pages.

Pas besoin d'un logiciel spécifique pour ça, le Bloc-notes de Windows (ou tout autre éditeur de texte par défaut fourni avec un OS, j'imagine) fait ça très bien.

Pour le menu, chez moi, en simulation d'affichage de smartphone (320 x 480 pixels), sur Firefox 56 desktop, avec le menu positionné tout en haut de l'écran, le bas du menu dépasse toujours le bas de l'écran.

Au passage, la police scripte du menu ne me parait pas des plus lisibles.

@Bongota :

Quelle est la graphie la plus utilisée : jembe ou djembé ?

Avec Google, j'obtiens les résultats suivants :

djembé : Environ 845 000 résultats

Par contre, lorsque je fais une recherche sur jembe, j'obtiens le résultat suivant... :

Résultats pour djembé
Essayez avec l'orthographe jembé

... et si je continue :

jembé : Environ 562 000 résultats

Mais peut-être que dans ton lectorat-cible, on écrit davantage jembé que djembé ?

Sinon, ça serait bête de perdre de manquer des lecteurs à cause de l'utilisation d'une graphie moins usitée.

Un article qui peut peut-être t'intéresser :

https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html

@Zelena : Et on peut même créer des motifs sans images...

http://lea.verou.me/css3patterns/
Bonjour,

Pour l'orthographe de jembé, il n'y a pas de consensus dans ce monde de percussions. Je crois savoir que le "d" a été ajouté par nous, les occidentaux, parce qu'il sonnait plus sec, plus percussion que le "j". Il en va de même pour l'accent sur le é, il n'y a pas de règle. Dans les mots clés de ma page d'accueil, j'ai d'ailleurs mis les trois possibilités - jembe, jembé, djembé.

La police du menu est la même que celle du titre et du sous titre. Je peux changer facilement, je la trouve pourtant assez agréable à l'œil. C'est une police perso, prise chez Google mais installée à la racine de mon site. Je n'aime pas les "partis tiers", dont parle abondamment le site que tu me propose de visiter.

Pour l'édition de texte html, pas de problèmes, je suis sous vim ou parfois gedit.

Cordialement.
La police du menu est la même que celle du titre et du sous titre. Je peux changer facilement, je la trouve pourtant assez agréable à l'œil. C'est une police perso, prise chez Google mais installée à la racine de mon site. Je n'aime pas les "partis tiers", dont parle abondamment le site que tu me propose de visiter.

Oh, j'ai pensé que les techniques de limitation du poids des polices pouvaient peut-être t'intéresser.

Ta police est effectivement agréable à l’œil, mais pas forcément lisible pour autant. Le mieux serait que tu fasses des tests utilisateur.
Bonjour,

j'ai retravaillé le site, en suivant notamment les conseils donnés ici.

Le menu a fondu, les liens sont en bleu et le background a changé aussi. Les liens vers les pages secondaires sont maintenant dispersés dans le footer. J'ai un peu rapproché le texte principal du haut de la page et ajouté de la cohérence dans certains textes et liens situés dans les pages. Supprimée, aussi la justification à droite du texte principal. Le sitmap a été corrigé.

J'avais abusé des unités vw. Elles ont été remplacées à certains endroits mais il y a encore du "nettoyage" à faire de ce côté. Mal utilisées, les unités vw font des choses incohérentes.

Il y aura encore des corrections de tailles de fontes, suivant les retours des utilisateurs. Je n'ai pas à ma disposition tous les écrans du marché. Et il reste beaucoup à faire pour les grands écrans, mais ce n'est de loin pas ma priorité.

Les test effectués sur GTmetrix, Dareboost ou PageSpeed Insights sont probants, mais certaines améliorations dépendent de mon hébergeur, notamment la sécurité du serveur et le https, qui est refusé par cet hébergeur sur du mutualisé. Et ces tests ne sont axés que sur les problèmes techniques, pas sur la charte graphique, ni sur l'aspect et l'ergonomie du site.

http://mamoutou-kone.fr

Cordialement et merci pour vos aides.
Sujet clos
Aller à