Take The Pain Out Of Website Design With Webflow

A new trend in web development is the rise of the “No code website”

No-code is a concept which  sprang from the need for non-technical designers to be able to gain more control over website layout and appearance.

A (very) brief history of no-code

The No code website movement has been around for decades.

In 1982, James Martin published his 15th book, “Application Development without Programmers”

The number of programmers available per computer is shrinking so fast that most computers in the future must be put to work at least in part without programmers.

A visionary, who predicted the rise of the internet as long ago as 1977 in his book “The Wired Society”, he realised we would eventually reach a point in our technological advancement as a society where computers will carry out many tasks without the assistance of programmers.

Of course, programmers still have a vital role to play in society, building and harnessing the power of software.

But we also have access to tools which allow non-technical designers, artists, business owners and others to craft stylish and striking websites without technical assistance.

Wix.com – One of the first No-Code solutions

I first became aware of the Wix and the no code website movement in 2015 when I saw adverts for wix.com, a no-code solution founded in 2006.

It allows non-technical users to create visual layouts and incorporate complex functionality which would otherwise require significant development resources to build from the ground up.

Reaching 1 million users by 2009, Wix rapidly became a very popular tool for building sites.

Rapid growth led to widespread adoption and by 2021, Wix saw the release of a brand new editor experience – Editor X – and its 200 millionth user.

I’ve always coded my website from templates within a code editor such as VS Code or Sublime Text

I use WordPress to create cool and creative solutions for clients. It’s a powerful tool and one which I continue to use daily.

I was never that impressed by Wix at the time, but I’ve realised that newer no code website solutions can be extremely useful!

For much of the history of the no-code movement, tools such as Wix were limited and no match for the flexibility and power which WordPress could provide.

In terms of content management, No-Code tools like Wix were very handy for people with limited technological know-how, but WordPress continued to be the king of the content.

Comparisons between Webflow and Wix

One of the big differences between Wix and Webflow is the access that they provide to the underlying structure of the website’s code.

Where Wix only provides basic editing functionality to modify layouts and appearance on the surface level, Webflow goes a step further and relies on a designer’s underlying knowledge of CSS and HTML.

For example, Webflow offers direct implementations of CSS properties such as:

• Position: Absolute, relative, fixed
• Padding and margins: Adjust the spacing around blocks of text or other elements
• Transforms and animations: Implement movement and interactive responsiveness
• Opacity: Adjust the transparency of web elements

CSS and HTML are fundamental building blocks

You’re looking at these technologies right now, they’re behind every single page on the internet.

CSS is an extremely powerful and expressive language which can be used to adjust appearance and layout down to the pixel. It can control the size of fonts, the precise pixel distance between letters or the spacing around a paragraph.

HTML is a fluid and eloquent markup language which lets no code website builders commicate intent with ease.

Webflow Builds Upon The Internet

Webflow replicates this accuracy within its editor interface.

Webflow users can precisely modify the position and appearance of any layout with the same precision that CSS + HTML allows, bringing the full power of technical development solutions to a drag-and-drop editor interface.

In many ways, you could think of Webflow development as a “low-code” solution. Experienced developers can add new functionality that the Webflow interface otherwise doesn’t offer.

WordPress has been around a lot longer than the no-code solutions. Founded in 2003 by American blogger Matt Mullenweg and British blogger Mike Little, it started out life as a simple blogging platform.

Over the years it has grown into an extremely potent and widely used content management system which powers a lot of the internet – hundreds of millions of websites currently run, very successfuly, on WordPress.

WordPress > Webflow

WordPress offers a significant benefit over Webflow in that it is completely free and open source. You have complete freedom over a project’s files, the hosting location and costs.

Not being tied down to an individual service provider can be seen as a real bonus in the eyes of many stakeholders.

However, it’s not without its limitations. Compared to Webflow and other no code website solutions, WordPress is:

• Prone to issues with performance and security. However, these are limitations which can be easily mitigated through curation of the best plugins and installation of some fairly straightforward security measures. The average WordPress installation can be locked down and hardened against intrusion in less than an hour.
• More difficult to develop and design for. Obviously, compared to an intuitive drag-and-drop system with as Webflow, WordPress will always lag behind in this regard. But with this complexity comes absolute freedom to develop extremely powerful and extensive data-driven solutions. There’s no limitations to the types of data you can store or display. And, with WordPress you have access to its extraordinarily large collection of plugins. There are thousands to choose from, including extremely high profile plugins such as Gravity Forms or WooCommerce, which bring very powerful form functionality and e-commerce functionality to WordPress.
• More expensive to develop for. Naturally, a system like Webflow that’s cheap to access and quick to pick up will be more affordable. But many clients still find that to get the best results from Webflow, they need to turn to professional agencies too.

There’s no perfect solution when it comes to choosing a website development platform. Either Webflow or WordPress are good choices. Each comes with its pros and cons.

Everything In Its Right Place

Personally, I’d recommend Webflow for fairly straightforward sites – brochure sites, perhaps, where only a few pages of information are required. For more data-intensive websites, I’d turn to WordPress, as it is unmatched in terms of its potential for much more powerful websites (Even more options open up when considering even more powerful systems like Laravel, which is capable of handling data relationships and complex app structures on an enterprise scale)

Natively, WordPress offers nothing to compare to the editing experience of Webflow.

It has a block-based page editor in the form of Gutenberg, the in-built (and still very powerful) drag-and-drop editor which provides administrators and editors with a lot of creative potential.

But that still doesn’t compare to the visual front-end experience which Webflow development provides.

Elementor, Dear Watson

Enter Elementor, an extremely powerful page builder tool provided either as a free or licensed add-on for WordPress. The free version offers a great deal of functionality out-of-the-box but the licensed version provides a heck of a lot more!

I chose Elementor to build Solarise.dev with, the site you’re reading right now, and it’s a fantastic tool for enabling rapid creative decisions and content management.

I still find it slightly restrictive compared to handcoding templates from scratch, but I am extremely biased in that regard, coming from a deep programming background! But I love Elementor all the same, and really enjoy the creative freedom it allows me without having to worry too much about spending a lot of time coding.

A Lot Of Flexibility

The structure of WordPress still allows for a great deal of additional coding and styling though, through WordPress’ native template hierarchy and template code. For example, on this page I’ve built up the majority of the layout using Elementor blocks but I’m using Gutenberg to populate the content (I find it’s a nicer, distraction free environment) and have applied some additional styling flourishes using rules defined in the template’s CSS file

A site could be built entirely with Elementor as the driving force behind the layout and appearance though. It’s an absolute contender which stands up well against Webflow and other no-code solutions, providing clients, developers and stakeholders with a real wealth of choice when it comes to choosing a web development solution.