3246 sujets

Critiques de vos sites: code et design

Les critiques www.ecole-de-samba-de-bruxelles.be

Bonjour à toutes et à tous,

A part vous dire "J'attends vos critiques" je n'ai rien à ajouter.
C'est mon premier site, réalisé en collaboration avec ma femme + un coup de pouce juste pour l'animation flash/index.

Voici la bête:

http://www.ecole-de-samba-de-bruxelles.be/index.html

Oups, je viens de constater que certains liens vers Index (bas de page) ne fonctionnent plus. Pas le temps maintenant. Verrai ça ce soir.

A+ et merci d'avance pour vos mots doux.
Salut,

*Désolé mais je n'aime pas trop le design, j'ai bien compris que c'était les couleurs du drapeau brésilien mais j'aime pas leur association. Mais il n'y a pas que les couleurs: les logos, la bannière, les anims flash…

*La page d'intro ne sert à rien en plus c'est long à charger, les pages tunnels sont à déconseiller.

*La hiérarchie des titres n'est pas respectée (h1 puis h2, h3), en fait la sémantique html en général n'est pas utilisée.

*utilisation de tableaux de mise en page alors que ce n'est pas du tout nécessaire

*code html invalide
Bonjour Patidou,


Je suis d'accord que l'assemblage des couleurs, bien qu'elles peuvent s'harmoniser, n'est pas des plus judicieux. Je dirais qu'au lieu de se marier elle tendent à se bousculer une peu. L'ensemble manque de finesse en général j'en suis conscient.
Mais bon, je te rappel aussi que c'est notre tout tout premier site 100% autodidactes.

J'ai pourtant utilisé les balises de titre en ordre décroissant. Ou alors tu veux dire qu'il faut les utiliser dans cet ordre là ---> H1(tjs en premier) puis H2 etc ?
Si oui, comment je fais si H1 est trop grand ? Je le mets quand même et je lui donne un p'ti coup de CSS ? Je trouve ça bizarre, mais bon.

J'ai pourtant essayé de respecter la sémantique au mieux. Je vais relire tout ça. Pourtant il me semblait ne pas l'avoir loupée.

Pour les tableaux je suis entièrement d'accord et je compte les modifier. D'autant plus que la page index et les galeries sont en div. Mais il faut savoir que nous ne connaissions rien de rien en CSS (sinon le nom) quand on a démarré le site. On a appris sur le tas en créant les pages.

Pour la validité du site c'est effectivement pas le pied. Cela dit je n'ai jamais prétendu faire un site en Xhtml. C'était mon but au départ mais il faut être raisonnable et faire les choses par étapes en fonction de ses capacités. Je n'en étais pas capable au début du site. Le prochain peut-être ...

Merci pour ta réponse et à bientôt peut-être ...
Salut,

Pour rebondir sur tes réponses à Patidou,
a écrit :
Si oui, comment je fais si H1 est trop grand ? Je le mets quand même et je lui donne un p'ti coup de CSS ? Je trouve ça bizarre, mais bon.

C'est exactement ça. Tu utilise une balise pour son sens sémantique, à savoir <hn>, en fonction de son importance(n=1 étant le plus important, et n=6 étant le moins important), et tu applique à ce titre le style souhaité pour respecter la charte graphique du site.
Ce n'est pas bizarre, il faut penser le document html comme une unité structurée unique, la CSS n'étant qu'une surcouche facultative, il faut que cette structure tienne d'elle même.

a écrit :
Pour la validité du site c'est effectivement pas le pied. Cela dit je n'ai jamais prétendu faire un site en Xhtml.

Tu as pourtant choisi un doctype en xhtml, qui, même s'il n'est que transitionnel et donnant droit à plus de souplesse, peut se valider tout autant qu'un autre doctype. Ce qui n'est pas le cas de ton site pour le moment.
La validité du code est une chose assez simple à obtenir en fonction du doctype, comme par exemple fermer toute balise ouverte, respecter l'imbrication des balises, utiliser les balises autorisées par le doctype, etc. Quand bien même tu n'y arrive pas du premier coup, le validateur est là pour te mettre le nez sur les erreurs, qu'il faut corriger une par une en partant de la première donnée dans le code. Pour l'imbrication, des fois une seule erreur corrigée permet de rendre le code valide.

Je ne peux que te conseiller de poursuivre ton apprentissage parmi les nombreuses ressources du forum, et je ne saurais te conseiller lesquelles voir, car je pense que tu en as beaucoup à réviser à mon avis. Smiley cligne

Concernant le site, je partage l'avis de la page d'accueil qui ne comporte aucune information utile et qui force à l'attente cela peut être supprimé.

Concernant les couleurs je suis moi aussi dérangé par les couleurs très violentes de ce vert et de ce jaune, même si je sais pourquoi elles sont voulues. Les atténuer par des dégradés de couleurs un peu plus claire ou un peu plus foncée, et rendre la délimitation entre les deux plus discrète donnerait un peu plus de classe au rendu final.

Le texte n'est presque pas mis en forme, ce qui donne assez peu envie de le lire. Des mises en gras, des retraits, des couleurs, etc. seraient autant d'animation qui inciterait à la lecture.

L'espace est globalement mal utilisé, il y a trop de marges un peu partout notamment verticales, ce qui fait que dans un écran, le contenu visible est relativement restreint.
Bonjour Mikachu,

Merci pour ta réponse complète et, surtout, encourageante. Bien que la réponse de Patibou soit on ne peut plus pertinentes (et j'en tiens intégralement compte) il est difficile de lire une liste de mauvais point sans plus d'explications.

a écrit :
Tu utilise une balise pour son sens sémantique, à savoir <hn>, en fonction de son importance(n=1 étant le plus important, et n=6 étant le moins important), et tu appliques à ce titre le style souhaité pour respecter la charte graphique du site.

Je m'étais fort appliqué sur ce point justement, mais mal aiguillé. J'avais remarqué que les livres qui m'ont servi de base ne sont pas des plus clairs. L'un est truffé d'erreurs avec des phrases alambiquées pour rien (Micro Application- CSS) et l'autre trop vague, trop généraliste (Ressources Informatiques- Xhtml). Quand on ne connait rien on incrimine pas le prof. Je faisais donc confiance à ces livres au début du moins.
Message reçu.

a écrit :
Tu as pourtant choisi un doctype en xhtml, qui, même s'il n'est que transitionnel et donnant droit à plus de souplesse, peut se valider tout autant qu'un autre doctype.

Ne connaissant que les rudiments du Html et rien en CSS, je n'ai pas oser m'attaquer au Xhtml Stict afin de garder une marge (d'erreurs possibles hihi). Il est vrai que dans la précipitation finale j'ai perdu de vue cette validation W3C. Je le faisais en interne dans Dreamweaver où j'ai corrigé énormément d'erreurs. Mais W3C va effectivement plus loin.
Mon but est de créer des sites propres et accessibles. Ça devrais même être obligatoire.
En lisant bien la validation je constate toutefois que la majorité des erreurs sont générées par Dreamweaver dans les balise Objet et Embebd. Ne sachant pas interpréter le contenu de ces balises je n'y ai pas touché.
Je ne connais pas encore toutes les finesses mais je promets de m'y appliquer.

a écrit :
je pense que tu en as beaucoup à réviser à mon avis.

A réviser un peu, certainement. A apprendre là, oui, il me reste beaucoup à faire. T'inquiètes que j'ai les pieds bien sur terre !

Pour la page tunnel je n'ai fais que suivre les conseils de ... j'ose le dire ? ...professionnels. Comme quoi le professionnalisme peut se décliner sous différentes manières.
Dans le cas d'un site multilingue où la page Index propose les langues disponibles faut aussi l'éviter?

a écrit :
Concernant les couleurs je suis moi aussi dérangé[...]et rendre la délimitation entre les deux plus discrète

J'en ai déjà parlé plus haut et je ne suis pas satisfait non plus. J'avais aussi pensé au dégradé et d'autres choses mais je ne suis pas le décideur, sinon l'exécutant. Même si je fais partie du groupe de percutions.

a écrit :
Le texte n'est presque pas mis en forme, ce qui donne assez peu envie de le lire. Des mises en gras, des retraits, des couleurs, etc. seraient autant d'animation qui inciterait à la lecture.
Ok. Vais voir ce que je peux faire de ce côté.

a écrit :
L'espace est globalement mal utilisé, il y a trop de marges un peu partout notamment verticales, ce qui fait que dans un écran large ?, le contenu visible est relativement restreint.

Je pensais bien faire en aérant un max.
Je n'ai qu'un vieil écran de 19'(+/- carré) et n'ai pas encore eu l'occasion de tester sur un écran plus large. Ha si, une fois (22'), mais le copain l'avais réglé en 16:9 donc tout le site était déformé.

Entre nous, combien de fois je ne suis pas tombé sur mon c... en ouvrant des sites dit "professionnels". Des temps de chargement inacceptables, des menus peu clairs, mal agencés voire mal mis en page (décalages, débordements, bugs, ...). Et que dire des sites développés uniquement pour IE ? Le mien tourne sur IE, Firefox, Safari et Opéra. Et j'en suis fier pardis !

Un grand merci pour tes critiques constructives qui m'aideront à mieux travailler sur mon prochain site (en cours héhé).

Je reste à l'écoute pour d'autres critiques.
A+
DonVtt
Salut,

Concernant les livres, il ne faut pas oublier que bon nombres d'ouvrages sont en langue anglaise, et que les traductions sont parfois à la limite du traducteur automatique (j'avais acheté un livre sur PHP que j'ai ramené au marchand à cause des phrases qui même après relectures restaient obscures).

Si tu utilise dreamweaver, idéalement il ne faudrait que tu l'utilise qu'en mode code. J'avoue préférer d'autres éditeurs textes à coloration syntaxique, purement dédiés au code à l'instar de dreamweaver qui se veut avant tout WYSIWYG.

Le côté obligatoire des sites à être propres et accessibles, c'est désormais le cas pour les sites publics, c'est une obligation commerciale pour les entreprises, mais c'est difficile de demander ça au gens qui en font leur loisir le WE et qui n'y sont pas forcément formés.

Pour la page tunnel, c'est une tradition décennale que d'en faire une pour certains professionnels qui ne se sont jamais remis en question sur la manière de faire des sites web. Ils considèrent toujours qu'ils font un site unique comme un bijou autour du cou d'une femme, sauf qu'il y a beaucoup de femmes et beaucoup d'autres bijous autour de leurs cous... Les gens utilisent de plus en plus internet, mais leur temps n'est pas décuplé pour autant, ils cherchent donc à aller à l'essentiel. En leur imposant une page qui ne leur apporte aucune information, et qui leur font perdre du temps, ils risquent d'aller voir ailleurs. Autant les plonger directement dans le sujet qui les a conduit à venir sur ton site.
Concernant la langue, il est plus judicieux de tomber sur une page d'accueil dans la langue principale, ce qui contentera les utilisateurs principaux et leur évitera un clic inutile et du temps perdu, et d'avoir une navigation spécifique et visible pour ceux qui ont besoin d'y accéder dans une autre langue. Avec une page tunnel pour la sélection de langue, finalement tout le monde doit faire cette manipulation, sans avoir encore vu aucun contenu du site !

Concernant l'aération, c'est un tout, si tu mets une marge de 50px à un endroit, si tu veux une marge un peu moins importante ailleurs, tu vas devoir en mettre 35px. Si la marge initiale est de 15px, la marge un peu moins importante sera de 11 pixels par exemple, ce qui fait une différence une fois toutes ces marges cumulées. Comme la hauteur d'écran est toujours plus limitée que la largeur, perdre 150px en espace vide en hauteur sur une moyenne de 700 à 800, c'est dommage, c'est autant de contenu qui ne sera pas visible du premier coup d'oeil. Après je ne te dis pas de tout coller, bien au contraire, l'aération est une nécessité pour le confort de lecture, mais il faut trouver un juste milieu. Smiley cligne

Les sites faits par les professionnels ne sont pas toujours leurs sites, ils sont souvent plus le fruit de leurs clients, qui leur ont imposé ceci ou cela. Au final le tout est effroyablement lourd, pour la grande satisfaction du client et le grand désespoir du professionnel qui l'a réalisé, et celui des internautes qui viennent sur le site.

Bonne chance à toi pour la suite.
Bonjour Patidou et Mikachu,

Merci à tous les deux pour vos réponses diamétralement opposées dans le style mais, d'efficacité égale.

Patidou, je ne penses pas que j'utiliserai un jour des gabarit tout fait mais ce petit lien m'en a appris pas mal, simplement et en seulement 5 minutes. A ton image, droit au but sans perdre de temps. Je vais tout lire. Merci.


Mikachu, après une réponse comme celle-là je ne peux que m'incliner. Précision et clarté. Tout est limpide à l'exception de ton histoire de marges ...
a écrit :
[...]si tu mets une marge de 50px à un endroit, si tu veux une marge un peu moins importante ailleurs, tu vas devoir en mettre 35px. Si la marge initiale est de 15px, la marge un peu moins importante sera de 11 pixels par exemple, ce qui fait une différence une fois toutes ces marges cumulées.

Mais tu te rattrapes admirablement juste après et là tout s'illumine.

a écrit :

Les sites faits par les professionnels ne sont pas toujours leurs sites, ils sont souvent plus le fruit de leurs clients, qui leur ont imposé ceci ou cela.

C'est un peu mon cas. Les propositions avec plus de "fondu" dans les couleurs ou des dégradés n'ont pas plu. Je m'en suis tenu à la décision du "chef".

Pour Dreamweaver je ne l'utilise qu'en mode code. Je n'aime pas le rendu parfois fantaisiste du mode création que je ne maitrise pas bien en plus. Je n'ai pas le courage non plus de m'atteler à étudier toutes les fonctions de DreamW.
C'est un cadeau alors je l'utilise, simplement.

Message reçu pour le tunnel. Ferai mieux au prochain site.

a écrit :
[...]trouver un juste milieu

Quatre mots qui résument absolument tout.

Ce fut un grand plaisir de lire vos réponses et surtout très instructif.
Merci à vous deux pour votre aide.

PS: le boulot m'a phagocyté ces jour-ci. Désolé de répondre si tard.
Sujet clos
Aller à