You may have heard of Webflow, if you haven’t and you work with websites, you really should keep reading this blog as we’ve written this Webflow guide for folks like you.
Or if you're not happy with your current website or CMS and are looking for recommendations, this guide is equally as relevant to you, too.
In short, Webflow is a browser-based web design, development, editor and CMS all in a very nice and very easy to use package.
It sounds too good to be true, right? With a wealth of experience building all sorts from basic brochure style websites to completely-custom E-Commerce stores, we can safely say we have the knowledge and expertise to guide you through your Webflow journey.
Here at Big Rocket, we made the switch to Webflow and it's made a huge difference to us and our clients. We’ve even been made a Webflow Professional Partner.
In this ultimate guide to Webflow, we’ll cover everything from what Webflow actually does, what Webflow doesn’t do, what it is, what it definitely is not, how much it costs and the main reasons we switched from WordPress to Webflow and never looked back.
What is Webflow?
Webflow is browser-based drag-and-drop web design tool for creating responsive websites. Launched in 2013, Webflow was designed to fill the gap between easy to use but somewhat limiting website builders like Wix and Squarespace and more traditional means of front-end web development.
The platform is marketed towards web designers who want to build websites as they design them without the need for a developer. It is entirely possible to open Webflow and build a website without a single line of code.
That said, Webflow is also incredibly customisable and should you wish to get down and dirty with HTML, CSS and JS you can. Webflow allows users to design a beautiful website but also add the functionality they need beyond what’s included within the platform.
Webflow Designer
Where most of your website building takes place, the Webflow Designer is intuitive and full of useful tools. If you’ve ever used Photoshop, you may be familiar with the layout of the UI and the drag-and-drop nature of pacing elements into your canvas is about as easy as it gets.
Having some knowledge as to how websites are built is advantageous, however you’ll quickly learn about positioning, divs, classes and CSS. It’s very open and easy to design almost anything you want, unlike the awkward to use DIY website builders that tend to be quite clunky and not always let you do what you want.
In comparison after a few hours using the Webflow Designer, it becomes easy to piece together a website using the elements available or by using some of the preset (but completely editable) templates to help you get started with the initial layout of a page.
The Webflow Designer is one of the easiest and fastest ways to build a working website from scratch in any way you want. There are Webflow Templates available to purchase should you wish, but it soon becomes very easy to start with a blank canvas and build your own beautiful site (plus it’s far more rewarding to build it from scratch yourself!).
It’s one of those tools where the more you use it, the more impressive your websites become.
Webflow CMS
A content management system (CMS) is already built into Webflow and is ready to use should you need it. Using the CMS, you build ‘Collections’ which are reusable templates for dynamic content. Essentially like small databases.
Whether it be a blog, products, anything that you want to follow a similar template and contain similar information.
It’s easy to build a Collection in the CMS. You essentially choose the fields and types of data you want your collection to contain, you then design the template page for that particular Collection item and then popular the Collection with information.
The most common use for this is a blog, but the CMS can be far more powerful should you need it to be. For example you could create a CMS about individual blog authors and include data such as a profile picture, name, tags relating to topic that author writes about and then use that ‘author’ Collection within your blog Collection. It’s powerful stuff.
Even more impressive still is the ability to import or export CSVs containing data to be used within a Collection. This is super useful if say, you are migrating away from a different platform to Webflow and want to bring across all your existing blog posts.
In short, the Webflow Editor is great for letting clients loose on your newly built website without fear from their side or yours that anything will break.
Webflow Editor
Ideal for end users, the Webflow Editor is an easy way to add content to your Webflow site and edit existing pages in realtime.
Very different from the designer, the editor is made purely for adding and tweaking content rather than changing the design or template of the website. It’s intuitive to use and anyone who has used a CMS before will be familiar with how it works and surprised with how simple it is.
Adding content is similar to any other CMS by which the user simply fills out fields pre-determined when creating that Collection. Publishing this content will then automatically push to where ever this Collection List is being displayed, such as in a blog.
The most impressive feature of the Webflow Editor is the ability to edit page content visually in real time. This lets the user change images and text on pages created in the designer and see how their page will look before pressing publish.
Our clients really like and appreciate this feature for quick edits such as updating a home page. It allows those without as much technical or design knowledge to see what their edits will look like before publishing.
So how is easy is Editor mode to use? Click to request a demo and we'll show you how.
Webflow E-commerce
Without the need to use a plugin or resort to using Shopify, Webflow has it’s own in-built e-commerce platform. Using the same Webflow Designer you use to design the rest of your website, you can design a fully-functional e-commerce store.
At the time of writing, Webflow e-commerce is still in beta and here at Big Rocket we still recommend our own custom built E-Commerce websites built on Webflow for the flexibility we offer in comparison to Webflow’s own offering, but for a simple merch store it’s very intuitive to use.
Very different from Shopify or WooCommerce, Webflow E-Commerce allows for total customisation of all product pages and even the checkout. Unlike E-Commerce platforms that are purely designed to sell products and require templates and tweaked code to look and feel how you like, Webflow’s own offering is completely customisable in the same way you’d design any other page in Webflow.
This results in the ability to create your very own E-Commerce store that looks exactly the way you want it to. No themes or templates, no having to tweak code to make your store look how you want, you have full control over everything.
As it’s still in beta, Webflow’s E-Commerce store is missing some key features such as multi-currency and even PayPal. That said, updates happen fast at Webflow and we wouldn’t be surprised to see these missing features being added soon.
Interactions 2.0
Webflow makes adding animation to your website incredibly easy without the need for any CSS or JS knowledge. Interactions allow you to create custom transitions and animations depending on either the page state or user interaction.
Whether that’s elements transforming as a page is scrolled or reacting to user’s movements, interactions changes websites from flat and motionless to animated and engaging really easily.
Interactions do take some getting used to if you’ve never thought about animation before, but once you’ve broken down what you want each element to do it soon becomes quick and easy to add some movement to your pages.
This is by far one of the most powerful tools Webflow has to offer especially as it means not needing to know or write any JavaScript at all. What used to be one of the most complex parts of web design is now super easy and intuitive.
Webflow Hosting
One of the great things about using Webflow is that it’s the only tool you need to design, built and publish a website online. It really is an end-to-end solution when it comes to web design and Webflow excels particularly with hosting.
There are a few different plans to choose from, but Webflow uses Amazon Web Services (AWS) and a global content distribution network (CDN) powered by Fastly and Amazon Cloudfront.
In short, websites are exceptionally fast to load and use some of the same hosting architecture as large names such as Dropbox, Zendesk and Ideo. If it’s good enough for them then Webflow’s hosting will be enough for almost anyone.
All websites come with SSL certificates for security and HHTP/2 compliance. Sitemaps are automatically generated (if you want them to) and websites are backed up automatically.
When it comes to the less exciting but one of the most important parts of getting your website online, there’s really nothing much you need to do apart from choose a package and publish.
Webflow University
It doesn’t take long to get up-and-running and the excellent Webflow University has all the tutorials you could ever need. From the very basics such as getting to know the tools and UI to building complex animations, Webflow University is very, very good.
All videos are short, easy to follow and are broken down into just a few steps. They’re very light and quite fun to watch making the whole experience of Webflow very enjoyable.
It’s refreshing to not have your creativity limited simply due to not knowing how to do something. A quick search of Webflow University and you’ll find exactly how to do the thing you were hoping to do, while at the same time expanding your own knowledge.
The more you use Webflow, the more you not only understand how it works but also how front-end web development works. If you’re new to web design, it can be a scary prospect not knowing what elements of a website are called or how they work, but Webflow University makes it incredibly easy.
Webflow University is free and anyone can watch the videos. It’s not a course and you don’t need to watch all the videos to understand how to use the platform, simply watch the videos covering the topics you need help with and soon your designs will be more impressive than you thought you could ever achieve.
What Webflow isn’t
There aren’t many (if any) platforms that can compare to Webflow. Very few offer anything close to the flexibility and ease of design while also allowing you to add your own custom code to make your website do exactly what you want.
Most website builders are very rigid and are aimed at complete novices who just need a website. These builders like Wix and Squarespace may be easier to use than Webflow, but don’t offer the same scale of flexibility or SEO benefits already baked in.
Until now there hasn’t really been a tool that lets front-end web designers build as they design. Adobe XD is an excellent desktop design tool, but in order to get your creation online, you then need to pass it to a developer. The same goes for tools such as Sketch – An amazing design tool but not one that will code a website for you at the same time.
Webflow is not:
- A basic drag-and-drop website builder
- An overly complex builder requiring loads of code
- Expensive and unattainable
- Reliant on third-party plugins
- Anything like WordPress
How much does Webflow cost?
Webflow pricing starts from $12 a month for a site plan and $16 a month for an account plan.
What’s the difference? You need an account plan in order to design and build websites and then each individual website needs it’s own site plan.
What you are buying is first an account with Webflow and then for each of your projects an individual plan that suits that project’s needs.
Account plans are available as individuals or teams and are very affordable. Even a top-spec Pro plan is only $35 a month. The same can be said for site plans, with the top-end Business plan costing just $36 per month.
Keeping in mind that includes hosting, a CDN, SSL as well as the designer, CMS and editor and it’s easy to see why Webflow is such good value.
Webflow pricing:
Site plans:
Basic
Ideal for simple sites with no CMS
Custom domain
100 pages
25,000 monthly visits
No CMS
100 form submissions
50GB band width
CMS
Ideal for blogs and content-driven sites
$16/month paid annually or $20/month paid monthly
Custom domain
100 pages
100,000 monthly visits
2,000 CMS items
1,000 form submissions
200GB band width
60 API requests per minute
3 Content editors
Business
Ideal for higher-traffic sites
$36/month paid annually or $45/month paid monthly
Custom domain
100 pages
500,000 monthly visits
10,000 CMS items
2,000 form submissions
400GB band width
120 API requests per minute
10 Content editors
Account plans:
Starter
Everything you need to give it a go
It’s free!
2 projects
Client billing
Free staging
Lite
For those only needing up to 10 projects
$16/month paid annually or $24/month paid monthly
10 projects
Client billing
Enhanced staging
Export your code
Unlimited project transfers
Pro
For freelancers and agencies
$35/month paid annually or $42/month paid monthly
Unlimited projects
Client billing
Enhanced staging
Export your code
Unlimited project transfers
White labelling
Website password protection
How good is Webflow?
As avid users of Webflow and Professional Partners, we are of course going to be biased and say Webflow is the single best web design tool we’ve used.
That said, we have previously used a wide range of web design platforms including WordPress as well as more traditional methods of web development.
Webflow may still be evolving, but it’s moving very quickly. An active Webflow Community means users are heard by the platform and new features are rolled out pretty frequently.
There may be still some thing missing that we’d like to see, but even in its current form, Webflow makes designing websites easy, enjoyable and the is the only platform you need.
Since there’s no need to mess around with plugins or templates, there’s no need to worry about updates or conflicts and the Webflow University makes it easy to find out how to do things you’re not sure about.
Because there’s no plugins, the UI is very easy to use and we particularly like how the Design, CMS and Editor are all a part of the same tool and not separated.
Feedback we’ve received from clients is also very positive and almost all prefer using the Webflow Editor to keep their website up to date rather than the offering by WordPress.
Even in it’s current form, Webflow is still the best tool for designing and building websites. It’s easy enough to use that almost any designer can dive right in but it’s also flexible enough that you can still build custom functions should you wish.
Webflow is the perfect balance between easy to use website designer and fully-customisable, development friendly platform.
Is Webflow good for SEO?
Aside from the superfast hosting, Webflow does not cause any harm to SEO. As a designer, you have full control over the pay layout, the elements and content used as well as how your website responds to different devices.
Unlike some website builders, Webflow doesn’t inject a load of it’s own code into your website. Sure there are a few classes beginning with ‘W’ here and there, but aside from that, all Webflow does it turn your beautiful design into HTML, CSS and JS.
For those who know what they’re doing, this is great as building a light, fast and search engine friendly website is easy to do. Those who perhaps lack knowledge on how the layout and design of a website can affect SEO may want to do some reading before hand.
That said, Webflow does advise when images are large in file size for example or when certain classes aren’t being used. It will also alert designers to images without alt tags.
So while Webflow isn’t built for SEO or as an SEO tool, it is easy to make a website SEO-friendly. Webflow stays very much out of your way when publishing allowing you to just get on and build an awesome website.
WordPress or Webflow?
WordPress is still a very popular website building platform and to this day something like one in three websites are built on WordPress. We have nothing bad to say about WordPress and have used it extensively ourselves, but for our own needs (and our client’s) Webflow is a far better fit.
The advantages WordPress has over Webflow is of course its longevity and community. What started off as a blogging platform has grown and there are many users and agencies out there with advice or who can build what ever it is you want.
WordPress also has an extensive library of templates and plugins, something Webflow lacks. With WordPress it’s quite easy to build a website that does what you want it to by installing a bunch of plugins.
But this is also a disadvantage of WordPress; as you install plugins the code becomes bloated and can cause your website to slow down. Not great for SEO.
Plugins also need to be kept up to date and at times there can be conflicts with plugins not playing nicely with each other.
WordPress is largely free although some templates and plugins do require payment, but we feel that the world is moving on from this way of building websites and Webflow is the answer, at least for now.
Webflow may require payment to build websites, but you then have complete design freedom. A CMS is already included as is everything you need to publish a website onto a superfast hosting platform meaning no need to use plugins or set this up for yourself.
The code used by Webflow is clean and super SEO-friendly and while there may not be any SEO plugins, Webflow does a good job at helping you ensure your website isn’t impacted by large image sizes or missing alt tags for example.
Webflow is also customisable with third party code without the need for extensive plugins.
For a design platform that allows for maximum control as well as functionality, nothing currently comes close to what Webflow has to offer.
Why we switched to Webflow
Big Rocket go about web design quite differently from a lot of other agencies. Rather than focus on the service and the actual deliverables, we look at the bigger picture and ask where businesses are headed and where they’d like to be.
Unlike some agencies, we also don’t use templates as we believe every business is different and therefore each business requires a website unique to their own needs. Some agencies have a bunch of plugins and themes they use that they simply restyle to match a brand’s identity.
Because we want to provide the best possible outcome for our clients, we like to design everything from scratch. Webflow is a tool that lets us turn our designs into reality without limiting us due to template or plugin restraints.
Webflow allows us to turn our ideas into a reality, not just visually but from a functional standpoint as well. We can still involve our developers and build custom features required by clients easily and quickly.
It may not be for everyone and hardcore fans of WordPress will be hard pushed to make the jump to a new platform and we understand that completely.
For us it’s about limitless design freedom on a platform that simply lets our designers to what they do best.
