Webflow Website Pre-Launch Checklist

Importance of a Prelaunch Checklist

Oftentimes, we can reach a point where we believe the website is finished, but many small optimizations are either overlooked or not addressed all at once. The purpose of this guide is to provide actionable recommendations to ensure your Webflow website is fully launch-ready. This guide highlights common areas that often remain unresolved even when a website is technically complete.

Responsiveness

This step is design-dependent and varies depending on whether you prioritize optimization for mobile or widescreen. Regardless of the design intent, review each breakpoint and test screen sizes by stretching and compressing the viewport to confirm the content adapts as intended. Ensuring responsiveness guarantees that your website looks and functions well on all devices and screen sizes. This improves user experience and reduces bounce rates, leading to higher engagement.

Links

Review every page to ensure links have the correct paths, both on visible pages and in dropdowns or buttons that might be hidden. Test every link to confirm there are no broken links throughout your site. Additionally, take this opportunity to specify how the link should open (e.g., in the same tab or a new tab). Broken links frustrate users, harm SEO, and reduce site credibility. Ensuring all links function correctly leads to a smoother user experience and better search engine rankings.

Forms

Verify that all forms function properly, ensuring they submit successfully and notifications are delivered to the intended recipient. Properly functioning forms ensure smooth communication between you and your visitors, avoiding lost leads or inquiries.

1. Check Form Fields: Ensure all form fields have the correct names, labels, and input types (e.g., "phone number" or "email" instead of plain text).
2. Confirm Notification Settings: In the project settings, verify that the designated email for receiving form submissions is correct.

Mobile Menu

The mobile menu is often overlooked, and default styles provided by Webflow can be visually unappealing. Check all links within the menu to ensure they function as intended and are properly styled. To address this, switch to your tablet, landscape, or mobile view in Webflow. Select the menu button, go into the settings panel, and click "show menu" to reveal the menu for editing and styling. A functional and well-styled mobile menu ensures smooth navigation for mobile users, which is critical as a significant portion of web traffic comes from mobile devices.

Images

Adding Alt Text for Accessibility: Add alt text to all relevant images to meet accessibility standards and improve SEO. For decorative images or background graphics, use the "decorative" option to exclude them from screen readers.

Optimizing Images for Performance: Use Webflow’s tools to convert images into optimized formats like WebP or AVIF, ensuring faster loading times and better performance.

Compressing Images in the Assets Panel: To compress images in bulk, open the assets panel, expand it, and select all images. A "compress" button will appear, allowing you to convert images into WebP or AVIF formats. Adding alt text improves accessibility for visually impaired users and enhances SEO, while optimizing images boosts site performance by reducing load times.

Metadata and SEO Settings

Title Tags and Meta Descriptions: Title tags and meta descriptions improve search engine visibility and influence click-through rates. For static pages, open your pages panel, hover over a page, and click the gear icon to update the title tag and meta description. For CMS-based pages, add a plain text field in your CMS collection for meta descriptions, populate the field, and connect it to the corresponding CMS page’s metadata settings.

Language Tag: The language tag, found in the Webflow settings panel, specifies the primary language of your website. Add the appropriate language tag in the correct format. Refer to this guide for language tag formats.

Opengraph Settings: Opengraph settings control how your content appears when shared on social media. Enable the option to copy title tags and meta descriptions or create unique Opengraph content. Additionally, upload a preview image into your assets panel and link it in your page's Opengraph settings under the image field. Metadata ensures your site is discoverable in search engines, while Opengraph settings enhance social sharing by creating attractive previews.

Favicon and Webclip

Upload a favicon (32px) and webclip (256px) in the project settings to complete your site’s branding. Favicons and webclips enhance brand recognition and provide a professional appearance in browser tabs and social media.

Google Analytics

Set up Google Analytics in the custom code tab of your Webflow project settings to track performance and user behavior. Learn how to get the code for Google Analytics here. Google Analytics provides valuable insights into user behavior, enabling data-driven improvements to your site’s performance and engagement.

Template Pages and Page Publishing

Draft template or unused pages to prevent them from appearing in search engines or confusing users. To do this, open the page settings and click the dropdown next to the "save" button. Select "save as draft" to exclude these pages from publishing. Marking unused pages as drafts prevents clutter in your sitemap and ensures a clean, user-friendly website.

404 Page

Design a custom 404 page to match the rest of your website’s style. This ensures users have a cohesive experience even when encountering broken links. To locate the 404 page, navigate to the pages panel in the Webflow designer environment. A well-designed 404 page improves user experience by keeping visitors engaged and reducing frustration when they encounter errors.

Conclusion

By diligently following this prelaunch checklist, you ensure your Webflow website is optimized, accessible, and ready to perform well for users and search engines alike. Completing these steps guarantees a professional and seamless website launch.