[Amateur] Site d'une commune - walschbronn.fr

Bonjour !
Je viens de réaliser le site internet d'une commune, en essayant de tenir compte pour la première fois des standards du web et des bonnes pratiques qu'Alsacréations met en avant. Je suis assez novice en la matière.

Il se veut simple, mais je me suis tout de même amusé à faire un CMS maison pour ajouter des actualités, des documents, des photos ou encore des évènements.

J'aimerais ainsi connaître votre avis sur celui-ci, je suis preneur de toute critique pouvant m'aider à l'améliorer (et je pense qu'il y en a pas mal à formuler malheureusement), que ce soit au niveau du code, mais peut-être avant tout sur l'ergonomie et la présentation qui ne sont pas mon fort.

Merci à vous.

www.walschbronn.fr
Modifié par Kleiny (23 Apr 2013 - 18:29)

Bonjour,

c'est marrant j'avais déjà regardé ton site mais au final je n'avais rien à dire.
Mais bon je ne vais pas laisser ton post se noyer sans réponse ^^

Globalement j'aime beaucoup, le design est clair, le code est simple, c'est valide...

Alors on va passer aux trucs qui vont pas ^^
Je ne sais pas si tu es le créateur du logo mais je trouve qu'il "pète" un peu trop, dans le sens où c'est l'élément le plus contrasté de la page, du coup ça perturbe mon oeil quand je lis.
Et son style ne correspond pas vraiment à l'image de fond, mais ça c'est mon avis.

Ensuite quelques éléments manquent un peu de padding, notamment les titres sur fond vert et les liens des blocs de droite et du footer. Peut-être aussi les miniatures des posts.

Dans le bloc "Prochains évènements" je verrais plus un layout tabulaire avec les dates dans une colonne et l'événement dans une autre, et peut-être changer le format de date pour laisser plus de place au texte.

Le survol des liens pourrait être un peu plus élaboré, je n'ai pas d'idée pour toi mais un simple soulignement commun à tous les liens ça fait un peu "cheap" ^^

Un petit coup d'url rewriting serait appréciable également, pour éviter les liens du genre http://www.walschbronn.fr/histoire.php?partie=weckersbourg

Lorsque les blocs de droite sont absents, je trouve les lignes de texte un peu longues (ou le texte trop petit au choix), comme sur http://www.walschbronn.fr/jumelage.php.

Niveau code je vois que tu intègres pas mal de css et de scripts, il serait bon de les fusionner. D'ailleurs je n'ai pas vu où tu utilises prototype sur ton site. D'ailleurs la mode est à JQuery, qu'est ce qui t'a poussé à utiliser prototype/scriptaculous ? ^^

En tout cas sacré boulot pour un débutant, j'ai noté l'utilisation des media queries !

Bonne continuation !

Merci beaucoup pour ton intervention !

MatTheCat a écrit :

Je ne sais pas si tu es le créateur du logo mais je trouve qu'il "pète" un peu trop, dans le sens où c'est l'élément le plus contrasté de la page, du coup ça perturbe mon oeil quand je lis.
Et son style ne correspond pas vraiment à l'image de fond, mais ça c'est mon avis.

Malheureusement, il s'agit du blason officiel de la commune et je suis presque contraint de composer avec lui. Donc je pensais faire référence à son vert vif (à savoir que c'est tout simplement la couleur "green" pour un CSS) dans le design général, mais ce n'était pas vraiment élégant.
Peut-être en adoucissant ce vert, mais il ne faut pas le dénaturer...

MatTheCat a écrit :

Ensuite quelques éléments manquent un peu de padding, notamment les titres sur fond vert et les liens des blocs de droite et du footer. Peut-être aussi les miniatures des posts.

Effectivement on peut aérer tout cela.

MatTheCat a écrit :

Dans le bloc "Prochains évènements" je verrais plus un layout tabulaire avec les dates dans une colonne et l'événement dans une autre, et peut-être changer le format de date pour laisser plus de place au texte.

Ok, je vais revoir ce point.

MatTheCat a écrit :

Le survol des liens pourrait être un peu plus élaboré, je n'ai pas d'idée pour toi mais un simple soulignement commun à tous les liens ça fait un peu "cheap" ^^

Par exemple pour le menu, un changement de couleur ?

MatTheCat a écrit :

Un petit coup d'url rewriting serait appréciable également, pour éviter les liens du genre http://www.walschbronn.fr/histoire.php?partie=weckersbourg

Ça tombe bien c'est justement sur quoi je suis en train de plancher !

MatTheCat a écrit :

Lorsque les blocs de droite sont absents, je trouve les lignes de texte un peu longues (ou le texte trop petit au choix), comme sur http://www.walschbronn.fr/jumelage.php.

C'est possible, bien qu'une largeur de 700px me semble raisonnable de mon point de vue (faut dire aussi que je suis sur du 1080p, ça fausse...)

MatTheCat a écrit :

Niveau code je vois que tu intègres pas mal de css et de scripts, il serait bon de les fusionner. D'ailleurs je n'ai pas vu où tu utilises prototype sur ton site. D'ailleurs la mode est à JQuery, qu'est ce qui t'a poussé à utiliser prototype/scriptaculous ? ^^

En fait j'ai pris un visionneur de photo "clés en main" (Lightbox), simple d'utilisation et très utile. Donc la partie JS lui revient entièrement. Il faut dire que je m'y connais guère et comme ça marche bien; je ne me pose pas plus de question.

Et pour les CSS, il est mieux d'avoir par exemple les feuilles "mobile", "print" et "style" toutes en une ? Si oui, quel est l'avantage ?


En tout cas merci d'être intervenu.

Alors en fait on considère qu'une ligne de texte a une lisibilité optimale lorsqu'elle est large d'environ 30-35em (em étant la taille effective de la police). La tienne fait 700/13 = 54em, donc il faut soit que tu augmentes la taille de la police ou que tu diminues la largeur. Et habitue toi à utiliser les em, c'est quand même plus pratique ^^

Si tu ne touches pas à la partie JavaScript (=si tu n'utilises qu'une lightbox) il existe des scripts standalone et donc beaucoup plus léger. Là tu te trimballes deux librairies pour un script qui doit utiliser 10% de leurs capacités..!
J'avais un jour utilisé Lytebox, mais si tu veux faire ton choix voilà l'outil indispensable : http://planetozh.com/projects/lightbox-clones/

Après pour tout ce qui concerne le design je n'ai aucune notion créative donc je ne peux qu'exprimer mon ressenti, je n'ai pas d'idée pour toi -_-'

MatTheCat a écrit :
Alors en fait on considère qu'une ligne de texte a une lisibilité optimale lorsqu'elle est large d'environ 30-35em (em étant la taille effective de la police). La tienne fait 700/13 = 54em, donc il faut soit que tu augmentes la taille de la police ou que tu diminues la largeur. Et habitue toi à utiliser les em, c'est quand même plus pratique ^^

Ok je vais voir cela. Mais juste pour comprendre, d'ou vient ce 13 ?

Kleiny a écrit :
d'ou vient ce 13 ?

C'est simplement la taille de ta police en pixels !

Kleiny a écrit :
Et pour les CSS, il est mieux d'avoir par exemple les feuilles "mobile", "print" et "style" toutes en une ? Si oui, quel est l'avantage ?

Je pense que c'est à toi de voir, les séparer permet de rendre ton css plus modulaire et de ne pas forcément charger tous les styles pour tous les supports.
À l'inverse les regrouper diminue le nombre de requêtes.

En prenant en compte que le CSS sera mis en cache j'ai tendance à séparer les CSS par média.

Coucou,

Pour le contact, un formulaire est plus indiqué qu'un mailto je pense.
Pareil pour le contact au webmaster. C'est la base et le formulaire doit être présent.

J'aime bien la photo en guise bannière, la qualité est relativement bonne et cela reste sobre.


C'est le site d'un amateur mais un amateur éclairé, il est bon de voir que tu prends en compte l'internet mobile par l'utilisation des media queries.
Les PDF sont optimisés ce qui est très bien pour le chargement des pages.
Les couleurs sont bien assorties et le site est reposant.

Il manque des alt à tes images qui sont aussi des liens vers des pages.
Ce travail semble en tout cas raisonné et suit des méthodes, donc bravo, quand tu auras fini la mise en page et de peaufiner les détails, tu pourras t'intéresser aux techniques de référencement.


Ce site est codé à la main, tu aurais peut-être intérêt à le passer sous un CMS pour la maintenance et la mise à jour,
Modifié par jmlapam (25 Nov 2011 - 14:25)

jmlapam a écrit :
tu pourras t'intéresser aux techniques de référencement

Exact ! Il ne semble pas y avoir de mots-clé, par exemple.

MatTheCat a écrit :
Alors en fait on considère qu'une ligne de texte a une lisibilité optimale lorsqu'elle est large d'environ 30-35em (em étant la taille effective de la police). La tienne fait 700/13 = 54em, donc il faut soit que tu augmentes la taille de la police ou que tu diminues la largeur. Et habitue toi à utiliser les em, c'est quand même plus pratique ^^

Des sources, s'il te plait. Moi j'étais resté sur 50-60 caractères par ligne, et que moins était plus néfaste qu'autre chose.

Source

Et du coup, pour le site ici, la longueur de ligne est optimale.
Modifié par Laurie-Anne (25 Nov 2011 - 08:23)

Laurie-Anne a écrit :
Des sources, s'il te plait.

Wep, c'était ici. D'ailleurs ses lignes font 35em de large, ce qui laisse la place à environ 60 caractères par ligne, donc tout le monde est content ^^

Par contre je parlais de ses lignes quand son layout n'a aucune colonne à droite, du coup elles s'étendent sur cet espace.

Bonjour !

Muchos a écrit :

Exact ! Il ne semble pas y avoir de mots-clé, par exemple.

Il me semblait que leur utilité était très limitée.
Alsacréations les références aussi comme "obsolètes".

jmlapam a écrit :

Ce site est codé à la main, tu aurais peu-être intérêt à le passer sous un CMS pour la maintenance et la mise à jour

Pour ce qui est régulièrement mis à jour (ajout d'actualité, d'évènements ou de documents) j'ai bel et bien réalisé une petite interface d'administration avec base de données, etc. Pour le reste ça sera de toute manière plus ou moins statique.

Je vais aussi m'informer pour le formulaire.

Merci pour les retours.

Kleiny a écrit :
Il me semblait que leur utilité était très limitée.
Alsacréations les références aussi comme "obsolètes".

Exact, les mots clés sont totalement inutiles actuellement.

Muchos a écrit :

Exact ! Il ne semble pas y avoir de mots-clé, par exemple.

référencement != metakeywords, c'est plutôt rendre ses url plus sexy, du genre enlever le .php des pages, bien choisir ses title (encore que là pas de souci je pense), le but étant de créer du trafic sur le site via les moteurs de recherche.

Je me dis que dans ce cas cela peut participer à faire connaître la commune.
Modifié par jmlapam (25 Nov 2011 - 14:30)

Merci d'avoir souligné l'obsolescence de la META keywords ! C'est effectivement expliqué sur cette page.

J'en ai gardé finalement sur ma page index — au cas où — mais j'ai viré le reste. Un bon tas d'octets de gagné !

jmlapam a écrit :


référencement != metakeywords, c'est plutôt rendre ses url plus sexy, du genre enlever le .php des pages, bien choisir ses title (encore que là pas de souci je pense), le but étant de créer du trafic sur le site via les moteurs de recherche.

Je me dis que dans ce cas cela peut participer à faire connaître la commune.

A ce propos, qu'est ce qui est conseiller en matière d'URL Rewriting ?
De mon côté j'aimerais utiliser des dossiers virtuels (comme sur Alsacréations) du genre /histoire/eglise, mais se pose ensuite le problème des chemins relatifs qui sont brisés...

Quel est votre point de vue ?

Bonjour,

Je débute dans ce domaine du référencement mais je m'y intéresse assez pour donner ces quelques pistes d'ordre général:

- évidemment le contenu participe à un bon référencement
- le but de l'url rewriting est de rendre les urls les plus lisibles possibles pour les visiteurs mais surtout pour les robots. Il est judicieux d'y mettre des mots clés en rapport direct avec le contenu de la page, d'enlever l'extension du fichier de la page

EX: \http://www.walschbronn.fr/agenda.php pourrait devenir \http://www.walschbronn.fr/agenda-municipal

- quand j'évoquais un CMS dans un autre post, je pensais à Wordpress qui est fort utile avec ses plugins de SEO. Avec Wordpress, par exemple, on peut aussi rendre tous ses chemins absolus et limiter par la même le nombre de requêtes. Voir s'il n'existe pas des modules en opensource dont vous pourriez vous inspirer.

- en l'état, il faut passer par le .htaccess du site et appliquer des commandes que l'on trouve facilement sur en tapant url rewriting ou réécriture d'url. Pour les dossiers virtuels, il faut rajouter des catégories dans les rewrite rules.

---> Attention l'idée générale est d'améliorer la pertinence
pour le ranking c'est encore autre chose.
Modifié par jmlapam (27 Nov 2011 - 05:34)

Bonsoir !

J'ai mis en application certaines de vos remarques comme un formulaire de contact au lieu d'un mailto, une nouvelle visionneuse d'image plus légère et utilisant jQuery (Slimbox) au lieu du prototype/sprictaculous et toujours une flopée de petits détails par ci par là.

De plus j'ai fait quelque rewrite d'url (en gardant encore l'extension néanmoins, afin de rester cohérent avec les pages classiques) tout en faisant un peu attention au possible duplicate content, ce qui devient vite fort contraignant.

Par contre, j'essaie aussi de m'intéresser au technique de référencement, mais j'ai actuellement un soucis avec Google. Rapidement après la mise en ligne du site, celui-ci s'est retrouvé en première position dans la requête de recherche principale, en l’occurrence le nom de la commune, ce qui paraît légitime au final. Mais depuis un petit moment, il s'est vu rétrogradé bien plus loin, le rendant parfaitement invisible pour cette requête.
Si c'est normal tant mieux, sinon comment savoir si quelque chose ne va pas ou n'allait pas à un certain moment ? J'espère que c'est juste une question de temps en tout cas.

++

Bonjour,

Pour le référencement, je te recommande chaudement d'aller faire un tour sur WebRankInfo.

Ton site tout jeune a possiblement bénéficié d'une prime de fraîcheur. Tu peux faire une recherche sur Google pour en savoir plus là-dessus.
Modifié par Tony Monast (14 Dec 2011 - 20:53)

Salut,

Prime à l'entrée sur le marché pour Google effectivement. ces techniques ne font pas de mal à ton site mais le ranking c'est autre chose, y a WRI mais aussi veille_SEO où tu peux trouver de l'info.
Bonne découverte

Tu peux utiliser le google webmaster tools pour voir si tes pages sont optimisées (taille de titre, description, absence de duplicate content, ...). Ca permet déjà de filtrer pas mal de problèmes liés au référencement. Le google webmaster tools est pratique mais a parfois un temps de retard...

En ce moment, les résultats de google semblent assez fluctuants. La faute à leur nouvel algorithme? J'ai eu le même genre de surprise avec un de mes sites qui a oscillé entre la 1ere page et la 17e page (en quelques heures de temps seulement)!!!