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

June 8, 2024

mins de lecture

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 wwwproxy-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) -->
<!--

Nos clients vous en parlent

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

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 collage. Hope to work with her again one day.

Adam M.

Operations Manager & BI Analyst

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

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 Pieta

Gérant

Génial, on est super content de recevoir le site afin de pouvoir faire les retours, merci beaucoup !

[...] En tous cas à première vue, on est super content !

Constantin R.

Co-founder

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

Mathieu

CEO

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

Gérant

[...] 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

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

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

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 ?

Nous répondons à vos questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nous contacter

Êtes-vous des experts Webflow ?

Oui ! ✨

Camille, notre formatrice en chef, est certifiée experte Webflow depuis janvier 2022 🤩

Depuis, elle a continué de se mettre à jour avec les nouvelles meilleures pratiques pour être certaine de vous former au mieux.

Combien de personnes travailleront sur mon projet ?

Nous sommes plusieurs dans l'entreprise, et chacun a ses spécialités 👀

Nous choisirons qui sera en charge de votre projet en fonction des demandes que vous avez, mais dans tous les cas, vous ne serez jamais en contact avec plus de deux personnes, afin d'éviter la perte d'information et de temps 🙌

Evidement, si vous en faite la demande, vous pourrez rencontrer tous les rouages de la machine 🙊

Combien êtes-vous chez Codelius ?

Nous sommes actuellement deux ! Un couple d'entrepreneurs, unis par la volonté de faire au mieux chaque jour, mais aussi de devenir les meilleures versions de nous-mêmes.

Pendant vos projets, vous ne serez sûrement en relation qu'avec moi, la petite voix du site, aka Camille 😉 Geoffrey préfère rester dans l'ombre 🙊

Est-ce que vous travaillez bien ?

Du mieux que nous le pouvons !

Nous avons à cœur de fournir de la qualité et des solutions facilement utilisables pour nos clients à terme 🙌

Combien de temps dure le développement ?

Le temps de développement dépend du projet que vous souhaitez mener (taille du site, fonctionnalités avancées ou non, application, etc), et des ressources que vous êtes en mesure de fournir (maquettes, images, logo, charte graphique, etc) ✨

Mais comme nous savons que "ça dépend" n'est pas une réponse satisfaisante, voici quelques pistes qui peuvent vous aider à cerner la durée de votre projet ✌️

  • Projet de site internet avec maquettes déjà faite par un designer, animations d'arrivées simples : environ 15j de développement
  • Projet de site internet avec création des designs directement sur Webflow : environ 1 mois de design et développement
  • Application simple (compte client et quelques fonctionnalités) avec maquettes déjà faites par un designer : environ 2 mois de développement
  • Application complexe (compte client et nombreuses fonctionnalités) avec maquettes déjà faites par un designer : environ 4 mois de développement
  • Application simple et complexe avec création des designs directement sur Webflow : entre 4 et 6 mois de développement

La meilleure manière de savoir combien de temps durera votre projet est de nous contacter pour nous expliquer tout ça  et ça se passe par ici ! 👇