What sets Webflow apart?
As mentioned before, Webflow is not the only no-code web-builder available. Far from it. In fact, it appears that every month or so, a new no-code or low-code web-builder is announced. Such is the hype surrounding this era of democratized web design and development.
Squarespace and Wix remain major competitors, with the latter recently launching EditorX, a no-code web builder that was launched seemingly in direct response to Webflow. Furthermore, WordPress remains the most popular website builder and Content Management System (CMS), reportedly powering a third of the internet.
So, why should you consider Webflow?
In this section, I will list out some common concerns I've heard about Webflow and will provide my views on why you should reconsider them. At best, I hope you will agree that these concerns actually put Webflow in a better light and help it stand out from the crowd. At the very least, I hope you do not let these concerns stop you from exploring the wonderful world of Webflow.
Concern 1 – Is Webflow too difficult to learn?
Nearly everyone I know (including myself) who was first introduced to Webflow felt like the platform had too steep a learning curve. When you start a new project in Webflow, you are dropped directly into the builder interface, which may bear some resemblance to Photoshop. Faced with a number of options and selections, even those who may be familiar with the concepts of web design and development can feel a little overwhelmed, let alone those who are starting with no knowledge of the technologies. But stick with it, and you'll realize that the peculiar drag-and-drop nature of Webflow is inspired by web development best practices and will, in fact, give you an appreciation of how the underlying HTML and CSS technologies work. We'll dive more into this later.
Since its launch in 2013, Webflow has invested heavily in its educational resources; its Webflow University showcases a number of well-produced, step-by-step guides and lessons from the basics of web design through to using almost every feature of the builder.
But perhaps more importantly, over the years, a supportive community of Webflow users, designers, and developers have been sharing more and more material and how-tos, specifically targeted at newcomers to help them feel more at ease. In fact, this book is the product of my own enthusiasm for the tool motivating me to release it in the hope that it can help others climb over the initial ramp-up in learning how to build websites in Webflow. For some, the Webflow University courses can feel a little too quick, scattered, or tonally off. I hope this book fills the gap for you.
All that said, let it be clear that there is, indeed, a learning curve for Webflow. But like all things worth learning, I firmly believe that the learning curve is rewarding.
Crucially, take heart in knowing that a wonderful side effect of learning Webflow is that you will also learn the best practices of how modern websites are built. For me, this was a realization that took me by surprise. Even though I already had a fairly good grasp of the basics of HTML and CSS, there were a number of gaps in my knowledge of modern concepts around Flexbox, CSS Grid, layouts, interactions, and more. Webflow allowed me to put all this into practice and helped me address all these by applying them hands-on. As a professional UI/UX designer, I cannot overstate how tremendously this grew my overall confidence as a website builder. Moreover, it also fed back into my design process. And as any developer would attest, a designer who tempers their work in the realities of what is and isn't possible is a much stronger designer. It gave me the confidence and credibility to work more closely with developers and speak their language in my design practice, instilling much stronger collaboration.
Designer and Webflow developer Michael Riddering sums this up in his illuminating blog post when he says the following:
Tip
You can read the rest of Michael Riddering's take on how Webflow changed his design and development process here: https://www.michaelriddering.com/blog/the-tipping-point-in-my-career-as-a-product-designer.
Part of the reason why this is possible is that Webflow's opinionated take on how to design and build websites is almost always an up-to-date reflection of the state of modern web development best practices. For the curious or more technically inclined, this is evident by the source code Webflow automatically generates for everything that is designed in its editor. The source code is popularly viewed as the cleanest, most bloat-free code by any web builder of its kind. In fact, you can even choose to export all its generated code, transfer it to any hosting provider of your choice, and publish it successfully with hardly any hitches.
As such, while it is indeed true that Webflow will likely take you longer to master, it is my belief that the rewards are far greater than using other web builders; you will not only build solid, professional, flexible, and exciting websites, but you will also gain a much deeper understanding of what it takes to build for the modern web.
Concern 2 – Will Webflow scale well to larger projects?
This concern was more commonly raised during the early days of Webflow, and typically by those who were looking for web builders for more complex needs. Yes, it was positive and promising to see that the code it generated was remarkably readable and efficient, but could it support websites that needed tens, perhaps even hundreds, of pages?
Like any forward-thinking product, Webflow has put in significant effort to evolve with the times. The platform has matured and produced many success stories that demonstrate its capability of supporting large, moderately complex, production-grade websites. If you want to get an example of how large a website can get with Webflow, I invite you to visit its website, www.webflow.com. Nearly the entire site, including its Community pages and Help documentation, all of which contain likely hundreds of pages, is built in Webflow.
Furthermore, it is worth noting that if you're looking to build enterprise-grade websites that are fast, stable, secure, scalable, and supported by a rockstar team, Webflow offers a business plan that provides all that and more.
That said, in this book, we'll dive deep into some specific Webflow capabilities and features that will hopefully show you how practical and easy it can be to spin up and scale fully responsive and beautiful websites effortlessly with little to no code.
Concern 3 – What kinds of websites can I build with Webflow?
Webflow is sometimes thought to be largely suited to single-page marketing landing pages. And while this is definitely a use case that Webflow excels at, it is by no means limited to it.
As mentioned previously, Webflow's capabilities afford it the ability to rapidly build out large and moderately complex systems, including multi-page sites, news publication-style blogs, curated directories, highly interactive multi-media showcases, dashboards, and more.
And while, at the time of writing, Webflow does not have any native support for advanced capabilities such as user profile registrations and account management, the industrious No-Code community has built various add-ons and third-party services that can be integrated into Webflow sites to address this. With the proper setup, Webflow sites have even been used in creating user-driven, dynamic websites that collect information, save information, and display information depending on who is accessing it.
And if you really want to get fancy, look no further than the works of prolific Webflow developer and builder, Sarkis Buniatyan. His concepts are full-blown recreations of highly complex interfaces, such as the strategy game Civilization, and even Playstation 4's UI.
Figure 1.1 – Clone of Civilization VI by Sarkis Buniatyan
Tip
You can explore this project and many more by Buniatyan and his team on their Webflow Showcase page: https://webflow.com/Protocore.
If anything, this should excite you about the potential that Webflow has in your prototyping and development workflows. The limit really is your imagination!
While most of the preceding use cases are beyond the scope of this book, take heart in knowing that Webflow has been built for resilience and flexibility. The projects we will go through will arm you with enough about the fundamentals, some advanced concepts to get you up on steady and confident feet and will set you up to start taking Webflow in whichever direction you want.
Concern 4 – Is Webflow too expensive?
This one is unfortunately more difficult to address. Webflow is offered in a number of differently featured tiers or plans. In fact, the sheer number of ways a Webflow setup can be priced can be dizzying! Depending on what you're looking to achieve with Webflow, you could find yourself using it without paying a dime all the way up to paying a fairly hefty amount in any given year. In Chapter 3, Setting Up Your First Project, we'll be covering the Webflow plans in more detail, but for now, rest easy knowing that you should be able to cover a fair bit of ground in your leveling up of Webflow skills on the free plan, which we'll be using for the majority of this book.
But what if you're considering whether it makes economic sense as a tool for your freelance work, maybe? Or your personal projects? Or your small business? Would it be prohibitively costly?
Unfortunately, there's no easy answer to this except for it depends. What features and capabilities of Webflow do you need? Will you be looking to use its CMS? Will you be looking to create an e-commerce store? Will you rely on Webflow to host your site, or do you have your own hosting domain? Are you just looking to use it to prototype your ideas?
Most of all, it will come down to knowing your alternatives. Will you be able to achieve your goals by using a free WordPress template and simply pay for your hosting costs? Will you need to outsource the work to a third party? Will you generate enough income from your website to pay for its costs? Does this matter?
Ultimately, you know your goals and limitations the best. By listing them and knowing what you're looking to get out of a web builder solution, you can begin to compare whether it would be worth it for you to go with Webflow versus choosing any of its alternatives.
Deciding whether Webflow is right for you
So, now that we've covered some of the main questions and concerns about Webflow, how can you decide whether it is right for you? In general, if all the following criteria are important to you, Webflow is likely a great candidate to be your go-to web builder solution of choice:
- You want fully responsive websites that are interactive and feel custom-made.
- You want to minimize or eliminate coding.
- You want the flexibility to change and update not only the content of websites, but also their layout, structure, and overall look and feel.
- You want to create functional prototypes of web designs.
- You care about generating clean and efficient markup code that you can export or further customize.
- You care about learning the best practices of modern web development.
On the other hand, if the following criteria are important to you, then you may be better off exploring other platforms:
- You need only a single one-off website that likely won't need extensive custom styling. In this case, Webflow might be overkill and you may be better off considering a template from other web builders, such as Squarespace, Weebly, Wix, WordPress, or Carrd.
- You don't have the time or interest to customize web experiences.
- You want complex, scalable application capabilities such as Uber-like on-demand platforms, or video conferencing, or two-sided marketplaces. For these purposes, at the time of writing, you may want to consider other no-code builders such as Bubble or UI Bakery.
I will assume that by choosing to read further, you've expressed an interest to dive in and learn Webflow. Chances are also likely that you may have tried other resources. From its Webflow University to the many courses and videos that have been released by Webflow users around the world, there's no shortage of help!
So, where does this book fit in? Let's take a closer look.
