Blog
Préparer son projet
Préparer le développement Webflow de mon projet

Préparer le développement Webflow de mon projet

Votre développement Webflow va bientôt commencer et vous vous demander ce que vous pouvez préparer pour faire en sorte qu'il se passe au mieux, et surtout rapidement ? Bienvenu dans cet article qui va tout vous expliquer !

Par

Camille

•

mins de lecture

Préparer son projet

Blog & news

Codelius

Sommaire

Partager

Ce qui est écrit dans cet article est assez général pour que cela puisse vous guider quelque soit le développeur qui va s'occuper de votre projet, mais garder en tête qu'il est principalement dédié aux clients de Codelius et que suivant les process mis en place par votre prestataire, les demandes peuvent varier 😉

La checklist

Voici une petite synthèse pour vous aider à y voir plus clair. N'hésitez pas à vous référer à la suite de l'article pour des détails ✨

  • La maquette
  • Les typographies
  • Les images, dans le bon format
  • Les documents légaux
  • Le(s) nom(s) de domaine final.aux

Nice to have

  • Les textes définitifs
  • Liens externes et internes
  • Les meta titles et descriptions de vos pages
  • Favicon & Webclip
  • Identifiant Google Analytics

Les "must"

La maquette définitive

Soit le lien si vous utilisez Figma, avec les droits de "viewer" au moins, soit les sources XD si vous utilisez Adobe

Les typographies

• Si vous avez les fichiers

Dans l'idéal, une fichier de type "variable" permet d'avoir un site plus rapide à charger, mais sinon, vous pouvez nous partager les fichiers des différentes graisses que vous avez utilisé 🤗

A noter que moins il y a des fichiers différents sur votre site, plus il sera rapide à charger 😁

Sachez que Webflow gère très bien les variables fonts depuis 2023, avec une ou plusieurs propriétés 🤩

• Si vous utilisez Adobe Font

Il nous faudra un jeton / token API avec les bonnes typographie liées 🙌

Pensez à ajouter toutes les graisses nécessaires, ainsi que les versions italiques au besoin

Les images

Il faut savoir que la limite de taille d'une image sur Webflow est de 4MB, et c'est déjà beaucoup pour une image sur la web.

Prévoyez toutes les images et visuels de votre site dans une taille la plus petite possible, et inférieure à la limite mentionnée ci-dessus pour vous assurer de la qualité finale.

Nos conseils

• Les images placées dans les "header"

... donc les premières sections de votre site ont tout intérêt à être les plus légères possible pour assurer une bonne vitesse de chargement.

Il est aussi important d'optimiser celles qui sont dans la page, mais puisqu'elles arriveront plus tard, elles sont moins critiques

• Utiliser du SVG

Pour tous les éléments possibles, il est préférable d'utiliser du SVG :

Voici les principales raisons

  • Il s'agit d'un format vectoriel, permettant une très bonne qualité peu importe la taille
  • Il s'agit de format textuel, donc bien plus léger à charger qu'une image
  • Il évite la duplication d'une image en plusieurs couleurs pour différents effets, comme du hover par exemple en permettant d'être modifié avec du CSS (ça, c'est notre travail 😁)
• Utiliser du WebP

C'est le format nouvelle génération, et vous verrez dans vos audits de chargement un joli message de Google si vous ne l'utilisez pas.

Il faut savoir que Webflow permet la compression + conversion en WebP directement depuis sont backoffice, donc en soit, pas trop de nécessité de votre côté. Cependant, sur certains sites où les visuels sont à l'honneur, transmettre à votre développeur les images directement en WebP permet d'éviter une perte de qualité car vous la contrôlez 🙌

Les documents légaux

Ces documents peuvent être intégrés en tant que texte dans le site (recommandé) ou via un PDF téléchargeable et consultable.

Cookies & Confidentialité

La politique de confidentialité est obligatoire sur tous les sites dès que ce dernier fait de la collecte de données (visités par des utilisateurs européens du moins)

Pour un site fait sur Webflow, voici les informations de l'hébergeur (une des informations à inscrire dans votre document)

Webflow, dont le siège est situé à 398 11th Street, 2nd Floor San Francisco, CA 94103, États-Uni.
Numéro de téléphone suivant : +1 415-964-0555

Mentions légales

Obligatoires sur tous les sites elles aussi, elles permettent à vos visiteurs de savoir qui vous êtes de pouvoir vous contacter 🙌

CGV & CGU

Ces deux documents servent à vous protéger vous, et votre client, si vous faites de la vente de service, ou mettez à leur disposition des services en ligne (plateforme de formation, par exemple, ou tout autre logiciel impliquant une utilisation sans passer par vous)

Les "nice to have"

Ce sont des petites choses que nous mettons en place pour vous pendant le développement si (et seulement si) vous nous les partagez avant de commencer 😁 La raison est assez simple : ça prend moins d'une seconde à faire en même temps qu'une création de page par exemple, mais repasser dessus après peut-être long (à cause des temps de chargement dans le backoffice de Webflow par exemple)

Textes définitifs

Si vous n'avez pas vos textes au moment du début du développement, nous mettrons du "lorem ipsum", que vous pourrez changer entre les étapes 1 et 4 de la publication 😉 Mais le mieux est de les avoirs directement pour que nous les intégrions pour vous 🤓

Liens

Si votre site a des liens externes, avec d'autres sites, pensez à nous les partager directement pour que nous les intégrions 🙌

De même pour les liens internes, entre les pages du site que nous allons développer, si vous pensez qu'ils ne sont pas clairs (pas d'inquiétudes, si vous avez un bouton "nous contacter" nous savons où le lier, mais parfois certains liens sont moins clairs ✨)

Favicon & Webclip

La favicon doit être une image carrée de 32px de côté

Le webclip doit être une image carrée de 256px de côté

Meta Title et Description

Ce sont les titres et descriptions de vos pages, qui apparaissent notamment dans les moteurs de recherche.

Le title devrait faire moins de 60 caractères, la description, moins de 250 ✨

Ils permettent aux moteurs de recherches, comme Google, et à vos utilisateurs, de comprendre ce qu'ils vont trouver dans votre page et aide grandement au référencement !

Identifiant Tracking Google Analytics

C'est un code qui commence par "G" ou "GT" et qui permet de lier votre site à votre Google Analytics pour un suivit des performances via Google, plus ou moins avancé 🙌

Attention, à partir du moment où vous l'intégrez, vous devez le mentionner via une bannière de cookies 🤓

‍

Comment va se passer la publication ?

Les étapes

1. La première chose va être de transférer le projet sur votre compte Webflow
2. Ensuite il faudra que vous preniez un abonnement sur le site
3. Je vais finir les quelques parametrages sur le site (ajouter la favicon, le webclip, optimiser les fichiers et enlever le “Webflow Branding”, ajouter le nom de domaine)
4. On ajoute les informations de Webflow dans le DNS. Les informations sont toujours les mêmes d’un site à l’autre (sauf une). Vous les trouverez à la fin 😉 
5. M'envoyer un screenshot du DNS si vous vous êtes occupés de votre côté de la modification afin que je puisse vérifier

A noter qu'il peut se passer autant de temps que vous le souhaitez / avez besoin entre le transfert du site sur votre compte Webflow et sa mise en ligne ! Ce n'est pas parce que nous vous le transfèrrons qu'il sera en ligne de suite 😉

Ce que nous vous conseillons d'ajouter avant la publication

Une fois le site sur votre compte Webflow, tu auras la possibilité de faire des changements sur le site, et voici une petite checklist des choses qui sont intéressantes à changer, notamment pour optimiser le SEO :
- Les title tags des pages (si non transmis avant, sinon nous en mettons déjà par défaut, donc pas une grosse priorité ici)
- Les meta-descriptions (si non transmis avant)
- Les alts texts sur les images pour aider à leur référencement

Les informations à mettre dans la Zone DNS

👉 Je vous conseille de toujours faire un screenshot de comment les choses étaient avant vos modifications, a fortiori s’il y a des services de mails, ou déjà un site en place sur le domaine
- A sur @ (racine, ne rien mettre) : 75.2.70.75
- A sur @ (racine, ne rien mettre) : 99.83.190.102
- CNAME sur www : proxy-ssl.webflow.com
- TXT sur _webflow : one-time-verification= + une valeur qui va changer en fonction du site, je vous la transmettrai le jour de la mise en ligne, mais vous pouvez préparer le début ✨

Prenez <contact> avec nous

Nous aimons les challenges

//
Contactez-nous
-
-
->
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
</style><style data-rc-order="prependQueue" data-css-hash="1his0cd" data-token-hash="himppx">.anticon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.anticon >*{line-height:1;}.anticon svg{display:inline-block;}.anticon .anticon .anticon-icon{display:block;}</style><style>.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}</style><meta charset="utf-8"><title>Portfolio - Codelius</title><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" name="description"><meta content="Portfolio - Codelius" property="og:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="og:description"><meta content="Portfolio - Codelius" property="twitter:title"><meta content="Venez voir notre travail, et les avis de ceux qui nous ont fait confiance avant vous... Mais attention, l'essayer c'est l'adopter !" property="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="https://cdn.prod.website-files.com/62d15fe5fc13096216837c9f/css/lamrx.webflow.b445a3420.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,regular,500,700%7CIndie+Flower:regular" media="all"><script type="text/javascript">WebFont.load({  google: {    families: ["Poppins:300,regular,500,700","Indie Flower:regular"]  }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"><!-- Google tag (gtag.js) -->
<!--
5/5

Nos clients vous en parlent

Il faut avouer que nous ne sommes pas très objectifs sur nos prouesses, mais eux... oui !

Les avantages de travailler avec Codelius : réactivité, flexibilité et rigueur.

Mathieu

CEO @ hyffen

L'équipe Codelius est exceptionnelle : professionnelle, très compétente et profondément investie dans la réussite du projet. Leur contribution a été essentielle au développement de notre site. Ils nous ont apporté une vraie valeur, aussi bien dans le prototypage avancé que dans le suivi en production. Nous les considérons vraiment comme une extension de notre équipe.

Juliet Clark

Head of Product, BoxMedia

Travailler avec Codelius et Camille a été une expérience fantastique. Camille est une véritable experte avec une connaissance et une expérience très étendues de Webflow. La collaboration s’est toujours faite d’égal à égal et la communication était simple et agréable. J’ai vraiment apprécié son initiative lorsqu’elle proposait des retours sur les idées de design et sa volonté de mettre en place une structure solide pour les couleurs et les composants derrière le design. J’ai beaucoup appris grâce à notre collaboration et je choisirais Codelius à nouveau sans hésiter.

Isabell H.

Senior Product Designer

Collaborer avec Camille a été très simple. Nous avons travaillé via un Google Doc et WhatsApp, et une seule visioconférence rapide a suffi. J’ai été très satisfait du prix ainsi que de la qualité du site.

Chris Tyler

Founder @ Search Party Capital

Camille est tellement forte que je ne vous la recommanderai pas je veux la garder pour moi tout seul ;p Super fluide, rapide et diablement efficace. Clairement au-dessus des mes attentes et brief parfaitement cerné avec finalement peu d'éléments. Une pépite !

Basptiste W.

CEO @ uRoot

[...] Codelius a su répondre à ce besoin, en nous offrant des résultats rapides et propres. Lorsque nous avons eut des besoins un peu plus poussés, [...] ils ont su aller au-delà de la technologie pour créer une solution custom ! Ils sont restés présents et disponibles pour répondre à nos questions et nous aider à prendre en main le tout !

Grégoire G.

CEO @ Albert School

Du design au développement, le rendu est celui voulu, et c'est vraiment très beau. On est ravis du projet. Côté dev pour - mise en place du design, Camille a été superbe de patience et de flexibilité pour s'assurer que j'obtienne, au pixel près, le résultat désiré. Chapeau Camille !

Jeff

Manager @ Relookitchen

Camille est la personne qu’il vous faut pour vos projets webflow, airtable et autres outils nocode. Elle est professionnelle, à l’écoute et réalise un travail de grande qualité. Je recommande sans hésitation !

Sébastien P.

Gérant @ Magicien Professionnel

Camille et l’équipe Codelius ont livré exactement ce dont nous avions besoin, dans les délais — ce fut un plaisir de travailler avec elle et nous avons hâte de retravailler avec eux à l’avenir.

Tessa

Co-Founder @ Pipeline Solution

Travailler avec l’agence Codelius et Camille a rendu l’IT agréable, pas stressant. Elle a cette combinaison unique de compréhension du design global, d’apports expérimentés, de touche artistique française et de capacité à mettre en œuvre des solutions personnalisées de bas niveau. À la fin du projet, j’aurais aimé qu’elle soit une collègue. J’espère retravailler avec elle un jour.

Adam M.

Operations Manager & BI Analyst @ Nordlux Australia

Nous sommes certifiés experts par Webflow eux-même depuis 2020. Il s’agit de notre outil de prédilection, avec Webflow nous pouvons faire des merveilles !

Nos développements Webflows prennent majoritairement leurs base depuis une maquette Figma. Elle permet à nos clients de valider un design avant de le concevoir.

Nous sommes partenaires d’une agence de webdesign pour combiner nos savoirs-faire et proposer à nos clients la meilleure option pour leurs projets les plus fous.

Pourquoi ?
Comment ?

Vos questions, nos réponses

Pourquoi ne pas simplement créer une application avec un “AI builder” ?

L’IA et les AI builders ne sont pas des solutions miracles. Ce sont des outils. Puissants, certes, mais des outils malgré tout.
Chez Codelius, nous les utilisons quotidiennement — non pas comme des solutions “tout-en-un”, mais comme des accélérateurs.

Si vous souhaitez une application fiable, évolutive et réellement adaptée à votre activité, des mains humaines restent indispensables.
L’IA peut générer des idées, des ébauches ou des composants, mais elle ne remplace ni une architecture réfléchie, ni des choix UX cohérents, ni une rigueur technique, ni un accompagnement dans la durée.

En résumé : l’IA accélère la création, mais seule l’expertise humaine garantit un produit durable.
Nous combinons les deux — jamais l’un au détriment de l’autre.

Êtes-vous des experts certifiés Webflow ?

Oui. Notre équipe est officiellement certifiée experte par Webflow depuis début 2022.

Nous nous tenons en permanence informés des meilleures pratiques, des nouvelles fonctionnalités et des évolutions de la plateforme.
Cela nous permet de livrer des projets fiables et évolutifs, ainsi que de proposer des sessions de formation basées sur les connaissances Webflow les plus récentes et les plus exigeantes.

Combien de personnes travaillent chez Codelius ?

Nous sommes actuellement une équipe de trois experts Webflow, chacun avec ses propres spécialisations : développement sur mesure, design et gestion de projet.
Lorsque c’est nécessaire, nous collaborons également avec un réseau restreint d’agences partenaires et de freelances de confiance, afin de répondre à des besoins techniques spécifiques ou à des périodes de forte demande.

Votre expérience, elle, reste toujours simple et fluide : vous disposez d’un interlocuteur unique dédié, et nous nous chargeons de tout le reste en coulisses.

Combien de temps dure le développement ?

Cela dépend de l’ampleur de votre projet : nombre de pages, niveau de complexité, animations, fonctionnalités avancées, ou encore les éléments que vous pouvez fournir (maquettes, images, guidelines, etc.).

Mais comme « ça dépend » n’est jamais une réponse satisfaisante, voici des délais réalistes basés sur les types de projets que nous réalisons.

• Site Web avec maquettes fournies
À partir de 15 jours de développement.

• Site Web conçu avec un design assisté par IA
À partir de 3 semaines (design + développement).

• Site Web avec design professionnel sur mesure
‍(Conçu par une agence partenaire)
À partir de 1 mois (design + développement).

• Application Webflow (comptes utilisateurs, fonctionnalités custom)
À partir de 1 semaine lorsqu’elle est construite sur un site existant.
Des fonctionnalités plus avancées peuvent étendre le délai à plusieurs mois.

• Applications natives ou applications React complexes
Conçues et développées entièrement sur mesure.
Les délais sont établis au cas par cas, mais dépassent rarement 3 mois entre la conception initiale et la mise en production.

Chaque projet a ses particularités.
La manière la plus fiable d’obtenir un délai précis est de nous expliquer ce que vous souhaitez construire : nous vous fournirons alors un planning clair, réaliste et adapté à votre ambition.

‍