Production Guide

Webflow, generically speaking, is a website builder tool that allows users to build content in a rich "visual" environment. The visual nature of this tool provides a great deal of benefits, least of which is faster turn-around. In spite of the enhanced toolset and special features that Webflow offers, it still provides every opportunity to create web content that violates established and emerging best practices for semantic code and accessibility. This guide and its associated components was created to help creators develop content that uses and takes advantage of Webflow's rich development tools to produce content that is both aesthetically pleasing and semantically well structured.

Project Setup

  1. Duplicate this template project and generate a unique name and slug for the new project (probably using the client's business name as the project title)
  2. Configure the project's "Project Settings" page:
    • The "General" tab: Find the section titled "Webflow Branding" Set the options "Display "Made In Webflow" badge" and "Display Webflow branding in HTML" to the "OFF" position.
    • The "SEO" tab: Find the setting labeled "Disable Webflow Subdomain Indexing" and set the control to "YES". This will indicate to search engines that you do NOT want the SUBDOMAIN to be indexed. This control still WILL ALLOW indexing of the parent domain.
    • The "Fonts" tab: Designate any required Google Fonts or Adobe Fonts or upload any custom fonts necessary to match the client-approved prototype(s). *Note: When using custom fonts (fonts that you need to upload manually) be certain to configure "Fallbacks for Installed Fonts" also found under the "Fonts" tab.
    • The "Custom Code" tab: Find the setting labeled "Language Code" (within the "Advanced Settings" portion of the page). Enter the text string "en" (for "English") into this field (unless otherwise necessary). This "Language Attribute" specifies the native language of the pages's content.
  3. Configure the "Style Guide" page, being sure to select each element's appropriate base class (the pink tiles labeled "All ___") from the "Selector" control, make edits to each of the individual HTML elements of the Style Guide page as is necessary to match client-approved prototype(s). *Note: Remember to style for each of the available device formats ("Desktop", "Tablet", "Mobile - Landscape", and "Mobile - Portrait")
  4. Essential Page Composition Settings:
    • Set the <body> (body-All Pages) tag to display "flex" and "flex-direction:column"
    • Set the <body> (body-All Pages) tag with the appropriate "Base" typeface (Most likely the typeface for the "Body Copy")
    • Set the "header", "content", and "footer" containers to "position: relative;"
      • The "header" may be "position: fixed;" depending on the needs of the design
    • Set the "footer" to "margin-top: auto;"

Pre-Launch Checklist

  1. If your new website is replacing an existing website, be certain to generate a report for pages (from the existing website) that have been indexed by the major search engines Google and Bing. Reporting on other search engines is optional.
  2. Verify that form handling has been configured properly and submit the form one or more times to confirm that recipients are receiving the email send from the form.

Project Launch Process

  1. Add the Domain
    • Simply enter the domain name in the "Project Settings > Hosting" area under the "Custom Domains" section in the field labeled "Add Existing Domain"
  2. Update DNS Information
    • Take a screen shot of the current DNS settings
    • Delete ALL "A" records with a "host" of "@"
    • Delete ALL "A" and "CNAME" records with a "host" set to "www"
    • Create two new "A" records with a host of "@" and set their values as the two values shown in the Webflow "Project Settings > Hosting" area
    • Create one new "CNAME" record with a host of "www" and set its value as the value shown in the Webflow "Project Settings > Hosting" area
  3. Set the Default Domain
    • Set the "www" version of your domain as the "default" domain by simple selecting the "MAKE DEFAULT" indicator next to that domain name in the list
  4. Verify the Domain
    • Select the "Check Status" button below the domain names and verify that the indicators for each domain name are showing "Connected"
      • This step may take some time due to DNS propagation
  5. Publish the website
    • Publish the site just as you would publish a site to the staging server (Neglecting this step will result in a 404 error when you attempt to view the website)