<aside> <img src="/icons/sign-in_gray.svg" alt="/icons/sign-in_gray.svg" width="40px" /> Changelog: Last Updated August 2, 2024

</aside>

01 How to use this template

1. Sign up for Notion here (if you do not have a Notion Account)
2. Duplicate this page onto your own teamspaces or private space
   1. Click on the three dots on the top right corner of this page
   2. Click on Duplicate 🙂

02 Pre-Design Stage

• [ ] Set your webflow.io domain
  • [ ] Put in your respective project folders Optional
• [ ] Upload favico (32px x 32px) & webclip (256px x 256px)
• [ ] Select Your Timezone
• [ ] Set language code
• [ ] Hide Webflow branding
• [ ] Set up your fonts (How to set up your fonts?)

03 Design & Development Stage

• [ ] Optimize your images (Convert them to WebP format in Webflow - How to?)
• [ ] Set up a Style Guide with your typography & brand colours
  • [ ] Ensure that the “Style Guide” page is only saved as draft!
• [ ] Content
  • [ ] Make sure that there are no more “Lorem ipsum..” texts
  • [ ] Finalize content with client
• [ ] CMS Empty States
• [ ] Form Submission Success & Error States
• [ ] Input Field Focused States
• [ ] Button Hover States
• [ ] Custom 404 Page
  • [ ] Ensure that the 404 page has a clear CTA
• [ ] Responsive
  • [ ] Desktop breakpoint
  • [ ] Tablet breakpoint
  • [ ] Mobile landscape breakpoint
  • [ ] Mobile portrait landscape
• [ ] Remove unused interactions
• [ ] Remove unused CSS
• [ ] Remove unused pages
  • [ ] Test the site on different browsers (usually we check on the common ones)
    • [ ] Google chrome
    • [ ] Safari
    • [ ] Firefox
• [ ] Set up localization (how to?)
• [ ] Add cookie consent to page (eg. Finsweet cookie consent)

04 SEO Settings on Page

• [ ] Define your H1 (make sure there is only 1 H1 per page)
• [ ] All pages have Title Tags
• [ ] All pages have Meta Description
• [ ] All pages have Open Graph Image set
• [ ] All images have alt tags
  • [ ] Ensure that the alt tags are clear and relevant to the image
• [ ] Make sure all images uploaded have proper filenames (eg. use man-on-roadbike.jpg instead of man0001.jpg)
• [ ] Make sure text meets colour contrast standards (how to?)
• [ ] Add aria-label to homepage logo (how to?)
• [ ] Remove content from Google (Use this only to remove certain content or pages from being indexed by Google - how to?)

05 Post-Design Stage

• [ ] Set Global Canonical Tag URL
• [ ] Add google site verification
• [ ] Add Google Analytics 4 (GA4) code
• [ ] Add Meta Pixel code

06 Other useful settings

• [ ] Delete test form submissions
• [ ] Add an email for your form submissions
• [ ] Enable SSL, Minify HTML, CSS, JS
• [ ] Disable Webflow subdomain indexing
• [ ] Enable auto-generate sitemap
• [ ] Add robots.txt

07 For Client-Handoff

• [ ] Add content editors or collaborators
• [ ] Setting up client’s domain name (how to set up your custom domain?)
• [ ] Set 301 redirects (this should be done if you do not want to lose any page ranking in google)
• [ ] Handover custom fonts (if any)
• [ ] Onboard your client to Webflow
  • [ ] Create a PPT slide on how to use Webflow Optional
    • [ ] How to update CMS
    • [ ] How to publish website to staging
• [ ] Transfer ownership to client
  • [ ] Duplicate the site in your workspace, just in case

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/5e2cbf64-a9ff-4da0-82ad-0eb0272184dd/93f9ceea-5979-406a-99a9-0c6a92ffc557/ALF_Circle_Logo.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/5e2cbf64-a9ff-4da0-82ad-0eb0272184dd/93f9ceea-5979-406a-99a9-0c6a92ffc557/ALF_Circle_Logo.png" width="40px" /> This is a free resource. You may not distribute or resell this.

Here are more ways for us to connect: — Our resources on our website — Our Social Media on Facebook | Instagram | Tiktok | X (former Twitter) | Threads

</aside>