Nous sommes toujours ravis de collaborer avec des entreprises québécoises qui voient GRAND et qui prennent les moyens pour atteindre leurs ambitions. Récemment, nous avons eu le bonheur de collaborer avec Madame Labriski qui nous a mandatés d’assurer la conception et la production de son tout nouveau site Web.
Les objectifs du livrable ont été clairs dès le début de notre mandat :
- Consolider sa présence numérique sur le marché québécois et appuyer son développement d’affaires sur le marché anglophone canadien et américain.
- Appuyer Madame Labriski dans ses démarches afin de devenir une source d’influence crédible dans le domaine de l’alimentation saine.
- Augmenter l’achalandage sur le site Web.
- Améliorer le positionnement du site Web dans les moteurs de recherche. Et pourquoi pas, en utilisant les contenus de recettes de Madame Labriski afin de les exposer davantage via Google.
Analyse de l’audience
Pour nos lecteurs qui ne connaissent pas Madame Labriski, laissez-nous vous la présenter. Madame Labriski est une entreprise agroalimentaire multiplateforme qui présente des recettes décadentes en faisant la guerre au sucre raffiné : elle sucre TOUT à la purée de dattes. Elle présente des produits alimentaires dans plus de 600 points de vente au Québec, des bestsellers culinaires (3 au Québec, 2 au Canada anglais et un en Europe) et des contenus numériques inspirants.
Elle fait aussi des conférences, des prestations gourmandes et des ateliers culinaires dans les entreprises et les écoles pour une bonne bouffée de motivation et d’énergie. Comme elle le dit si bien, « voir la Madame en spectacle, c’est une décharge d’énergie contagieuse! »
Même le cœur des plus jeunes chefs en herbe est conquis grâce à sa série de livres pour enfants dont l’héroïne partage la même mission que Madame Labriski : contribuer à diminuer la surconsommation de sucre raffiné.
On peut dire qu’en plus d’être une cuisinière affirmée, Madame Labriski influence positivement le quotidien de ses adeptes!
Afin de bien planifier la conception de son futur site Web, nous avons analysé le portrait de l’audience de l’ancien site Web de Madame Labriski et ses comportements sur les moteurs de recherche.
- Environ 60 % du trafic des internautes visitant le site Web de Labriski est sur mobile.
- Plus de 80 % de son audience est féminine et plus de 45 % de son audience représente les adultes entre 25 et 44 ans.
- Ce sont des expressions telles que « recette santé » et « pain aux bananes » qui sont les plus recherchées pour trouver une idée de recette.
Grâce à ces informations, nous avons tous les ingrédients pour planifier la conception du futur site Web de Madame Labriski. Il devra être conçu avec un design Web mobile first et une stratégie SEO devra supporter sa visibilité sur les moteurs de recherche sur les expressions types recherchées par l’audience ciblée.
Design Web mobile first
L’idée derrière le mobile first est de concevoir les maquettes initiales pour l’écran d’un appareil mobile d’abord, et ensuite, de développer l’interface visuelle avec une approche de design responsive ou adaptatif
En plaçant l’expérience sur un appareil mobile, au centre de la réflexion initiale, on s’assure que le site Web n’aura aucun élément de design ne convenant pas à la taille plus restreinte de cet appareil de taille réduite. Ensuite, lorsque la maquette mobile est terminée, on extrapole le design aux plus grands écrans en ajustant la disposition des contenus.
Navigation sur mobile au Canada
Petit retour dans le passé de Turbulences : il y a 10 ans, en 2011, déjà nous vous parlions de l’accélération de l’adoption des appareils mobiles pour naviguer sur le Web. Aujourd’hui, selon Statista, 29,8 millions de personnes au Canada naviguent sur le Web à partir de leur téléphone mobile.
Considérant que nous sommes environ 38 millions au Canada en 2020, c’est donc environ 78 % des Canadiens et des Canadiennes qui naviguent sur le Web à partir de leur appareil mobile.
En plus de l’adoption du mobile de plus en plus étendue au pays, la relation avec nos téléphones intelligents évolue et devient intime. Dans la même étude de Statista, parmi les Canadiens sondés, 35% ont répondu qu’ils ne pourraient pas vivre sans leur téléphone. Et, entendons-nous, ce n’est pas une statistique qu’on verra tendre vers la baisse au cours des prochaines années.
Ces statistiques indiquent à quel point le mobile est omniprésent dans le quotidien des Canadiens et des Canadiennes et combien il est essentiel d’avoir une version optimisée pour le mobile.
Quels sites à concevoir en mobile first
- Est-ce que mon audience ciblée navigue sur le Web lorsqu’elle est en déplacement?
- Est-ce que mon audience ciblée utilise un appareil mobile pour naviguer sur le Web?
Ces deux questions vous permettent d’avoir une idée globale des comportements Web de votre audience, et donc, si vous répondez oui aux deux questions, vous devriez sérieusement considérer un design de site Web mobile first.
Dans le cas de l’entreprise de Madame Labriski, la réponse est un oui dans tous les cas. Habituellement, la recherche d’idées de recettes se fait à la va-vite entre deux activités, probablement en étant dans la cuisine plutôt qu’au bureau. Et notre cliente cible les parents de jeune famille, une audience qui a déjà adopté fortement les appareils mobiles.
En contre-exemple, imaginons une entreprise en B2B. Il est très possible que la cible utilise personnellement son téléphone intelligent pour naviguer sur le Web, mais qu’elle ne recherche pas votre offre de façon mobile, mais plutôt sur ordinateur, dans le cadre de son emploi. Dans ce cas, un design responsive mais orienté pour une expérience optimale sur desktop répondrait davantage aux besoins de votre site.
Analyse de vos données existantes Google Analytics
Dans le cas de refonte de cible, analysez précieusement les données de votre site Web. Les comportements de navigation de vos visiteurs actuels pourront vous aiguiller sur le procédé de design à suivre dans le cadre d’une future refonte.
Par exemple, sur Google Analytics, vous pourrez consulter plusieurs données, dont la proportion de trafic par type d’appareil afin de déterminer l’importance et la qualité de votre trafic mobile.
Analysez intelligemment vos données : si votre trafic a un taux de rebond hors norme, questionnez-vous quant à l’expérience utilisateur actuelle sur mobile. Ce n’est pas nécessairement votre trafic qui est de mauvaise qualité, mais plutôt l’interface mobile qui n’est pas adéquate à la navigation sur de tels appareils.
Les avantages d’un site Web conçu mobile first
Le design mobile first apporte de nombreux avantages autant pour l’utilisateur mobile de votre site que pour sa performance globale.
1. Prioriser les contenus qui comptent
Vous connaissez votre audience et la façon dont elle souhaite consommer votre site. Un design mobile first force à trier en ordre de priorité les contenus du site Web et assure que les visiteurs trouvent les contenus qui leur importe à leur arrivée. Cette réflexion stratégique de l’organisation du contenu permet de bonifier l’expérience utilisateur en offrant directement l’information la plus pertinente.
Par exemple, sur le site Web de Madame Labriski, avant la ligne de flottaison, nous positionnons des recettes mises en vedette, le contenu le plus consulté sur son site. Par la suite, l’utilisateur peut faire défiler son écran pour consulter les contenus moins en demande.
2. Optimiser l’expérience utilisateur sur mobile
Cet avantage doit être le gain le plus évident de la conception mobile first, mais représente un gain majeur pour votre site. Lorsque l’utilisateur arrive sur votre site et que son expérience est parfaite, sa satisfaction l’encouragera à poursuivre sa navigation, et même à revenir sur votre site dans le futur. Au contraire, si le site n’est aucunement optimisé pour mobile, il y a fort à parier que le visiteur fera marche arrière et quittera votre site en quelques secondes.
Voici quelques exemples d’éléments qui bonifient l’expérience utilisateur sur mobile :
- Des contenus adaptés à l’écran, lisibles (typographie simple et assez grande) et rapidement compréhensibles;
- Temps de chargement rapide;
- Liens lisibles et faciles à cliquer;
- Pas de grandes images ou de gros graphiques inadaptés à la petite forme verticale du mobile.
Dans le cadre du projet avec Madame Labriski, le monde des recettes en ligne étant très compétitif, il nous a été impératif de créer un environnement plaisant et facile d’utilisation pour l’utilisateur mobile. Nous avons été en mesure de créer un site Web sur lequel l’internaute souhaite rester, trouver sa recette coup de cœur et la cuisiner!
3. Concentrer les efforts de design sur ce qui compte réellement
Un risque, lorsque la conception du site Web est dite responsive, est que le design du site Web pourrait ne pas s’appliquer du tout au mobile et n’afficher qu’une version très basique de la version sur ordinateur. Par exemple, sur ordinateur, on peut se permettre de mettre des effets de navigation en hover avec le passage du curseur de la souris, de mettre de grandes images lourdes, de faire des design complexes, etc. Tous ces éléments peuvent créer un site époustouflant sur ordinateur, mais sont soit impossibles à transposer soit inadaptés au mobile.
Donc, partir d’un design pour mobile restreint le cadre de création des designers et les force à concentrer leurs efforts sur un écran plus restreint et de considérer les performances réduites d’un appareil mobile vs un ordinateur. Le design mobile first assure davantage une expérience cohérente sur toutes les plateformes que lorsque le processus de conception est inversé. On économise du temps et de l’argent, sans compromettre le résultat final du site. Que demander de plus!
Pour le site Web de Madame Labriski, nous sommes partis d’une version mobile pour créer une version bureau plus élargie qui présente plus de contenus sur la largeur de l’écran et des images plus grandes. Résultat : une expérience de navigation aussi plaisante sur mobile que sur les plus grands écrans.
4. Réduire le temps de chargement du site
Eh oui, on peut être gourmand et trouver encore d’autres avantages au design mobile first! La restriction du cadre créatif sur mobile permet d’obtenir un gain de temps en chargement du site Web.
Votre utilisateur ne remarquera pas ce gain de quelques millisecondes, mais les moteurs de recherche oui, et c’est un des éléments qui pourra aider à bonifier le positionnement de votre site sur ces derniers.
Dans l’univers des recettes sur Internet, la compétition est féroce et tout compte pour améliorer son positionnement sur les moteurs de recherche. Ainsi, pour ce mandat, livrer un site Web rapide à charger a été un incontournable pour nous et a confirmé notre choix d’un design mobile first.
4 méthodes pour naviguer, filtrer et rechercher sur le site
Qui aime chercher pendant une éternité l’information à consulter? Personne. C’est pourquoi, lors de ce mandat, nous avons mis en place plusieurs méthodes pour naviguer facilement et rapidement sur le site. Ces fonctionnalités ont représenté un beau défi design, surtout en contexte mobile first, et nous sommes très fiers du résultat.
- Menu de navigation : le très classique menu de navigation pour naviguer entre les pages. C’est l’incontournable pour tous les sites avec plus d’une page!
- Filtre de recherche : pour les visiteurs qui savent presque ce qu’ils recherchent, le filtre de recherche permet de trouver une recette qui correspond aux différents paramètres sélectionnés.
- Moteur de recherche avancé : pour le visiteur qui sait exactement ce qu’il recherche et qui n’a pas le temps de niaiser. Trouver sa recette en 10 secondes, c’est possible!
- Affichage permanent des ingrédients sur les pages recettes : pour éviter de devoir jongler entre les onglets de la liste des ingrédients et des étapes de la préparation. Cette fonctionnalité assure une expérience utilisateur beaucoup plus agréable au moment de cuisiner la recette choisie.
- Rapide et optimisée, l’expérience utilisateur est parfaitement adaptée aux appareils mobiles. Nous vous invitons à essayer l’expérience en visitant MadameLabriski.com sur votre téléphone. Nous sommes convaincus que vous allez l’adorer!
Stratégie de contenu et techniques SEO
La stratégie de conception et le choix d’un design mobile first nous ont permis de créer un contenant parfaitement adapté à notre cliente. Dans cette seconde portion du mandat, nous vous expliquons les différentes stratégies mises en place afin d’optimiser les contenus du site. Ensemble, ils créent un site Web hyper performant!
Petit rappel pour nos lecteurs, le SEO (Search Engine Optimisation) regroupe l’ensemble des techniques mises en place sur un site Web afin d’améliorer son positionnement sur les moteurs de recherche, dont Google.
Idéalement, nous souhaitons toujours nous positionner le mieux possible sur un mot-clé. Par exemple, voici le positionnement de Madame Labriski sur le mot-clé « purée de dattes ». Vous pouvez remarquer que son référencement est extrêmement favorable : deux des trois premiers liens pointent vers son site Web, éclipsant les épiceries et les autres recettes de purée de dattes.
Optimiser son SEO et améliorer son référencement est à la portée de tous ceux qui sont prêts à investir du temps et des ressources dédiées à l’amélioration continue de votre site Web. Les premiers résultats ne sont pas le fruit du hasard, de la chance ou du destin, il s’agit de travailler stratégiquement les différentes pages de son site pour les faire rayonner. Chez Turbulences, nous ne sommes pas magiciens, mais fins stratèges SEO! Découvrez les tactiques mises en place pour faire rayonner le site Web de Madame Labriski.
Recherche de mots-clés
La base du SEO requiert que vous cibliez un mot-clé principal par page, puis sa longue traîne qui le supporte. Par exemple, pour reprendre l’expression « Purée de dattes », la longue traîne pourrait contenir les expressions « Meilleure purée de dattes », « Recette de purée de dattes », etc.
Évidemment, chaque page doit avoir un mot-clé principal unique. Par exemple, si Madame Labriski avait plusieurs pages qui ciblent « purée de dattes », les contenus sont fort probablement redondants et se cannibalisent entre eux sur les moteurs de recherche. Ainsi, mettez tous vos efforts pour un mot-clé dans une seule page.
Dans le cadre du projet pour Madame Labriski, nous avons analysé ce que cherchent les internautes pour trouver une recette. Telles que relevées dans notre analyse des comportements de recherche sur le Web de l’audience ciblée, les expressions les plus populaires sont recette + type de repas (recette pain aux bananes, recette galette santé, etc.) Ainsi, notre sélection de mots-clés correspond aux expressions les plus recherchées ressorties lors de notre analyse et les efforts de rédaction ont été, et continueront d’être, concentrés sur ceux-ci.
Optimisation des balises méta titre et méta description
Que sont les métas titres et les métas descriptions? Ce sont tout simplement un titre de page et une description soumis aux moteurs de recherche pour les aider à comprendre de quoi traite une page Web. Est-ce une autre excellente occasion d’utiliser le mot-clé principal ciblé? Absolument.
Pour le site Web Labriski, notre équipe Web a pris le temps d’optimiser les métas en incluant les mots-clés ciblés tout en gardant une twist attractive liée à la personnalité de la marque. L’enjeu a été de satisfaire les moteurs de recherche et d’avoir une rédaction qui invite les internautes à cliquer. Ne perdez pas de vue que nous sommes en compétition contre les autres sites Web offrant des recettes similaires, nous avons souhaité nous démarquer du lot et acquérir le plus de visiteurs possible.
Truc de pro : si votre CMS est un WordPress, pensez à installer l’extension Yoast SEO. C’est l’outil le plus reconnu pour la création des métas sur ce CMS.
Stratégie de pages piliers (cluster content strategy)
Vous avez sûrement déjà entendu l’expression « la Toile » pour parler d’Internet, eh bien, l’analogie n’est pas fausse. Pour les moteurs de recherche, plus une page est reliée à d’autres contenus, plus elle est jugée pertinente et légitime pour les internautes. Comment relier vos pages à d’autres contenus? Vous pouvez faire des liens internes entre les pages de votre site ou acquérir des liens externes en demandant à d’autres sites de mettre des liens vers le vôtre.
Afin de bien structurer le maillage interne entre les pages du nouveau site Web de Madame Labriski, nous avons mis en place une stratégie de pages piliers (cluster content). Cette stratégie requiert la sélection de pages au contenu très pertinent, donc qui cible un mot-clé important pour le site Web, sur lesquelles nous souhaitons être bien référencés.
Dans le cas du site Web de Madame Labriski, les pages des catégories de recettes sont des pages piliers.
Prenons, par exemple, la page Muffins santé : c’est sur cette page que nous souhaitons ramener toutes les personnes qui recherchent une recette de muffin santé. À cette page sont reliées toutes les recettes de muffins de Madame Labriski. Grâce à ces liens de recettes qui parlent de muffins, mais à un niveau bien plus précis (ex. Muffin datte-choco-banane), nous confirmons au moteur de recherche que cette page est pertinente pour l’expression « Muffins », puisque plusieurs contenus du site pointent vers cette page.
Truc de pro : des liens, c’est bien, mais des liens sur une ancre pertinente, c’est encore mieux! Lorsque vous faites un lien vers l’une de vos pages, assurez-vous de mettre le lien sur du texte pertinent relié à la page de destination.
Donc, si Madame Labriski crée un article de blogue qui parle de ces recettes, mettre un lien qui pointe vers la page Muffins santé sur l’expression « Découvrez mes nombreuses recettes de muffins santé. » serait conforme aux bonnes pratiques.
Évidemment, comme toute bonne chose dans la vie, il faut éviter d’abuser de cette technique afin de ne pas être pénalisés par les moteurs de recherche.
Stratégie de liens entrants (backlinks)
Une fois votre site bien maillé entre ses pages, vous pouvez mettre un effort supplémentaire et appliquer une stratégie d’acquisition de liens entrants vers des pages de votre site Web afin d’améliorer sa crédibilité.
La stratégie se complète en trois étapes :
- Repérer les opportunités pertinentes d’acquisition de liens;
- Contacter les responsables des sites;
- Négocier le lien entrant.
C’est tout simple, mais ça demande quand même beaucoup de temps et d’efforts afin d’acquérir des liens de qualité vers votre site Web. C’est toutefois une méthode qui aidera votre site à gagner énormément de visibilité sur les moteurs de recherche. Plus vous aurez de liens vers votre site provenant de sites Web de qualité, plus votre site sera jugé de meilleure qualité par Google.
Utilisation des données structurées (rich snippets)
Reprenons exactement la même capture des résultats de Google pour la recherche « purée de dattes ». Portez maintenant votre attention sur l’encadré rose. Ceci est une donnée structurée (rich snippet) de type recette.
Il existe plusieurs types de données structurées, les plus fréquentes sont les recettes, les how-to et les vidéos YouTube. Il en existe bien d’autres, et, promis, nous vous les présenterons en profondeur dans un prochain article.
Les données structurées sont aujourd’hui un incontournable pour bonifier la visibilité des recettes sur les moteurs de recherche, nous avons donc aidé l’équipe de Madame Labriski à mettre en place des données structurées pour toutes ses recettes. Ainsi, elles pourront bénéficier d’un positionnement avantageux, et ce, même si la page en soi n’est pas dans les premiers résultats.
Si vous réexaminez les trois recettes mises de l’avant grâce aux données structurées, vous remarquerez que la recette « Purée de Dattes Maison » n’a pas sa page parmi les premiers résultats de recherche, mais profite tout de même d’une visibilité avantageuse grâce aux données structurées.
Travailler sur le site Web de Madame Labriski a été un véritable régal pour nos esprits créatifs et stratégiques. À l’agence de communication intégrée Turbulences, c’est la collaboration entre nos différents talents qui nous permet de concevoir et de produire des sites Web fantastiques, performants et au design à rendre votre concurrence jalouse.
Si vous souhaitez démarrer un projet de site Web et/ou d’optimisation SEO, n’hésitez pas à nous contacter!
Vous n’avez pas de projets maintenant, mais vous êtes des curieux du marketing Web et du SEO? Vous aimeriez qu’on aborde un sujet en profondeur? N’hésitez pas à nous envoyer un courriel avec votre question!
Poursuivre ma lecture
Le design UX et UI : un outil de conversion des utilisateurs?
