Preparing the Webflow development of my project

Your Webflow development is about to get underway, and you're wondering what you can do to make sure it goes as smoothly and quickly as possible? Welcome to this article, which explains it all!

By

Camille

June 8, 2024

-

minutes of reading

What is written in this article is general enough to guide you no matter which developer will be handling your project, but keep in mind that it is mainly dedicated to Codelius customers and that depending on the processes set up by your provider, requests may vary πŸ˜‰

The checklist

Here's a quick summary to help you see things more clearly. Feel free to refer to the rest of the article for details ✨

  • The model
  • Typefaces
  • Images in the right format
  • Legal documents
  • The final .aux domain name(s)

Nice to have

  • The final texts
  • Internal and external links
  • Your pages' meta titles and descriptions
  • Favicon & Webclip
  • Google Analytics login

The must-haves

The final model

Either the link if you use Figma, with "viewer" rights at least, or the XD sources if you use Adobe

Typefaces

- If you have the

Ideally, a "variable" file type would make the site load faster, but if not, you can share the files for the different weights you've used πŸ€—

Note that the fewer different files there are on your site, the faster it will load 😁

Webflow has been handling font variables very well since 2023, with one or more 🀩 properties.

- If you use Adobe Font

We'll need an API token with the right typography πŸ™Œ

Remember to add all the necessary weights, as well as italic versions if necessary.

The images

Please note that the size limit for an image on Webflow is 4MB, and that's already a lot for an image on the web.

Plan all your site's images and visuals in the smallest possible size, and below the above-mentioned limit to ensure final quality.

Our advice

- Images in headers

... so the first sections of your site should be as light as possible to ensure good loading speed.

It is also important to optimize those on the page, but since they will arrive later, they are less critical.

- Using SVG

For all possible elements, it's best to use SVG :

Here are the main reasons

  • It's a vector format, offering very high quality at any size.
  • This is a text format, so it's much easier to load than an image.
  • It avoids duplicating an image in several colors for different effects, like hovering for example, by allowing it to be modified with CSS (that's our job 😁 ).
- Using WebP

This is the new generation format, and you'll see a nice message from Google in your loading audits if you don't use it.

It's worth noting that Webflow allows compression + conversion to WebP directly from its backoffice, so you don't really need to do this yourself. However, on certain sites where visuals are a priority, transmitting images directly to your developer in WebP avoids a loss of quality because you control it πŸ™Œ

Legal documents

These documents can be integrated into the site as text (recommended) or as a downloadable, searchable PDF.

Cookies & Privacy

The privacy policy is mandatory on all sites that collect data (at least those visited by European users).

For a site built on Webflow, here are the details of the host (one of the details to enter in your document)

Webflow, headquartered at 398 11th Street, 2nd Floor San Francisco, CA 94103, USA.
Phone number: +1 415-964-0555

Terms of use

Mandatory on all sites too, they allow your visitors to know who you are so they can contact you πŸ™Œ

CGV & CGU

These two documents serve to protect you and your customers if you sell services or make online services available to them (training platforms, for example, or any other software involving use without going through you).

The "nice to have

These are little things that we set up for you during development if (and only if) you share them with us before you start 😁 The reason is quite simple: it takes less than a second to do at the same time as creating a page, for example, but going over it again afterwards can take a long time (because of loading times in the Webflow backoffice, for example).

Final texts

If you don't have your texts at the start of development, we'll put in "lorem ipsum", which you can change between steps 1 and 4 of publication πŸ˜‰ But the best thing is to have them directly so we can integrate them for you πŸ€“

Links

If your site has external links to other sites, please share them directly with us so that we can integrate them πŸ™Œ

The same goes for internal links, between pages of the site we're going to develop, if you think they're unclear (don't worry, if you have a "contact us" button we know where to link it, but sometimes some links are less clear ✨).

Favicon & Webclip

The favicon must be a 32px square image.

The webclip must be a 256px square image.

Meta Title and Description

These are the titles and descriptions of your pages, which appear in search engines.

The title should be less than 60 characters, the description less than 250 ✨

They help search engines like Google, and your users, understand what they'll find on your page, and greatly aid SEO!

Google Analytics Tracking ID

It's a code that starts with "G" or "GT" and allows you to link your site to your Google Analytics for more or less advanced performance tracking via Google πŸ™Œ

Please note that as soon as you integrate it, you must mention it via a cookie banner πŸ€“

‍

How will publication work?

The stages

1. The first thing to do is transfer the project to your Webflow account
2. Then you'll need to take out a subscription on
3. I'll finish making a few settings on the site (add favicon, webclip, optimize files and remove "Webflow Branding", add domain name)
4. Webflow information is added to the DNS. The information is always the same from one site to the next (except for one). You'll find them at the end πŸ˜‰
5. Send me a screenshot of the DNS if you took care of the modification on your side, so that I can check.

Note that it can take as long as you want/need between transferring the site to your Webflow account and putting it online! Just because we transfer it to you doesn't mean it will be online right away πŸ˜‰

What we recommend you add before publication

Once the site is on your Webflow account, you will have the possibility to make changes on the site, and here is a small checklist of things that are interesting to change, especially to optimize SEO:
- Title tags on pages (if not transmitted before, otherwise we already put some by default, so not a big priority here)
- Meta descriptions (if not transmitted before)
- Alts texts on images to help their SEO

Information to be entered in the DNS zone

πŸ‘‰ I advise you to always make a screenshot of how things were before your modifications, a fortiori if there are mail services, or already a site in place on the domain
- A on @ (root, put nothing): 75.2.70.75
- A on @ (root, do not put anything): 99.83.190.102
- CNAME on www: proxy-ssl.webflow.com
- TXT on _webflow: one-time-verification= + a value that will change depending on the site, I'll send it to you the day it goes online, but you can prepare the beginning ✨

Prenez <contact> avec nous

We love a challenge

//
Contact us
-
-
->
</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) -->
<!--

What our customers have to say

Admittedly, we're not very objective about our prowess,

but them... Yes !

The communication was always nice, considerate, and warm. Camille gave honest feedback on some of my ideas and suggested ways to improve them. She was always open to feedback and took it well. I also found the technical quality, project structure, and animations excellent.

Isabell Hergoz

Founder

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 is the right person for your webflow, airtable and other nocode projects. She's professional, a good listener and does high-quality work. I recommend her without hesitation!

SΓ©bastien Pieta

Manager

Great, we're super happy to receive the site so we can make the returns, thank you very much!

[...] At first glance, we're very happy!

Constantin R.

Co-founder

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

Mathieu

CEO

From design to development, the result is exactly what we wanted, and it's really very beautiful. We're delighted with the project. On the dev side - setting up the design - Camille was superbly patient and flexible in making sure I got the desired result down to the pixel. Hats off to Camille!

Jeff

Manager

[...] Codelius was able to meet this need, offering us fast, clean results. When we needed something a little more advanced, [...] they went beyond technology to create a custom solution! They were always on hand to answer our questions and help us get the hang of things!

GrΓ©goire G.

CEO

Camille is so strong that I won't recommend her, I want to keep her all to myself ;p Super fluid, fast and devilishly efficient. Clearly above my expectations and perfectly briefed with very little to go on. A nugget!

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

We've been certified experts by Webflow themselves since 2020. It's our tool of choice, with Webflow we can do wonders!

Most of our Webflows developments are based on a Figma model. It enables our customers to validate a design before conceiving it.

We partner with a web design agency to combine our know-how and offer our customers the best option for their wildest projects.

why?
how?

We answer your questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Contact us

Are you Webflow experts?

Yes! ✨

Camille, our head trainer, has been a certified Webflow expert since January 2022 🀩

Since then, she has continued to update herself with new best practices to make sure she trains you to the best of her ability.

How many people will be working on my project?

There are several of us in the company, and we each have our own specialities πŸ‘€

We will choose who will be in charge of your project depending on the requests you have, but in any case, you will never be in contact with more than two people, to avoid loss of information and time πŸ™Œ

Of course, if you request it, you will be able to meet the inner workings of the machine πŸ™Š

How many people work for Codelius?

There are currently two of us! A couple of entrepreneurs, united by the desire to do our best every day, but also to become the best versions of ourselves.

During your projects, you'll probably only be in touch with me, the site's little voice, aka Camille πŸ˜‰ Geoffrey prefers to stay in the shadows πŸ™Š

‍

Do you work well?

As best we can!

We are committed to providing quality and easy-to-use solutions for our customers over time πŸ™Œ

How long does development take?

The development time depends on the project you wish to carry out (size of the site, advanced functionalities or not, application, etc), and on the resources you are able to provide (models, images, logo, graphic charter, etc) ✨

But since we know that "it depends" is not a satisfactory answer, here are a few pointers to help you determine the duration of your project ✌️

  • Website project with mock-ups already created by a designer, simple arrival animations: approx. 15 days development time
  • Website project with designs created directly on Webflow: approximately 1 month of design and development.
  • Simple application (customer account and a few functions) with mock-ups already created by a designer: approx. 2 months' development time
  • Complex application (customer account and numerous functions) with mock-ups already created by a designer: approx. 4 months' development time
  • Simple and complex applications with designs created directly on Webflow: between 4 and 6 months' development time

The best way to find out how long your project will last is to contact us and tell us all about it , and that's over here! πŸ‘‡

‍