Refonte de site internet pour une association d'hébergement de jeunes femmes sur Paris
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 !
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.

Service Social Breton
Association à but non lucratif, reconnue d’utilité publique pour l'hébergement temporaire des jeunes femmes
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.


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.

Briefing de projet
Le briefing de projet est un document qui défini les orientations globales du projet avant de lancer la production.
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.

Interface graphique
La conception d'interface graphique pour une expérience intuitive chez les utilisateurs.
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.
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.

Déclinaison pour téléphone
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.

Le formulaire d'inscription
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.

Les statistiques
Suivre une action en image par l'intermédiaire de statistiques aussi riches que possibles.
Galerie de conception
Refonte de site internet pour une association d'hébergement de jeunes femmes sur Paris