What's good y'all! John here, you know the vibes! In today's video I'm talking about how you can steal my quality assurance checklist for when you're launching a website!
So a quick intro before I jump into my computer. We've all been there with web development projects, you're in the development phase and you're stuck right? You don't know what you need to install on the website, you don't know what you need to add and you're kind of stuck between that place of development and launching the website. So I put together a quality assurance checklist that you can check out here. Take notes! Grab it! Use it for your projects. I'm going to jump into my computer into our project management platform called Clickup and walk you through that process. Let's dive in!
All right y'all! So I am using the arc browser. I have two windows up here, the one on the left is for a project. I'm going to show you the quality assurance checklist. I won't go through all the specifics just because these checklists are pretty long-winded. But I want you to have a list that you can work from to go ahead and get this done. Also on the right hand side I just got a website example video game that my son and I are working on, just as an example. So here, I've got my list here. I'm going to go down to web quality assurance. I'm going to click that and I'm going to walk you through the action items.
We also have SOPs for all of this in our course, The Web Design Studio Accelerator if you're interested in that comment is below. But again, you're still going to get a ton of value from this. So when I hit action items, these are the main things that we set up on any website that we work on. So on the right hand side is Webflow platform used for website build outs. And so update titles and metas, we update all the titles and meta descriptions on each individual page of the website. I'll show you what that looks like in the designer, so you can kind of get a general idea.
Again this is specific to Webflow, but you can use this for WordPress, Shopify, Squarespace any platform that you're using as well. So update titles and metas. We go in here and we update all the titles, as you can see here with home., here's my title tag and here's my meta description, so I've done that. Add open graph image. What webflow does is it lets us insert an image here. As you can see this is the image that will load and pop up on content like Facebook, X or Twitter, LinkedIn and Pinterest when you post a link to that page. We make sure all the blog entries in Webflow are completed and added to the website.
Review site links, that's when we have someone just literally go through the website and click every single link, make sure it's all working properly. Same thing with the menu, have someone go into the menu and make sure that update is done as well. Of course, install Google analytics and install Microsoft Clarity. Microsoft Clarity is a free heatmap platform. Google analytics you already know, it's on GA4, you want to install that as well. Also, test the form, make sure it goes to the right email. Check site responsiveness, meaning go through this and just make sure that the site is responsive. As you can see it looks great on all the different device breakpoints.
And then of course, review style manager and cleanup classes, we always do that as well. In settings, you'll be able to see that here and you can go ahead and clear that and make sure that the website is doing that properly. You can go here to interactions, hit clean up and then it'll delete any unused triggers or actions there also. Remove Webflow branding, this is specific to the web flow platform but they'll have made in Webflow towards the footer. So you want to make sure you turn that setting off as well. You can do that by going into General scrolling down here and just turning off that branding.
You also want to back up your website. I always like to back up the HTML CSS and just all of the website files, so this is really easy to do in webflow I going walk you through this process. So once you're in the designer you're going to go to here. you can see HTML, CSS, JavaScript and all of the assets and then once that loads up you're just going to hit ‘prepare zip’ and it's going to zip all these files up for you. Then you can download that and just put that on your drive folder or the cloud or wherever you want to house those files. Now you've got a backup. You can also download the CMS, this website doesn't have a CMS but you can go into the CMS collection and download those as CSV files. And then just backups into backup and add it to the year folder, that's all more interior. So this will get you in a great spot.
We also as a bonus have another checklist here, called the SEO quality assurance checklist where we just do all the on-site SEO for the client in preparation of going live, setting up 301 redirects, right, so making sure that all of the URLs redirect to the new locations. Setting up hosting and connecting to domain, delete unused Style Elements, which is all interior on the website. Label all images and ALT text, make sure they're all labeled properly. Autogenerate sitemap, that's a setting in Webflow that you create and then set up Google search console. I won't go into details and specifics regarding Google search console.
But this allows you to submit your website to the search engines manually, so that way Google and other search engines can scrape your content and index your newest stuff. If you all want, drop a comment below I'll make an additional video just for our SEO quality assurance checklist and walk you through that step by step. But I really wanted to focus on the main quality assurance items to help you get your site live and ready to go. Again you can get this and the SOP’s and deliverables in my web design studio accelerator. Otherwise, just grab this list and use this in your website build outs.
I hope this was helpful y'all! Thank you all for checking out the video content make sure you subscribe drop a comment below if you have any questions and I will see y'all next week peace.
