3246 sujets

Critiques de vos sites: code et design

Demande de critiques constructives sur un site que j'ai réalisé

Bonjour à tous,

J'ai récemment crée un petit site pour une ASBL d'aide au développement en Afrique et j'aurais voulu savoir ce que vous en pensiez à tout niveau...

Il y a surement des erreurs de validations mais c'est un site réalisé avec un CMS (Joomla) dont j'ai modifié le template, je n'ai pas donc pas beaucoup de contrôle sur le code...

Je suis encore en phase d'optimisation pour les moteurs de recherches (ne faite donc pas attention aux titres des pages)

A vos claviers Smiley cligne
Modifié par Diox (19 Oct 2008 - 08:01)
bonjour

j'aime beaucoup la charte graphique et l'agencement de l'information, ça change de ces sites qui nous jettent une tonne d'info sur la page d'accueil

juste une remarque : la bande texturée entre le header et le menu ne tranche pas assez avec le background du body, à mon avis une bande colorée passerai mieux (vert ou orange ... mais ça c'est une histoire de goût)

peut être aussi une remarque sur la photo en header et la position de la femme au premier plan : on ne voit que son postérieur lol


dans le menu "contact / partenaires" je rajouterais un lien "faire un don" qui pointerai directement en bas de page "combien ça coûte ?"
parce que en l'état on peu complètement zapper le fait que l'on puisse vous soutenir
Modifié par scott54 (19 Oct 2008 - 14:27)
scott54 a écrit :
bonjour
j'aime beaucoup la charte graphique et l'agencement de l'information, ça change de ces sites qui nous jettent une tonne d'info sur la page d'accueil


Merci, j'ai essayer de faire du smooth Smiley cligne

scott54 a écrit :

juste une remarque : la bande texturée entre le header et le menu ne tranche pas assez avec le background du body, à mon avis une bande colorée passerai mieux (vert ou orange ... mais ça c'est une histoire de goût)


Mmh ca par contre mon je trouve que ca va.. en fait je n'ai pas chercher spécialement à trancher mais plutôt à ne pas que le menu flotter dans un océan de blanc, ça le cadre donc un peu

scott54 a écrit :

peut être aussi une remarque sur la photo en header et la position de la femme au premier plan : on ne voit que son postérieur lol


Mais quel esprit mal tourné mon garçon Smiley biggrin . Non blague à part tu as raison, je n'avais jamais tilté la dessus... à méditer pour la prochaine fois

scott54 a écrit :

dans le menu "contact / partenaires" je rajouterais un lien "faire un don" qui pointerai directement en bas de page "combien ça coûte ?"
parce que en l'état on peu complètement zapper le fait que l'on puisse vous soutenir


Très pertinente suggestion, heureusement qu'il y a les autres pour remarquer nos bourdes Smiley cligne

Merci à toi de cette analyse scott54.

D'autres avis ?
Salut,

Je partage l'avis de Scott54 concernant la bande de terre au dessus du menu. Elle coupe un peu trop le contenu, et j'ai tendance à ne voir que ça.
Si tu veux la conserver, peut être que tu peux en réduire la hauteur. Une hauteur similaire à la bande verte qui part du logo me semblerait déja plus discrète.

Ils sont peut être faits pour être vus, mais les deux liens contact et partenaires en bleu et bordeaux jurent un peu niveau couleur avec le reste de la page.

Bon sinon pour moi, la grosse défaillance c'est la mise en forme textuelle. Je vais être clair, je n'ai pas envie de lire.

Sur la page d'accueil, le titre "qui sommes nous ?" est agréable à lire, et ressort bien. (par contre pourquoi n'est-il pas dans une balise de titre hn ?)

Mais ensuite, l'information est un peu marron, dense et tout à la même taille.

Peut être faudrait-il agrandir déja la taille du titre "qui sommes nous ?", ce qui te permettrait d'aggrandir les titres suivants un petit peu par rapport au texte. Et les changer de couleur aussi... tu as suffisamment de couleur présentes dans ton entête que tu peux exploiter.
Et revois l'interligne je pense, car là c'est un peu trop serré pour donner à l'oeil l'espace dont il a besoin pour ne pas se perdre entre les lignes.

Je trouve en revanche que la mise en forme tabulaire est agréable à lire.

Une chose me dérange encore, la page de réalisation. Les boutons ">> galerie photo" sont tellement présents qu'on ne voit qu'eux, et on a doit forcer pour lire les rubriques auquels ils s'apparentent.
Pourquoi ne pas mettre 2-3 vignettes sous chaque rubrique, et un lien plus discrêt vers la galerie complète ? Ca serait plus attractif je pense.

Voilà, sinon quoi qu'il en soit, site très agréable.
Bonjour Diox,
dans l'ensemble c'est assez chaleureux et agréable. Smiley cligne

Je suis sur un écran d'une largeur de 1600px et je vois qu'aux extrémités latérales de l'écran les fondus de ton image de fond sont trop abruptes, c'est pas très heureux. En revanche ça passe beaucoup mieux en 1280X1024 par exemple.

Même remarque que Mikachu concernant l'interlignage trop faible, d'une manière général fais varier l'interligne (propriété line-height) entre 1.4 et 1.6 em.
D'autre part tes ligne de texte sont un peu trop longues.
Pour la 2eme ligne par exemple elle devrait s'arrêter aprés le mot "Casamance,".

Le menu n'est pas assez rapidement identifié, trop discret et la surface cliquable de tes liens est trop faible, ce qui peut poser problème aux hancapés moteur et exige une certaine précision qui peut devenir agançante. Essayes de créer un menu avec des boutons en roll-over.

Tu as sans doute choisi de na pas avoir de page d'accueil mais d'une part, tomber directement sur la page qui somme nous n'est pas habituel et d'autre part, pour une "page d'acueil", il y a trop d'information textuelle.
La page d'accueil devrait donner des informations succinctes sur l'association, son activité, ses objectifs etc, d'une manière générale sans
rentrer dans le détail.
Modifié par Hermann (22 Oct 2008 - 12:49)
Pas super sexy sur la première page:

string(180) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('zone-d-intervention/zone-dintervention.html', 'index.php?option=com_content&catid=35&id=50&view=article', '56')" string(169) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('nos-objectifs/nos-objectifs.html', 'index.php?option=com_content&catid=42&id=51&view=article', '54')" string(171) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('mise-en-oeuvre/mise-en-oeuvre.html', 'index.php?option=com_content&catid=43&id=52&view=article', '55')" string(167) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('realisations/realisations.html', 'index.php?option=com_content&catid=44&id=53&view=article', '57')" string(175) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('combien-ca-co-te/combien-ca-co-te.html', 'index.php?option=com_content&catid=45&id=54&view=article', '58')" string(171) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('carnet-de-bord/carnet-de-bord.html', 'index.php?option=com_content&catid=47&id=61&view=article', '74')" string(157) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('contact/contact.html', 'index.php?option=com_content&catid=46&id=55&view=article', '75')" string(165) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('partenaires/partenaires.html', 'index.php?option=com_content&catid=41&id=47&view=article', '76')"
Qui sommes-nous ?
Zone d'intervention
Nos objectifs
Mise en oeuvre
Réalisations
Combien ça coûte ?
Carnet de bord
Contact
Partenaires
string(172) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('qui-sommes-nous/qui-sommes-nous.html', 'index.php?option=com_content&catid=40&id=46&view=article', '1')"
Qui sommes nous ? string(187) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('qui-sommes-nous/qui-sommes-nous/pdf.html', 'index.php?option=com_content&catid=40&format=pdf&id=46&view=article', '1')" string(210) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('qui-sommes-nous/qui-sommes-nous/imprimer.html', 'index.php?option=com_content&catid=40&id=46&page=&print=1&tmpl=component&view=article', '1')"
FranZz a écrit :
Pas super sexy sur la première page:

string(180) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('zone-d-intervention/zone-dintervention.html', 'index.php?option=com_content&catid=35&id=50&view=article', '56')" string(169) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('nos-objectifs/nos-objectifs.html', 'index.php?option=com_content&catid=42&id=51&view=article', '54')" string(171) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('mise-en-oeuvre/mise-en-oeuvre.html', 'index.php?option=com_content&catid=43&id=52&view=article', '55')" string(167) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('realisations/realisations.html', 'index.php?option=com_content&catid=44&id=53&view=article', '57')" string(175) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('combien-ca-co-te/combien-ca-co-te.html', 'index.php?option=com_content&catid=45&id=54&view=article', '58')" string(171) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('carnet-de-bord/carnet-de-bord.html', 'index.php?option=com_content&catid=47&id=61&view=article', '74')" string(157) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('contact/contact.html', 'index.php?option=com_content&catid=46&id=55&view=article', '75')" string(165) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('partenaires/partenaires.html', 'index.php?option=com_content&catid=41&id=47&view=article', '76')"
Qui sommes-nous ?
Zone d'intervention
Nos objectifs
Mise en oeuvre
Réalisations
Combien ça coûte ?
Carnet de bord
Contact
Partenaires
string(172) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('qui-sommes-nous/qui-sommes-nous.html', 'index.php?option=com_content&catid=40&id=46&view=article', '1')"
Qui sommes nous ? string(187) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('qui-sommes-nous/qui-sommes-nous/pdf.html', 'index.php?option=com_content&catid=40&format=pdf&id=46&view=article', '1')" string(210) "INSERT INTO `#__redirection` (`oldurl`, `newurl`, `Itemid`) VALUES ('qui-sommes-nous/qui-sommes-nous/imprimer.html', 'index.php?option=com_content&catid=40&id=46&page=&print=1&tmpl=component&view=article', '1')"


Toutes mes excuses, maintenant c'est résolu tu peux aller voir, c parcque je suis en train d'essayer de faire de l'url rewriting avec joomla et je galère Smiley cligne
Euh... et une réaction aux autres commentaires aurait été le bienvenue.
Modifié par Hermann (24 Oct 2008 - 14:55)
Toutes mes excuses pour mon retard de réaction et merci encore de vous être intéressé à mon travail Smiley smile

a écrit :

Ils sont peut être faits pour être vus, mais les deux liens contact et partenaires en bleu et bordeaux jurent un peu niveau couleur avec le reste de la page.


En effet, j'ai voulu les mettre en évidence, et j'avais l'impression qu'en cette couleur avec le bleu de l'eau en dessous + un peu de rouge ca donnait un peu de dynamique sans être trop flashy. Que mettrais-tu comme couleur ?

a écrit :
Sur la page d'accueil, le titre "qui sommes nous ?" est agréable à lire, et ressort bien. (par contre pourquoi n'est-il pas dans une balise de titre hn ?)


En fait, j'utilise joomla et c'est le titre de l'article chaque fois qui est habillé en vert de cette manière et je ne connait pas le moyen technique pour le convertir en h1, est-ce possible ?

a écrit :
Peut être faudrait-il agrandir déja la taille du titre "qui sommes nous ?", ce qui te permettrait d'aggrandir les titres suivants un petit peu par rapport au texte. Et les changer de couleur aussi... tu as suffisamment de couleur présentes dans ton entête que tu peux exploiter.


Très pertinante analyse, je n'avais pas tilté la dessus... je vais essayer de hierarchiser et structurer tout ça.

a écrit :

Une chose me dérange encore, la page de réalisation. Les boutons ">> galerie photo" sont tellement présents qu'on ne voit qu'eux, et on a doit forcer pour lire les rubriques auquels ils s'apparentent.
Pourquoi ne pas mettre 2-3 vignettes sous chaque rubrique, et un lien plus discrêt vers la galerie complète ? Ca serait plus attractif je pense.


Oui, en fait j'avais fait ces boutons car je voulais attirer l'attention dessus car je trouve que les galleries sont essentielles pour ce site. Mais effectivement ca flash un peu après réflexion...


a écrit :
dans l'ensemble c'est assez chaleureux et agréable.

Merci Smiley lol

a écrit :
Je suis sur un écran d'une largeur de 1600px et je vois qu'aux extrémités latérales de l'écran les fondus de ton image de fond sont trop abruptes, c'est pas très heureux. En revanche ça passe beaucoup mieux en 1280X1024 par exemple.


Effectivement, cela est du a la taille de mon image, j'ai du raboter dans photoshop avec un flou approximatif sur les côtés pour les plus hautes résolutions et en fait tu as raison, c'est foireux. En fait je ne dispose pas d'une très grand taille de photo pour la background. Un background-repeat classique serait encore pire. Comment font les sites comme par exemple allonciné qui mette souvent des pubs de films en background ? L'image est juste très grand en fait, avec le cadrage centré et de la déco sur les côté pour les grande résolution on dirait bien..

D'habitude cela se gère comment les background-image de la sorte ? Juste mettre une très grande images pour ne pas que les hautes résolutions ne soit lésées ?

a écrit :
Le menu n'est pas assez rapidement identifié, trop discret et la surface cliquable de tes liens est trop faible, ce qui peut poser problème aux hancapés moteur et exige une certaine précision qui peut devenir agançante. Essayes de créer un menu avec des boutons en roll-over.


Exactly, l'excellent livre d'Amelie Boucher que je suis en train de lire renforce tes dires..à revoir aussi donc Smiley decu

Merci de tes réflexions sur le contenu également, je vais tenter de copywriter un peu mieux tout ca Smiley cligne
Modifié par Diox (24 Oct 2008 - 22:19)
a écrit :
Toutes mes excuses pour mon retard de réaction et merci encore de vous être intéressé à mon travail Smiley smile

Pas grave du moment que tu réponds c'est l'essentiel Smiley cligne

Pour le fond, étant donné que le poids de l'image varie avec sa taille, tu devrais te limiter.
Son poids actuel de 96ko est déjà supérieur au poids que maximum que ne devrait pas dépasser une page d'accueil (70ko).
Essayes de ne pas dépasser 100ko.

J'ai aussi remarqué que la largeur totale de l'interface utile est de 820px,
soit 45px (800px - largeur scrollbar) inaccessible visuellement sur des écrans en 800X600.
Au vu de la cible très large de ce type de site, je te conseil de te limiter à
775px maxi de large (ou de fixer une largeur max et un width en %) pour éviter de faire apparaître la scrollbar horizontale
en bas du viewport.
Modifié par Hermann (24 Oct 2008 - 23:58)
Hermann a écrit :
Toutes mes excuses pour mon retard de réaction et merci encore de vous être intéressé à mon travail Smiley smile

Pas grave du moment que tu réponds c'est l'essentiel Smiley cligne

Pour le fond, étant donné que le poids de l'image varie avec sa taille, tu devrais te limiter.
Son poids actuel de 96ko est déjà supérieur au poids que maximum que ne devrait pas dépasser une page d'accueil (70ko).
Essayes de ne pas dépasser 100ko.



Ok... merci Smiley smile mais donc les sites comme allciné ou autres site faisant de la promo pour des films, jeux, produits en background, comment gère ils ca pour les haute résolution, par rapport au poids et la taille de l'image ?

D'autre avis sinon ?
ton site est pas mal, le sujet aussi.

Tu pourrais rajouter une navigation verticale car ta navigation actuelle est un peu trop petite.

Va sur le site des modules joomla, tu trouveras des exemples intéressants
Sujet clos
Aller à