Pages :
C'est prope et rapide. Jolie travail Smiley cligne Juste une petite critique, y a du code CSS qui apparait dans le code source de la page d'accueil...
Modifié par floatLeft (09 Apr 2007 - 14:56)
Bonjour !
Je trouve le site clair et bien organisé... difficile de s'y perdre !
Mais pourquoi reste-t-il du CSS dans chaque page ? Pourquoi ne pas l'intégrer à la feuille de style ?

Je suppose que la partie graphique sera modifiée plus tard... le choix des couleurs et la cassure header/corps ne sont pas à mon goût. Mais ce sont les couleurs de l'auteur visiblement ! Smiley cligne
Salut,

merci, merci, floatleft et <VF> pour vos réponses Smiley smile

hi, hi, hi...
a écrit :

Juste une petite critique, y a du code CSS qui apparait dans le code source de la page d'accueil


a écrit :

Mais pourquoi reste-t-il du CSS dans chaque page ? Pourquoi ne pas l'intégrer à la feuille de style ?


Rololo, i faut pas se prendre la tête comme ça avec les feuilles de style, ça va ça vient en fait Smiley cligne

Bon il y a plusieurs raisons :

Comme j'ai vraiment le syndrome de la valse hésitation et que je n'arrivais pas à faire mon choix pour le stylage des menus de pages sommaires, là où il y a la zolie clé de sol ^^, alors c'était beaucoup plus intuitif de placer les différentes options de css dans les documents eux même.

Mais effectivement une fois les choix faits alors les fichiers externes permettent vraiment de rationnaliser tout ça. C'est fait d'ailleurs (à moins que je ne change d'avis Smiley rolleyes )



Néanmoins la feuilles de style qui demeure sur la page d'accueil, elle, par exemple, ne concerne que le petit module de news qui ne se trouve que sur cette page d'accueil. Il n'y aurait aucun avantage, bien au contraire, à la placer dans un fichier externe lié. Ce point est très important !!!



Pour les pages de la partie réalisations notamment la problématique est encore différente. Il est essentiel de mon point de vue qu'au delà du contenu formaté qui donne lieu à une css générale, certaines pages puissent donner lieu à une personnalisation forte, le type de contenu l'exige en fait (ceux qui ont l'esprit critique remarqueront que je n'y arrive vraiment pas très bien, et c'est d'ailleurs un problème !). Dans la perspective d'une telle personnalisation des documents (les chartes architecturale et graphique des documents étant par ailleurs assurées), l'utilisation des déclarations de style dans le <head> du document est en fait une bénédiction.

Concernant l'utilisation de l'attribut style dans les tags je l'utilise très peu, et pour cause puisqu'on en a au final que très peu besoin. Par contre je l'utilise sans hésitation tellement c'est pratique Smiley smile


Donc Vive la magique trinité des css !!! ... ... Plus évangélisateur que ça tu meurs Smiley fut


Sinon vous semblez tout deux trouvez le site aisémment consultable et j'en suis ravi, parce que ça c'est vraiment important...

Donc merci encore Smiley smile
Modifié par Christian Le Bouler (10 Apr 2007 - 22:19)
Bonjour,

Superbe, clair pratique, complet, il a tout pour plaire et être efficace...
Franchement du très beau boulot ! ergonomie, accessibilité tout y est.
Quel travail ça a du être!
Chapeau bas.

Et pour la trinité des css, j'adhère
Salut,

Bon il est plutôt fonctionnel, mais j'aurais quelques reproches à faire.

Je trouve la bannière trop chargée. Non pas qu'elle comporte trop d'éléments, mais surtout car ceux-ci sont disparates.

Les liens fonctionnels sont regroupés par deux, mais avant le survol de la souris, on pourrait croire qu'il ne s'agit que d'un seul lien à cause des pipes "|" qui ne les séparent pas mais les entourent. Alors qu'en général ils sont utilisés comme séparateurs entre les liens. Il n'y a qu'au survol qu'on réalise qu'il y a deux liens par blocs de liens.

Les onglets c'est sympa, mais la couleur verte est tellement foncé
sur le blanc, qu'on finit par lire non les formes vertes, mais les pointes blanches créées dans l'espace entre l'angle carré d'un onglet et l'angle arrondi du suivant. Ca a tendance à perturber l'oeil. La graisse de texte des liens les rend plutôt lourd.

Le composite photo est sympa, mais j'aurais essayé de faire en sorte d'atténuer plus les délimitations de photos, pour ne croire qu'à une seule. On voit encore qu'il s'agit de plusieurs photos bout à bout.

Dans le contenu, je trouve que beaucoup de place est perdue. Il y a l'espace pour respirer, mais il y finit par manquer une certaine densité qui permet d'identifier à l'oeil les éléments.
Entre le menu et le titre, ta courbe délimitant le jaune et le blanc t'oblige à beaucoup d'espace, perdu inutilement. Tu as du le sentir car tu as rajouté les deux portées musicales à droite, mais elle n'est pas heureuse pour autant.
Au dessus de ton bloc "les rubriques du site", ta clé de sol t'oblige à un grand espace au dessus de ce bloc, bien trop grand pour une simple marge.
La bande dégradée à gauche fait partie de l'identité du site, mais elle est peut être trop large (?)

Pour le titre sur la page d'accueil, inutile de marquer Accueil, le fil d'ariane nous l'a précisé avant, le lien du menu est actif, inutile d'en rajouter, surtout que c'est une info peu utile au regard du contenu de la page.
Le "bienvenue" ne vaut que lorsqu'il est personnalisé, en l'état il est inutile et pourrait être supprimé. Même un individu loggé n'a que faire qu'on lui souhaite la bienvenue, si le site est agréable il se sentira naturellement bienvenu. En bas de page tu rajoute encore "bonne visite !" C'est double emploi avec le "bienvenue". De plus pourquoi le rendre aussi visible en le mettant autant en exergue ? Il devrait être à la place du "bienvenue" dans la phrase d'introduction.

Les points d'exclamations sur un site web sont une sorte d'apostrophe verbale, comme si l'auteur du texte criait. Inutile de crier sur le net, les internautes décideront s'ils t'écoutent (en l'occurrence te lisent) par eux même.

Pour revenir à ta courbe, déja pourquoi elle s'arrête si brutalement en angles alors que le bloc au dessus a des coins arrondis ? Pourquoi sa délimitation est floue alors que le bloc au dessus ne l'est pas ? (si tu me réponds c'est la faute au shop je te répondrait oui, mais c'est pas une raison, tu peux faire une délimitation nette à l'aide des outils vectoriels Smiley cligne )

Je trouve qu'il faudrait faire un choix plus restreint pour les couleurs.
Jaune en fond de site, vert foncé pour les onglets, orange pour celui actif, rouge pour les titres, vert plus clair pour le dégradé à gauche, et vert moyen pour le pied de page. Pour tous les verts, je trouve celui du pied de page bien plus intéressant que celui des onglets, peut être faudrait-il l'utiliser aussi sur ces onglets ?
Pour l'onglet actif et les titres, pourquoi ne pas harmoniser. Rouge ou orange, au choix?
Dans l'ensemble, peut être que tu peux choisir des couleurs un peu moins contrastées et moins "brutes" que celles-ci. Le jaune légèrement désaturé pour le rendre plus discrets (ce n'est qu'un fond après tout), l'orange peut être un peu moins vif. Enfin je suppose que c'est un parti pris, mais une couleur vive n'a d'intérêt que si elle se détache de couleurs qui le sont moins.

Il est dommage de n'avoir pas plus de points d'accroches vers du contenu dans chaque rubrique. Si je vais sur "Réalisations", le titre "lettres de la famille mozart" (faudrait un M à Mozart quand m^m Smiley langue ) ne m'est pas très explicite, peut être qu'avec un petit texte d'intro de quelques mots ca parlera plus. C'est un exemple, mais je pense qu'il est plus attractif pour un visiteur de voir un titre accompagné d'une petite introduction, plutôt qu'un simple titre qui ne sera forcément pas aussi explicite.

Bon j'arrête là car le dodo m'appelle, ma journée a été longue et celle de demain s'annonce toute aussi <del>chiante</del>passionnante.
Salut,

Merci à ghost pour son éloge enthousiaste Smiley smile

Et à Mikachu pour ses critiques toujours aussi pointues Smiley langue

Mikachu a écrit :

Pour le titre sur la page d'accueil, inutile de marquer Accueil, le fil d'ariane nous l'a précisé avant, le lien du menu est actif, inutile d'en rajouter, surtout que c'est une info peu utile au regard du contenu de la page.


C'est juste

Mikachu a écrit :
En bas de page tu rajoute encore "bonne visite !" C'est double emploi avec le "bienvenue".


idem, je vire donc

a écrit :

Les liens fonctionnels sont regroupés par deux, mais avant le survol de la souris, on pourrait croire qu'il ne s'agit que d'un seul lien à cause des pipes "|" qui ne les séparent pas mais les entourent. Alors qu'en général ils sont utilisés comme séparateurs entre les liens. Il n'y a qu'au survol qu'on réalise qu'il y a deux liens par blocs de liens.


Oui, c'est le résultat d'une approche un peu trop scrupuleuse du travail avec les validateurs automatiques. Le html de l'entame du document est ceci (en enlevant les pipes "|") :

                
<div id="menu_accessibilite">
<p id="raccourcis">
<a href="#contenu" accesskey="9" class="direct" title="Aller directement au contenu (raccourci = 9).">Aller au contenu</a> &mdash; <a href="?listraccourcis=oui" id="lien_raccourcis" title="Afficher l'aide mémoire des raccourcis clavier (raccourci = 3.)" accesskey="3">Raccourcis</a>
</p>
<p id="outils">
<a href="/plan_site/" title="Consulter le menu complet du site (raccourci = 1)." accesskey="1">Plan site</a> &mdash; <a href="?recherche=oui" id="lien_moteur" title="Moteur de recherche interne (raccourci = 2)." accesskey="2">Recherche</a> |
</p>
</div>

<hr />

<p id="nom_site">
<strong>
<a href="/" title="Retour à la page d'accueil (raccourci = 0)."  accesskey="0">Ecole de musique de Concarneau<img src="/include/spacer.png" id="spacer" alt="" title="Retour à la page d'accueil (raccourci = 0)." width="2" height="2" /></a>
</strong>
</p>


Avec cela les liens "Raccourcis" et "Plan site" sont interprétés comme adjacents. De même les liens "Recherche" et logo/bannière.

Il faut juste que je décide si je passe à des listes <ul> Pour les quatre premiers liens ou si je laisse le validateur ronchonner tout seul dans son coin Smiley lol

Pour les "Lettres de la famille Mozart", je pense que tu parles du lien dans cette page :
http://www.ecoledemusique.concarneau.fr/rubrique_realisations/
Le commenter, non je ne vois pas trop l'intérêt, le chapeau de la page indique qu'il est question de comptes rendus de spectacles et cela doit suffire. Donner en amont de chaque page dédiée des indications sur chaque spectacle ce serait sans doute trop lourd.

Pour le "M" de mozart j'ai corrigé. Le réfexe de mettre tous les caractères des noms de dossiers en minuscules, beaucoup des listes de liens sont générées automatiquement en php à partir des dossiers présents eux mêmes.

Pour le reste qui concerne spécifiquement le design je vais prendre le temps de la relecture de ton post pour essayer d'avancer.
Modifié par Christian Le Bouler (12 Apr 2007 - 09:52)
Pour le design je fais confiance à Mikachu pour avoir trouvé ce qui cloche ou pourrait être amélioré.

Pour le contenu : les intitulés des rubriques sont tous clairs, sauf le « Organisation ».

« Organisation » est une rubrique qui regroupe :
1 - Une page « Administration de l'école » qui regroupe contact secrétariat + directeur d'une part, et et localisation géographique d'autre part.
Pourquoi la localisation géographique de l'école n'est-elle pas plus facilement accessible, dans une page dédiée ?
2 - Une page « Organisation des cours » plutôt cohérente.
3 - Une page « Règlement intérieur », rien à redire.
4 - Une page « Tous les tarifs », à l'intitulé un peu étrange (on a présenté des tarifs ailleurs sur le site de manière non exhaustive ? « Tarifs des cours » aurait suffi...). La page elle-même est bien, mais pourquoi la placer en quatrième ? C'est une des premières choses que voudra vérifier quelqu'un qui se renseigne pour la première fois sur l'école. Smiley cligne


Pour ma part, au lieu d'une seule catégorie « Organisation », je ferais deux catégories :
- Cours de musique (pages : liste des disciplines enseignées, calendrier et horaires des cours, tarifs des cours) ;
- Organisation (pages : localisation de l'école de musique, administration, règlement intérieur).
(J'ai cherché à remplacer « Organisation » par « Infos pratiques », mais ça pourrait induire en erreur... reste que le terme « organisation » me semble peu parlant pour le visiteur.)



Ah si, j'ai tout de même quelque chose à redire sur la technique : il faudrait vraiment une feuille de style pour l'impression. Même quelque chose de très simple visant uniquement à harmoniser la taille des caractères (en points), à virer les éléments de navigation, etc.
Salut Florent,

Florent V. a écrit :

4 - Une page « Tous les tarifs », à l'intitulé un peu étrange (on a présenté des tarifs ailleurs sur le site de manière non exhaustive ? « Tarifs des cours » aurait suffi...). La page elle-même est bien, mais pourquoi la placer en quatrième ? C'est une des premières choses que voudra vérifier quelqu'un qui se renseigne pour la première fois sur l'école. Smiley cligne


Il n'y a pas de pourquoi évidemment Smiley smile ... Mais à mon avis il n'y a pas vraiment de problème non plus du fait que la rubrique ne comporte que 4 entrées et donc qu'en toutes circonstances, plan du site et plan de rubrique (page relais) la présence du lien vers les tarifs est très identifiable. loe raisonnement serait bien sur différent si le nombre d'entrées vers les sous rubriques était significativement plus important. Chose que de toute façon j'essaye rigoureusement d'éviter surtout pour les rubriques à fonction très utilitaires.

L'appelation "tous les tarifs" n'est que pour marquer le caractère exhaustif de ce qui est présenté. Sincèrement, vu le caractère assez peu rationnalisé d'autres documents produits par l'établissement sur le sujet et nécessitant l'usage systématique de la calculette Smiley lol c'est un plus, et donc je l'indique.

a écrit :

Pourquoi la localisation géographique de l'école n'est-elle pas plus facilement accessible, dans une page dédiée ?


Oui, c'est une réflexion que me suis faite aussi finalement, page dédiée dans la rubrique présentation.

a écrit :

Pour ma part, au lieu d'une seule catégorie « Organisation », je ferais deux catégories :
- Cours de musique (pages : liste des disciplines enseignées, calendrier et horaires des cours, tarifs des cours) ;
- Organisation (pages : localisation de l'école de musique, administration, règlement intérieur).


mmm... Pas vraiment, la grille des tarifs comme le règlement intérieur sont des éléments officiels de la mairie est il est préférable de les mettres dans la même rubrique et même en proximité.

a écrit :

il faudrait vraiment une feuille de style pour l'impression


Oui je suis tout à fait d'accord et des documents html imprimables dédiés existent en fait mais je ne les ais pas encore incorporés dans la refonte. Il s'agit de la grille des tarifs et d'un modèle de feuille d'inscription.
Effectivement ce sera utile de généraliser cela à l'ensemble des documents de la rubrique organisation. Pour le reste du site je suis beaucoup moins convaincu.
A propos du design

Mikachu a écrit :

Entre le menu et le titre, ta courbe délimitant le jaune et le blanc t'oblige à beaucoup d'espace, perdu inutilement.


Ce n'est pas seulement cela, ce qui imposait des marges verticales importantes dans le haut de la partie page c'était surtout la présence de sous menus de rubriques dans la version précédente. Comme je me suis débarassé de ces sous menus je pense que je peux améliorer ça assez facilement.

J'y cours donc immédiatement Smiley lol
Modifié par Christian Le Bouler (12 Apr 2007 - 20:43)
Re salut tout le monde,

Bon a propos des marges verticales du début de la partie id="page" et de mon :
Christian Le Bouler a écrit :

J'y cours donc immédiatement Smiley lol


ça donnerait quelque chose comme ça :
http://www.ecoledemusique.concarneau.fr/test_index.html

Attention c'est une page de test et tous les liens envoient sur le design non modifié. Très pratique pour comparer donc Smiley cligne

<edit>
Je généralise le stylage à l'ensemble des documents.
</edit>
Modifié par Christian Le Bouler (13 Apr 2007 - 19:51)
Bonjour,
J'ajouterai a toutes les remarques faire plus haut que tu as des
justifications de textes trop longue dans les petites intro des pages intèrieur.
Pour un lecture optimale, le nombre de signes (lettres, espaces...) par ligne
(pour le print) devrait tourner autour de 55. Pour le web il est même infèrieur : entre 35 et 55.
Dans ton cas, diviser ton texte en 2 collones serait un peu ridicule avec un
texte aussi court. Il te faudrait donc diminuer un peu la justification.

Puis j'ajouterai au remarques pertinentes de Mikachu sur les couleurs, que
le orange de fond étant un peu trop vif, il ne fait par conséquent plus office
de fond mais de couleur entourante qui perturbe légèrement la focalisation
du regard sur le contenu. Ce orange est trop lumineux et chaud (sachant
que les couleurs chaudes "avancent" et les couleurs froident ont tendance
à "reculer"). Le rendre moins saturé comme le conseil Mikachu serait déjà profitable.
Modifié par Hermann (13 Apr 2007 - 12:15)
Salut Hermann

Hermann a écrit :
Bonjour,
J'ajouterai a toutes les remarques faire plus haut que tu as des
justifications de textes trop longue dans les petites intro des pages intèrieur.


Mmm... Pas très bien compris en fait. Si les intros sont vraiment courtes alors ce n'est pas si grave que la ligne soit trop longue car il y a peu à lire quoiqu'il en soit. Par contre pour un pavé tel que le règlement intérieur je pense qu'il y a vraiment un souci et un travail à faire. S'il s'agit de tenir compte de tous les cas où le texte doit être limité en largeur, alors c'est bien difficile à mettre en oeuvre, sans nier en rien la pertinence de ta remarque, que j'intègre dans ma réflexion douloureusement laborieuse.
a écrit :

le orange de fond étant un peu trop vif, il ne fait par conséquent plus office
de fond mais de couleur entourante qui perturbe légèrement la focalisation
du regard sur le contenu


S'il ne s'agit que d'un peu et de perturbation légère alors c'est que tout va bien. Plus sérieusement, la refonte concernait l'organisation du site et peu le design. Je vais donc attendre un peu pour cet aspect là, qui mériterait un travail "dal niente".

a écrit :

remarques pertinentes de Mikachu


concernant les questions graphiques, Mikachu ne fait pas des "remarques", il produit des expertises. Tel est du moins mon humble avis.
Hermann a écrit :
tu as des
justifications de textes trop longue dans les petites intro des pages intèrieur.
Pour un lecture optimale, le nombre de signes (lettres, espaces...) par ligne
(pour le print) devrait tourner autour de 55. Pour le web il est même infèrieur : entre 35 et 55.
Je plussoie. Smiley jap
Salut,

concernant les marges verticales excessives dont il était question ici plus haut j'ai généralisé la modification à l'ensemble du site.

Est ce mieux ?
Modifié par Christian Le Bouler (13 Apr 2007 - 19:56)
Christian Le Bouler a écrit :

concernant les questions graphiques, Mikachu ne fait pas des "remarques", il produit des expertises. Tel est du moins mon humble avis.


Je pense pas qu'on puisse parler d'expert en ce qui concerne les graphistes
(comme toi tu peux l'être en sémantique Smiley cligne ), c'est un domaine très vaste et
je pense pas que Mikachu se qualifie comme tel.
Mais on peut dire que c'est un graphiste expérimenté à l'oeil averti.
Bon j'aurais une ou deux remarques à faire sur le montage photo du bandeau identitaire si toutefois tu es encore preneur?
Hermann a écrit :

Je pense pas qu'on puisse parler d'expert en ce qui concerne les graphistes


En général non, avec Mikachu si.

Sur le fond c'est assez évident, compétence et pertinence.

Et sur la forme ce l'est beaucoup plus encore. Notamment du fait d'une critique fondée sur la base d'une prise en considération des choix de l'auteur du design en question. Outre la qualité pédagogique, cela donne beaucoup d'objectivité au propos.

Doù le terme d'expertise que j'emploie.

a écrit :

Bon j'aurais une ou deux remarques à faire sur le montage photo du bandeau identitaire si toutefois tu es encore preneur?


En dehors du fait que je suis un peu en apnée avec tout ça Smiley langue Bien sur que oui ça m'intéresse Smiley smile

Même si ce dont j'aurais besoin, c'est d'un virtuose du logiciel pour réaliser l'objet sans se prendre la tête, parce que moi ça ne peut pas dépasser le stade du bricolage plus ou moins habile et de ce fait plus ou encore plus pathétique.
Bon ben on va dire qu'on est pas d'accord alors Smiley cligne
Ce que je voulais dire c'est que le therme expert ne sied pas bien à
la profession, et je suis assez bien placé pour le savoir, ceci dit on pourrait
peut-être affirmer que Mikachu est expert dans la critique de sites web.

Pour le montage photo, tu t'es déjà pas mal débrouillé pour une non graphiste,
mais je pense que tu en dis un peu trop dedans et les cadrages sont un
peu large au vu de la taille réduite des photos.
D'autant plus que celles-ci ne seront pas vraiment analysées mais plutôt
survolées puisqu'on est pas vraiment dans un mode de perception qui fait
place à l'insistance du regard dans des pages de ce type.
Il serait plus efficace si je peux me permettre d'avoir des détails éloquents
(ton avatar par exemple) de 2 ou 3 visuels représentatifs de ce que tu
veux transmettre avec un peu plus d'espace vertical accordé à l'ensemble.

PS: Si tu cherches quelqu'un pour le transformer je pourrais éventuellement
te le faire assez rapidement sous Photoshop, à toi de voir Smiley cligne
Modifié par Hermann (14 Apr 2007 - 00:35)
Hermann a écrit :

Il serait plus efficace si je peux me permettre d'avoir des détails éloquents
(ton avatar par exemple)


ben oui Smiley smile

Mais c'est vraiment que par un heureux concours de circonstance la photo de mon avatar a été réalisée par une artiste photographe de grande valeur, et qui perçoit très bien tout cela.

Pour le reste on en reparle au plus tôt si tu es d'accord Smiley smile

Pour ce week end c'est ambiance fête d'anniv et réunion famille donc je serai pas là.

Merci pour la proposition, ce serait un honneur et un bonheur.
Modifié par Christian Le Bouler (14 Apr 2007 - 01:12)
Hermann a écrit :
Je pense pas qu'on puisse parler d'expert en ce qui concerne les graphistes
Et bien moi je crois que tu te trompes, je crois aussi que vous surestimez les capacités en terme de design graphique de Mikachu, et, plus globalement, que nos avis divergent Smiley smile C'est d'ailleurs bien là tout l'intérêt des espaces de discussions tels que ces forums... Smiley cligne
Pages :