Webflow Pre-Launch Checklist

Project overview

Your Name

Project Name

Project Webflow link

Style Guide

If you want to kickoff your Webflow project like a true ninja, explore our Flow Starter, each Project/Product at Flow Ninja is based on Flow Starter.

Global Heading Tags

Every HTML Tag in Flow Starter has been styled to match the brand of the site we’re building

Global Heading Tags

Rich text

All elements in the Rich Text element have custom spacing and styling

Global Heading Tags

Global Colors

Colors are named like Neutral 100 or Blue 200, not Greyish etc. All Colors are global.

Global Heading Tags

Global Buttons

All button styles/variants are in the Style Guide. If a button isn’t a Webflow Button element
but consists of a link with elements it’s added as a symbol in Flow Starter.

Global Heading Tags

Custom Inputs and Form Fields

All Form Elements are styled to match the brand of the client’s website

Global Heading Tags

Custom container and grid set up

The container max width, gutter and margins on the sides are updated according to the Figma Design

Global Heading Tags

Global Margin & Padding Classes

Margin M,L, XL and same for Padding classes are updated to match the Figma design system set up

Global Heading Tags

Max width classes

After checking what kind of Max Width Classes are used in Development, the global classes are updated.

Global Heading Tags

Navigation and Footer Symbols

Navigation and footer are only one instance in the project. Any color changes per page is done via interactions.
Make sure all nav and footer links have current page states and hover states

Global Heading Tags

Skip

Fonts

Fonts should be uploaded as custom WOFF fonts.

Global Heading Tags

Usability & Design

In order to comply with accessibility on our website and follow the designs closer, there are few steps we take for each Webflow Site.

Hover States

All links should have hover states, all buttons should have hover states, all clickable cards should have hover states. Elements which you cannot click cannot have hover states.

Global Heading Tags

Linking pages

All links are linked to a page in the project. All pages from the project can be accessed from the footer or the navigation.

Global Heading Tags

Interaction speed

Interactions shouldn’t delay the way user interacts with the site.
When having image + text, animate only the image or only the text to fade in.

Global Heading Tags

Interactions on Tabs, Dropdowns and sliders

Dropdowns, Tabs and Sliders should have a custom in view and out of view interactions.

Global Heading Tags

Navigation

Navigation should be sticky and has a background on scroll. The background shouldn't blend in with the content on scroll.

Global Heading Tags

Tablet and Mobile hover states

Elements shouldn't have hover states on Tablet and Mobile devices.

Global Heading Tags

Double check spacings

Check Figma for Spacings, Container sizes, Check Font Sizes, Font Colors and Line Height again before sending to QA

Global Heading Tags

Missing content

Record all places where content is missing in our PM tool

Global Heading Tags

Blurry Images

Make sure images are not blurry on all devices. Either check your export, ask the client for the better image or try disabling responsive images by clicking “CMD SHIFT O” and disable Responsive images here

Global Heading Tags

Images height

Make sure images don’t have 100% height set up. They should always have a specific height and width added.

Global Heading Tags

Navigation Scroll

Make sure the site cannot be scrolled when you open the navigation element.
Each Flow Starter kickoff file comes with the code by default for that.

Global Heading Tags

Nav Menu Scroll

Nav Links should be visible on all screen sizes and can be scrolled inside of the navigation if they can’t fit the screen

Global Heading Tags

Image + Text

Always show image first then text in sections where we have Text + Image

Global Heading Tags

Horizontal scroll

Make sure the site doesn’t have horizontal scroll

Global Heading Tags

Check on all devices and small laptops

Check the site once more on all devices, and reduce the screen size to 992 to check how the site behaves.

Global Heading Tags

Skip

Search engine optimisation

Few simple things can make your site more friendly for search engines and allow you to rank higher.

Heading 1

Make sure each page has only one Heading 1 per page. If you need to use H1 size for an element that is not H1, create a Global Class with the properties from Heading 1 and adjust on all brake-points.

Global Heading Tags

Heading Structure

Each page should follow a logical heading structure, section begins with a H2, then H3, then H4. If a design forces you to use a different heading size than this, you can create a custom class.

Global Heading Tags

When Migrating - SEO Title & Description

If the site has been migrated from a different platform, make sure SEO Titles and Descriptions match for each page

Global Heading Tags

When it's a new site - SEO Title & Description

Add an SEO Title we curate until the client’s SEO Consultants send something over.
That can be the H1 of the page or something that makes sense + “ | Business Name”

Global Heading Tags

Image Alt Texts

Alt Texts should describe the image + have some SEO Benefit for the client. e.g. “Honey Cookies in Nis”. The Alt Text should explain the image further due to accessibility + have some SEO Value. CMS Images can pull the name of the CMS Item

Global Heading Tags

Page Structure

Follow the core page structure from Flow Starter, and add proper Schematic HTML tags to all elements

Global Heading Tags

Schema Markup

Homepage should be marked up with Schema/JSON, example , and each element like FAQ needs to have structured JSON data. More about that here and a resource coming soon.

Global Heading Tags

Webflow Domain Indexing

Disable .webflow domain from indexing

Global Heading Tags

Website Sitemap

Turn on the “Automatically Generate a Sitemap”

Global Heading Tags

Default domain

Usually we set the .www domain as the default domain as that's easiest with Webflow SSL

Global Heading Tags

Search Console

Enable search console on the site

Global Heading Tags

Page and CMS Slugs

All page and CMS slugs should be exactly the same as on the old clients site

Global Heading Tags

Redirects

Plan and organise redirects from the old site

Global Heading Tags

Speed

Test and make sure the GTMetrix score is A

Global Heading Tags

Showcase our Agency

Include “Built with ❤️ By Flow Ninja in Nis, Serbia” in the project Footer

Global Heading Tags

Skip

Forms

Well, all marketing sites have forms and use them to gather leads. That's why it's important we connect all forms on the site properly and check if we're sending leads to proper places.

Input Settings

All form inputs have correct settings. E.G. Email is Email, Phone is Phone etc and all form inputs have custom names added.

Global Heading Tags

Form Settings

All forms have custom form names added

Global Heading Tags

Form Success Message

Each form should have a custom success message design and copy

Global Heading Tags

Form Error Message

Each form should have a custom error message design and copy

Global Heading Tags

CRM Connection

Make sure that the form either goes to the clients email or their CRM of choice. Always ask which CRM the clients are using before deciding to just send forms to their email address.

Global Heading Tags

Custom Validation

Each field should use the custom validation from Flow Starter kickoff file. Add email, name and phone validations and custom fields for those.

Global Heading Tags

Skip

CMS Pages

This is the key to a good Weblfow site. Set up the CMS properly and clients will love Webflow but if you miss some of these key features, they will think Webflow is broken.

CMS Slugs

Slugs for the CMS pages should be singular. e.g. /blog/ , /author/ , /service/

Global Heading Tags

CMS Fields

Always use description part of the CMS fields to describe what they do and what they're connected to.

Global Heading Tags

Dummy CMS Contnet

Each CMS needs to have at least 3 CMS items added with different content, ideally we should end up with 7 CMS items.

Global Heading Tags

CMS Connection

Double check each item on the page to make sure all images, texts and links are connected to pull info from the CMS

Global Heading Tags

Conditional Visibility

For any element that the client might not fill in the data for, add conditional visibility. E.G. Twitter icon should be hidden if the client doesn't add the Twitter link in the CMS.

Global Heading Tags

CMS Post Pages Designs

All CMS post pages need to have content inside. Even if it is for an FAQ CMS post, please add Navigation, Footer and a Question and the answer section in the hero.

Global Heading Tags

Empty CMS List State

All CMS Collections have the empty field designed and implemented. Guiding the client where to go to add CMS content.

Global Heading Tags

CMS Items connections

Check to see if all CMS items are connected to the proper links or post pages. For CMS Items that link out of the site, please link to a new tab and add rel=”noreferrer”

Global Heading Tags

Dynamic SEO Titles, Descriptions and OG Images

Either pull the SEO Title from the Item name + " | Business Name" or add custom fields for all 3. If we're doing a migration from an old site, migrate the same SEO Titles and Descriptions as on the old site.

Global Heading Tags

CMS Sorting & Filtering

Check if CMS Lists are sorted properly. Newest first or whatever the client is requesting us to use, if we have a related CMS Items, make sure don’t show the current CMS item.

Global Heading Tags

CMS Switches

Add featured, first or whatever the design requires fields to the CMS.

Global Heading Tags

Skip

Symbols

Going back and checking what can be a symbol can help clients use the Webflow site much easier!

Symbol Check

Every element repeating on the site should be a symbol. Navigation and the footer are always symbols, newsletter sign up...

Global Heading Tags

New page in Flow Starter

Create a new page in Flow Starter and paste in all Symbols used on the site

Global Heading Tags

Skip

Naming Conventions

Going back and checking what can be a symbol can help clients use the Webflow site much easier!

Flow Starter classes used

More about how we name classes can be found here

Global Heading Tags

All classes in Title Case

Please use Title Case for class naming ALWAYS. Webflow will convert those to .title-case when you publish the site. So there's no need to add - when naming classes.

Global Heading Tags

Page Names in Title Case

All pages like Case Studies should be in Title Case or Our Work.

Global Heading Tags

Interaction Naming

Interactions should be named with the same logic as Classes. E.G. Homepage Hero Load, or Testimonials Card Hover In

Global Heading Tags

Skip

Logo

Who likes when their logo doesn't link anywhere or it is blurry?

Logo Link

Logo in the navigation and the footer should be connected to the homepage

Global Heading Tags

Logo Alt Text

Logo in the navigation and the footer must have ALT Text

Global Heading Tags

Logo Size

Logo should have a fixed size and height and be a SVG ideally

Global Heading Tags

Skip

Project Settings

Some final tweaks to make it more sexy

Favicon and Web Clip

Upload custom Fav Icon and Web Clip

Global Heading Tags

Language Code

Add the language code in the project settings, e.g. en

Global Heading Tags

Skip

Remove Webflow Branding

Turn off Webflow branding in the code and the badge on the bottom right

Global Heading Tags

Timezone

Timezone should be set to the clients timezone

Global Heading Tags

Advanced Publishing Options

Enable SSL, Minify HTML, CSS, JS & Use Secure Frame Headers

Global Heading Tags

Custom client branding

Custom branding logo should be added to the Editor tab

Global Heading Tags

Tracking

Let's make sure we know where our visitors are on the site.

GTM Set Up

Always ask the client to send over a GTM tracking code and access to your email address for the GTM. GTM tracking code needs to be added only to the head of the page. We don’t need the body component as it is triggered only when users have JS disabled. All scripts for tracking the site MUST be in the GTM. Please reduce the amount of scripts we have outside of the GTM to a bare minimum

Global Heading Tags

Skip

Final Check

You'll find some strange things happening here. Keep a cool head!

Google Chrome

Check pages on Google Chrome

Global Heading Tags

Safari

Check pages on Safari

Global Heading Tags

Firefox

Check pages on Firefox

Global Heading Tags

Skip

Ninja’s way of verifying Enterprise Webflow Sites

If something is really complicated probably you’re doing something wrong. Chill out and come back to it after a cup of coffee or a good nights sleep.

All checklists will stay saved on your local storage.

Project overview

Style Guide

Global Heading Tags

Rich text

Global Colors

Global Buttons

Custom Inputs and Form Fields

Custom container and grid set up

Global Margin & Padding Classes

Max width classes

Navigation and Footer Symbols

Fonts

Usability & Design

Hover States

Linking pages

Interaction speed

Interactions on Tabs, Dropdowns and sliders

Navigation

Tablet and Mobile hover states

Double check spacings

Missing content

Blurry Images

Images height

Navigation Scroll

Nav Menu Scroll

Image + Text

Horizontal scroll

Check on all devices and small laptops

Search engine optimisation

Heading 1

Heading Structure

When Migrating - SEO Title & Description

When it's a new site - SEO Title & Description

Image Alt Texts

Page Structure

Schema Markup

Webflow Domain Indexing

Website Sitemap

Default domain

Search Console

Page and CMS Slugs

Redirects

Speed

Showcase our Agency

Forms

Input Settings

Form Settings

Form Success Message

Form Error Message

CRM Connection

Custom Validation

CMS Pages

CMS Slugs

CMS Fields

Dummy CMS Contnet

CMS Connection

Conditional Visibility

CMS Post Pages Designs

Empty CMS List State

CMS Items connections

Dynamic SEO Titles, Descriptions and OG Images

CMS Sorting & Filtering

CMS Switches

Symbols

Symbol Check

New page in Flow Starter

Naming Conventions

Flow Starter classes used

All classes in Title Case

Page Names in Title Case

Interaction Naming

Logo

Logo Link

Logo Alt Text

Logo Size

Project Settings

Favicon and Web Clip