January 27, 2020

We went Webflow

It was a very warm 2013 summer. We had rebranded as Znbound.

www.znbound.com was launched using a WordPress instance. We had (very) limited resources back then.

In 2015, the website transitioned to a combination of WordPress and HubSpot. The main website pages were on WordPress and the rest – blogs, landing pages – were on HubSpot. This combination worked out all right. Thanks to regular blogging, the site went up SEO rankings and maintained those rankings. Traffic was up. Leads were up. Quality of leads were up, too. Znbound grew on the back of this qualified inbound traffic.

Fast forward to 2018. Inbound marketing agencies mushroomed. Every digital agency was suddenly an inbound marketing agency. HubSpot’s desire to grow fast in the Indian market through the partnership route was a key reason. You could now find a HubSpot Partner at every traffic signal .. … kidding!

This growth spurt helped quicken the acceptance of inbound marketing in the fledgling Indian market. But, it came at the cost of market share for Znbound. SERP rankings suffered too. Not only were there more agencies competing for ranks, but some with stronger brands and depth of experience were also dislodging Znbound from its ranks. Business suffered. 2018 was a whitewash. Totally!

We really had to do something. It was time to fight back, claim our rankings and rise to the top. We executed many initiatives, but the chief among them was website speed.

The wish – the Znbound website should load blazingly fast.

We set a goal – 1 second. The website should load under 1 second.

Was that even possible?

Static site generators held potential for some answers. The team looked up Hugo, Ghost and Webflow. Hugo and Ghost are open-source, but with a steep learning curve.

Webflow looked nice and easy, with no dearth of steroids, to turbo up www.znbound.com. Webflow is commercial, not open-source. It took us the entire second half of 2019 to get the website going on Webflow. Not because of weblfow, but purely because of conflicting priorities at Znbound. And the work still continues.

Are you keen to dive in and see what is under the hood?

Webflow has two systems to build pages.

Designer Tool
Editor Tool (CMS Editor)

Webflow Designer

With the help of this tool, we create the templates for web pages (static) and the collections (dynamic). You can see in the below image, we can create the page structure using the Prebuilt module on the left-hand side without typing any ‘HTML’ and with the help of style settings on the right-hand side, we can style it without typing ‘CSS’. Inside this, we see all types of models like Rich text, heading (h1-h6), link, form, button, text, dropdown, slider, image, video, different types of layout, tab, search and even coffee for tired minds.

Webflow Editor (WYSIWYG CMS Editor)

As you may have understood by the name of the editor and CMS, what is its use. Once the entire page is created, there is continuous need to change the content of the page, change the image and blog content. This is where the editor comes into play. The WYSIWYG nature of the editor makes it really easy. You can see below:

webflow editor screenshot — Webflow editor interface

Kick ass features

Webflow features threaten the jobs of web developers. In a good way, of course. There isn’t a comparable tool yet, in the market. Following are some of its features:

More in less time – With the help of the module we can create more webpage templates in less time. In this, we can copy and paste the section of another template into any template. Any number of page configurations can be created using the collections tool in Webflow. Collections is a good way to create dynamic pages.
‍Blazing fast pages – It takes less than 1 second time to load the page due to the static site generator.
Support SVG – This supports the .SVG format of the image, so that the size of the image very less and the page loads quickly which helps us in SEO.
Default SEO – There is a section in it for SEO title and Meta description. We do not need to write any custom code or any plugin. Its page indexed to Google much quicker than other CMS, sometimes almost instantaneously.
‍Lottie – With the help of Lottie animation pre-built module in Webflow, we can animate the animation created from the json code on the webpage.
HubSpot Collected Forms – After integration with HubSpot, its form contact is properly captured in HubSpot
e-Commerce websites – In this we can also make e-com website.

There are more and the team will continue adding more useful features to this blog, as we learn more.

Limitations

Webflow has it’s own set of drawbacks/limitations described below:

One user at a time – More than 1 user can not work in the same system simultaneously.
Migration issues – If we migrate the blog from any other ‘CMS’, then it does not have the correct formatting. We faced this, when moving from WordPress.
100 – Only 100 static pages can be made in this.
Table? – We can’t create the table in the Webflow.

Interestingly, the Webflow team maintains a wish list of user desired features. A few are as under.