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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Search engine optimisation

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Symbols

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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
  • 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.
  • Page Names in Title Case
    All pages like Case Studies should be in Title Case or Our Work.
  • Interaction Naming
    Interactions should be named with the same logic as Classes. E.G. Homepage Hero Load, or Testimonials Card Hover In

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
  • Logo Alt Text
    Logo in the navigation and the footer must have ALT Text
  • Logo Size
    Logo should have a fixed size and height and be a SVG ideally

Project Settings

Some final tweaks to make it more sexy

  • Favicon and Web Clip
    Upload custom Fav Icon and Web Clip
  • Language Code
    Add the language code in the project settings, e.g. en
  • Remove Webflow Branding
    Turn off Webflow branding in the code and the badge on the bottom right
  • Timezone
    Timezone should be set to the clients timezone
  • Advanced Publishing Options
    Enable SSL, Minify HTML, CSS, JS & Use Secure Frame Headers
  • Custom client branding
    Custom branding logo should be added to the Editor tab

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

Final Check

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

  • Google Chrome
    Check pages on Google Chrome
  • Safar
    Check pages on Safari
  • Firefox
    Check pages on Firefox