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 ✨
