3246 sujets

Critiques de vos sites: code et design

Allez y... j'ai peur

Bonjour à tous,
voila je fais l'essai de mettre mon site sous vos yeux critiques. Le but: essayer d'améliorer ce qui est possible, dans la limite de temps que j'ai.

Le site: http://aeroclub.dinan.free.fr

- tout fait main, tout fait maison Smiley cligne
_________________________
Petite autocritique préalable:

- Le bandeau(partie haute) plait ou ne plait pas (perso je l'apprécie/ temps dispo pour le faire)
- je trouve le site parfois long (serveur free? ou programmation moyenne?)
- Peu d'éléments dans certaines pages -> indépendant de ma volonté.
- Tous mes titres de pages sont les même ainsi que mes balises meta mot clé et description... est ce vraiment grave? --> mon site est mal positionné (je cherche a comprendre si c'est une raison suffisante?)

Voila à vous de jouer, n'hésitez à signaler les problèmes de programmations

... C'est parti Smiley cligne Smiley cligne Smiley cligne
Modifié par youki (19 Feb 2009 - 20:09)
Bonjour,

Je vais déjà répondre à ta question :

youki a écrit :
Tous mes titres de pages sont les même ainsi que mes balises meta mot clé et description... est ce vraiment grave? --> mon site est mal positionné (je cherche a comprendre si c'est une raison suffisante?)


oui, ça peut jouer pour le positionnement (enfin les mots clés non, la description oui), par contre à quel point...


Pour ton header, il est sympa, mais prévoir un gif avec les ombre un peu plus moches pour IE6 serait vraiment agréable (ou du moinc changer la couleur de fond du PNG, pour s'approcher du bleu (dégradé) du fond).

Les deux premiers éléments du menu sont très difficile à lire (et encore plus quand il sont survolés).

Le contraste entre le texte (première page, premier bloc de texte), gris moyen sur fond blanc est un peu faible.

Passé les photos coupées, j'ai l'impression d'être sur un autre site, il n'y a pas de cohésion entre la partie haute (avec les photo) et la basse avec les blocs de menu, c'est assez étrange.

La hiérarchie de tes pages n'est pas très logique :
a écrit :
.:: La Flotte

et
a écrit :
Le Rallye MS 880 B ::.

sont tous deux des h1, alors qu'ils sont visuellement différenciés (pas les .:: et ::.) et qu'ils ne sont clairement pas du même niveau hiérarchique : Le rallye MS 800 B est une élément de la Flotte.

Ton code est très fouilli, tu utilise certains tag HTML pour leur rendu visuel plutôt que pour leur sens sémentique (blockquote), tu utilise des tags dépréciés (oui, avec le doctype transitionnal, ils sont valide, mais quand même) comme font.

Tu utilise mal l'attribut alt des images : 
<img src="style/ligne.gif" alt="deco"  />

Si c'est une image décoratice, le alt DOIT être vide.
<img src="./galerie/piper/miniatures/Dsc05032.jpg" alt="./galerie/piper/miniatures/Dsc05032.jpg Dinan aéroclub" title="./galerie/piper/miniatures/Dsc05032.jpg Dinan aéroclub" align="left"/>

Si c'est une image non décorative, le alt doit avoir du sens.
Le alt, c'est ce qui est substitué à l'image si elle ne peut être affichée (navigateur textes, lecteurs d'écrans...). Il doit donc offrir la même information que l'image.

Ceci : 
<p align="center"><u>Fiche technique:</u></p>
• Constructeur : <font color="#0000AA"><b> Morane Saulnier</b></font><br />
• Moteur(s) : <font color="#0000AA"><b>Continental</b></font><br />

devrait être défini à l'aide d'une liste (ul/li).


Les changements de langue : 
<blockquote><p><font size="2" color="#000000">
     Under Construction
</font></p></blockquote>

doivent être signalé (via lang="CodeLangue")

Pour finir, la page contact, propose beaucoup d'information, trop, très mal organisée. De plus le formulaire semble buggé, j'ai essayer d'envoyer un message vide, la page a changé, le formulaire à disparu, sans me donner d'information sur son envoi.
Modifié par Laurie-Anne (20 Feb 2009 - 09:55)
Laurie-Anne a écrit :

Les deux premiers éléments du menu sont très difficile à lire (et encore plus quand il sont survolés).

- Effectivement sur explorer ma feuille de style avait une opacité un peu faible. En revanche au passage de la souri, le fond apparait rouge -> donc normalement super lisible?!
(actuelement 50% opacité en std - 100% et rouge à l'activation et 90% gris apres visite)

Laurie-Anne a écrit :

Le contraste entre le texte (première page, premier bloc de texte), gris moyen sur fond blanc est un peu faible.

- Ok, je vais voir ce que je peux faire: le noir ne me plaisait pas.
Laurie-Anne a écrit :

Passé les photos coupées, j'ai l'impression d'être sur un autre site, il n'y a pas de cohésion entre la partie haute (avec les photo) et la basse avec les blocs de menu, c'est assez étrange.

- oui et non: il est prévu de rappeler le menu d'en haut en reprenant les rayons de courbures de la tete de site pour l'appliquer sur les menus ainsi qu'un meilleur rappel du bleu. Le pied quant à lui attend surtout... une idée (j'en ai pas pour l'instant).
Laurie-Anne a écrit :

La hiérarchie de tes pages n'est pas très logique :
.:: La Flotte

et
a écrit :
Le Rallye MS 880 B ::.

sont tous deux des h1, alors qu'ils sont visuellement différenciés (pas les .:: et ::.) et qu'ils ne sont clairement pas du même niveau hiérarchique : Le rallye MS 800 B est une élément de la Flotte.

- Vrai, je dois mieux prévoir mes feuilles de style pour une meilleur cohérence (je referais cela mais plus tard.)

Laurie-Anne a écrit :

Ton code est très fouilli, tu utilise certains tag HTML pour leur rendu visuel plutôt que pour leur sens sémentique (blockquote), tu utilise des tags dépréciés (oui, avec le doctype transitionnal, ils sont valide, mais quand même) comme font.

- Dans la page crédits, je fais un "blockquote" a l'aide d'un div : Est ce une meilleur solution? (je pensais que justement le blockquote faisait moins "bricolé" que la div)

Laurie-Anne a écrit :

Tu utilise mal l'attribut alt des images : 
<img src="style/ligne.gif" alt="deco"  />

Si c'est une image décoratice, le alt DOIT être vide.
<img src="./galerie/piper/miniatures/Dsc05032.jpg" alt="./galerie/piper/miniatures/Dsc05032.jpg Dinan aéroclub" title="./galerie/piper/miniatures/Dsc05032.jpg Dinan aéroclub" align="left"/>

Si c'est une image non décorative, le alt doit avoir du sens.
Le alt, c'est ce qui est substitué à l'image si elle ne peut être affichée (navigateur textes, lecteurs d'écrans...). Il doit donc offrir la même information que l'image.

- OK, modification en cours/faite (sauf oublis)
Laurie-Anne a écrit :

Ceci : 
<p align="center"><u>Fiche technique:</u></p>
• Constructeur : <font color="#0000AA"><b> Morane Saulnier</b></font><br />
• Moteur(s) : <font color="#0000AA"><b>Continental</b></font><br />

devrait être défini à l'aide d'une liste (ul/li).

- Je m'y met dés que j'ai le temps - bonne remarque Smiley smile
Laurie-Anne a écrit :

Les changements de langue : 
<blockquote><p><font size="2" color="#000000">
     Under Construction
</font></p></blockquote>

doivent être signalé (via lang="CodeLangue")

- Je ne savais pas: modification faite.
Laurie-Anne a écrit :

Pour finir, la page contact, propose beaucoup d'information, trop, très mal organisée. De plus le formulaire semble buggé, j'ai essayer d'envoyer un message vide, la page a changé, le formulaire à disparu, sans me donner d'information sur son envoi.


- Tout à fait d'accord.
En faite lors de l'envoi, je mets un mot de confirmation... mais en haut de la page (oui c'est stupid).

Or ici, c'est clairement l'endroit où je souhaiterais le faire avec un brin de java. Le but serai de faire apparaitre la réponse en "live" dès que le mail est envoyé, sans avoir à recharger la page.
J'avoue ne pas bien gérer le Java; il me faut malheureusement du temps pour ça.
J'imagine qu'il faut sur l'attribut onclick"une_fct_envoi_en_java()" mais je ne sais pas comment programmer la fct en java qui enverra le mail.

- Enfin, oui je gere mal les envois de text "vide" . Effectivement, c'est à revoir (ps: je viens de m'apercevoir que je n'envoyais pas de messages d'erreur en cas de code faux - je corrige de suite)

- Je suis en revanche pas forcement d'accord sur le "trop" d'information - elles concernent toutes les personnes susceptible de venir se poser sur le terrain du club. Après le coté brouillon pourquoi pas. Je regarde si je peux mieux organiser ça.
________________________

- Enfin, une question auriez vous (les personnes de ce forum) des sites que vous considérez comme référence en terme de design (or flash svp) que je puisse avoir des idées des design actuels. (en plus de alsacreation bien sur Smiley cligne )

Dans tous les cas merci, une fois encore c'est clair et argumenté, du coup je peux progresser.
a écrit :
Or ici, c'est clairement l'endroit où je souhaiterais le faire avec un brin de java. Le but serai de faire apparaitre la réponse en "live" dès que le mail est envoyé, sans avoir à recharger la page.

Tu parles de JavaScript non ?

a écrit :
Enfin, une question auriez vous (les personnes de ce forum) des sites que vous considérez comme référence en terme de design (or flash svp) que je puisse avoir des idées des design actuels. (en plus de alsacreation bien sur)

Tu as déjà les milliards de galeries CSS du style :
- http://www.webcreme.com/
- http://www.cssmania.com/
- http://www.csselite.com/

Et pas mal de webzines de qualité, comme :
- http://www.smashingmagazine.com/
- http://www.webdesignerdepot.com/
- Oui JavaScript bien sur. Smiley smile

- Alsacreation"s" modifié Smiley smile

--> pour les sites, c'est bien ce que je pensais: c'est beau, mais j'ai pas le niveau .
youki a écrit :
Dans la page crédits, je fais un "blockquote" a l'aide d'un div : Est ce une meilleur solution? (je pensais que justement le blockquote faisait moins "bricolé" que la div)


Blockquote sert à baliser des bloc de citation, ce qui n'est pas le cas dans ce que j'ai vu.
Il vaut mieux utiliser P pour baliser du texte.

DIV est une balise très neutre, et sont utilisation ne fait pas du tout bricolé. Il faut juste éviter la divite aigue.
Salut,

J'ai parcouru ton site et j'ai regardé un peu aussi le codage, j'y vois quelques "problèmes":
- Utilisation des balises font,br et b, je te recommande de ne pas les utiliser, et plutôt de mettre des styles css dans des span. Après tu pourras plus facilement faire la maintenance de ton site si tu veux par exemple changer ton design. la balise b permet une mise en forme et non de mettre un sens a ton contenu, utilise strong qui sera pris par le robot comme étant une information importante, en plus tu pourras en changer le style Smiley cligne .

- Dans la section de la description des avions, utilise plutôt les dl,dd,dt ,les robots comprendront que ton contenu est la définition de quelque chose et il sera indexé en tant que tel.

-Pour les métas, l'une des plus importante est la méta description, celle des mots clés n'est même pas regardée par les robots et si elle est trop en fouillis, le robot prendra plutot ca mal ...
- Pense a optimiser tes balises title avec des mots clés après le nom générique du site. par exemple : Aéroclub de Dinan - Accueil ou Aéroclub de Dinan - Nos avions. Quelque chose d'explicite et comme dit plus haut, pas trop de mots clés ^^.

- J'ai vu que ton fichier robots.txt est vide(enfin presque), pense a désactiver l'accès auix repertoires d'administration et de comptes de tes membres, pas besoin que google les indexe.

- Pense a faire de l'url rewritingn, comme ça les url seront déjà plus sympatiques à lire et google les aimera encore plus Smiley cligne . Au lieu de http://aeroclub.dinan.free.fr/club.php?page=equipe tu pourrais avoir http://aeroclub.dinan.free.fr/club/equipe.html, ou encore ce que tu veux sans avoir à changer grand chose. A voir si free autorise ce genre de choses.

edit: Ah oui une dernière chose, la balise h1 est très importante dans un site, pense a en mettre une, met un style si nécessaire parce que les styles de référence sont moches Smiley cligne .
Voilà, en espérant que mon intervention t'auras aidé Smiley cligne
Modifié par N-J (21 Feb 2009 - 14:39)
N-J a écrit :
Salut,

J'ai parcouru ton site et j'ai regardé un peu aussi le codage, j'y vois quelques "problèmes":
- Utilisation des balises font,br et b, je te recommande de ne pas les utiliser, et plutôt de mettre des styles css dans des span. Après tu pourras plus facilement faire la maintenance de ton site si tu veux par exemple changer ton design. la balise b permet une mise en forme et non de mettre un sens a ton contenu, utilise strong qui sera pris par le robot comme étant une information importante, en plus tu pourras en changer le style Smiley cligne .


- J'ai effectivement cru comprendre ça. Je vais modifier le css pour rendre l'ensemble plus cohérent et m'éviter ainsi les font et br.

N-J a écrit :

- Dans la section de la description des avions, utilise plutôt les dl,dd,dt ,les robots comprendront que ton contenu est la définition de quelque chose et il sera indexé en tant que tel.


- Euuh, honte à moi je ne connais pas cela: à étudier...

N-J a écrit :

-Pour les métas, l'une des plus importante est la méta description, celle des mots clés n'est même pas regardée par les robots et si elle est trop en fouillis, le robot prendra plutot ca mal ...
- Pense a optimiser tes balises title avec des mots clés après le nom générique du site. par exemple : Aéroclub de Dinan - Accueil ou Aéroclub de Dinan - Nos avions. Quelque chose d'explicite et comme dit plus haut, pas trop de mots clés ^^.


- J'ai viré une grande partie des mots clés, je fais une description sur quasiment chaque page (à finioler). Je personnalise le titre de chaque page. now wait and see.
N-J a écrit :

- J'ai vu que ton fichier robots.txt est vide(enfin presque), pense a désactiver l'accès auix repertoires d'administration et de comptes de tes membres, pas besoin que google les indexe.


- J'ai rajouté un disallow admin - j'attends que google l'intégre.
N-J a écrit :

- Pense a faire de l'url rewritingn, comme ça les url seront déjà plus sympatiques à lire et google les aimera encore plus Smiley cligne . Au lieu de http://aeroclub.dinan.free.fr/club.php?page=equipe tu pourrais avoir http://aeroclub.dinan.free.fr/club/equipe.html, ou encore ce que tu veux sans avoir à changer grand chose. A voir si free autorise ce genre de choses.


- Aucune idée pour free: je me renseignerais. Je ne savais pas que cela avait un impact.

N-J a écrit :

edit: Ah oui une dernière chose, la balise h1 est très importante dans un site, pense a en mettre une, met un style si nécessaire parce que les styles de référence sont moches Smiley cligne .
Voilà, en espérant que mon intervention t'auras aidé Smiley cligne



- Pareil, à prendre en compte en même temps que la refonte de mon css Smiley ohwell

Dans tous les cas merci des conseils, je tente de faire progresser le systeme (et moi avec) au fur et à mesure.
Merci encore.
Sujet clos
Aller à