Comment concevoir un blog avec Webflow ?

June 12, 2024

Dans le cadre d’une évaluation de fin d’année, j’ai construit le blog que vous consultez actuellement si vous lisez ces mots. Je devais être en mesure de publier des articles traitant de ma première année de contrat d’alternance. Voici comment je m’y suis pris.

I. Segmenter la charge de travail à partir du brief

J’ai lancé la réalisation du blog 4 mois avant la date de rendu. Il était nécessaire de définir la quantité de travail à réaliser en fonction des critères formulés par l’équipe pédagogique. Afin de la répartir de façon optimale, la durée de travail hebdomadaire théorique a été définie : 4 heures à placer sur la semaine. Ensuite, j’ai listé l’ensemble des tâches relatives à la conception de la plateforme de publication et la rédaction de cinq articles. Il a ainsi été possible de définir une première date de fin théorique, indicateur utilisé pour adapter le rythme de travail ou le travail lui-même.

La formule utilisée pour calculer la date de fin théorique : 

(date du début de projet) + 7*(temps de travail total + 4 heures de marge - temps de travail supplémentaire total)/4

Explications

  • On obtient le nombre de semaines nécessaires pour accomplir l’ensemble des tâches en divisant le nombre d’heures de travail total par le nombre d’heures travaillées par semaine (4)
    (On prend en compte les heures supplémentaires réalisées chaque semaine en les soustrayant au nombre total d’heures nécessaires pour la réalisation.)
  • On multiplie par 7 pour convertir le nombre de semaines en jours
  • En ajoutant ce nombre de jour au jour du début de projet, on estime la date de fin de projet.

J’ai utilisé Google Sheets pour calculer la date de fin théorique du projet et suivre le temps passé sur chaque tâche. La date théorique s’est précisée au fur et à mesure

Dans un deuxième temps et pour appliquer une notion vue dans la cadre de ma formation, l’ensemble de ces tâches a été intégré dans l’outil de productivité Notion, prenant la forme d’un tableau Kanban

Avec cette méthode, la planification est décrite comme :

  • simplifiée, 
  • permettant de limiter le travail en cours (WIP).

Sur un projet de blog comme celui-ci (réalisation courte et travail personnel), le bénéfice est limité sur ces points. Pour autant, j’ai gagné en efficacité avec la priorisation et la catégorisation des tâches. L’utilisation des commentaires associés à chaque tâche a parfaitement assuré la continuité entre les séquences de travail, avec les plans d’actions définis en amont, disponibles pour chaque segment de travail. Est-il plus facile de se concentrer sur une action de cette manière ?

L’utilisation du tableau Kanban facilite la gestion et la visualisation du Work In Progress (WIP) avec une limite de tâches attribuables au statut “In Progress”.

II. Exécuter et adapter le plan d’actions défini en amont.

Une fois la charge de travail préparée, l’étape suivante était la réalisation. J’ai procédé de la façon suivante : maquettage avec Figma suivi de l’intégration sur Webflow, un outil Low Code de développement web. Le visionnage de tutoriels a contribué efficacement à la prise en main de l’outil. Malgré des cours de CMS, cette dernière nécessite un temps d’adaptation pour retrouver ses marques. Webflow a un fonctionnement avec des classes de style s’attribuant d’une manière assez déroutante lorsqu’on a travaillé avec Elementor.

Les fonctionnalités les plus utilisées pour la réalisation.

Sur Figma (étape maquettage) : 

  • Variables, pour la gestion des couleurs.
  • Styles et composants, pour les éléments réutilisables : typeface, boutons, champ de formulaire, header…
  • L’auto-layout, pour la disposition des éléments.

Sur Webflow (intégration),

🔝Webflow propose une offre étudiante, pour une année de plan CMS (24€ /mois) avec un nom de domaine personnalisé offert pour un an (10€ /an).

  • Gestion des breakpoints pour le responsive.
  • Styles et composants pour les éléments communs à tout le site : header, footer…
  • Collections CMS, pour la rédaction et publication des articles.

La partie la plus technique était sans doute l’adaptation aux différents formats (responsive design). La gestion des styles en fonction des breakpoints a été travaillée pour une navigation plus fluide sur mobile, provenance principale du trafic web en 2024, (entre 50 et 62%, source : SimilarWeb - Statcounter).

Figma a été utilisé pour construire la charte graphique et la maquette du site web. Les variables sont un moyen très efficace de tester différentes combinaisons de couleurs. Si les variables sont bien attribuées, le changement se fait en simultané sur tous les éléments concernés.

Bilan

Finalement, la conception de la plateforme de réalisation s’est achevée en avance, certaines durées de tâche ayant été surestimées. Désormais, l’alimentation du blog est la tâche prioritaire sur ce projet. Est-ce avec la répétition de ce genre de projet que les estimations seront de plus en plus précises et la réalisation plus efficace ?

Les outils utilisées pour cette réalisation

  • Figma (plugin Unsplash pour les images),
  • Notion,
  • Webflow,
  • Suite Google Workspace : Drive, Docs et Sheets en l'occurrence,
  • Adobe Illustrator (pour le logo).

© Clément Arhuero 🚀 2024