Refonte d'un site internet pour une association d'hébergement
Service Social Breton.org
Association

Votre note a bien été prise en compte, notre équipe vous remercie pour votre collaboration.
Vous avez déjà noté cette page, encore merci pour votre collaboration !
Le projet
Service Social Breton
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.

Le haut de page après refonte
La refonte du site de l'association
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.

La page d'accueil
L'établissement, les lieux de vie,...
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.


Les pages de présentation
L'association, l'équipe, l'établissement...
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.
Etablir ensemble les objectifs du projet
Définition 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.

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.
Concevoir et imaginer les différentes formes du projet
Structure et prototype
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.

Dessiner et mettre en image le projet
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.
Produire et donner vie au projet
Production et intégration
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.
Mesurer et analyser la réussite du projet
Référencement et statistiques
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.

Coordonner les différentes phases du projet
Conduire et réaliser
La conduite du projet, le prototypage, la conception graphique, la réalisation technique et le CMS ont été réalisés au sein de l’agence Olloweb.
Galerie de conception
Refonte d'un site internet pour une association d'hébergement
Solution et tarif
Relookez votre site internet de présentation d'activité pour optimiser le référencement et dynamiser votre image

Refonte de site internet de présentation sur-mesure
Dynamisez votre site internet de présentation d'activité avec une mise en page professionnelle, un nouveau graphisme plus original, un développement compatible avec les nouveaux formats d'écrans et un référencement naturel performant.
L'offre de refonte de site internet de présentation sur-mesure
Estimation gratuite, nous consulter
Notre équipe peut vous aider pour votre projet.
Prenez rendez-vous dès maintenant ou appelez le 01 60 08 05 11
Appelez-moi / Nous contacter
Votre de demande de renseignements a bien été prise en compte,
notre équipe y répondra dans les plus bref délais.