Nouveau site pour une toute petite commune des Hautes Pyrénées

Bonjour à tous

Voici le site de ma commune, développé bénévolement en amateur : www.mairie-sailhan.fr

Un petit village des Pyrénées très attachant.

Vos critiques et suggestions sont les bienvenues.

Merci

Clauduc

Bonsoir @clauduc,

un beau p'tit village en effet. J'en viens des Pyrénées alors forcément j'ai l’œil amical
Graphiquement parlant, au premier coup d’œil , gris sur fond gris ce n'est pas super lisible et même si ce sont deux teintes différentes. Les liens de menus soulignés ça alourdit beaucoup et c'est inutile car par défaut, on sait que ce sont des liens puisque c'est un menu !
Il vaut mieux soit les soulignés au survol de la souris soit qu'il change de couleur mais pas de taille de police comme c'est le cas ici car cela peut gêner certains utilisateurs qui ont des problèmes de vues.
Voilà sinon c'est sympa de retrouver un paysage et un pays d'enfance , merci !

Salut !

Graphiquement le site est daté, très daté. On se croirait dans les années 2000, entre le gris, le bleu le rose, le logo flou ce n'est pas du tout actuel. Je vais pas détaillé plus que ça les axes à travailler parce que je suis pas graphiste et d'autres le feront mieux que moi.

Au niveau du code c'est moyen, on a des éléments HTML5 comme les sections mais il y a trop d'id et l'utilisation de <table> pas à bon escient
Il y a aussi une balise <style> vide dans le header.

Je pense que le site est à revoir en entier que ce soit graphiquement qu'au niveau du code.

Néanmoins pour un amateur ce n'est pas si mal quand même

Bon courage

eviouchka a écrit :
Bonsoir @clauduc,

un beau p'tit village en effet. J'en viens des Pyrénées alors forcément j'ai l’œil amical
Graphiquement parlant, au premier coup d’œil , gris sur fond gris ce n'est pas super lisible et même si ce sont deux teintes différentes. Les liens de menus soulignés ça alourdit beaucoup et c'est inutile car par défaut, on sait que ce sont des liens puisque c'est un menu !
Il vaut mieux soit les soulignés au survol de la souris soit qu'il change de couleur mais pas de taille de police comme c'est le cas ici car cela peut gêner certains utilisateurs qui ont des problèmes de vues.
Voilà sinon c'est sympa de retrouver un paysage et un pays d'enfance , merci !

Merci beaucoup Eviouchka, je vais y travailler et tenir compte de tes conseils et encouragements.
Clauduc

Bonjour,

au survol du menu, les items gigotent puisque leur largeur change. Pour éviter ça, il faudrait soit que la taille de texte ne change pas soit sinon préciser un max-width : largeur (plus grande) due au texte + padding ne ferait alors plus varier la largeur. Ou un effet à la http://codepen.io/raphaelgoetter/pen/qEObar mais c'est bien avancé en CSS...

Hiérarchie des titres : il faut que la page (d'accueil) commence par un H1 puis qu'il y ait soit un autre H1 si le sujet est autre soit bien plus couramment des H2 qui eux-mêmes peuvent introduire 1 ou des H3 qui titrent du contenu.
Pas de saut de H1 à h3, pas de h3 avant un h1, pas de titre ne titrant pas un contenu (pour ce dernier : sauf exception).

Dans la colonne de gauche, les "titres" sont similaires aux évènements qu'ils introduisent à part la taille du texte ; du coup l'information est pas trop découpée visuellement (on voit pas trop qu'on passe du dernier item de "Très prochainement" au 1er de 2014. Je ne suis pas fan du tout en capitales, ça me complique la lecture, comme par exemple détecter d'un coup d'oeil les chiffres (dates) dans le texte
Modifié par Felipe (12 Dec 2014 - 09:57)

Salut,

clauduc a écrit :
le site de ma commune, développé bénévolement en amateur

Qu'on ne s'étonne plus ensuite si bon nombre de professionnels s'insurgent contre l'exploitation du travail gratuit…

J'ose espérer que l'accessibilité (une obligation légale pour les sites Web des communes) n'a pas été oubliée dans la réalisation du site.

Bonjour,

En complément des pistes d'amélioration déjà suggérées, vous pouvez éclaircir et moderniser un peu le site, juste en revoyant les couleurs.
Ici entre le fond d'écran violet digne des interfaces des années 80 et les blocs gris, c'est très terne et triste. C'est dommage avec la jolie photo de ce hameau d'une centaine d'habitants et de son écusson qui ne sont pas mis en valeur. Très "flat design" l'écusson !

Vous pouvez simplement virer le fond violet pour laisser du blanc et donner un coup de frais. Pour déterrer le site, remplacez ce fond gris plombant par un gris très clair, comme par exemple ici sur ce forum. Un gris RVB 240/240/240 serait à tester par exemple. Les gris très clair sont élégants et à la mode.

Pour éviter l'effet visuel "site à l'ancienne" en tableau et décloisonner l'ensemble, vous pouvez passer le header en haut sur fond blanc comme le fond d'écran. Ainsi, le blason n'aura plus cette bande blanche en bas assez inesthétique (à moins de le passer en PNG pour la transparence).
Les onglets devront alors passer en gris clair pour ressortir sur le blanc.

La carte de France a un contour noir assez laid. Essayez de récupérer une carte avec un contour transparent ou de la même couleur que le fond. Une carte aux couleurs de l'écusson passerait meux pour harmoniser l'ensemble. Vous pouvez même placer un point de couleur dessus pour y indiquer l'emplacement de votre hameau.

Et comme déjà mentionné, le menu gigote au survol, c'est désagréable. Inutile de graisser et grossir le texte. Ou alors en normal et en hover pour éviter tout décalage.

Les traits avec des effets de matière bleue sur les côtés font assez vieillot, préférez des filets fins neutres.
Le texte bleu pourrait être un peu plus saturé, là il parait un peu terne comparé à l'écusson.

Aussi, les blocs "contact", "situer…" ou "voir…" pourraient rester rectangulaires. Les coins arrondis ne font pas moderne ici. Pas de dégradé, d'ombré, à tester avec un fond couleur en aplat et texte blanc pour dynamiser ?

Pas d'effet d'ombre sous les blocs au survol. Ça fait kitsch.

Plutôt que de mettre les bandes d'encarts sur ce fond jaunâtre avec le texte bleu, avez-vous testé en reprenant une couleur du blason avec le texte en défonce blanche ? À tester…

Le rapport gris/blanc peut aussi être inversé, à vous de voir.

Les couleurs des photos sont jolies mais un peu ternes (elles se font bouffer par les teintes actuelles du site), on croirait qu'un léger voile gris les recouvre (sur mon écran). Je les saturerai un poil plus. Attention cependant à ne pas les rendre fluos, il faut y aller en subtilité.

Comme vous pouvez le noter, l'idée consiste essentiellement à donner un coup de frais à la palette des couleurs pour moderniser ce site qui pour le moment, semble en effet avoir été conçu il y a 15 ans.

Voilà pour moi, rien d'insurmontable donc.
En attendant la suite ?
Modifié par spongebrain (13 Dec 2014 - 11:08)

Victor BRITO a écrit :
Qu'on ne s'étonne plus ensuite si bon nombre de professionnels s'insurgent contre l'exploitation du travail gratuit…

J'ose espérer que l'accessibilité (une obligation légale pour les sites Web des communes) n'a pas été oubliée dans la réalisation du site.

Salut,

J'ai eu le même réflexe au départ, mais la commune en question compte seulement quelques âmes qui doivent tous s'appeler par leur prénom. Payer une agence ou même des graphistes et développeurs freelance les obligerait à s'endetter sur 10 ans ou à quintupler les impôts locaux. Passer par des faux professionnels à 1000 balles ne serait pas une solution non plus et ne présenterait aucune garantie.

http://fr.wikipedia.org/wiki/Sailhan

Il reste donc la solution d'un template wordpress à 30$ ou de la bonne volonté d'un citoyen de la commune. Raisonnablement, on ne peut pas considérer ce site amateur comme de la concurrence, même s'il a sa petite utilité. La plupart des communes de cette taille n'ont pas de site.

Le problème du travail gratuit est tout autre. Il concerne en priorité des entreprises crapuleuses qui organisent l'exploitation et l'esclavage 2.0 par des concours bidons qui mettent en compétition des centaines de malheureux qui espèrent "gagner" 300 € (0 € la plupart du temps) pour des clients peu regardant qui souvent sont des pros et ont les moyens de payer de vrais tarifs. Ce type de "client" est aussi condamnable que les organisateurs de faux concours. Les participants à ces concours se retrouvant lésés et l'entreprise qui organise l'arnaque gagne des centaines de milliers d'euros… On est pas ici dans ce schéma. Enfin, je pense…

Il ne faut pas assimiler l'action bénévole pour une bonne œuvre ou une petite communauté, et l'exploitation du travail gratuit que je condamne. Il en aurait été tout autre si la commune en question avait eu les moyens et nécessitait un site pro. Ici c'est juste une bonne action, une petite vitrine amateur avec 3 infos pour faire vivre une communauté rurale, avec à peine plus de lecteurs.

Voilà pour la fin de l'aparté.
Modifié par spongebrain (13 Dec 2014 - 11:16)

spongebrain a écrit :

Ici c'est juste une bonne action, une petite vitrine amateur avec 3 infos pour faire vivre une communauté rurale, avec à peine plus de lecteurs.

Bonjour, je rejoins @spongebrain sur le sujet, de toutes petites communes de campagne n'ont bien souvent pas les moyens de se payer un pro pour faire un site web . En tant que professionnel du web, on a tendance a "assassiner" sur les forums des gens qui essaie de faire un p'tit truc avec leurs moyens et qui ne sont pas des pros et oui, on verra que leur site ne sort pas d'une agence web, mais c'est du bénévolat et peut-être bien quelqu'un qui s'est donné beaucoup de mal pour faire ça.

Salut à tous
Modifié par eviouchka (16 Dec 2014 - 11:29)

Bonjour à tous

Merci pour vos avis, critiques, conseils.
Je vais quand même répondre sur plusieurs points :

1. A propos du bénévolat : Il y a 130 habitant dans cette commune, très peu de ressources, quelques emprunts, les finances de la mairie sont à zéro. Il n'y a aucune concurrence avec les professionnels : soit on fait du travail bénévole, soit on ne fait pas. Plusieurs élus ont souhaité, par ce site, commencer à rassembler, capitaliser beaucoup d'informations existantes sur le patrimoine et l'histoire de la commune, informations qui ont tendances à disparaitre peu à peu. Tout le monde se connait, s'appelle, c'est vrai par son prénom ou son diminutif et l'ambiance est chaleureuse et on y fait souvent la fête. Quand vous rencontrez le doyen du village qui a fait fonctionner le moulin à eau pour moudre le grain jusqu'en 1960, vous êtes dans un autre monde. Quand vous discutez avec un bonhomme de 76 ans qui a été berger pendant 60 ans et qui, cette année encore, gardait 900 moutons en altitude, quand il vous explique que s'il lui manque 2 moutons sur les 900, il s'en aperçoit très vite, vous avez face à vous une connaissance de la nature, de chaque arbre, de chaque rocher, ravin, chaque coin d'herbe, chaque terrier...que plus personne n'aura jamais et - malgré toute notre technologie - on peut se faire modeste et petit.

2. A propos de l'accessibilité : nous avons avec nous un aveugle - doté des outils de transformation en Braille - qui consulte le site, nos fournit des enregistrements sonores et veille à ce qu'il comprenne tout.

3. Pour la réalisation de la première version du site, il a fallu compter environ 70 à 80% du temps à collecter le contenu, rédiger des textes, récupérer des photos et 20 à 30% pour le développement proprement dit.

4. Le développement a été effectué avec des moyens rudimentaires :
- un PC acheté en 2005 avec XP Pro et un disque dur IDE préhistorique acheté d'occasion car ils se font de plus en plus rare,
- notepad++ et quelques logiciels de manipulation d'image (IrfanView, Easy Thumbnails...)
- une connaissance nulle des langages HTML5, CSS, PHP, des questions de charte graphique,... mais une pratique de longue date des développements de logiciels
- Quand je n'arrive pas à faire quelques choses, je vais voir les codes sources des sites qui l'ont déjà fait et je m'en inspire et même parfois, je réutilise le code. Cela explique le caractère hétérogène du codage actuel.
- En 2015, achat d'un PC à jour et développement d'une nouvelle version du site avec des moyens plus à jour (utiliser Joomla ?)
Dans un premier temps, je vais procéder aux améliorations qui me sont proposées sur la version actuelle.

Clauduc

Bonjour @Clauduc,

Si vous avez besoin d'une aide quelconque pour votre site vous pouvez me contactez en mp, je conçois des sites et applis web et vous aiderait avec plaisir.

Bonne continuation.

Merci de votre réponse. Une photo du moulin ?

En attendant de voir le résultat, n'hésitez pas.

Bonjour,

Rien à redire sur la mise au point, à part souhaiter une excellente continuation à ce site

clauduc a écrit :
2. A propos de l'accessibilité : nous avons avec nous un aveugle - doté des outils de transformation en Braille - qui consulte le site, nos fournit des enregistrements sonores et veille à ce qu'il comprenne tout.

Bien sûr, le site ne pourra peut-être pas prétendre de constituer un exemple de labellisation accessiweb ou de respect du RGAA (quoique, pourquoi pas après tout d'ici quelques années !), mais au moins, il y a un effort de fait et dans le contexte actuel de prise en compte de l'accessibilité numérique par les administrations et collectivités (moins de 10% ont mis en place une démarche), c'est déjà un très très très bon point pour vous. Mention + pour faire tout ceci en l'absence totale de budget. Mention + + pour mettre à contribution un usager en situation de handicap, qui pourra vous faire de nombreux retours très enrichissants. Bravo
Modifié par audrasjb (15 Dec 2014 - 21:00)

Quelle réactivité !!

Je préfère cette nouvelle version même s'il reste quelques point à améliorer. C'est plus clair, plus moderne, plus frais, plus lisible, rien qu'en ayant modifié quelques couleurs.

Le menu a été stabilisé au survol.

Reste cette bande blanche sous le blason et le contour autour de la carte de France. Si vous voulez, vous pouvez afficher ici votre carte de france et le blason en gran, et en retour je vous afficherai les versions PNG avec des contours transparents propres pour soigner les détails. Ça ne me demandera que quelques minutes.

En attendant la suite ?

Bonjour @Clauduc

je plussoie @spongebrain, c'est beaucoup plus clair et lisible.
Bonne continuation.

Bonjour à tous

Merci beaucoup, et particulièrement à @spongebrain pour ses conseils et suggestions éclairées (nécessaires pour apporter plus de lumière). Je poursuis tout doucement la prise en compte de ces suggestions.
A+

Clauduc

Merci encore

Voici le blason et la carte de France. Est-il possible d'en tirer quelque chose ?

A bientôt

Clauduc

spongebrain a écrit :
Quelle réactivité !!

Je préfère cette nouvelle version même s'il reste quelques point à améliorer. C'est plus clair, plus moderne, plus frais, plus lisible, rien qu'en ayant modifié quelques couleurs.

Le menu a été stabilisé au survol.

Reste cette bande blanche sous le blason et le contour autour de la carte de France. Si vous voulez, vous pouvez afficher ici votre carte de france et le blason en gran, et en retour je vous afficherai les versions PNG avec des contours transparents propres pour soigner les détails. Ça ne me demandera que quelques minutes.

En attendant la suite ?

Voilou,

Le blason en PNG transparent au format de celui du site :

http://images.jupload.fr/1418747039.png

La carte de France en PNG transparent au format avec l'emplacement du village qui reprend le motif et les couleurs du blason :

http://images.jupload.fr/1418747109.png

La même avec un point, à vous de choisir :

http://images.jupload.fr/1418747127.png

Images hébergées sur http://www.jupload.fr/index.php

Pour un meilleur rendu, je pense qu'il faudrait supprimer et/ou éclaircir le dégradé dans les carrés. Et des coins carrés sans ombre seraient plus jolis pour s'harmoniser avec le reste du site.

Et comme ce sont les fêtes, je trouve dommage de faire une carte sans la photo de ce très joli village. Donc voici une version avec le village à la place de la carte actuelle un peu impersonnelle (image au format de l'actuelle pour une bonne intégration), (.jpg) :

http://images.jupload.fr/1418747146.jpg

Le fond utilise une photo de Brenda Gottsabend.
https://www.flickr.com/photos/gottgraphicsdesign/6527184301
Elle est soumise au droit Creative Commons qui autorise une utilisation gratuite à condition de citer l'auteur. Le nom a donc été ajouté sur la photo.
https://creativecommons.org/licenses/by-nc/2.0/

La police de caractère utilisée pour le "Joyeuses Fêtes est JaneAusten.

Voilà, et… joyeuses fêtes !

…spongebrain, le père noël d'Alsacréations

Joyeux sites web à tous !

c bôôôô ce qu'il a fait @spongebrain !