Journal
Webdesign

Webflow vs. WordPress: What’s the best fit for your project?

Self-Portrait
by Andreas Kuhnen
Published:
April 8, 2022

To answer in a nutshell – it always depends and there is no one-size-fits-all answer to the question. In this article I will write about my hands-on experiences with both systems and explain why I as a designer was quite enthusiastic about Webflow from the very beginning, after many years of working with the WordPress CMS, WordPress templates and its no-code page builders.

In 2011 I implemented my first client project based on WordPress. In 2021, however, Webflow was eventually one of the main reasons for me to become a full-time self-employed web designer. Therefore, I can not completely preclude that in this article at one point or another my personal opinion shines through. Nevertheless, I aim to remain as objective as possible to give you a good overview of both systems and to ground my judgment.

At the end of the article, I will also provide links to sources with further content, in which the differences, as well as advantages and disadvantages of each individual system are once again considered in more detail.

About WordPress

WordPress has been around since 2003 and was originally designed for creating, managing and publishing blog articles. As an open-source project, it has been continuously developed ever since. Today, WordPress is one of the most widely used systems for running websites and can be flexibly extended by many functions thanks to numerous plugins.

About Webflow

Webflow was founded in 2013. It was intended to bridge the gap between do-it-yourself construction kit systems like Wix or Squarespace, traditional content management systems (CMS) like Joomla, Drupal, Typo3 or WordPress, and "manual" front-end web development. As Webflow enjoys ever-increasing popularity, the founders have now achieved this goal quite successfully after some ups and downs.

Development & code quality

Web designers are now also provided with no-code tools such as Elementor when developing with WordPress, analogous to Webflow.

Alternatively, WordPress websites can be built on existing templates or even custom designed and programmed from scratch. For the implementation of individual layouts, however, in-depth programming knowledge is then required. In addition to font-end programming skills that include HTML, CSS and JavaSript, back-end knowledge of PHP and databases are also required. This can quickly drive up the development costs on a WordPress project.

The use of templates, Elementor or even plugins to extend the functionality often bring very different and thus "bloated", rather inefficient code to WordPress. This is often at the expense of website performance, which in turn affects usability, especially for mobile users.

Webflow is a no-code tool, with a vital difference to modular systems: Here, actual development is done without code. The result is semantically correct and – as long as you follow front-end best practices and CSS naming conventions such as BEM – rather efficient code.

Since Webflow also offers optional CMS functions, a website can be implemented comparatively quickly and efficiently by a trained designer compared to WordPress. The process of handing over a design to development is eliminated. Optimizations can be implemented immediately by a design expert, which ultimately benefits not only the quality but also the efficiency of the implementation.

Webflow development in “designer mode”.

However, no-code does not necessarily mean that it is easy to implement a complex, responsive website with Webflow. Again, some web design skills are required, and programming skills can come in handy when it comes to extending Webflow’s native features with your own code. Also, of course, there is a risk that beginners will make mistakes when developing and building a website which ultimately can be costly to fix later on in the development process.

However, in direct comparison with WordPress, Webflow is in my view far superior in terms of efficiency and code quality and, at least in my experience, qualitatively significantly better results can be achieved in less time.

Responsive high-end design

As described above, for webdesigners there are certain limits to the design by WordPress through templates or the need of elaborate programming. Elementor does allow you to implement relatively pixel-perfect layouts, but the tool is still incomparably further away from development than Webflow, since it is strictly speaking just a plugin that runs on WordPress. Also, regarding Elementor’s functionality, in my experience, you have to be willing to make certain compromises in design quality or not be afraid of the cost of custom, manual development.

Webflow can theoretically be used to implement any layout with relatively efficient code, assumed it meets the requirements for modern responsive design. Backend functionalities, which are relatively complex to implement with WordPress, can be implemented comparatively easily and intuitively with Webflow. Nevertheless, the possibilities are not unlimited even with Webflow: Although the CMS is powerful, not every conceivable concept can be realized with it. Furthermore elaborate animations can be less performant when implemented in Webflow compared to manually written code by experienced front-end developers.

With Wordpress, many templates are responsive by default, meaning they work for all screen sizes, or devices. While I have less experience implementing responsive designs with Elementor, I have had some experience customizing WordPress templates. It was often the case that templates that needed to be customized – for example, the main menu needed to be extended with additional menu items – no longer behaved correctly on different so-called breakpoints. The only way to fix this without manipulating the basic programming of the template was to use custom code to override certain CSS properties of the menu. This was often not only time-consuming work, but also represents a rather messy solution from a programming perspective.

In Webflow, however, responsive designs can be implemented relatively quickly and efficiently: Four to five breakpoints are already predefined. CSS properties are “inherited” from the largest breakpoint downwards in a cascading manner: this means that desktop properties are inherited by the lower breakpoints until adjustments are made manually for a specific breakpoint (e.g. of a tablet). These new adjustments are then also inherited further down. Usually, responsive web development requires designs to be created for different screen sizes, or “device sizes”, to ensure that a design works optimally on all devices and screen sizes. Today, I can skip this additional work step, as I can view and optimize designs quite quickly directly in Webflow on specific breakpoints. So Webflow offers full control over responsive design and it is comparatively efficient to ensure that a website meets high functional as well as aesthetic standards for mobile visitors.

The backend & editorial maintenance

WordPress has roles that can be assigned to people to restrict access to certain content and features. This is especially useful to prevent unintentional changes to the layout or functionality of a website, for example, by allowing only editorial content to be edited and published through certain roles.

From experience I know that the backend of WordPress is not necessarily optimized for usability. Important functions are sometimes found in different or unnecessarily deeply nested menus. This can of course be explained by the history of WordPress and is due to the fact that on a WordPress system often several instances of additional systems such as templates, page builders and plugins are installed and run in parallel. This complexity then often not only negatively affects the usability, it also makes a complex website relatively error-prone.

The backend in the Webflow ”editor-mode“ for the editorial maintenance of content.

Webflow also has roles for editorial maintenance of content. Depending on the hosting plan, different numbers of people can be added to a project as "editors". These can maintain the site as well as dynamic content, such as blog articles in the back-end, as well as in a visual front-end editor. The interface is designed to be relatively user-friendly and can be operated independently by customers after a short training period. It is also impossible to manipulate the code and thus limit the functionality of a website.

In “editor-mode”, content can also be changed directly in the front-end view.

Security & maintenance

Since WordPress is very popular and widely used, it is unfortunately also a popular target for cybercrime. However, WordPress is constantly being developed, updated and security holes are being closed. Since the WordPress CMS is usually hosted on custom servers, the system must be updated manually on a regular basis. Occasionally plugins templates or parts of their functionality are not compatible with the latest updates. It is therefore recommended to make a backup before applying a new update, which can then be used to undo changes to the installation if necessary.

Webflow pages are usually hosted on Webflow’s own servers. The pages can also be exported, but then certain functions such as the CMS can no longer be used. Even though this can feel like a restriction, it also comes with an advantage: Webflow is continuously developed, updates are rolled out automatically and as a user you will not notice anything, except that occasionally new features are released. So unlike WordPress, you do not have to actively update the system.

Domain & hosting costs

Domain and hosting costs can be lower for WordPress websites compared to Webflow. All that is needed is a domain and a webspace that supports WordPress. Some providers offer both as a package already for between 2€ – 4€/month.

For Webflow only a domain is needed, the hosting is then done by Webflow. Hosting prices depend on the plan chosen and the features needed. A simple hosting plan excluding an own domain starts at $12/month for annual payment.

Webflow pricing.

So a WordPress based website can be run comparatively inexpensively when just comparing hosting costs. However, when evaluating the total cost of a website, initial development and potential maintenance costs, as well as additional content maintenance costs should also be taken into account, which are described more in detail above.

Flexibility of the system and developing a website further

Once a WordPress site is set up, it can be further developed comparatively well, at least editorially. However, as described above, additional features, functions or new page types often involve a great deal of additional effort and expense, especially if this content must first be designed and then individually developed.

Webflow is extremely flexible when it comes to further development of a live website. Editorial content can be added at least as easily as in WordPress. In addition, database entries can be exported, imported or even modified relatively quickly if new requirements are placed on the system via the design. For example, the introduction of blog categories or the expansion of pages with additional dynamic content such as team members is no problem at all and can be implemented even without programming skills.

Whereas with WordPress, both designers and developers often have to be commissioned for further development or the quality of the implementation suffers, adjustments and updates in Webflow can be carried out comparatively quickly and efficiently by experts.

Website performance

The performance of a website depends on several factors. On the one hand, the quality of the code must be quite good. On the other hand, images and graphics should be optimized for the web and – as well as external scripts and content – should only be loaded when needed.

A WordPress website can be very performant under certain conditions, but due to the complexity of the system there is a risk that achieving good performance is much more complex to implement than with Webflow.

Webflow websites can also be extended with external scripts and programming does not necessarily produce efficient code. Here, too, certain best practices must be followed in order to achieve good performance. However, the backend offers numerous options to create the best conditions for this. Even dynamic content, which is later maintained by editors, can be optimized so that only optimized images and graphics can be uploaded. In this way, above-average performance can be ensured for a Webflow website in the long term.

Testing & bugfixing

Like WordPress, Webflow is compatible with all major browsers. Nevertheless, the functionality of a website must be extensively tested and checked before publication, as different browsers often interpret certain CSS properties slightly differently or do not yet support some, especially new, features. However, display errors can usually be fixed quite quickly in Webflow, as long as you are familiar with the use of the developer tools of the browser of your choice. With WordPress, on the other hand, troubleshooting often turns out to be very tedious, as it is not always immediately clear which code components are manipulated or written by which plugin. In my experience, even small adjustments here can be extremely time-consuming.

Accessibility

The accessibility of websites will only be dealt with in a very abbreviated way at this point. It is, of course, a very important topic, which is naturally very suitable for a future blog entry. There are certain best practices to follow when it comes to accessibility, such as adhering to certain color contrasts for fonts and UI elements, font sizes, all the way to technical requirements such as machine-readable HTML structures. Webflow now offers practical audit functions to ensure basic aspects of accessibility.

Résumé

It has been a while since I have technically implemented web designs based on WordPress. In part, I have also created designs specifically for implementation in WordPress and therefore know the effort behind such a development. Nevertheless, the system is constantly evolving and I am sure that certain aspects will possibly evolve positively in the future.

During my time as a UX & UI designer in agencies, I often made the experience that especially the handover of designs to development teams is associated with certain frictions. More time needs to go into preparing screen designs and animations so that they can be implemented according to the original vision. Sometimes developers lack an eye for design details, but often also designers fail to consider certain technical aspects of responsive design or interaction states, resulting in errors that could actually be avoided through a better mutual understanding.

Webflow offers the change to close exactly this gap and enables designers to implement high-quality websites pixel perfect including animations according to their original vision. Ideally, this results in a high-end website that can be efficiently developed and scaled as the company grows. The budget does not melt away because of unnecessarily complicated processes or maintenance work, but can flow into design quality and animations, for example – crucial factors for a modern, convincing internet presence that not only informs visitors, but also inspires and delights them and leaves a long lasting impression.

Of course, whether Webflow is a better choice than WordPress always depends on exactly the kind of needs of a specific project. But as a web designer, I see significant advantages of Webflow over Wordpress for the implementation of certain projects:

  • Individual designs can be implemented pixel-precisely without complex programming
  • The web design workflow is more efficient with Webflow than with Wordpress, there is no need to hand over to development teams
  • It is easier to implement high-fidelity designs with sophisticated animations
  • Cleaner code is produced, performance is generally better
  • Webflow is comparatively secure and low-maintenance
  • Hosting costs are manageable
  • A website can be flexibly and quickly adapted, expanded and optimized, it is more of a “living product” than WordPress sites, which are programmed once or based on a template, relatively static and, at least in practice, only very limited and costly extensible
  • Webflow is future-proof, because it is constantly being developed further, the community is constantly growing and it is optimized for a very specific market
  • Errors can usually be quickly identified and fixed
  • The implementation of barrier-free websites is supported

Some further content

Below are some interesting links to further content on the topic. I know I‘m not the first one who writes about this:

I have to admit that I’m a bit biased because I really enjoy building with Webflow: For me it is quite fulfilling to “breathe life” into a custom design using Webflow. But if I’m honest, it’s obviously not suitable for every kind of web design project. It always depends on what your goals are, what is really important to you, and what exact feature set you need.

Since the topic is very extensive, I am of course happy to receive comments, opinions or feedback on the topic and am of course open to any form of constructive criticism. Feel free to follow me on my social media channels like Instagram, LinkedIn or Dribbble and drop me a PM there. ✌️

Self-Portrait

I’m glad if you’ve read my article up to this point. If these insights were helpful to you, feel free to share this post within your network. If you have any specific questions or comments, I look forward to hearing from you.

Share this article

Journal
Webdesign

Webflow vs. WordPress: Was eignet sich am besten für Dein Projekt?

Self-Portrait
von Andreas Kuhnen
Veröffentlicht:
April 8, 2022

Um die Antwort in aller Kürze schon mal vorwegzunehmen – es kommt immer darauf an und es gibt keine pauschale Antwort auf die Frage. In diesem Artikel werde ich über meine persönlichen Erfahrungen mit beiden Systemen schreiben und begründen, weshalb ich als Designer von Webflow schon von Anfang an ziemlich begeistert war, nachdem ich viele Jahre lang mit dem WordPress CMS, WordPressTemplates und No-Code Page-Buildern gearbeitet habe.

2011 habe ich mein erstes Kundenprojekt auf WordPress-Basis umgesetzt. 2021 war Webflow allerdings erst einer der entscheidenden Gründe, mich als Webdesigner in Vollzeit selbstständig zu machen. Ich kann deshalb nicht ganz ausschließen, dass in diesem Artikel an der ein oder anderen Stelle auch meine persönliche Meinung durchscheint. Trotzdem möchte ich dabei natürlich so objektiv wie möglich bleiben, um Dir einen möglichst guten Überblick über beide Systeme zu vermitteln und meine eigene Einschätzung nachvollziehbar begründen.

Am Ende des Artikels werde ich außerdem noch einige Quellen mit weiterführenden Inhalten verlinken, in denen die Unterschiede, sowie Vor- und Nachteile der einzelnen Systeme noch einmal genauer betrachtet werden.

Über WordPress

WordPress existiert seit 2003 und wurde ursprünglich für das Erstellen, Verwalten und Veröffentlichen von Blog-Artikeln konzipiert. Als Open-Source Projekt wird es seitdem kontinuierlich weiterentwickelt. WordPress ist heute eines der am weitesten verbreiteten Systeme zum Betreiben von Webseiten und kann dank zahlreichen Plugins flexibel um viele Funktionen erweitert werden.

Über Webflow

Webflow wurde 2013 gegründet. Es sollte die Lücke zwischen Do-It-Yourself-Baukasten-Systemen wie Wix oder Squarespace, traditionellen Content-Management Systemen (CMS) wie Joomla, Drupal, Typo3 oder WordPress sowie der “manuellen” Front-End-Webentwicklung schließen. Da sich Webflow immer größerer Beliebtheit erfreut, haben die Gründer dieses Ziel inzwischen nach einigen Höhen und Tiefen ziemlich erfolgreich erreicht.

Entwicklung & Qualität des Codes

Webdesigner*innen stehen bei der Entwicklung mit WordPress inzwischen analog zu Webflow ebenfalls No-Code Hilfsmittel wie beispielsweise Elementor zur Verfügung.

Alternativ können WordPress-Webseiten auf bestehenden Vorlagen aufgebaut oder sogar von Grund auf neu gestaltet und programmiert werden. Für die Umsetzung von individuellen Layouts sind dann jedoch tiefgreifende Programmierkenntnisse erforderlich. Neben Font-End Programmierkentnissen, die HTML, CSS und JavaSript umfassen sind außerdem Backend-Kenntnisse von PHP und Datenbanken notwendig. Dies kann die Entwicklungskosten bei einem WordPress Projekt schnell in die Höhe treiben.

Die Nutzung von Templates, Elementor oder auch Plugins zur Erweiterung der Funktionalität bringen bei WordPress häufig sehr unterschiedlichen und damit „aufgeblähten”, eher ineffizienten Code mit sich. Dies geht oft zu Lasten der Webseiten-Performance, worunter wiederum die Usability insbesondere für mobile Besucher*innen leidet.

Bei Webflow handelt es sich um ein No-Code Tool, mit einem entscheidenen Unterschied zu Baukasten-Systemen: Hier wird ohne Code tatsächlich entwickelt. Es entsteht semantisch korrekter und – sofern man sich an Front-End Best Practices und CSS-Namenskonventionen wie BEM hält – recht effizienter Code.

Da Webflow optional ebenfalls CMS Funktionen bietet, kann eine Webseite im Vergleich zu WordPress vergleichsweise schnell und effizient von geschulten Designer*innen umgesetzt werden. Der Übergabeprozess eines Designs an die Entwicklung entfällt. Optimierungen können unmittelbar von einem Design-Experten umgesetzt werden, worunter schlussendlich nicht nur die Qualität, sondern auch die Effizienz der Umsetzung entscheidend profitieren kann.

Webflow-Entwicklugn im „Designer-Modus“.

No-Code bedeutet allerdings nicht unbedingt, dass es mit Webflow leicht ist, eine komplexe, responsive Webseite umzusetzen. Auch hier sind gewisse Webdesign-Kenntnisse erforderlich und Programmierkenntnisse können sich als sehr hilfreich erweisen, wenn es darum geht, native Funktionen von Webflow mit eigenem Code zu erweitern. Außerdem besteht natürlich die Gefahr, dass Anfänger bei der Entwicklung und dem Aufbau einer Webseite Fehler machen, die zu einem späteren Zeitpunkt in der Entwicklung aufwändig zu beheben sind.

Im direkten Vergleich mit WordPress ist Webflow allerdings in Sachen Effizienz und Codequalität aus meiner Sicht weit überlegen und es lassen sich zumindest meiner Erfahrung nach in kürzerer Zeit qualitativ deutlich bessere Ergebnisse erzielen.

Responsives High-End Design

Wie oben beschrieben, sind dem Design durch WordPress durch Templates oder aufwändiger Programmierung gewisse Grenzen gesetzt. Mit Elementor lassen sich zwar relativ pixelgenaue Layouts umsetzen, trotzdem ist das Tool ungleich weiter von der Entwicklung entfernt als Webflow, da es sich genaugenommen nur um ein Plugin handelt, welches auf WordPress läuft. Auch was die Funktionalität von Elementor angeht, muss man meiner Erfahrung nach bereit sein, gewisse Kompromisse bei der Designqualität einzugehen oder die Kosten einer individuellen, manuellen Entwicklung nicht scheuen.

Mit Webflow lassen sich theoretisch beliebige Layouts mit relativ effizientem Code umsetzen, vorausgesetzt sie erfüllen die Anforderungen an modernes Responsive Design. Backend Funktionalitäten, die bei WordPress relativ komplex in der Umsetzung sind, lassen sich mit Webflow vergleichsweise leicht und intuitiv umsetzen. Dennoch sind die Möglichkeiten auch in Webflow nicht unbegrenzt: Obwohl das CMS leistungsstark ist, lässt sich damit nicht jedes denkbare Konzept realisieren. Außerdem können sehr aufwändige Animationen in Webflow umgesetzt weniger performant sein, als wenn sie von erfahrenen Front-End Entwickler*innen manuell entwickelt werden.

Bei Wordpress sind viele Templates standardmäßig responsiv, das heißt, sie funktionieren für sämtliche Bildschirmgrößen, beziehungsweise Endgeräte. Während ich weniger Erfahrungen habe, responsive Designs mit Elementor umzusetzen, konnte ich mit der Anpassung von WordPress Templates bereits einige Erfahrungen sammeln. Häufig war es so, dass Templates, die individuell angepasst werden mussten – das Hauptmenü musste beispielsweise durch zusätzliche Menüpunkte erweitert werden – sich nicht mehr korrekt auf unterschiedlichen sogenannten Breakpoints verhalten haben. Die einzige Möglichkeit, dies zu beheben, ohne die grundlegende Programmierung des Templates zu manipulieren, bestand darin, per Custom-Code bestimmte CSS-Eigenschaften des Menüs zu überschreiben. Dies war oft nicht nur eine zeitintensive Arbeit, sondern stellt programmiertechnisch auch eine eher unsaubere Lösung dar.

In Webflow können responsive Designs hingegen relativ schnell und effizient umgesetzt werden: Vier bis fünf Breakpoints sind bereits vordefiniert. CSS-Eigenschaften werden vom größten Breakpoint kaskadierend nach unten „weitervererbt“: Das bedeutet, dass Desktop-Eigenschaften so lange an die unteren Breakpoints vererbt werden, bis manuell für einen bestimmten Breakpoint (bspw. Tablet) Anpassungen vorgenommen werden. Diese neuen Anpassungen werden dann ebenfalls weiter nach unten vererbt. In der Regel müssen für die responsive Webentwicklung Designs für unterschiedliche Bildschirm-, beziehungsweise „Devicegrößen“ erstellt werden, um sicherzustellen, dass ein Design auf sämtlichen Endgeräten und Bildschirmgrößen optimal funktioniert. Inzwischen kann ich auf diesen zusätzlichen Arbeitsschritt sogar verzichten, da ich Designs recht schnell direkt in Webflow auf bestimmten Breakpoints anschauen und optimieren kann. Webflow bietet also die volle Kontrolle, was responsives Design angeht und es lässt sich vergleichsweise effizient sicherstellen, dass eine Webseite auch für Mobile Besucher*Innen hohen funktionalen sowie ästhetischen Ansprüchen gerecht wird.

Das Backend & die redaktionelle Pflege

Bei WordPress gibt es Rollen, die Personen zugeordnet werden können, um den Zugriff auf bestimmte Inhalte und Funktionen zu beschränken. Dies ist vor allem auch sinnvoll, um ein unbeabsichtigtes Verändern des Layouts oder der Funktionalität einer Webseite zu verhindern, indem beispielsweise durch bestimmte Rollen nur redaktionelle Inhalte bearbeitet und veröffentlicht werden können.

Aus Erfahrung weiß ich, dass das Backend von WordPress nicht unbedingt auf Benutzerfreundlichkeit hin optimiert ist. Wichtige Funktionen sind teilweise in unterschiedlichen oder unnötig tief verschachtelten Menüs zu finden. Dies lässt sich natürlich durch die Historie von WordPress begründen und ist der Tatsache geschuldet, das auf einem Wordpress-System oftmals mehrere Instanzen zusätzlicher Systeme wie Templates, Page-Builder und Plugins installiert werden und parallel laufen. Diese Komplexität wirkt sich dann häufig nicht nur negativ auf die Benutzerfreundlichkeit aus, sie macht eine komplexe Webseite auch verhältnismäßig fehleranfällig.

Das Backend im Webflow „Editor-Modus“ für die redaktionelle Pflege von Inhalten.

Bei Webflow gibt es ebenfalls Rollen für die redaktionelle Pflege der Inhalte. Je nach Hosting-Plan lassen sich unterschiedlich viele Personen als “Editoren” einem Projekt hinzufügen. Diese können die Seite sowie dynamische Inhalte, wie beispielsweise Blog-Artikel im Backend, sowie in einem visuellen Front-End Editor pflegen. Die Oberfläche ist dabei relativ benutzerfreundlich gestaltet und kann nach einer kurzen Einarbeitungszeit von Kundinnen und Kunden selbstständig bedient werden. Dabei ist außerdem ausgeschlossen, dass der Code manipuliert und damit die Funktionalität einer Webseite eingeschränkt wird.

Im „Editor-Modus“ kann der Inhalt auch direkt in der Frontend-Ansicht geändert werden.

Sicherheit & Wartung

Da WordPress sehr beliebt und weit verbreitet ist, ist es leider auch ein beliebtes Ziel für Cyberkriminalität. WordPress wird jedoch ständig weiterentwickelt, aktualisiert und Sicherheitslücken werden geschlossen. Da das WordPress CMS meist auf eigenen Servern gehostet wird, muss das System regelmäßig manuell aktualisiert werden. Gelegentlich sind Plugins, Templates oder Teile deren Funktionalität nicht mit den neuesten Updates kompatibel. Es empfiehlt sich also, vor dem Aufspielen eines neuen Updates ein Backup zu machen, welches bei Bedarf genutzt werden kann, um Änderungen an der Installation rückgängig zu machen.

Webflow Seiten werden grundsätzlich auf den Webflow-eigenen Servern gehostet. Die Seiten lassen sich zwar auch exportieren, damit können dann jedoch bestimmte Funktionen wie das CMS nicht mehr genutzt werden. Webflow wird kontinuierlich weiterentwickelt, Updates werden automatisch ausgerollt, als Nutzer*In merkt man davon nichts, bis auf das gelegentlich neue Features veröffentlicht werden. Man muss sich im Gegensatz zu WordPress nicht aktiv um die Aktualisierung des Systems kümmern.

Kosten für Domain & Hosting

Die Kosten für Domain und Hosting können für WordPress Webseiten etwas geringer ausfallen im Vergleich zu Webflow. Es wird lediglich eine Domain & ein Webspace benötigt, der WordPress unterstützt. Einige Anbietern bieten beides als Paket schon für zwischen 2€ – 4€/Monat.

Für Webflow wird lediglich eine Domain benötigt, das Hosting erfolgt dann über Webflow. Die Preise für das Hosting sind vom gewählten Plan und den benötigten Features abhängig. Ein einfaches Hosting mit eigener Domain started bei $12/Monat bei jährlicher Zahlung.

Webflow Preise.

Eine Webseite auf WordPress Basis kann also vergleichsweise kostengünstig betrieben werden. Bei der Beurteilung der Gesamtkosten einer Webseite sollten aber wie bereits oben beschrieben ebenfalls initiale Entwicklungs- sowie potenzielle Wartungskosten, bzw. zusätzliche Mehraufwände bei der Contentpflege mit einfließen.

Flexibilität des Systems und Weiterentwicklung einer Webseite

Sobald eine WordPress Seite einmal aufgesetzt ist, lässt sich sich zumindest redaktionell vergleichsweise gut weiterentwickeln. Wie oben beschrieben sind zusätzliche Features, Funktionen oder neue Seitentypen jedoch oft mit großen Mehraufwänden und Kosten verbunden, insbesondere wenn diese Inhalte zunächst gestaltet und anschließend individuell entwickelt werden müssen.

Webflow ist in der Weiterentwicklung extrem flexibel. Redaktionelle Inhalte lassen sich mindestens ebenso leicht einpflegen, wie in WordPress. Darüber hinaus lassen sich aber auch Datenbankeinträge relativ schnell exportieren, importieren oder sogar verändern, wenn über das Design neue Anforderungen an das System gestellt werden. Beispielsweise stellt die Einführung von Blog-Kategorien oder die Erweiterung von Seiten durch zusätzliche dynamische Inhalte wie Team-Mitglieder kein Problem dar und kann ohne Programmierkenntnisse umgesetzt werden.

Während bei WordPress häufig sowohl Designer*innen, als auch Entwickler*innen für eine Weiterentwicklung beauftragt werden müssen oder die Qualität der Umsetzung leidet, können Anpassungen und Updates in Webflow vergleichsweise schnell und effizient von Expert*innen durchgeführt werden.

Performance

Die Performance einer Webseite hängt von mehreren Faktoren ab. Zum einen muss die Qualität des Codes stimmen. Zum anderen sollten Bilder und Grafiken für das Web optimiert sein und – sowie externe Scripte und Inhalte – nur bei Bedarf geladen werden.

Eine WordPress Webseite kann unter bestimmten Voraussetzungen sehr performant sein, aber aufgrund der Komplexität des Systems besteht die Gefahr, dass das Erreichen guter Performance ungleich aufwändiger umzusetzen ist, als bei Webflow.

Webflow Webseiten lassen sich ebenfalls mit externen Skripten erweitern und beim Programmieren entsteht natürlich nicht zwangsläufig effizienter Code. Auch hier muss auf bestimmte Best Practices geachtet werden um eine optimale Performance zu erreichen. Das Backend bietet jedoch zahlreiche Möglichkeiten, dafür die besten Voraussetzungen zu schaffen. Auch dynamische Inhalte, die später von Redakteur*innen gepflegt werden, lassen sich dahingehend optimieren, dass nur optimierte Bilder & Grafiken hochgeladen werden können. So lässt sich bei einer Webflow Webseite auch langfristig eine überdurchschnittliche Performance sicherstellen.

Testing & Bugfixing

Wie WordPress ist Webflow auf allen gängigen Browsern kompatibel. Dennoch muss vor der Veröffentlichung die Funktionalität einer Webseite ausgiebig getestet und geprüft werden, da unterschiedliche Browser bestimmte CSS Eigenschaften häufig etwas unterschiedlich interpretieren oder manche, insbesondere neue Features noch nicht unterstützen. Darstellungsfehler lassen sich in Webflow aber in der Regel recht schnell beheben, sofern man mit der Nutzung der Entwicklertools des Browsers der eigenen Wahl vertraut ist. Bei WordPress gestaltet sich die Fehlersuche dagegen häufig als sehr mühsam, da nicht immer sofort klar ist, welche Code-Bestandteile durch welches Plugin manipuliert oder geschrieben werden. Meiner Erfahrung nach können hier selbst kleine Anpassungen extrem zeitaufwändig sein.

Barrierefreiheit

Die Barrierefreiheit von Webseiten soll an dieser Stelle nur stark verkürzt behandelt werden. Es handelt sich natürlich um ein sehr wichtiges Thema, welches sich sehr gut für einen zukünftigen Blogeintrag eignet. Bei der Barrierefreiheit gibt es bestimmte Best Practices zu beachten, wie zum Beispiel die Einhaltung von bestimmten Farbkontrasten für Schriften und UI-Elemente, Schriftgrößen, bis hin zu technischen Anforderungen wie maschinenlesbare HTML-Strukturen. Webflow bietet inzwischen praktische Audit-Funktionen, um grundlegende Aspekte der Barrierefreiheit sicherzustellen.

Resümee

Es ist schon eine Weile her, dass ich Webdesigns basierend auf WordPress auch technisch umgesetzt habe. Zum Teil habe ich auch Designs speziell für die Umsetzung in WordPress erstellt und kenne daher die Aufwände, die hinter so einer Entwicklung stecken. Trotzdem wird das System stetig weiterentwickelt und ich bin mir sicher, dass sich bestimmte Aspekte möglicherweise in Zukunft auch noch positiv weiterentwickeln werden.

Während meiner Zeit als UX & UI Designer in Agenturen habe ich oft die Erfahrung gemacht, dass insbesondere die Übergabe von Designs an Entwicklerteams mit gewissen Reibungsverlusten verbunden ist. Es muss mehr Zeit in die Aufbereitung von Screendesigns und Animationen fließen, damit diese der ursprünglichen Vision entsprechend von Entwickler*innen umgesetzt werden können. Manchmal fehlt Entwickler*innen das Auge für gestalterische Details, oft sind es aber auch Designer*innen, die bestimmte technische Aspekte von responsivem Design oder Interaktionszustände nicht berücksichtigen und so Fehler entstehen, die eigentlich durch ein besseres gegenseitiges Verständnis vermeidbar wären.

Webflow bietet die Möglichkeit, genau diese Lücke zu schließen und ermöglicht es Designerinnen und Designern, hochwertige Webseiten pixelgenau inklusive Animationen nach ihren ursprünglichen Vorstellungen umzusetzen. Das Ergebnis ist im Idealfall eine High-End-Webseite, die sich effizient weiterentwickeln und skalieren lässt, wenn das Unternehmen wächst. Das Budget schmilzt nicht durch unnötig komplizierte Prozesse oder Wartungsarbeiten dahin, sondern kann beispielsweise in Designqualität und Animationen fließen – entscheidende Faktoren für einen modernen, überzeugenden Internetauftritt, der seine Besucher*innen nicht nur informiert, sondern auch begeistert und von der individuellen Markenbotschaft überzeugt.

Es kommt natürlich immer darauf an, welche Art von Projekt es genau umzusetzen gilt. Aber als Webdesigner sehe ich für die Umsetzung von bestimmten Projekten zusammenfassend bedeutende Vorteile von Webflow gegenüber Wordpress:

  • Individuelle Designs lassen sich pixelgenau ohne aufwändige Programmierung umsetzen
  • Der Webdesign-Workflow ist bei Webflow effizienter als bei Wordpress, die Übergabe an Entwicklerteams entfällt
  • Es lassen sich leichter high-fidelity Designs mit ausgefeilten Animationen umsetzen
  • Es entsteht saubererer Code, die Performance ist in der Regel besser
  • Webflow ist vergleichsweise sicher und wartungsarm
  • Die laufenden Hosting-Kosten sind überschaubar
  • Eine Webseite kann flexibel und schnell angepasst, erweitert und optimiert werden, es ist vielmehr ein „lebendiges Produkt“ als WordPress-Seiten, die einmal programmiert oder basierend auf einem Template aufgesetzt wurden, relativ statisch und zumindest in der Praxis nur sehr eingeschränkt und aufwändig erweiterbar sind
  • Webflow ist zukunftssicher, da es ständig weiterentwickelt wird, die Community stetig wächst und es für einen ganz bestimmten Markt hin optimiert ist
  • Fehler lassen sich in der Regel schnell identifizieren und fixen
  • Die Umsetzung von barrierefreien Webseiten wird unterstützt

Weiterführende Inhalte

Nachfolgend noch einige interessante Links zu weiterführenden Inhalten zum Thema. Ich weiß, ich bin nicht der Erste, der hierüber schreibt:

Ich muss zugeben, dass ich etwas voreingenommen bin, weil ich sehr gerne mit Webflow arbeite: Es bereitet mir große Freude, einem individuellen Design mithilfe von Webflow „Leben einzuhauchen“. Aber wenn ich ehrlich bin, eignet es sich natürlich nicht für jede Art von Webdesign Projekt. Es kommt immer darauf an, welche Ziele Du mit deiner Seite verfolgst, was Dir wirklich wichtig ist und welchen Funktionsumfang Du genau benötigst.

Da das Thema sehr umfangreich ist, freue mich natürlich über Kommentare, Meinungen oder Feedback zum Thema und bin natürlich offen für jede Form von konstruktiver Kritik. Folg mir gern auf meinen Social Media Kanälen wie Instagram oder Dribble Instagram, LinkedIn oder Dribbble und schreib mir dort eine PM. ✌️

Self-Portrait

Es freut mich sehr, dass Du meinen Post bis hierhin gelesen hast. Falls diese Einblicke hilfreich für Dich waren, teile den Artikel gern in Deinem Netzwerk. Falls Du konkrete Fragen oder Anmerkungen hast, freue ich mich schon auf Deine Nachricht.

Diesen Artikel teilen