Ces dernières années, le web a vu se développer un nouveau type de contenu vidéo : les tutoriels ou DIY (do it yourself) en tout genre. Loin d’être un effet de mode, ce type de contenu est aujourd’hui l’un des plus visionnés sur YouTube, succédant aux clips musicaux et aux vidéos lifestyle. Et cela n’a rien de surprenant ! Selon une étude publiée sur le Blog du Modérateur, 52% des consommateurs de vidéos sur YouTube utilisent ce média pour s’informer, apprendre et progresser.
Comme vous l’avez peut-être remarqué, nous nous sommes récemment lancés dans l’aventure en mettant en ligne notre première vidéo tutoriel sur YouTube. Son but est de vous apprendre à maîtriser et à utiliser facilement le Design Manager d’HubSpot.
Qu’est-ce que le Design Manager d’HubSpot ?
Le Design Manager est l’une des multiples fonctionnalités proposées par le CMS HubSpot. La fonctionnalité est présente dans les différentes offres que propose HubSpot :
Cette interface de gestion réunit l’ensemble des outils dont les développeurs et les graphistes auront besoin pour créer templates, emails, et plus généralement des COS Websites (sites internet réalisés sur HubSpot). Il se compose de trois grandes parties :
- L’éditeur de code (Code Editor)
- Le gestionnaire de fichiers (File Manager)
- L’espace de création de templates. (Template Builder)
Son interface simple d’utilisation et sa structure drag & drop rend la manipulation accessible à tous, permettant ainsi une collaboration optimale entre tous les acteurs du projet. La labellisation des blocs offre par exemple la possibilité aux marketeurs de positionner les contenus dans leurs espaces respectifs sans craindre de les inter-changer.
Si le Design Manager semble à première vue être l’outil parfait pour développer des templates, il présente tout de même quelques points à améliorer. Parmi eux, on notera l’absence de mails responsives sur certains navigateurs ou encore la possibilité d’enlever les scripts natifs d’HubSpot (pour améliorer son pagespeed).
3 conseils pour mieux appréhender le Design Manager
Si notre Responsable du web-développement, Luc Benayoun a aujourd’hui une excellente maîtrise de cet outil, cela n’a pas toujours été le cas. À ses débuts sur HubSpot, il s’est retrouvé confronté à des problèmes parfois complexes sans que personne lui apporte de réponses suffisamment approfondies.
Conscient du manque de ressources au sujet du Design Manager d’HubSpot, il a décidé de vous vous partager 3 conseils pour mieux débuter et appréhender l’outil de la meilleure approche.
1. Utiliser les feuilles de styles pour vos différents contenus
Créer une nouvelle feuille de style CSS pour chaque type de template vous permettra de ne pas mélanger vos classes, et par conséquent, d’éviter les conflits de style dans vos templates. Ainsi, lorsqu’un autre développeur devra modifier votre page, vous n’aurez plus à vous souciez de vérifier que toutes vos pages sont toujours intactes.
2. Bien construire vos global groups
Les global groups représentent un ensemble de modules réinterprété en seul et même module utilisable dans tous vos templates. Ces modules sont particulièrement utiles lorsqu’un ou plusieurs éléments apparaissent de manière récurrente sur un grand nombre de pages de votre site. Ils sont par exemple fréquemment utilisés pour les headers et les footers.
En plus d’avoir recours aux global groups déjà créés, vous pouvez également en ajouter de nouveaux en fonction de vos besoins (carrousels de photos, listes d’articles, de news, de réseaux sociaux…etc). Par ailleurs, si vous éditez l’un de vos global groups, ce dernier se mettra automatiquement à jour sur toutes les pages où il est utilisé. Vous n’aurez donc pas à entrer dans chaque template pour modifier manuellement votre contenu, ce qui représente un véritable gain de temps.
3. Adopter une nomenclature qui s’adapte à vos templates
Adopter une nomenclature spécifique pour chaque type de template vous permet de trier vos templates dans chaque dossier et ainsi de permettre à chaque acteur du projet de les retrouver plus facilement. Si besoin, vous pouvez également créer des dossiers afin de classer vos templates par type ou par année. Garder votre design manager ordonné est donc la clé pour pouvoir s’y retrouver facilement et visualiser quel template est à créer et si oui, à quel endroit.
Nous espérons que ces 3 conseils vous aideront à exploiter le Design Manager d’HubSpot plus sereinement et ainsi, à gagner en efficacité.
Arcane, une agence experte en acquisition digital, a effectué sa refonte avec le CMS Hubspot, on est sûr que ça peut vous intéresser !