Can’t deny, I love my checklists :) Every time I am launching a website or a template, I go through my launch lists and make sure all points are covered. And considering how much time and trouble these lists had saved me I want to share one of my favorites with you.

Optimized Images

‍If Images are too big or too heavy, it will affect the speed of your website. If they are too small, it will lower the attractiveness of your content. I put together some insights that will help you to understand how images in Webflow work and how to make sure you are getting the best results. 

Webflow Responsive Images

When you are uploading an image on a Webflow website, Webflow will automatically create smaller versions of the image for showing them on smaller resolutions. And this is amazing, thank you Webflow!

But you need to keep in mind that the original image would be uploaded exactly the way it is. So before you upload any image, you need to understand what is the maximum size of the image you need on the website and optimize it with the purpose in mind.

Static images on pages

For most situations, ~2000px wide for vertical ~2000px high for horizontal images, and ~500kb, would be enough not to sacrifice the quality much while maintaining the speed of the website. 

Retina

If are using the size of the images I mentioned above, it will give you ~1000px wide for vertical and ~1000px high for horizontal images on retina screens. Just don’t forget to tick the 2x checkbox when uploading them!

‍

Background Images

As I mentioned above Webflow will create versions of your images for smaller resolutions, but it would not affect your background images. You have to keep in mind if you are uploading a big image, for example, to show at the top of your Home page as a background image. Webflow will use the same original image for every resolution. For example, if you uploaded a ~2mb image, it would be the same 2mb on the mobile. 

Tips

To resize many images at the same time, I upload them to Figma, after resizing download all of them. And upload to tinypng.com. And once all of them are optimized I upload them to  static pages and dynamic collections on my Webflow website. I have a short reel about it.

Functioning Forms

Forms can help you to stay with your community in contact. Before launching the website test every form on desktop and on mobile. Make sure all names are unique and clear. Those names would be inside the notifications and reports. Names of the fields should be matching with their types. For example, the field called “Email” should be marked as “email” type in the settings.

Automation

If you need to transfer the information from your forms to your favorite marketing and automation solutions like Flodesk, Calendly, Dubsado, etc. Create at least one test request for each of your forms and connect them using Zapier. After you created the connections test one more time.

SEO

There are plenty of things you can do before the website launch to ensure a better ranking once it’s out.

Texts

Make sure you are using the H1 tag for the main titles on each page and they are relevant to the content of the pages. Structure the rest of the content using H2-H6 tags in the hierarchy to support the meaning of the content. It will help Search Engines to “understand” your content better. Use tag “paragraph” for longer plain text

Images

Webflow lets you create alt texts for your images, simply add the description for the images you have inside your “Assets” panel. On top of having alt texts, you can give your images names for example “red-vegan-leather-jacket.jpg” instead of “jacket0002.jpg” 

Links

Link pieces of your existing content between each other. For example, cross-link your blog posts. Make sure all links in the menu, footer, inside the text, are working. An obvious one, but worse double-checking.

Titles, Meta descriptions & Open Graph Settings

Design

Make sure you have the designs for all the hidden states like “Thank you!” “error” and “after submission” messages for your forms. If you are launching a Ecommerce website don’t forget the design for the product variations and compare at price option. And after you are done with testing your design on all the resolutions don’t forget to clean up the styles you remove unused animations.

Utility Pages

Customize your 404, password-protected, and the page with the search results if you have one.

Legal

Even if your business is outside of the EU, you still should have your Cookie & Privacy policies clear and ready. If you are possibly collecting the data from EU citizens you should also have your cookie consent pop up. If you are using forms on your website make it clear that people might receive your communications in case you are planning on sending any.

Settings

Go to the settings menu and make sure that you have your favicon uploaded. Check the active email for the notifications, if you are transferring the website don’t forget to remove your default email. Connect analytics and marketing Pixels. Don’t forget to remove the Webflow branding if you don’t need it.

Licenses

If you are using custom fonts on your website make sure you have web licenses for the fonts purchased under the website-related name. Same with other assets, make sure all your licenses are intact.

‍

Unsearchable Pages

If you need certain pages on the website but don't want Search Engines to find them use the code <meta name="robots" content="noindex"> for these pages.

Transfer to the client

If you are transferring the website to the client, it is always good to create a duplicate before the transfer.