Page rejoindre Citotel

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.

version ordinateur de la page web
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
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.

Refonte du site internet de l’hôtel Amarys

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.

amarys - version ordinateur site internet responsive
le widget activité – vue ordinateur site internet responsive

Obtenir plus d’infos sur Otelico – sites internet pour hôtels

Technique

  • Site réalisé sous la plateforme développée par Otelico
  • Framework PHP Cakephp
  • Framework CSS Foundation
  • Optimisation du workflow par npm et gulp
  • Site internet responsive
  • Menu fixe en haut de page au scroll

Identité visuelle d’AS-Sophrologie

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…

as-sophrologie : creation site internet bordeaux responsive
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.

as-sophrologie : creation site internet bor
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 :

  • Foundation 6
  • SASS
  • Jquery

Optimisation du workflow par

  • npm,
  • gulp et
  • webpack

Site internet de Michèle Rabreau

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

Site web d’Organ’Phantom

Création des cartes de visite

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 :

  • Foundation 6
  • SASS
  • Jquery

Optimisation du workflow par

  • npm,
  • gulp et
  • webpack

Site de l’hôtel Bristol

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.

Version mobile du site internet de hotel Bristol Perigueux
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.

Technique

  • Site responsive
  • Site développé sur la plateforme Otelico
  • Frameworks CakePhp et Foundation

Optimisation du Workflow par :

  • npm
  • gulp
  • git