Le guide complet pour préparer votre développement Webflow

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

June 8, 2024

•

mins de lecture

Préparer son projet

Blog & news

Codelius

Sommaire

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><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">
<!--

5/5

Our clients say it best

We might not be the most objective judges of our own work,
but they certainly are.

The advantages of working with Codelius: responsiveness, flexibility, and rigor.

Mathieu

CEO @ hyffen

Codelius are exceptional - professional, highly skilled, and genuinely driven to deliver outstanding results. They have been integral to the development of our site, bringing real value through advanced prototyping and thoughtful execution. We truly consider them an extension of our team.

Juliet Clark

Head of Product, BoxMedia

Working with Codelius was a fantastic experience. Camille is a true expert with extensive knowledge and experience in Webflow. The collaboration was always on an equal footing and the communication was easy and fun. I really valued her initiative in providing feedback on design ideas and her intention to establish a solid color and component structure behind the design. I learned a lot from our collaboration and would choose Codelius again anytime.

Isabell H.

Senior Product Designer

Working with Camille was really easy. We used a Google Doc and WhatsApp and only needed one quick video call. I was very happy with the price and the quality of the site.

Chris Tyler

Founder @ Search Party Capital

Camille is so good that I almost don’t want to recommend her — I’d rather keep her for myself. Everything was smooth, fast, and incredibly efficient. Clearly above my expectations, with a brief that she understood perfectly even though I provided very few details. A real gem.

Basptiste W.

CEO @ uRoot

[…] Codelius was able to meet this need by delivering fast and clean results. When we had more advanced requirements, […] they went beyond the technology itself to create a custom solution. They remained available and supportive, answering our questions and helping us take everything in hand.

Grégoire G.

CEO @ Albert School

From design to development, the result is exactly what we wanted, and it’s truly beautiful. We are thrilled with the project. On the development side — implementing the design — Camille showed remarkable patience and flexibility to ensure I obtained the pixel-perfect result I had in mind. Hats off to Camille.

Jeff

Manager @ Relookitchen

Camille is the person you need for your Webflow, Airtable, and other no-code tools projects. She is professional, attentive, and delivers work of excellent quality. I recommend her without hesitation.

Sébastien P.

Manager @ Professional Magician

Camille and the Codelius team delivered exactly what we needed in a timely manner — she was a pleasure to work with and we look forward to working with them again in the future.

Tessa

Co-Founder @ Pipeline Solution

Working with Codelius agency and Camille was actually made IT fun, not stressful. She has a unique combination of getting the high level design, giving experienced inputs, the French artistic touch and ability to implement low level custom solutions. At the end of the project I wished she was a colleage. Hope to work with her again one day.

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.

WHY ?

HOW ?

Your questions, answered

Why shouldn't I just make an app with an AI builder instead ?

AI and Webflow aren’t magic solutions — they’re tools. Powerful tools, yes, but tools nonetheless.
At Codelius, we use both every day, not as all-in-one answers but as accelerators.
‍
If you want something reliable, scalable, and truly tailored to your business, humans still need to do most of the work.
AI can generate ideas, drafts, or components, but it cannot replace thoughtful architecture, UX decisions, technical consistency, or long-term maintenance.

In short: AI can speed things up, but human expertise is what makes a product last. We combine both — never one without the other.

Are you certified Webflow experts ?

Yes. Our team has been officially certified on Webflow since early 2022.

We continuously stay up to date with the platform’s best practices, new features, and evolving standards.
This allows us to deliver projects that are reliable and scalable, and to provide training sessions that reflect the most current, high-quality Webflow knowledge available.

How many people are on the Codelius team?

We are a small and nimble team of three Webflow experts. Each of us have our own specialties, including custom development, design and project management.

When needed, we also collaborate with a small network of trusted partner agencies and expert freelancers to handle specific technical requirements or high-volume periods.
However, your experience remains simple and streamlined: you will always work with one dedicated point of contact, and we take care of everything else behind the scenes.

How long does development take?

It depends on the scope of your project — the size of the site, the level of complexity, the animations, the presence of advanced features, and the materials you can provide (designs, images, brand guidelines, etc.).

But since “it depends” is not a satisfying answer, here are realistic timeframes based on the types of projects we handle.

‍

• Website with ready-made designs

Starting from 15 days of development.

• Website created with low-cost, AI-assisted design

Starting from 3 weeks (design + development).

• Website with professional, hand-crafted design

(Designed by a partner agency)

Starting from 1 month (design + development).

• Webflow web application (user accounts, custom features)

Starting from 1 week when built on top of an existing website.

More advanced features can extend the timeline to several months.

• Native or complex React applications

Designed and developed entirely from scratch.

Timelines are provided on a case-by-case basis, but rarely under 3 months from initial conception to production release.

‍

Every project has its nuances. The most reliable way to define a precise timeline is to tell us what you want to build so we can assess the scope and provide a clear, realistic schedule.

Get an estimation