Refonte de site internet pour une association d'hébergement

Refonte d'un site internet pour une association d'hébergement sur Paris. Après refonte, le site internet du Service Social Breton propose des pages pour découvrir l'association : l'établissement, les lieux de vie, l'équipe, les conditions d'admission, l'inscription en ligne.

Refonte de site internet pour l'association Service Social Breton

La refonte d'un site internet pour l'hébergement sur Paris de l'association Service Social Breton

Licence Creative CommonsLa refonte d'un site internet pour l'hébergement sur Paris de l'association Service Social Breton de Olloweb.com est mis à disposition selon les termes de la licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.

Refonte d'un site internet pour une association d'hébergement de jeunes femmes sur Paris

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'admissions, 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.

LA REFONTE DU SITE DE L'ASSOCIATION

Le haut de page

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

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

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

  • Une présentation animée composée d'une suite de grand visuel
  • 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étros.

Les pages de présentation

Les pages intérieures présentent l'association en texte et en images et détail 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 du site d'enregistrer les champs du formulaire au fur et à mesure.

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 en termes de site web. 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.

Maquettes du site de l'association

Avec un budget très réduit, il n'était pas envisageable de réaliser des maquettes pour chacune des pages modèles 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.

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é, nous avons ajouté le contenu de l'association, les textes, images et 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 d'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 contenu.

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.

» Voir le site de l'association en ligne

Galerie refonte d'un site internet pour une association d'hébergement de jeunes femmes sur Paris

Refonte de site internet pour association

Conception graphique de la page d'accueil de l'association

Refonte de site internet pour association

Conception graphique de la page de bienvenue de l'association

Refonte de site internet pour association

Conception graphique de la page de l'association

Refonte de site internet pour association

Conception graphique de la page de l'établissement de l'association

Refonte de site internet pour association

Conception graphique de la page des lieux de vie de l'association

Refonte de site internet pour association

Conception graphique de la page d'admission de l'association

Refonte de site internet pour association

Conception graphique de la page l'équipe de l'association

Refonte de site internet pour association

Conception graphique de la page historique de l'association

Conception et réalisation suivant l'offre de refonte de site internet de présentation

Refonte de site de présentation

Refonte de site de présentation

Olloweb CMS

Refonte de site internet de présentation

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 (iPad, iPhone...) et un référencement naturel performant.

L'offre de refonte de site internet de présentation
à partir de 1 930,00 HT - 2 316,00 € TTC OFFRE PRO

Détail de l'offre