Launching a website is both exciting and stressful. We’re sure you know the feeling. It’s like the final boss of the entire project. In the rush to hit 'Publish' and connect the DNS, it’s far too easy to overlook a broken link, a missing meta tag, or a responsive glitch.
We know the feeling and that's why we created The Prelaunch Checklist. Treat it like your personal safety net. It covers the 'boring' technicalities, the critical SEO mapping, and the subtle UX details that clients might miss, but search engines definitely won’t.
Below we describe each category with explanations.
This is where we verify that the visual polish and interactivity hold up across every device and screen size.
Real Device check (RWD): Test the site on actual phones and tablets. Browser previews are helpful, but real hardware is the only way to catch touch-screen or layout bugs.
Working Button Links: Click every button to make sure it points to the right spot. Check that external links open in new tabs so users don't lose your site.
Hover States - Add visual feedback to your buttons and links. Subtle hover effects make the site feel responsive and polished without being distracting.
Proofreading, Lorem Ipsum, Placeholders: Scan for any leftover "Lorem Ipsum" or dummy images. Swapping these for real content is the final step to looking professional.
Interaction on Components, Sliders, Tabs: Run through your sliders and tabs to make sure they function without glitches. Everything should move smoothly across different devices.
Global Colors: Stick to Color Styles rather than relying on hex values. It keeps your branding consistent and makes site-wide updates a one-click job.
Navigation Check: Click through every link in your header, footer, and anchors. You need to be sure users can move between pages and sections on any device without getting stuck.
Global Text Styles: Link every text layer to a defined Style. Avoiding manual overrides makes site-wide typography updates instant and keeps your branding consistent.
Global Components for Buttons, Tags, UI elements: Turn repeating elements into components. This way, one edit updates every button or tag across the whole site, saving you hours of manual work.
Max-Width (depends on your layout): Set a maximum width for your main containers. It stops your content from stretching too far on huge monitors, which keeps your text readable and your layout intact.
Layout Templates: Use layout templates for your header and footer. It saves time and guarantees every new page you build starts with the correct structure automatically.
Effects & Animations check: Test your scroll effects and animations on different devices. You want to make sure they look smooth and don't accidentally break the layout or hide content on smaller screens.
The Setup phase is about the technical backbone of your project ensuring the site is reachable, searchable, and organized enough for you or a client to manage long-term.
Global Site Settings: Set a default title, language, and description for the entire site. This acts as a fallback so every page has basic SEO info even if you don't set them individually.
Connect Custom Domain: Link your own URL to the project. Update your DNS settings and verify the connection to make sure your site is live and reachable at the right address.
Search Visibility Toggle: Control which pages Google can see. Double-check this before going live so you don't accidentally hide important pages from search results.
Favicon & social preview: Make your brand look professional in browser tabs and shared links. Upload a custom icon and a social share image (og:image) so links look polished and clickable on platforms like X or LinkedIn.
404 Page: Don't let broken links be a dead end. Design a custom error page that fits your branding and gives lost visitors a clear path back to the homepage.
Delete Unused Assets: Keep your project lightweight and easy to manage. Clean out redundant components, old text styles, and unused colors so they don't clutter your workspace.
Organize Assets in Folders: Group your visuals, components, and styles into logical folders. Staying organized now will save you a lot of time and frustration as your project grows.
Well Organized Layers: Use a clear hierarchy and proper naming for your sections and containers. A tidy layer panel makes it easy for you or a teammate to edit the layout without getting confused.
This category is about making sure that search engines can find you and that every visitor, regardless of how they browse, can navigate your content effectively.
Images & Video Optimization: Compress your media to keep page loads fast. Smaller files are better for mobile users and give your SEO ranking a significant boost.
Speed Audit: Check your performance with tools like Lighthouse. Identify heavy scripts or content to make sure your site stays snappy and responsive.
Meta Titles & Descriptions: Write unique, keyword-rich summaries for every page. This helps search engines understand your content and makes users more likely to click.
URL Slugs: Edit your page links to be short and descriptive. Clean URLs are easier for humans to read and better for search engine indexing.
Schema Markup: Add structured data to help search engines "read" your site better. This can help you earn rich snippets like star ratings or prices in search results.
Alt Text for Images: Add specific descriptions to all visuals. This is vital for screen readers used by visually impaired visitors and helps your images appear in Google searches.
H1-H6 Structure: Use headings in a logical order to create a clear content hierarchy. It makes your pages easier to scan for users and easier to index for crawlers.
p Tags for Paragraphs: Use proper paragraph tags for all your body text. It keeps your code semantically correct and ensures screen readers can process your content.
Redirects (when migrating): Set up 301 redirects to point old links to your new pages. This stops visitors from hitting 404s and keeps your existing SEO ranking safe.
Semantic Tags (nav, footer, ul): Use specific tags like <nav> or <footer> to define your page structure. It helps both search engines and assistive technology navigate your site.
A website is a communication tool, and for most businesses, the form is where that communication actually happens. If your form fails, the site fails its primary purpose. This phase is all about testing the friction points and ensuring that every lead actually makes it to the inbox.
Set Up & Testing: Set your recipient email and send a test entry. It's the only way to be 100% sure that messages are actually reaching your inbox.
Success & Error Messages: Create clear notes for when a form is sent or if something goes wrong. Specific alerts help users fix mistakes quickly instead of guessing why a submission failed.
Validation Rules: Add specific rules to your fields to keep your data clean and secure. This helps users provide the exact information you need from the start.
Proper Field Types & Labels: Use the right input types (like email or phone) and descriptive labels. It makes your form easier to use for everyone and helps screen readers process the required info correctly.
Safety and trust are non-negotiable. This phase ensures your project complies with global privacy standards and clearly defines the relationship between the site and its visitors.
Cookie banner: Add a consent banner to handle tracking preferences and stay compliant with data privacy laws like GDPR or CCPA.
Privacy Policy / Terms of conditions: Clearly link your legal terms in the footer to build trust and let users know how their data is handled.
The CMS is where your site meets real-world usage. This phase ensures that as your content library grows, the design remains bulletproof and the editing experience stays intuitive for the client.
Rich Text: Style your headings, links, and lists within the rich text element. Proper formatting makes long-form articles easier to read and keeps your design consistent across all CMS pages.
Slugs: Customize dynamic slugs to be human-readable and descriptive. This improves URL clarity for users and helps search engines better understand your content.
Fields: Keep your CMS clean by only including necessary fields. Add descriptions to complex inputs so anyone managing the content knows exactly what each field does.
Empty States: Design clear, helpful layouts for empty CMS collections. This prevents users from seeing a blank screen or broken layout when content is missing.
Conditional Visibility: Hide specific elements when CMS content is missing, like a social link or secondary image. This keeps your layout clean and free of awkward gaps.
Dynamic Meta Tags, Descriptions, OG:Image: Map collection fields to SEO titles, descriptions, and OG images. This automatically optimizes every blog post or project for search engines and social sharing.
A professional site doesn't just look good; it measures success. This final phase is about connecting the "brains" of your operation: the tracking, analytics, and indexing tools that tell you if your site is actually doing its job.
Google Search Console: Link your domain to track search performance and indexing. Use it to find crawl errors and submit sitemaps so your pages actually show up in Google results.
Google Tag Manager: Manage all your tracking scripts and marketing tags from one dashboard. Connect your GTM ID to Framer to organize third-party tools without cluttering your project code.
Analytics & Heatmap: Connect tools like Google Analytics or Hotjar to see how visitors interact with your site. These insights help you understand user behavior and identify where to improve the experience.
Everything we covered above hits the parts of the launch that actually matter for a professional site. We went through the different categories and explanations so you can stop guessing and start following a system every time you hit publish.
To make it easier for you, we built this entire checklist in Notion. Grab the link below: