Tutoriel Vidéo : 3 conseils pour mieux appréhender le Design Manager d’HubSpot

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 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 labélisation 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 ne 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 aiderons à exploiter le Design Manager d’HubSpot plus sereinement et ainsi, à gagner en efficacité. Vous pouvez également retrouver ce tutoriel en format vidéo sur notre chaine YouTube. Enfin, si vous avez des questions sur le Design Manager d’HubSpot, n’hésitez pas à commenter cet article ou à contacter notre équipe !

Démonstration HubSpot


par Lena Cornen

Les commentaires de cet article

  1. wissal, Le

    Merci pour les conseils très utiles ! 🙂
    En effet il n’y a pas beaucoup de contenu sur le sujet du Design Manager d’HubSpot !
    Très bon article

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *