Will man Webflow’s eigener Werbung Glauben schenken, durchbricht Webflow die Barriere zwischen Design und Coding. Was sich unscheinbar anhört, ist ein ziemlich großes Ding. Denn:
Nur 0,5% der Weltbevölkerung können wirklich programmieren.
(Quelle: EDC)
Das Resultat: Personen, die digitale Produkte, oder eben einfach nur eine eigene Website erstellen wollen, waren in Zeiten vor Webflow auf fähige Webentwickler angewiesen. Diese Entwickler mussten erstellte Designs dann aufwändig in produktionsfertigen HTML, CSS und JS Code übersetzen, um die Website zum Leben zu erwecken. Glücklicherweise nimmt uns Webflow genau diese Arbeit ab. Das visuell designte wird automatisch in semantischen Code übersetzt - und das mit einer Präzision, wie es nur wenige Menschen können. In den folgenden 5 Punkten, erzählen wir, wie Webflow unsere Arbeitsabläufe revolutioniert hat und warum auch du deine Website ganz ohne Coding erstellen kannst.
1. Der Webflow Designer kennt keine Grenzen
Sind wir ehrlich: Die heutige digitale Welt wird von den Produkten dominiert, die wirklich gut designed sind. Und das ist auch verständlich. Durch grandiose Apps wie Airbnb oder fantastische Websites wie Diagram sind User durchdachtes Design gewöhnt. Eine 0815 Website, mit dem klassischen “Bild links, Text rechts Layout” überzeugt heute nicht mehr von der Innovationsfähigkeit des Unternehmens.
Hier kommt der Webflow Designer ins Spiel. Der Designer ermöglicht es, Layouts die in Figma, Adobe Xd oder ähnlicher Software entworfen wurden, pixel-perfekt ins Web zu übertragen. Abstände lassen sich perfekt übernehmen, Farbcodes und Schriftarten präzise einsetzen und selbst komplizierteste Layouts mit Flexbox, Grid 2.0 und Absolute Positioning umsetzen. Neue Features, werden vom Webflow Team regelmäßig und zeitnah nach der Veröffentlichung eingebaut. So bleiben Website-Designs immer auf dem neusten Stand und können auf Effekte wie Backdrop Filter und iX2 Animationen zurückgreifen.
Auch wenn Webflow ohne Coding-Kenntnisse bedienbar ist, kann ein Grundverständnis in HTML, CSS und JS nicht schaden. Sollte das nicht gegeben sein, kann man aber auch einfach auf vorgefertigte Layouts oder ganze Templates zurückgreifen, die dann nur noch auf die eigenen Vorstellungen angepasst werden müssen.
2. Webflow beschleunigt deine Design → Dev Geschwindigkeit
Insbesondere junge Unternehmen haben meistens 2 Dinge zu wenig:
Zeit & Budget
Aus diesem Grund sind lange Development-Cycles und Fehler in der Übergabe von Design zu Development häufig Gift für den Unternehmenserfolg. Aber auch größere Unternehmen leiden an immensen Kosten für die Umsetzung von Website-Projekten.
Auch hier liefert Webflow Abhilfe. Durch die visuelle “Programmierung” der Website und das Anlehnen der Webflow Designer Funktionen an gängige Design-Tools, lassen sich Layouts schnell und 1:1 entwickeln. Das führt zu weniger Rückfragen an das Design-Team, das spart Zeit und so wiederum Kosten.
3. Webflow kommt ohne Plug-Ins aus
Wenn du schonmal eine Website in Wordpress gebaut, oder bauen hast lassen, weißt du, wie mühselig es ist die richtigen Plug-Ins zu installieren und zu konfigurieren. Natürlich bieten Plugins weitreichende Funktionalität, die WordPress nicht nativ mitbringt, was dir dann keiner auch keiner sagt: Plugins müssen gewartet und geupdated werden und kosten im Zweifel sogar monatliche Gebühren.
Und spätestens, wenn ein veraltetes Plugin die Website zerschossen hat ist klar, dass Plugins Fluch und Segen sein können.
Mit Webflow entwickelst du visuell reinen HTML, CSS und JS Code. Das Endergebnis sind semantische Websites, die ganz ohne Plugins auskommen. Dein Code bleibt zudem clean und schnell und du brauchst dir keine Gedanken mehr über Updates oder Sicherheitslücken zu machen. Und wenn du doch einmal zusätzliche Funktionalitäten brauchst:
Du kannst jederzeit iFrame oder Custom Code Embeds vornehmen.
4. Webflow ist für SEO und Pagespeed gebaut
Die meisten Websites wollen gute SEO-Ergebnisse aber die wenigsten kümmern sich wirklich darum. Der Grund: Fehlende Funktionen oder aber schwierige Zugänglichkeit von essentiellen Features bei anderen CMS, machen das Einpflegen von SEO Essentials kompliziert und zeitaufwändig.
Webflow ist rund um das Thema SEO gebaut und kommt daher nativ mit folgenden Funktionen:
- Semantischer und schneller Code
- Meta-Title und -Description lässt sich für jede Page individuell festlegen
- Strukturierte Daten lassen sich mit dem CMS verknüpfen
- Bilder können direkt in Webflow auf webp komprimiert werden
- Bilder können einfach mit Alt-Tags versehen werden
- URLs und Unterverzeichnisse lassen sich einfach individualisieren
- eine XML Sitemap wird automatisch generiert
- die Global Canonical URL sorgt für keinen Duplicated Content
- Webflow bietet ein internes Audit Tool, welches dich z.B. auf fehlerhafte Verwendung der Überschriften H1-H6 hinweist
Solltest du mehr zu dem Thema Webflow und SEO erfahren wollen, haben wir hier einen Guide für Einsteiger und hier einen fortgeschrittenen Webflow SEO Guide.
Betrachtet man das Thema Webflow und Pagespeed, geht die Ladegeschwindigkeit deiner Webflow Seite mit einigen Punkten aus der SEO Liste oben einher. Bspw. das Komprimieren von Bildern und der semantische Code sorgen für rasend schnelle Websites.
Zudem bietet Webflow direkt im Designer die Möglichkeiten:
- das CSS aufzuräumen und ungenutzte Klassen zu löschen
- ungenutzte Animationen zu eliminieren und so den JS Code zu verkleinern
- HTML, CSS und JS zu komprimieren
- Einfaches Management von Third Party Skripten
- Unterscheidung zwischen Lazy und Eager Loading
- Präzise Einstellungen von Preloading anderer Seiten
Sollte das Thema Webflow und Pagespeed für dich relevant sein, haben wir hier Pagespeed Basics zusammengefasst und hier einen Webflow Pagespeed Guide für Fortgeschrittene veröffentlicht.
5. Webflow lässt dich deine Website selber bearbeiten
Lässt du deine Website von Profis erstellen, gibt es am Ende häufig ein Problem: Die Website ist fertig und glänzt, du musst aber für jede kleine Änderung ein Ticket bei deiner Agentur aufmachen.
Damit das nicht mehr passiert, lässt dich der Webflow Editor deine Website selber bearbeiten. Der Editor ist quasi eine abgespeckte Version des Webflow Designers und erlaubt dir das Bearbeiten von:
- Texten
- Links
- und Bildern
direkt auf der Live-Website. Ohne extra Tool, ohne komplizierte Zugänge.
Kein Rumwerkeln im Backend mehr notwendig.
Nutzt deine Website das mächtige Webflow CMS, wird der Editor sogar noch stärker. Lade direkt im Editor neue Blogbeiträge hoch, bearbeite bestehende Stellenanzeigen oder verschaffe dir einen Überblick über die ganzen Leads, die dein Kontaktformular bisher eingebracht hat. Wenn du dich ein bisschen auskennst, kannst du sogar die SEO-Daten deiner Website direkt im Editor überarbeiten. Wie das alles im Detail funktioniert, kannst du in diesem Beitrag nachlesen: Der Webflow Editor: So kannst du selber Inhalte in Webflow bearbeiten.