Was ist Webflow?

Webflow in wenigen Worten beschreibe ich so: Es ist eine vielseitige Plattform zur Erstellung professioneller Webseiten jeder Art. Diese werden visuell im Browser programmiert, wodurch man alle Änderungen in Echtzeit sieht und überprüfen kann, bevor sie live gehen. CSS, das dafür gedacht ist, Elemente und Inhalte zu stylen, wird also sofort angezeigt und ist nicht nur abstrakte Zeilen Code. Die visuelle Ansicht ist auch bei vielen anderen Situationen sehr hilfreich. Wichtig, und ein großer Unterschied zu anderen Plattformen ist, dass das visuelle Bearbeiten 1:1 CSS und HTML abbildet. Das bedeutet, dass sich die visuelle Entwicklungsumgebung nach den Prinzipien dieser Web-Sprachen richtet, statt umgekehrt einfach ein intuitives Interface darzustellen, wie das andere Editoren tun. Die Folge von letzterem ist, dass Code heraus kommen kann, der so vielleicht garnicht gewollt war, und sich das Ergebnis aber nicht verändern lässt.

Visuelles Editieren: Texte, Bilder und mehr

Eine der weiteren hilfreichen Situationen ist das visuelle Editieren: Während ich diesen Text schreibe, sehe ich ihn direkt in der Umgebung, in der er tatsächlich später live gehen wird. Das kann vieles beeinflussen: Beispielsweise die Länge von Texten, aber auch den Inhalt. Denn nehmen wir an, neben dem zu schreibenden Text ist ein Foto. Dann nehmen wir im Text vielleicht Bezug darauf, weil wir sofort sehen und verstehen, was der Website-Nutzer später sehen wird und verstehen soll.

Und während das visuelle Schreiben von Code eine Expertise in der Webentwicklung benötigt, tut es das Ändern von Texten und Bildern nicht. Dafür hat Webflow verschiedene Rollen für verschiedene Aufgaben. Diese unterschiedlichen Zugriffsrechte schalten Team-Mitgliedern nur die Tools frei, die sie tatsächlich benötigen und sicher bedienen können. Andernfalls könnte das schnell überfordern oder im schlimmsten Fall dazu führen, dass Bereiche der Webseite unbeabsichtigt beschädigt werden.

Backups, Hosting, SSL & mehr

Während die Webseite also entsteht, laufen viele Dinge bereits im Hintergrund, die unter anderen Umständen entweder viel manuelle Arbeit gekostet hätten, oder aber einfach nicht da gewesen wären. Einige davon sind:

SSL: Jede Webseite bekommt automatisch ein SSL-Zertifikat, auch für die eigene Domain. Die Verbindung ist damit von Anfang an verschlüsselt, das Zertifikat wird selbstständig erneuert und niemand muss an ein Ablaufdatum denken.

Hosting: Die Seite liegt auf einer leistungsstarken Cloud-Infrastruktur und wird über ein globales CDN ausgeliefert. Besucher laden die Inhalte also vom nächstgelegenen Server, egal ob in Berlin oder New York. Auch plötzliche Besucherspitzen fängt das System ab, ohne dass man selbst etwas skalieren muss.

Backups: Webflow speichert die Webseite automatisch und sehr regelmäßig. Geht bei einer Änderung etwas schief, lässt sich ein früherer Stand mit wenigen Klicks wiederherstellen. Auch sehr vorteilhaft: Man kann diesen Stand zuerst visuell in der Entwicklungsumgebung anschauen, bevor man sich für ihn entscheidet.

Staging: Jede Seite hat eine eigene Testumgebung unter einer webflow.io-Adresse. Neue Inhalte oder Designänderungen können dort in Ruhe geprüft und abgestimmt werden, bevor sie auf der echten Domain live gehen.

Keine Updates, keine Plugins: Es gibt keine Server, Datenbanken oder Plugins, die gewartet und aktualisiert werden müssen. Damit entfallen auch die typischen Sicherheitslücken, die bei veralteten Plugins entstehen.

Bildoptimierung: Hochgeladene Bilder werden automatisch in mehreren Größen erzeugt, sodass jedes Gerät nur die passende Variante lädt. Zusätzlich lassen sich Bilder in moderne Formate wie WebP umwandeln, was die Ladezeit spürbar verkürzt.

SEO-Grundlagen: Sitemap, Meta-Titel und -Beschreibungen, Open-Graph-Bilder für Social Media und 301-Weiterleitungen sind direkt eingebaut und ohne Zusatztools pflegbar.

Formulare: Kontaktformulare funktionieren ohne eigenen Mailserver oder Zusatzsoftware. Einsendungen werden gespeichert, per E-Mail weitergeleitet und bei Bedarf an andere Tools übergeben.

Content-Management-System (CMS)

Das integrierte Content-Management-System (CMS) von Webflow ist ein Bereich innerhalb der Plattform, das als Ersatz für eine Datenbank dient. Hier können Sie massenhaft Daten abspeichern und dynamisch auf der Webseite wieder ausgeben. Es kann verschiedene Elemente wie Texte, Bilder, Videos, Zahlen und vieles mehr enthalten. Diese sogenannten CMS-Collections folgen immer derselben Struktur und bilden damit die Grundlage für wiederkehrende Elemente oder Seiten auf Ihrer Webseite.

Ein/e Webflow-Entwickler/in könnte Ihnen beispielsweise eine Seite wie diese anlegen, mit Feldern wie persönlicher Name, Firmenname, Anredeform (du/Sie), Startseiten-Screenshot u.v.m., das dann ausgefüllt wird und auf einer eigenen URL wie dieser publiziert wird. Ein weiteres gängiges Beispiel sind Blogartikel oder Produkt-Seiten.

Das Webflow-CMS ist jedoch nicht nur für komplette Seiten mit eigener URL geeignet, sondern auch für wiederkehrende Elemente, die auf anderen Seiten eingebunden werden. Beispiele hierfür sind Testimonials, Abschnitte mit häufig gestellten Fragen oder die Vorstellung von Teammitgliedern.

Hier sind die vier wichtigsten Gründe, warum man diese Beispiele als CMS-Collections statt als normale, statische Seiten anlegt:

1. Struktur: Dadurch, dass die Felder vordefiniert wurden, kann nichts vergessen werden. Inhalte derselben Collection erscheinen einheitlich und Ihr Webseiten-Besucher findet sich schnell zurecht.
2. Design: Die Darstellung eines Teammitglieds oder die Ansicht eines Blogartikels wird nur einmal umgesetzt und kann dann immer wieder verwendet werden, ohne dass man sich erneut Gedanken machen muss, wie die neuen Inhalte aussehen könnten. Wenn das Design einer Collection geändert wird, ändern sich alle Elemente dieser Collection.
3. Automatisierte Prozesse: In einer Collection erstellen Sie ein neues Element, füllen die Infos aus und publizieren. Das war's. Automatisch entsteht daraus eine eigene Seite mit passender URL, der Eintrag erscheint in allen Listen und Übersichten, in denen die Collection eingebunden ist, wird dort richtig einsortiert und landet in der Sitemap. Auch Meta-Titel und Vorschaubilder für Suchmaschinen und Social Media lassen sich direkt aus den Feldern befüllen.
4. Conditionals: Meine persönliche Lieblingsfunktion im Umgang mit dem CMS. Elemente können abhängig vom Inhalt eines Feldes ein- oder ausgeblendet werden. Ist zum Beispiel "du" als Anredeform ausgewählt, erscheint der Text in der Du-Form, bei "Sie" entsprechend in der Sie-Form. Bleibt ein Feld leer, etwa weil es kein Video gibt, verschwindet der zugehörige Bereich einfach, statt eine leere Lücke zu hinterlassen. So passt sich eine einzige Vorlage an ganz unterschiedliche Inhalte an.

Google und KI-Sichtbarkeit

Wenn man von SEO spricht, geht es heute nicht mehr nur um Google-Website-Ergebnisse. Immer mehr Menschen stellen ihre Fragen direkt an KI-Assistenten wie ChatGPT, Perplexity oder die KI-Übersichten in der Google-Suche. Diese Systeme lesen Webseiten, fassen sie zusammen und empfehlen im besten Fall Ihr Unternehmen. Damit das gelingt, muss eine Webseite für Menschen, Suchmaschinen und KI gleichermaßen gut lesbar sein. Webflow bringt dafür eine sehr gute Grundlage mit:

Sauberer Code: Da Webflow das visuelle Styling 1:1 in HTML und CSS übersetzt, entsteht schlanker, semantischer Code. Überschriften, Absätze, Listen und Bilder sind klar ausgezeichnet, sodass Suchmaschinen und KI sofort erkennen, worum es auf einer Seite geht und was wichtig ist.

Direkt lesbare Inhalte: Webflow liefert fertige Seiten aus, die nicht erst per JavaScript im Browser zusammengebaut werden müssen. Viele KI-Crawler führen kein JavaScript aus und sehen bei solchen Seiten im schlimmsten Fall nur eine leere Hülle. Bei Webflow ist der gesamte Inhalt von Anfang an sichtbar.

Ladezeit: Schnelle Seiten werden von Google bevorzugt. Durch das globale CDN, optimierte Bilder und den Verzicht auf schwere Plugins sind Webflow-Seiten hier im Vorteil.

Meta-Daten und Sitemap: Seitentitel, Beschreibungen, Vorschaubilder und die Sitemap lassen sich direkt in Webflow pflegen. Bei CMS-Seiten werden sie automatisch aus den Feldern befüllt, sodass auch der hundertste Blogartikel korrekt ausgezeichnet ist.

Strukturierte Daten: Mit dem oben bereits genanntem Schema-Markup lassen sich Informationen wie Öffnungszeiten, Bewertungen, FAQs oder Artikel für Maschinen eindeutig beschreiben. Das erhöht die Chance auf hervorgehobene Suchergebnisse und darauf, dass KI-Assistenten Ihre Inhalte korrekt wiedergeben. In Kombination mit dem CMS geschieht auch das automatisch.

Kontrolle über Crawler: Über die robots.txt legen Sie fest, welche Suchmaschinen und KI-Dienste Ihre Seite lesen dürfen. Zusätzlich lässt sich eine llms.txt ergänzen, eine Art Wegweiser, der KI-Systemen zeigt, welche Inhalte besonders relevant sind.

Die Technik ist dabei aber nur die halbe Miete. Genauso wichtig sind Inhalte, die echte Fragen Ihrer Kunden klar und konkret beantworten. Genau diese Antworten sind es, die Google anzeigt und die KI-Assistenten weiterempfehlen.

Animationen

Moderne Webseiten leben von Bewegung. Egal ob es sich um dezente Mikrointeraktionen oder aufwendige, mehrstufige Animationen handelt: Sie tragen maßgeblich dazu bei, dass eine Webseite nachhaltig in Erinnerung bleibt. Mit Webflows Animations-Tools, oder der Integration von Animationen externer Tools können nahezu alle Ideen umgesetzt werden. Wichtig dabei ist es, eine Website nicht mit Animationen zu überladen. Denn das könnte der Betrachter störend finden, außerdem belastet es die Website-Performance.

Eigenständig Änderungen vornehmen und Mitarbeit vom Team

Einer bringt HTML- und CSS-Expertise mit, der andere nicht. Einer möchte gerne im Webflow-Interface Änderungen vornehmen können, der andere nicht. Hier sind die gängigen Möglichkeiten, wie Sie Ihr Team in Änderungen an der Webseite einbinden können:

1. Ich mache die Änderungen

Automatisierungen

Prozesse, die mit der Webseite einhergehen, sollen idealerweise so weit es geht automatisiert sein. Dafür nenne ich zwei konkrete Beispiele, wie ich sie bereits oft umgesetzt habe:
‍
Ein Formular stößt weitere Schritte an: Es ist eine Sache, wenn Sie die Inhalte eines Formulars per E-Mail bekommen. Es ist eine andere, wenn ein Formular das Thema erkennt und basierend darauf die E-Mail an die zuständige Person sendet.

Jobausschreibungen werden im HR-Tool gepflegt: Ein weiteres Beispiel ist es, dass Ihr HR-Team bereits ein Tool zur Pflege von Jobausschreibungen verwendet. Diese Jobs sollen aber auch auf Ihrer Webseite angezeigt werden, ohne dass Sie 2 Systeme pflegen müssen.

Sprachen

Soll Ihre Webseite in mehreren Sprachen erscheinen, bringt Webflow dafür eine eigene Lokalisierungsfunktion mit. Übersetzungen können manuell eingetragen werden oder mit einem Klick komplett per KI übersetzt werden. Jede Sprache bekommt eigene Metadaten und lässt sich separat pflegen, ohne dass das Design doppelt gebaut werden muss. Dabei gilt das "Primary Locale" auch als "Primary Design": Damit meine ich, dass HTML und CSS in der Hauptsprache entsteht und exakt gleich aussieht, wenn man die Sprache wechselt. Dennoch kann man, falls gewünscht, in den anderen Sprachen visuelle Änderungen vornehmen, also das CSS ändern oder Bilder tauschen. In manchen Fällen macht es auch Sinn, eigene URLs je Sprache zu aktivieren.

Künstliche Intelligenz

Auf diese Thematik gehe ich im nächsten Abschnitt noch gezielter ein. Kurz gefasst lässt sich sagen, dass

Externe Tools

Barrierefreiheit

Cookies