Après avoir réalisé la première refonte du site de l'association en 2010, notre équipe a été sollicitée pour lancer une nouvelle refonte. L'objectif de cette seconde refonte était de rendre le site plus moderne et de répondre aux exigences des nouveaux formats d'écran. La refonte a également permis à l'association de reformuler les contenus des textes et des images relatifs à l'amélioration de l'établissement.

Le nouveau site internet de l'association comporte dorénavant une grande page d'accueil comprenant le résumé des pages intérieures. Un ensemble de pages pour présenter l'association avec : bienvenue à l'association, à propos de l'association, l'établissement, les lieux de vie, l'équipe, les conditions d'admission, l'historique, l'accès au foyer, le formulaire d'inscription.

S'agissant d'un site de présentation d'activité qui n'a pas vocation à être modifié régulièrement, le site internet de l'association n'est pas dynamique et sera donc mis à jour par notre agence une fois par an. Un des avantages du choix de réaliser un site statique est d'avoir une présentation soignée de l'ensemble des pages du site. Notre agence a donc pris en charge la mise en page des contenus conformément aux exigences de l'association.

Le fait de choisir un site statique par rapport à un site dynamique a permis à l'association d'avoir un résultat plus professionnel pour un coût moins élevé comparé à un site dynamique qui nécessite plus de développement et une base de données.

Nos solutions étant garanties pour une durée de deux ans, le site internet de l'association sera mis à jour et modifié gratuitement pendant cette période.

Voir le site en ligne

La refonte du site de l'association

Le haut de page après refonte

Le haut de page est composé d'un menu général, séparé en deux par le logo de l'association. Le menu donne accès aux pages importantes du site internet. En version mobile, le menu est masqué pour ne laisser que le logo qui permet, par un clic sur celui-ci, d'ouvrir le menu général afin de permettre la navigation.

Le bas de page après refonte

Le bas de page est composé du logo, d'une information sur le nombre de personnes hébergées chaque année, d'un menu réseau social. Puis, plus bas, un espace dans lequel vous pourrez trouver toutes les coordonnées de l'association ainsi qu'un plan récapitulatif des pages du site internet. Enfin en bas de page, le nom du site et les informations de copyright ainsi qu'un lien vers notre agence web.

L'établissement, les lieux de vie,...

La page d'accueil

La page d'accueil regroupe en résumé les pages intérieures du site avec par ordre à partir du haut:

• Une présentation animée composée d'une suite de grands visuels
• Un photomontage de diverses photographies de l'association avec diaporama
• L'association en bref avec quelques chiffres clés
• L'établissement avec des liens vers l'historique, qui sommes nous...
• Les lieux de vie en résumé avec quelques chiffres
• L'équipe du foyer avec les principaux responsables de l'association
• L'accès au Service Social Breton, plan de site et accès en transport par bus et métro.

Voir de détail de la page en ligne

L'association, l'équipe, l'établissement...

Les pages de présentation

Les pages intérieures présentent l'association en textes et en images et détaillent les informations résumées de la page d'accueil. La page d'inscription qui permet de postuler à un logement a été décomposée en plusieurs étapes. Cela a permis d'être compatible avec les versions mobiles et d'enregistrer les champs du formulaire au fur et à mesure.

Les étapes de création

Le briefing de projet

Avant de lancer la production d'un site internet de présentation d'activités, il convient de prévoir un briefing de projet. Le briefing de projet nous permet de rencontrer les personnes responsables à même de nous expliciter leurs attentes. Ainsi, après une écoute attentive nous avons fixé les objectifs de la refonte qui servira de fil conducteur tout au long du projet.

En savoir plus sur le briefing de projet

Plan du site de l'association

S'agissant d'un mini site internet, il n'était pas nécessaire de passer du temps à l'établissement d'un plan des pages. Il était préférable de réaliser un plan de suivi et validation de toutes les étapes de la réalisation du site.

Maquettes du site de l'association

Avec un budget très réduit, il n'était pas envisageable de réaliser des maquettes pour tous les modèles de pages du site internet. Notre équipe a donc lancé la conception graphique directement sans cette étape. Des ajustements graphiques ont ensuite permis une meilleure mise en page des contenus.

La conception graphique

Pour la conception graphique, il s'agissait de proposer un graphisme à la fois simple et moderne afin de privilégier la présentation des pages. L'association venant juste de terminer des travaux de rénovation, il était donc important de mettre en valeur l'établissement avec un graphisme adapté et une mise en page qui met en valeur le contenu.

Pour ce faire, nous avons donc procédé à un lifting du logo qui était auparavant encadré. Nous avons utilisé les couleurs jaune et orange pour souligner différents aspects importants du site. S'agissant d'un site en responsive design, nous avons travaillé à la conception d'un graphisme adaptatif pour proposer une version sur tablettes et sur smartphones privilégiée par les utilisatrices. Après quelques modifications mineures, l'étape graphique fut approuvée par l'association et nous sommes ensuite passés au développement.

En savoir plus sur la conception graphique

Le développement HTML, CSS et Ajax

L'utilisation du HTML5 facilite le développement des pages, grâce aux nouvelles balises qui permettent de mieux structurer le code et de gagner en lisibilité. Le CSS3 avec les Médias Queries facilite la déclinaison du site en version tablette et smartphone. S'agissant d'un site statique pour la plus grande partie, nous avons procédé au codage de toutes les pages web du site. Puis une fois codées, nous avons ajouté le contenu de l'association, les textes, les images et les autres médias.

Pour le formulaire de demande d'adhésion, celui-ci étant très long, il était préférable de procéder par étapes successives et d'enregistrer les données utilisateurs au fur et à mesure. Nous avons donc réalisé toutes les étapes du formulaire puis ajouté des actions en Ajax afin de n’afficher qu'une étape à la fois.

Le développement dynamique

Après avoir terminé toutes les pages du site, nous avons ajouté le codage PHP pour rendre le site en partie dynamique. Cela afin de faciliter l'enregistrement du formulaire et l'interaction avec des modules indispensables au bon fonctionnement du site.

La gestion du site

Le site internet de l'association étant statique et mis à jour par notre agence, il n'était donc pas nécessaire d'ajouter notre application de gestion de contenus.

La validation du projet

Avant de procéder à l'ouverture du site, Olloweb lance une vérification complète du site internet afin de garantir le codage. Le site d'information une fois validé est garanti pour une durée de deux ans. Cette garantie couvre les bugs éventuels et les mises à jour des navigateurs.

Les statistiques et référencement

Pour obtenir les statistiques de fréquentation du site, nous procédons à l'installation de module Google ou Piwik. Un plan de l'ensemble des pages web du site est rendu disponible en ligne et ajouté dynamiquement pour Google et les autres moteurs de recherche. Par ailleurs l'hébergement OVH propose des statistiques fiables avec l'analyse des logs du site.

En savoir plus sur les statistiques