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

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.

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.

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.

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.

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:

• https://www.ramoser-webdesign.com/ratgeber/webflow-vs-wordpress
• https://www.flux-academy.com/blog/webflow-vs-wordpress-which-one-is-better
• https://www.jonasarleth.com/blog/von-wordpress-zu-webflow-erfahrungen‍

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. ✌️