Webflow

Wordpress cover photo with poll graphics

Credit: Some illustrations and screenshots from webflow.com

Get your business or project off the ground quickly with Webflow - the perfect fit for lightweight websites where custom development is not needed or required.

Webflow lets us build websites visually. We use the same techniques but we don't spend time writing the code. If the scope, scale, or functional needs of a website requires a step up, we develop custom high-end websites on Sanity headless CMS with the Next.js / React.js frameworks in front.

The arguments and reflections in this post are based on developing relatively straight forward informational websites (for now).

The no-code way of building for the web changes everything

Webflow is the best tool to transform the way we build our websites right now, in my opinion. The platform is 100% hosted, meaning you never touch any code. The code for the website is produced automagically in the background, while we keep our focus on that matters; amazing content and user experience.

Webflow designer interface represent.no website

We hand-built the Represent website a few years ago. We probably spent 100+ hours in the process using custom markup and a traditional CMS. Then Webflow came along, and I made the same site in a fraction of the time, CMS and all.

Through all my years managing web teams at Represent, technical infrastructure and maintenance have been what kept me up at night.

We often have clients working with real content in the CMS only a few days after our initial startup workshop.

"Content first" web development is a total game-changer

With Webflow, we can build websites content first. We often have clients working with real content in the CMS only a few days after our initial startup workshop. The client adds CMS-driven content while we are shaping the structure around it. Then when it is time to apply the visual layer, most of the content is already in there, as opposed to building a site on hypothetical Lorem Ipsum content. Here is an example of an early-stage content prototype in Webflow, where the client could already login and work with the copy. It took about an hour to make based on a wireframing kit we made for Webflow.

Content First web development in Webflow

We start by building out the content and structure in our homemade Blueprint boilerplate, then gradually work in the visual style. This way, the client can log in and work with content within days.

We usually tell the client we can deliver 80% of their dreams for 50% of the cost.

You log in, and then navigate your site and click on any text or image you want to edit!

Interesting? Get some juicy bits in your inbox from time to time

We will send you updates every month or so, when we post new articles and stories that might very well interest you if this does :)

12 reasons why we consider Webflow to be the best no-code website builder

Webflow is our #1 no-code website builder as of now. It’s worth mentioning that Webflow is not a “drag-and-drop” website builder like Squarespace, Wix, and Weebly that lets you build your website with readymade blocks without any prior knowledge of how to structure websites with HTML and CSS. Webflow does come with an easy-to-use CMS, that makes content editing very intuitive. But if you need to do any changes to layout and design you need a developer or designer with Webflow knowledge, including basic HTML/CSS understanding.

Ok, let’s get into why Webflow is awesome.

Automated programming = Focus on content, design and user experience

The most obvious upside with a no-code web builder like Webflow is that the platform is building the code for you automagically in the background. You don't ever have to see it, but you can if you want to. You can even download it and use it elsewhere.

You can easily view and export the entire code for you website from Webflow. That said, I never do that because I don't need it.

The no-code approach cuts down the development time of any custom designs, animations, interactions, and CMS setup significantly. And most of the time, we still have all the tools available that we do in traditional development. We usually tell the client we can deliver 80% of their dreams for 50% of the cost. If you're upfront about that, a limitation here and there is not an issue. Also, Webflow is investing big to push that 80% closer to 100%.

Create AMAZING designs and user experiences without template restrictions

It’s ridiculous how awesome you can make your site look and feel using Webflow’s advanced tools for interactions and animations. Just give this page a scroll. And this one. It just feels so good. And those kinds of user experiences are fast and straightforward to do!

Creating rich animations is quick and easy with Webflow.

Ease of use for content editors

Last but not least by a longshot! It is so incredibly easy to edit content in Webflow. You log in, and then navigate your site and click on any text or image you want to edit! Content and presentation are not decoupled like it is in WordPress and other CMS's.

Easy to use editor interface in Webflow.

Intuitive Editor in Webflow with on-site editing tools.

Also, several editors can work on the site at the same time, and you'll see who is doing what and where. Read more about the Webflow editing experience here.

Staging / Test version of the website on a different URL

Webflow comes with a staging (test) version of the website at your-site.webflow.io where you can experiment and showcase your work before pushing any changes in content or design to your live site. If you're running a WordPress website, chances are you don't even have a staging server and site setup. Any mistakes made go live on your website. Pray for a backup!

Easily publish your Webflow site to a separate "staging" domain for testing before publishing.

Backups

Speaking of backups - every time you make a change in Webflow, a new backup is created. The backups can happen with a 5-minute interval if you're busy working on your site, so if anything unexpected happens, you can get right back to safety within seconds. Preview and easily revert to a previous version of the site from the Webflow control panel.

Frequent backups - easy to preview and restore.

You can also easily duplicate a Webflow website. It is free until you connect it to a custom domain. A duplicate site can be useful if you want to create a new website based on one of your existing ones. Or if you want your current website available on a different URL while you build and launch a new version. In any case, you can duplicate an existing Webflow website in seconds.

Affordable hosting, maintenance, and upgrades

Hosting with Webflow starts at $16 / month for a CMS driven site. The platform is automatically and continuously upgraded without more than notifications about new features for you. And if you need to change or upgrade anything regarding design or structure, it is super fast. What we used to spend hours on developing, testing, and deploying, is usually done in minutes in Webflow.

Webflow hosting plans.

Superior performance and speed!

I cannot overstate the importance of performance and speed. If your site is slow, both users and Google will be very unhappy. The speed you get with Webflow is INSANE! When your site is on Webflow, you are enjoying their world-class global server infrastructure and CDN (Content Delivery Network). Read more at https://webflow.com/hosting.

WordPress vs Webflow site load speed comparison

The above is a side by side comparison of the same website made in Webflow vs Wordpress, tested with Pingdom Tools. This alone is a reason to rush from Wordpress to Webflow. You can see Roman Kremianski break this down and more on his transition from WordPress to Webflow in this video.

In the above image, you'll see the Wordpress version of the site loads WAY more resources (requests) than the Webflow version. It is a result of Wordpress being a bloated platform with so much stuff that is not used by your website. The page size is almost 3 times that of the Webflow version and the load time more than 3 times longer.

Custom e-commerce

Webflow recently released its own built-in e-commerce. So now you can build out totally customized webshops all the way through the checkout, with the same ease and speed as other website pages. The solution is not quite there yet for Europe/Norway though.

Safety (SSL)

Webflow sites come with free SSL certificates (https://). Nothing to set up, it just works. Better for user experience and Google rankings.

CMS API and custom code

We have access to an API (Application Programming Interface) for the Webflow CMS, that allows us to get content out of and push content into the CMS. This can be used to pull content into other applications or to push content into Webflow every time something happens in a different platform.

Custom code in the header and footer of a Webflow site.

The screenshot above is from the site settings, where you can add custom code in the header and footer site-wide.

We are also able to include custom code blocks onto pages or websites as a whole. We have used this to populate a container with customer names and logos, pulled from a client's API, to give you one example.

Custom header and footer code on individual Webflow page.

Custom header and footer code on an individual page, in this case for filtering a list of design agencies for the Norwegian Designers Association using Isotope.

A safe bet

Webflow is a safe bet. They have been around since 2013. They have about 600 employees. They are profitable. There are over 1 million designers and developers using Webflow to create websites. In 2019 Webflow closed a $72M Series A round of funding. and in 2021 they closed their Series B at $140M. Webflow hit a $4 billion valuation in March 2022 nearing $100 million in yearly recurring revenue.

Simple SEO

Using the Webflow Editor, you have access to the basic SEO tools you need. From page titles and meta descriptions to Open Graph (Facebook and such) settings to easily optimize your pages for site search and social sharing.

Easy to use SEO tools.

If you need any type of custom functionality, integrations, or multiple languages, Webflow might not be the right fit. If so, let's introduce you to Sanity

Knowing when Webflow is not the right fit

Here are the current Webflow limitations too:

You can't change the website code, other than to download it. You can, on the other hand, add custom CSS and JS with custom code blocks on webpages and in the header/footer globally. You can also add classes, ids, and attributes to elements to reference them from custom code. But if you want to tweak something on the backend, there is no way. So we typically do an initial evaluation to determine future needs. If any backend integrations are required, we typically go with Sanity CMS.
Webflow may not be a fit for content-heavy sites that require a lot of reorganizing and building out pages and structure. At least not from the Editor view. But we can train someone on your team for a couple of hours, and they will be good to go in the Designer view as well.
No hablo español. Webflow is working on support for multi-language websites due for release in 2022 but is currently not multi-language. We work around the missing feature with two temporary solutions; we either duplicate and translate the website, or use a website translation service like Bablic or Localize. None of these are ideal solutions.
We hope Webflow will add “repeater” fields. So when you are building a page or article from the Editor view, you can add in “content blocks” of different types in whatever order you want. You can build pages any way you want from the Designer view where you build the website. But in the Editor mode that the content editors work from, you are restricted to the fixed content fields in the content type you are editing.
Images added to Webflow are responsive, meaning the user gets served a size and quality that makes sense on their device size. Unfortunately, images added to "rich text" elements in Webflow are not responsive. This will typically be the "content" part of an article where an editor builds it out with text, video, and images. So if an editor uploads a huge 5mb photo, that is what the user is served, and that takes ages to load if there are many of them. This lacking feature results in Webflow being a bad fit for an article-heavy website.
Version control and backups are very basic and it can be troublesome to develop new features without publishing the entire site. When we need better version control for both website development and content, Sanity CMS is the way to go.
You can't publish changes to an individual page in Webflow without publishing the whole site. This is fine for small sites, but we have had major issues with this as a company grows. At some point, there may be 3 people making changes on 3 different pages that need to be published individually. This can turn into a headache.

If any of these limitations are a show stopper, we typically opt for our favorite "tech stack" using Sanity CMS.

How we pitch Webflow with its current limitations

When we help our clients evaluate Webflow, this is the truth we lay upon them: We will be able to make 80% of your dreams come true, using half the time and money. Also, that 80% will keep growing. Whenever we meet a roadblock in Webflow that is not mission-critical, no problem - they were warned and prepared :) As long as we have done our research and planning right, we will avoid mission-critical surprises.

Sounds fine, but show me the premium model, please

Fair, head on over to the headless magic of Sanity.

We're excited to learn...

...about your business and how we can work together to build a success story.

Øyvind Østmo

Agency Manager

+47 90138781 / [email protected]

Stories about Webflow

February 16, 2022

Webflow valued at $4 billion a year after raising a $140 million series B

Getting close to $100 million in yearly revenue, no-code website builder Webflow hits a $4 billion valuation in March 2022 after raising $140 million in January 2021.

Read on

November 17, 2021

Webflow announces "Logic" to introduce "if-this-then-that"

Webflow announced "Logic" at the No-Code conference, introducing features that may replace the need for Zapier for conditional logic in the no-code website builder.

Read on

September 22, 2021

Memberships in no-code website builder Webflow

Webflow "memberships" (now in beta) unlocks a world of possibilities with users and paid content in our favorite no-code platform.

Read on