Articles

Webflow Article

Introducing the Winners of the 2021 CMS Critic's Choice Awards

cms-critic-staff

Featured image of the 2021 CMS Critic Critic's Choice Awards badge with text that reads "2021 WInners"

“To code, or not to code, that is the question…”Indeed. And Shakespeare would have loved the drama that followed. This fiery debate around code versus no-code web design has led to some pretty heated arguments. Here’s a snarky Tweet from Jeffery Zeldman, a heavyweight design influencer, from way back in 2009:<img src="https://cmscritic.com/ms-content/uploads/2023/08/jeffrey-zeldman-tweet-1024x404.png" />And another scathing transmission from Elliot Jay Stocks:<img src="https://cmscritic.com/ms-content/uploads/2023/08/elliott-jay-stocks-tweet-1024x457.png" />That one poked one too many bears, spurring Stocks to pen a looong blog post explaining his opinion. If you’re curious, you can read it <a target="_blank" href="https://elliotjaystocks.com/blog/web-designers-who-cant-code/">here</a> – but the gist of it is this: to understand design, you need to understand the medium. That makes a lot of sense, but it doesn’t negate the fact that many great web designers barely touch code.Even at the tail end of 2020, this philosophical disagreement continues. But as UI continues to abstract the complexities of code (think simple consoles in front of command line interfaces) the battle between coders and designers – and what constitutes a “web designer” – has grown a little less contentious. Or has it?<h3>A Brief History of Web Designers</h3>Before the dawn of the modern web, software interfaces were stark and cumbersome, lacking the visual elegance and intuitiveness that came later. Engineers ran the show, and front-end experience was often an afterthought.Print and visual designers helped mend the fence, bringing the tenants of their trade from pages to screens – evolving the medium to what might be called “high art.” Developers learned to value UI design, adapting to the principles of the process. Many designers also learned HTML to gain greater control over the experience.Coders learned design. Designers learned to code. And all was right in the universe.Well, not really…With traditional designers wanting to (you guessed it) focus on design, applications began to answer the call. <a target="_blank" href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> and <a target="_blank" href="https://en.wikipedia.org/wiki/Microsoft_FrontPage">Frontpage</a> started as clunky editors with development tools and preview capabilities, but eventually became drag-and-drop builders. And as code started disappearing, designers started relying more on pre-built templates and off-the-shelf libraries.Fast-forward to 2020, and ultra-slim SaaS platforms like <a target="_blank" href="https://www.squarespace.com/">Squarespace</a> and <a target="_blank" href="https://www.wix.com/">Wix</a> can turn almost anyone into a “web designer.” The problem: they lack the ability to truly customize with code. And the code they produce is always messy – resulting in slow, low-ranking websites that aren’t always responsive.But what if you could have the best of all worlds: a sleek, drag-and-drop website builder that’s perfect for no-code designers, but a platform that still gives developers access to code, so they can customize at will?In this review, we’ll take a look at Webflow: a platform that claims to do just that – and more.<h3>Enter Webflow</h3>Webflow has become one of the most popular website builders on the market. It provides a drag-and-drop user experience that puts out clean code, creates responsive websites that work well on every device, and doesn’t take a side in the design versus code debate. In essence, it caters to everyone that considers themselves a “web designer” and bridges the design/code chasm.<img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-interface.png" />What makes Webflow unique is that it’s a hybrid of a cutting-edge website builder and a sleek content management system (CMS). It brings together a complete site designer, e-Commerce solutions, and even hosting – all with the ability to choose what you need, and customize with code at almost every turn.Let’s explore some of the noteworthy features of Webflow.<h3>Webflow Designer</h3><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-designer.jpg" /><img />As Webflow’s flagship product, Designer is where you create websites and visually manipulate HTML, CSS, and other interactions. When you create any elements in Webflow, the code is automatically generated behind the UI.On the left side, there’s the Elements panel where you create elements, the pages panel where you can organize and manage page settings, the Webflow CMS for accessing your collections and dynamic content, and the asset manager where you can upload and organize your stuff. At the bottom of the toolbar, you have more granular controls for working with elements – as well as links to video lessons, help, and keyboard shortcuts.In the middle, there’s the “canvas” where you can interact with your page in real-time. You can select elements, move them at will, and edit the content right on the page.<img /><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-ui-editor.png" />Now, we’ve already mentioned Webflow’s capacity to produce clean code – and it’s true. The platform adheres to modern web conventions, using real HTML elements like divs. When you create a navigation bar, for example, you don’t draw a rectangle; you select a div element and then adjust its height, width, and other properties.Like some other web builders, Webflow uses a box model. All elements are boxes, and they naturally sit next to each other or stack on top of one other depending on their properties. Like Photoshop, Webflow allows you to position boxes anywhere on a given layout while providing responsive actions with clean, production-ready code.At any time, you can export your code or publish your changes instantly without having to worry about FTP or file versions. One immensely useful feature is the preview, which allows you to see and interact with your project as if it was already published.Finally, on the right, there’s the style panel, which is very similar to Photoshop (in fact, it looks eerily close). Here, you can access granular control over your elements. If the left panel is where you organize the structure of your pages with HTML, the right panel is where you control CSS for styling your elements.You can also create custom interactions with the Javascript control panel. Webflow's animation tools bring all the power of CSS and JavaScript into a completely visual tool, empowering designers to build complex, rich animations. You can easily create scroll-based parallax animations, progress bars, or whatever else you dream up – all without touching code.<h3>Webflow CMS</h3><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-cms.png" />Most websites rely on some kind of a CMS. Webflow takes their design capabilities a step further by integrating a rock-solid CMS into their platform. This enables web designers to build and dynamically manage their websites in one place.With Webflow CMS, you can create the content structures you need, add content (by hand, from a CSV, or via Webflow API), and then design it all visually. This makes the Webflow CMS work for editors, designers, and developers alike. In many ways, they’ve simplified the experience of other all-in-one platforms, even the <a target="_blank" href="https://www.cmscritic.com/gutenberg-2-years-later-is-wordpress-better-off/">WordPress Gutenberg</a> editor.Webflow CMS also allows you to create custom content types with their “CMS Collections.” For example, you can have a collection of blog posts, authors, clients, projects, and so on. For eCommerce projects, that can include products and categories.<h3>Webflow eCommerce</h3><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-ecommerce-scaled.jpg" />The latest addition to the Webflow’s feature set is their eCommerce suite, putting them squarely in the ring with <a target="_blank" href="https://www.cmscritic.com/shopify-review-ecommerce-only-simpler/">Shopify</a> and <a target="_blank" href="https://www.cmscritic.com/10-reasons-why-woocommerce-is-perfect-for-ecommerce-startups/">WooCommerce</a>. The strength of Webflow’s eCommerce is that you can fully customize the online shopping experience without being constrained by built-in templates. You can customize everything from product pages to shopping carts to checkout.eCommerce also comes with its own set of pricing plans, which we’ve outlined later in this article.<h3>Webflow Hosting</h3><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-hosting.png" />We all know that hosting can be a hassle. You have to find the right platform that works with your website and CMS, then deal with endless technical considerations such as domain setup, FTP, cPanel... the list goes on.Webflow makes it easy by hosting directly through their platform. It’s all powered by Amazon Web Services (AWS) and Fastly – a content delivery network (CDN) that accelerates the performance, security, and redundancy of your website. You get fast-loading pages and you never have to pull your hair out updating PHP on your server.Webflow’s hosting also comes with these features:<ul><li>Backups and versioning: Preview and restore your site from ongoing, automatic backups, or create save points to mark progress and track changes.</li><li>Password protection: Gate individual pages or your entire website to protect in-progress work or restrict access.</li><li>Custom forms: Create unique forms to collect data from customers and connect them with marketing automation platforms as needed.</li><li>SEO management: Keep your SEO in check with 301 redirects and a customizable XML sitemap.</li><li>Integrations: Easily add Google Analytics, Google Optimize, and other marketing tools by dropping custom code snippets in your site template.</li><li>Site search: Create a custom search engine for your site with full control over the look and feel of your search results page.</li><li>Zero maintenance: No updates to run or packages to install. Just publish your site and Webflow will take care of the rest.</li></ul><h3>Pricing</h3>So far, Webflow offers a lot of value as a website builder, CMS, eCommerce, and hosting platform for almost any kind of web designer. But from a pricing perspective, things can get a little tricky.There are basically two types of plans on Webflow: Account Plans, which allow you to design and publish websites using a Webflow domain (like “yourwebsite.webflow.io “) – and Site Plans, which let you connect a custom domain.Sure, you can build a killer website with just an Account Plan. But if you want to publish a website on your own domain, you’ll need a Site plan for every website – and that requires hosting as well. Each tier places a cap on the number of pages you can build and form submissions you can receive – unless you go full enterprise, where everything’s included.Account PlansFor all intents and purposes, everyone starts out with an Account Plan. But now, there are two types of Account Plans to choose from.Individual plans are great for solo designers like freelancers and gig workers. You can start for free and upgrade for additional features.<img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-account-plans-individual-plans.png" />Team plans are designed for orgs that want to work collaboratively.<img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-account-plans-team-plans.png" />All account plans include:<ul><li>Unlimited hosted projects: With Webflow, your hosted projects don’t count against your plan limits, so you can build as many websites as you want.</li><li>Client billing: Charge your client for your bill instead of paying out of pocket – or charge any amount and make a profit.</li><li>Interactions &amp; animations: Create custom interactions and animations to make your site stand out, all without coding Javascript.</li><li>100+ responsive templates: Don’t want to start from scratch? Select from hundreds of pre-built templates.</li><li>3D transformations: Change positioning, add skews, and rotate objects in 3D space.</li><li>Global swatches: Define key colors as variables, so every instance of that color updates whenever you change it.</li><li>Custom fonts: Upload your own fonts or add free Google Fonts.</li><li>Flexbox: Build flexible, responsive layouts with the power of flexbox in a visual interface.</li><li>Reusable symbols: Turn any recurring element into a reusable symbol that you can update across your site in one edit.</li></ul><h3>Site Plans</h3>With site plans, you can choose from the standard package for personal, blog, and business websites, or the eCommerce plan that enables advanced shopping cart capabilities.Here’s a rundown of what Webflow Site Plans offer:<ul><li>Basic – At $12/month, it’s a solid solution for simple websites that don’t require a CMS. You also get CDN availability, 500 form submissions, free SSL certificate connection, domain connection, and more.</li><li>CMS – For $16/month, you can uplevel your blogs and other content-driven projects with the Webflow CMS. Includes 2000 CMS items, site search, 1000 form submissions, limited CMS API, and up to 3 content editors.</li><li>Business – Coming in at $36/month, this is a great pick for high traffic marketing projects or full-featured blogs. Includes unlimited form submissions, full CMS API, advanced global CDN, up to 10 content editors and more.</li></ul><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-site-plans.png" />All Site Plans include:<ul><li>Backups &amp; versioning: Automatically save and create restore points – so you never lose your work.</li><li>Password protection: As noted before, you can gate your whole site or individual pages.</li><li>Advanced SEO controls: Generate automatic sitemaps and customizable 301 redirects for complete SEO control.</li><li>Fast page loads: Accelerate your performance with Webflow’s Tier 1 Content Delivery Network solutions.</li><li>SSL and security: Get 24/7 hosting, monitoring, and SSL certificates to keep your site secure.</li><li>Immediate scaling: Webflow provides scaling and bursting regardless of how many concurrent users you have on your website.</li></ul>As we said earlier, Webflow’s eCommerce are add-ons to their Site Plans:<ul><li>Standard – At $29/month, this is a perfect starting place for new businesses. You get all the features of the CMS plan plus custom checkout and shopping cart, email customization, a 2% transaction fee, integrated CMS for blogs, and more.</li><li>Plus – For $74, Plus provides a solid solution for higher volume businesses that need more features and capacity. Includes everything in the Business plan plus unbranded emails, 10 staff accounts, and zero transaction fee.</li><li>Advanced – If you’re serious about eCommerce, then $212/month will get you all of the most advanced features on top of the Business plan. Also includes 15 staff accounts, unlimited yearly sales volumes, and more.</li></ul><img src="https://cmscritic.com/ms-content/uploads/2023/08/webflow-ecommerce-plans.png" />Finally, if you want to go full Enterprise, Webflow has some custom options that require a phone call. That can include specialized dashboards, enterprise-grade scalability and support, and more.If you’re ready to kick the tires, you can <a target="_blank" href="https://webflow.com/dashboard/signup">sign up for a free version</a> without giving your credit card – and Webflow will let you build 2 projects (meaning 2 websites) for free. These unhosted projects will have a two-page limit, but you can purchase a site plan on a per-project basis to unlock up to 100 static pages and additional CMS pages.<h3>Conclusion</h3>Whether you prefer drag-and-drop over code or vice versa, web designers of any kind can get a lot out of Webflow. It’s a really impressive platform – and does more to unite the ideals of pure web design with coding than ever before. It also manages to bring the power of CMS, eCommerce, and hosting into a single, integrated platform. That simplifies things for a lot of users but might prove too monolithic for others who want to build a custom stack.Webflow offers almost everything you need to launch beautiful, responsive, fast, and secure websites. The only downside is its steep learning curve. In a sense, it almost has its own proprietary or tribal knowledge for cracking the usability. It’s not as simplistic as say Squarespace, and it can take a while for the unindoctrinated user to fully understand.  Thankfully, they do offer a lot of tutorials – another aspect of their product that reminded us of Adobe.If you’re a developer, some users have found Webflow to be a bit confusing – but it still manages to provide a solid platform for building custom apps. With a JSON API for the CMS, it also delivers the hub for connecting and integrating with external data sources.Maybe the loudest complaint across the feedback channels is with pricing. Many users find it too difficult to understand, and more than few suggest that it’s on the expensive side. All things being equal, Webflow provides a lot of flexibility and choice for any web designer (whatever that means) to find the right plan – and start building.<h3>About Webflow</h3><a target="_blank" href="https://webflow.com/">Webflow</a> is a web design tool, CMS, and hosting platform in one. Webflow allows users to design, build, and launch responsive websites visually, while writing clean, semantic code.

Webflow Review: Hybrid Website Builder and CMS Bridges the Design/Code Chasm

paris-tuzun

Explore a wide range of informative articles on Webflow, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry

News

Introducing the Winners of the 2021 CMS Critic's Choice Awards

Webflow Review: Hybrid Website Builder and CMS Bridges the Design/Code Chasm