Building a Site with Webflow

We have built our new site in Webflow. I chose this because I am very interested in dynamically built static sites, and having played around with Wordpress quite a bit, I didn't feel that you had the flexibility to play around with pages designs and make landing pages as opposed to Dynamic pages.

Picking a template? Starting from Scratch?

There are really three options for using Webflow.

1. You can pick a template. There is a robust template library of both free and for pay templates. You can see more here
2. You can use a library (Which is a collection components that you connect together to make a page).
3. And lastly you can start from scratch. Which may seem a little daunting, but is not that bad.

We chose to start with a template. We felt like this would be best and quickest way to get a new site up and running.

‍

Modifying the template pages

It turns out that this part of the process is a little bit of a challenge because most templates have multiple versions of pages, for example a blog post, our selected template came with three choices, which is good, however you need to pick one, duplicate it and put it into the site structure that you would like. We went with /blog/<<blog post slug>>, which is a typical format.

This process took the most amount for time, because each page needed to selected moved into the correct hierarchy, and then updated, SEO, Meta Information, Page design, etc.

All of the un-used template pages we currently hid with password protection so that they don't show up in the Sitemap (Surprisingly it is very difficult to dynamically control what goes into a sitemap, you can manage it by creating a manual sitemap, but shouldn't the tool do that?)

Very drag and drop interface to get widgets and html components on the page.

Image & Media Handling

The image and media handling is through Webflow only. So for example if your infrastructure is set up to dynamically resize images (ex: Cloudinary, Cloudflare, Cloudfront, etc.) depending on usage that won't work, since all images are imported into the Webflow Image Library. If you are including media it will need to be loaded into Webflow. Webflow does have good sizing, placement, and alt tag generation tooling though. For some use cases that should be sufficient.

Infrastructure and Deployment

The Webflow deployment process is very straightforward, when you create your new project you get a new-project.webflow.io domain so that you can build and test. When you are ready you connect your domain to the new site, and it becomes a new deployment target. Set up was easy, had to add a few DNS entries and you where off to the races. We use Cloudflare for our DNS and hosting, because of the robust tooling and control that it gives you, Webflow works fine with Cloudflare, however when you are in the Custom Domain Setup section of the Project Settings you will see the following error: 'You'll need to remove the AAAA record from your DNS settings to ensure your site loads properly." While the setup in Cloudflare doesn't use 'AAAA' this error shows up.

‍

This error doesn't appear to affect how the site behaves, and Cloudflare is running in full proxy mode.

The finishing touches

Once the site has been completed and it has been connected to a domain, there are the finishing touches. Adding in javascript function and external sources as necessary. Webflow has that handled nicely as well, you can add Javascript at a global level (support for both Head code and body code) or at the page level (support for both head code and body code).

If you have a submission form in the Project setting your will need to make sure that you have the set up as well, things like subject lines, reply to address, and the email template are customizable.

Setting up some standard integrations, like Google Analytics, Google Optimize, Google Maps, and Facebook pixels are easily done through project settings.

‍

Push the site Live

The final, most rewarding and scariest step, do the first deploy to your domain, remove password protection and then figure out what you missed or want to change now that it is live.

The Bottom Line

I like to cut to the chase, am I happy that I picked Webflow for our new site. Yes I am, it is a good platform with a lot of flexibility and potential. Is it perfect...No, but that is ok because the team at Webflow is always adding to the service.

I have outlined some of things that I found challenging when creating the new site in Webflow.

Pros

• Deep html support, most html attributes can be adjusted on the template.
• Strong support for mobile, desktop, tablet, and more.
• Very robust template and framework library (both free and pay). Great starting points, we used a template for this site.
• Get a lot of things for "free", like search built in as part of the system.
• Collaboration, Webflow has strong collaboration tools, allows multiple distributed teams members to easily work on the site.

Cons

• When using the image widget it can only images from Webflow Asset repository. You can't load from a url for example, it would be great if I could use dynamic images from my CDN or Digial Asset Repository.
• There is no in string text substitution. Which means that in a collection you need to include the exact text of what you want to show, because you can't create a text like "Download <<Product Name>>", you have to enter the text exactly as you would like to see it.
• There is a limitation on the number of fields in the collection which makes the previous bullet particularly troubling.
• Sitemap and SEO control is a little underwhelming. Sitemap can either show all pages, or be manually created.
• If you purchase a template that has eCommerce, and your site doesn't use eCommerce, you have to go through some extra hoops to minimize the impact (Perform redirects on eCommerce pages that show up in your Sitemap).

In future articles we are going to explore connecting Webflow with External tools and continuing on our journey with Webflow.