Citotel souhaitait présenter tous les avantages d’appartenir à leur réseau. Le message se devait clair et simple tout en étant le plus complet possible.
affichage ordinateur de la page web
Optimiser le contenu pour le web
La présentation PDF de 25 pages fournie par le groupement d’hôtel était très dense en informations. Il a donc a été nécessaire de réorganiser, hierarchiser et optimiser le contenu dans une optique web et orienté avantage hôteliers.
Créer une page web attractive et dynamique
C’est à partir de ce travail préalable sur le contenu initial que maquette de site internet et intégration web ont pu être réalisées.
Le choix d’une page unique du type « Onepage » en fait une page chargée d’informations. Chaque section est identifiée par une couleur, couleur extraite de la présentation PDF afin de respecter la charte graphique fournie.
Au fur et à mesure du défilement les éléments clés apparaissent et animent la page, apportant à la fois du dynamisme et un focus sur l’information ainsi mise en avant.
affichage mobile et tablette de la page web
Accompagner le visiteur de façon différentiée sur mobile et ordinateur
En plus du code couleur, il apparaissait primordial d’accompagner plus encore le visiteur.
Un menu dynamique sur écran d’ordinateur et tablette
Sur ordinateur, le menu s’anime en fonction de la section parcourue. Ainsi lorsque le visiteur survole une section, dans le menu apparait un onglet coloré – de la couleur de la section, vous l’aurez deviné 😉
Un titre de section ferré en haut sur mobile
Sur mobile, il est d’usage de masquer le menu, afin de gagner en place et visibilité. Une approche différente à donc été choisie pour mieux identifier chaque section.
Ainsi, lorsque le visiteur survole une section, son titre reste fixé en haut de page jusqu’à la partie suivante qui viendra ferrer son titre.
La refonte du site web de cet hôtel lui a permis de bénéficier des nouvelles fonctionnalités proposées par la plateforme Otelico.
Un header simplifié pour une meilleure visibilité des informations de favorisant la conversion.
Le menu latéral est aujourd’hui accessible par la maintenant célèbre icone « hamburger ».
Seules apparaissent le logo, les informations de téléphone, e-mail, localisation de l’hôtel et le bouton « réserver ». Le header (en-tete de page internet) est toujours visible, pour garder les informations accessible immédiatement.
vues mobile et tablette du site internet responsive
Intéresser le visiteur par l’intégration des widgets sur la page d’accueil
Par exemple, l’affichage du widget « activités dans la région » sur la page d’accueil peut susciter l’intérêt de passer un séjour dans l’hotel.
le widget activité – vue ordinateur site internet responsive
La refonte graphique et structurelle du site internet existant a permis de moderniser l’image de marque et augmenter sa visibilité en ligne.
Un site internet avec une communication visuelle décalée pour se démarquer de la concurrence à Bordeaux et en Gironde.
Sortir de l’imagerie classique liée au domaine du bien-être et de la santé. Se démarquer des autres praticiens bordelais et girondins déjà présents sur la toile.
La thématique des fruits et légumes illustrant les différents domaines d’action de la sophrologie apportent dynamisme et fraicheur au site web. Une réelle volonté de sortir de la norme tant sur l’aspect visuel que sur le message à faire passer. Tel étaient les objectifs fixés par Amélie Sainz.
La symbolique n’a toutefois pas été oubliée puisque chaque image illustre à sa façon le thème abordé : dessert à la composition presque architecturale pour le développement personnel par exemple, ou fruits gâtés pour le burn-out…
version ordinateur du site internet
Inciter le client à l’action par un bouton d’appel téléphonique toujours visible
Quand il s’agit de passer à l’acte, nous reculons souvent l’échéance…
Le bouton d’appel à l’action, toujours visible, que ce se soit sur ordinateur, tablette ou mobile, est bien identifiable et explicite (icône, sa phrase d’action, le numéro de téléphone) invite le visiteur à agir tout de suite.
Limiter le nombre de clics menant à l’information, c’est augmenter le taux de conversion et permettre également un meilleur référencement internet.
un bouton d’appel à l’action toujours visible sur mobile, tablette et ordinateur
La promotion du stage de sophrologie sur « Être amoureux de demain » ne pouvait faire l’impasse d’une communication papier.
Pour communiquer et se faire connaitre localement, rien ne remplace le flyer
Jouant avec les formes, textures et couleurs, l’illustration du flyer s’appuie sur le principe de la triple exposition afin de combiner les symboliques de l’union, l’univers et l’enracinement à la terre.
Flyer de communication distribué au Bouscat, Bordeaux et agglomération bordelaise, en Gironde
Technique
Site internet réalisé sous WordPress,
Conception des maquette du site internet,
Intégration des maquettes par la création d’un thème sur mesure,
Site responsif, adapté à toutes les tailles d’écran,
Plugin SEO pour optimiser le référencement naturel,
Plugin WordPress de cache pour un affichage rapide des pages,
Plugin Worpdress de sécurisation
Utilisation du framework FoundationPress avec prise en charge de :
Le site internet est volontairement sobre et épuré afin de laisser toute l’attention aux sculptures de l’artiste.
version mobile et tablette du site internet
Intégration Web : Thème WordPress sur mesure
Grâce à la création d’un thème WordPress sur mesure, la cliente n’a plus à se soucier de la mise en page de son site. Le nouveau contenu saisi est automatiquement intégré au site en respectant la charte graphique.
Pour cela, plusieurs modèles de page WordPress ont été développés pour :
la page d’accueil,
la page galerie,
les pages des sculptures selon le nombre de photos disponibles pour chaque œuvre :
une photo,
deux photos,
ou un diaporama quand il y a plus de 2 photos
la page des expositions passées et à venir
Développement Web : WordPress
Développé sur le CMS WordPress, l’artiste peut gérer son site internet toute seule : ajouter du contenu, le modifier, etc…
Le modèle de page « diaporama » pour les sculptures
La navigation interne entre les pages des sculptures a été personnalisée. L’intégration des images des œuvres en plus de leurs noms met à nouveau l’accent sur le travail de l’artiste.
Afin de minimiser le nombre d’action lors de l’ajout d’une nouvelle œuvre, la page galerie des œuvres est générée et mise à jour dynamiquement : dès l’ajout d’une nouvelle sculpture, elle est automatiquement ajoutée à cette page.
Pour plus de flexibilité, la cliente choisit l’ordre d’affichage dans l’administration du site de façon très intuitive : un simple clic et glisser-déplacer suffit.
Les photos et vidéos des sculptures ont été réalisées par Pascal Rousse
La volonté du client était double : revaloriser l’ancienneté de l’association par une présentation de tous les événements passés afin d’asseoir sa notoriété et son expérience ; gérer facilement et de façon autonome sa communication sur les événements à venir.
Problématique
Avec une cinquantaine d’événement à son actif depuis la création de l’association, il était important de pouvoir les renseigner de façon exhaustive tout en optimisant au mieux le process afin de limiter au maximum les actions nécessaires.
Solution
L’utilisation d’un plugin WordPress de gestion d’événement est au coeur de la gestion du contenu du site internet d’Organ’Phantom. Ce plugin a été personnalisé afin de coller au mieux à la demande client par l’ajout de champs personnalisés :
affichage d’une vidéo en remplacement de l’image à la une,
galerie d’images,
listes des artistes avec liens vers leur plateforme d’écoute en streaming,
mise à la une des artistes principaux,
liens externes (facebook, site de l’événement, etc…)
Ces données renseignées pour chaque événement permettent ainsi de générer automatiquement, sans action supplémentaire du client :
les modèles de pages dédiées à chaque type d’événement de l’association
la page galerie photos avec un affichage par ordre chronologique
Technique
Site internet réalisé sous WordPress,
Conception des maquettes,
Intégration des maquettes par la création d’un thème sur mesure,
Site responsif, adapté à toutes les tailles d’écran,
Prise en charge mutlilangue FR / EN,
Plugin SEO pour optimiser le référencement naturel
Plugin WordPress de cache pour un affichage rapide des pages,
Plugin Worpdress de sécurisation,
Utilisation du framework FoundationPress avec prise en charge de :
Pour son client l’hôte Bristol, Otelico a fait appel à mes services pour la conception de la charte graphique de l’hôtel et l’intégration des maquettes du site internet.
Site internet responsif
Développement d’un nouveau menu fixe pour mobile
Afin d’améliorer l’ergonomie de la navigation sur mobile, lors de l’intégration web de ce nouveau graphisme, j’ai développé un nouveau menu pour mobile. Ce nouveau menu pour site internet mobile a pu ainsi enrichir la plateforme Otelico.
Le menu est toujours visible et fixé en bas de l’écran mobile ou tablette. Les visiteurs du site web y retrouvent un accès rapide à la navigation du site, aux informations de contact, de localisation et à la réservation. Pratique, il affiche également le meilleur tarif comparé aux autres sites de réservation. Les visiteurs sont ainsi plus enclins à réserver en direct sur le site de l’hôtel.
Le développement de ce menu a été fait en Php, HTML et CSS. L’affichage des prix est possible grâce à une API avec échange de données JSON.
