By Kasia flood
|
September 21, 2024
Powering roughly 42% of the web (Search Logistics), even business owners whose expertise fall outside of web design are familiar with Wordpress. Other web platforms on the tip of most tongues today include Wix and Square, largely thanks to their heavy amount of consumer advertising.
When it comes to building a custom site— something I always advocate for businesses looking to establish a strong brand online, many are surprised when I suggest another alternative: Webflow. Founded in 2012, Webflow is a newer website platform to those formerly mentioned, but having completed their series C funding in 2022, they’ve created a really unique platform, risen to a valuation of 4 billion, and amassed a highly loyal following.
I typically describe Wordpress as the generalist solution, while the others have carefully carved out niche specialties. You can build pretty much any website with Wordpress, but the moment your needs tread into the territory of one of the specialized tools you’ll likely achieve better results with them.
When it comes to building truly custom websites that can be transferred over and maintained easily by a growing business, this wittles your list down to Wordpress and Webflow. There’s no shortage of articles comparing these two, but few seem to scratch beyond the surface. From those I’ve read, few explore these platforms from the vantage point of which better progresses your brand’s image. That’s the core goal of this review which is broken down into four core sections: Structure, Design, Content Management System (CMS) and Maintenance.
To understand the key differences between both Webflow and Wordpress, it’s important to first understand their general structure and how the two differ.
Most comparison articles delve into the breadth of templates/themes available for each platform, but if you’re looking to truly differentiate your brand online this likely won’t matter. A great brand is one that delivers value within the simplest and most positive experience possible and that’ll never come from a template. A beautiful aesthetic is certainly achievable with pre-made templates, but the general user experience (UX) is already fixed without the required understanding of your business’s context, audience and specific site goals.
Wordpress’ default drag-and-drop editor “Gutenburg” is woefully lacking in design functionality, however, multiple third-party plug-ins such as Elementor have filled this gap. Because of this, this section focuses on the experience and functionality of Webflow and the Wordpress/Elementor pairing. With this in mind, both platforms check the boxes on most core design needs, however the experience differs.
Both offer the ability to preload brand styling such as colours, fonts and sizing for consistency, ease of use and leaner code. Within Wordpress/Elementor, global styles are set within the site’s general settings, whereas in Webflow they are managed within the tab “Variables” inside the designer. These can then be selected easily when setting the styles for any element. Within their platform, Webflow really pushes designers to take advantage of these presets by making them the default option and dismisses them only when the designer chooses to “break” the style. While this makes little difference to an experienced designer within the original site building stage, it makes maintaining a consistent brand easier in cases where the completed site is handed off to someone else to maintain.
Creating a usable design that looks good on different screen sizes is possible on both platforms. Both sites default to a desktop screen size with any changes cascading to smaller or larger variations. In either platform, the designer can select the desktop, tablet or phone icons from the top of the screen to view the applicable breakpoint’s layout, but that is where the similarities end.
Within Wordpress Elementor, only certain styles can be adjusted for different breakpoints without custom code and is achieved through a drop down within the styles panel for each unique setting. This results in a ton of unnecessary clicking for any substantial edits and minimal differences between the desktop and mobile versions.
Within Webflow, anything can be customized for any size without code. This means you can create a truly custom experience that caters to the unique habits of desktop and mobile users. Viewing anything other than the default size will automatically apply the new styling to that size. This produces a significantly simpler workflow, however, can prove problematic if you forget to switch back to desktop for any significant changes intended to be global.
The ability to create reusable components is available in both platforms, however, this is another case where Webflow has included additional dynamic functionality. Referred to as a “global widget”, designers can save sections of designs within Wordpress that they’d like used across the website. Changes made to one impact every instance of that widget on the site. Webflow’s “components” offer the same benefit, however, enable designers to alter text and images with both static and CMS-driven values. This is a huge time-saver, letting designers create one element (ex. a card) and drag-and-drop it throughout the website easily, but set unique content for each instance they desire.
The layout of Elementors site builder is visual and highly approachable, making it possible for nearly anyone to get started following a few quick tutorials and experimentation. The builder is stocked with a library of drag-and-drop widgets which can be styled within the left-hand panel. These widgets include structural elements like flexboxes and div blocks, as well as pre-built functionality like tabs, buttons, hero banners and pricing tiers.
Understandably, building the site through plug-ins can result in a somewhat fragmented experience with jumping in and out of the builder and Wordpress for different needs. While high levels of customization can be achieved, the interface doesn’t overly facilitate it. For example, within Elementor, nearly all standard styling like padding, strokes and rounded corners are hidden under “Advanced Features” tabs making for a clunky experience riff with unnecessary clicking.
Meanwhile in Webflow, virtually every aspect of site structure and styling is handled natively within the Designer. From positioning, typography, backgrounds, borders and effects, everything is visible on one screen. This seamless integration of content, structure and design makes it incredibly easy to establish a creative, smooth and iterative workflow.
The learning curve within the Webflow Designer is no joke. While the interface is reminiscent of other design tools like Adobe CC, it's actually visually building code. Because of this, I’ve seen several designers hop in and underestimate its complexity. The most common error I’ve seen is a lack of understanding around CSS, either inadvertently making changes across the site that were intended only for one specific place or creating unique styles for everything rather than reusing and compounding classes. Fortunately, Webflow’s “University” offers an impressive library of tutorials around these topics and the automatic backups make it easy to roll-back potential missteps.
Both builders offer powerful CMS capabilities, with subtle differences that could make or break the decision to advance with either.
Wordpress’ off the shelf CMS is simple and comes with pre-built functionality that many serious bloggers will likely gravitate to. Heading this list are interactions such as comments and likes and real-time content filtering. These are standard features across any Wordpress site and can easily be dropped into any content page, making it a clear winner for those who want back-and-forth communication. These are amongst the rare features that Webflow does not include natively. Comments requires a third-party plug-in to accomplish, upping the general time and cost to maintain, while “filters” essentially require copy/pasting content within a tabs menu– both are less than ideal. You can easily add additional editors with little cost, and reader interactions like comments or likes are natively offered. For content happy teams or solo-preneurs looking to publish or tweak content on the fly, the mobile app is an appreciated feature and countless editors can be added at no extra cost. Finally, for those looking to migrate their site or restructure content, Wordpress’ ability to backdate publication dates is incredibly helpful. Workarounds can be made in Webflow, but they are a continued pain for future articles.
Webflow stands out for its unique ability to create custom CMS “collections” and structure your content however best fits your needs. For each “collection”, you can define up to 30 custom fields including colours, toggles, tags/categories, media, files and references to other collections. You can easily jump back and forth from the Designer to the CMS for tweaks as you build unique elements within the site that perfectly showcase your content. Within Wordpress, custom content input fields can be achieved with third-party plug-ins like Pods or Advanced Custom Fields, but the experience is fragmented and takes longer to set-up and adjust. Webflow’s collections facilitate smart, story-first design in a simple workflow that’s hard to stray from once you’ve experienced it.
Although it doesn’t directly impact the brand experience, no comparison article would be complete without an exploration into the maintenance required for each platform. A lot of comparable articles label this section as “cost”, but ultimately only look into the upfront billing costs of each solution. I find this incomplete. There’s two aspects of site maintenance: subscription pricing and your (or your employees’) time, both of which will cost you.
On the direct cost side of things, many will tell you Wordpress is free, unless... Unfortunately these “unlesses” tend to fit nearly every use case. Firstly, hosting is not included so you will need to find an additional provider like BlueHost or GoDaddy. If you want to use a design theme and/or a builder like Elementor, you’ll encounter annual subscription fees typically ranging from $25-200 annually. Finally, many functions such as custom forms, localization, animations, CMS field customization. and integrations require premium paid plug-ins which can add up quickly.
Comparatively, hosting a Webflow site is simple to calculate. Their all-inclusive packaging bundles hosting, the design platform, support and various site functions. Sites start at 14$/m for a basic site, 23$/m for CMS access and increase for added functionality like e-commerce and localization. It’s worth noting they are quite rigid in their payment structure compared to other providers, making it a challenge for organizations like non-profits. For example, applicable discounts are only available on the more expensive monthly option (minimizing the value of a discount), and credits or multi-year terms aren’t available, making it an ill-fit for organizations backed by timed funding cycles.
Any third-party plugins used within Wordpress will be found within the “Plugins” area of the main menu. From here, you’ll need to monitor them to ensure available updates are made. It’s not complicated, but it can be a pain. Support varies by plug-in, but is understandably lowest amongst the free options.
Because all functionality within Webflow is native to Webflow, maintenance is virtually non-existent, updates are seamlessly delivered and there is one central support channel. Working within an in-house team, our Head of Operations was over the moon when we transitioned from Wordpress to Webflow back in 2019 as they no longer needed to be involved in the process at all.
The decision ultimately comes down to your brand strategy and which is more important to its execution: a differentiated visual design or a full feature blog. If you’re looking to customize every aspect of the site experience, break the mold visually or delve deep into animations, Webflow will be your winner. If you foresee your blog being published on the go, by multiple contributors and generating discussion within the comments section, Wordpress will be a better fit.
When factoring in paid design plug-ins within Wordpress, Webflow’s hosted CMS package will still be roughly twice the price annually. While the difference is only about 150$ annually, this can be prohibitive for some start-up or hobbyist sites.
Interested in e-commerce comparisons? Still debating between which tool is right for you? Shoot me a quick message, I’m always happy to chat!
True North Digital is where creativity and strategy meet for exceptional results.