Was macht eine gute Webflow Website aus?
Webflow etabliert sich immer mehr auf dem Markt der Content-Managment-Systeme. Besonders Websites mit hohen Besucherzahlen greifen auf das CMS zurück, wodurch man indirekt auf die Qualität des Hostings und der Funktionen schließen kann (Quelle: W3Tech ). Trotzdem macht allein die Verwendung des CMS Deine Website nicht automatisch gut. Eine gute Website zeichnet sich durch eine reibungslose Nutzerfahrung, starke Conversionrate und hohe Besucherzahlen aus.
In diesem Beitrag zeige ich dir, wie Du das Potential, welches Dir Webflow als Tool bietet, optimal nutzen kannst.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Was ist Webflow und wie unterscheidet es sich von anderen Website-Baukästen?
Webflow ist ein No-Code Tool, mit welchem man Websites auf einer visuellen Oberfläche direkt im Browser designen und entwickeln kann. Es verfolgt einen Drag-and-Drop-Ansatz, trotz der einfachen Bedienung ist das Tool aber relativ technisch. Die Elemente im Webflow Designer sind hauptsächlich reine HTML-Elemente wie Div-Blöcke, Text-Blöcke oder Links. Darüber hinaus gibt es in Webflow eigene Elemente und vorgefertigte Layouts. Im Hintergrund wird während des Design-Vorgangs reiner HTML-, CSS- und Javascript-Code generiert, welcher unabhängig vom Webflow-Hosting verwendet werden kann.
Typischerweise zeichnen sich Webflow Websites durch schnelle Ladezeiten, interaktive Elemente und modernen Design aus. All diese Punkte hängen natürlich nicht nur von dem ausgewählten Content-Managment-System ab, Webflow bietet aber eine starke Grundlage für einen qualitativen Webauftritt.
Der Hauptunterschied zu anderen Website-Baukästen ist die Designfreiheit. Systeme wie WordPress, Wix oder Squarespace arbeiten vorwiegend Template basiert, das heißt der Nutzer bekommt Struktur und Design vorgegeben und hat nur limitierte Anpassungsmöglichkeiten. In Webflow ist der eigenen Kreativität keine Grenzen gesetzt. Grund dafür ist die Nähe an HTML und CSS, wodurch Elemente individuell und frei angepasst werden können. Für wenig technik-affine Nutzer kann Webflow deshalb besonders zu Beginn etwas komplex und viel erscheinen. Für Nutzer, die technisch gut aufgestellt sind oder bereits Programmiererfahrung haben, ist die Oberfläche in der Regel kein Problem. Auch komplexere Animationen lassen sich in Webflow intuitiv und individuell erstellen.
Das eigene CMS in Webflow für dynamische Inhalte hebt das Unternehmen ebenfalls von der Konkurrenz ab. Ohne das Verwenden eines Plugins lassen sich im Webflow Designer direkt Inhalte in verschiedenen kleinen Datenbanken speichern, dessen Inhalte direkt auf der eigenen Seite integriert werden können. Mit dem CMS kann zum Beispiel die Marketingabteilung selbst Inhalte für Blog-, News- oder Karriereseiten pflegen, da das System einfach zu bedienen ist.
Die Grundlage: Ein ansprechendes Design
Obwohl Webflow häufig von Designern genutzt wird und oft auch als Design-Programm bezeichnet wird, ist das CMS eher eine Entwicklungsplattform. Die technische Nähe und die Möglichkeit zu komplexen Implementierungen sind Grund dafür. In der Regel durchgeht man im Design viele Revisionsschleifen und man erstellt verschiedene Varianten. Diese Änderungen wären in Webflow direkt zu aufwendig – zumindest bei Designs, die von Null auf erstellt werden. Sinnvoller ist es mit einem Prototyping- oder Design-Programm wie Figma, Adobe XD oder Sketch zu arbeiten. Vor allem Figma arbeitet super mit Webflow.
Im Optimalfall erarbeitest Du oder Dein Kunde ein benutzerfreundliches und ästhetisches Design in Figma, welches dann von Dir in Webflow entwickelt wird.
Je nach Kundenanforderungen kann es auch sinnvoll sein mit einem Webflow kostenpflichtigen oder kostenlosen Webflow Template zu arbeiten. In der Regel sind die kostenpflichtigen Templates auf einem hohen Qualitätsniveau. Kostenlose Templates aus dem Made-in-Webflow Bereich solltest Du nochmals mit den Informationen aus diesem Blogbeitrag überprüfen.
Ein Website-Design sollte immer individuell auf die Zielgruppe zugeschnitten sein.
Anpassungsfähigkeit und Skalierbarkeit
Ein gutes Webflow Projekt hat einen Style-Guide und verwendet eine klare und einheitliche Klassenstruktur – nur so kannst Du die Anpassungsfähigkeit und Skalierbarkeit gewährleisten. In den letzten Jahren hat sich besonders das Client-First System von Finsweet durchgesetzt, andere Klassen-Systeme funktionieren aber genauso.
Ein Style Guide sollte folgende Anforderungen erfüllen:
- Klar definierte Typografie:
- Farbschema
- Buttons und Links
- Abstände und Container
Ein gut durchdachtes Klassensystem ist entscheidend für effizientes Design und einfache Wartung von Websites in Webflow. Die Klassen sollten einer konsistenten Benennungskonvention folgen und wiederverwendbar sein.
Falls Du noch keine Berührungspunkte mit solchen Systemen hattest:
Achte darauf, jedem Element eine eindeutige Bezeichnung zu geben, zum Beispiel: ‘heading-large’. Vermeide ‘Div Block 999’, ‘Text Block 13’ etc.
Gebe Elementen mit dem gleichen Stil die gleiche Klasse, so kannst Du ganze Stile mit nur einem Klick ändern. Außerdem macht es Dein Projekt für andere Entwickler zugänglicher.
Suchmaschinenoptimierung (SEO) der Webflow Website
Eine gute Website wird gefunden und gesehen. Webflow bietet Dir gute Grundlagen für die optimale Performance in den Suchmaschinen.
Ein entscheidender Vorteil der Suchmaschinenoptimierung ist, dass optimierte Websites oft auch eine verbesserte Nutzererfahrung bieten. Dies geschieht, weil Google jene Seiten bevorzugt, die in ihrer Gestaltung und Funktionalität die Bedürfnisse der Nutzer in den Mittelpunkt stellen.
Tieferes Wissen in das Thema findest Du hier: SEO und Webflow: Alles was Du wissen musst (https://www.soenkesproll.de/blog/seo-und-webflow-alles-was-du-wissen-musst-5-tipps)
Technische Einstellungen in Webflow
Webflow ist relativ unabhängig von Plugins für die klassische Aufgaben einer Website. So auch im Bereich SEO. Die meisten technischen SEO-Einstellungen lassen sich direkt in Webflow einstellen. Hier die wichtigsten Punkte, auf welche Du achten solltest:
- Headline Struktur: Eine Website sollte genau eine H1-Überschrift für das Hauptthema und anschließend H2, H3 usw. für Unterthemen nutzen
- Meta-Title und Meta-Description: Meta-Titel und -Beschreibungen sollten prägnant sein und relevante Keywords enthalten
- Skripte und Stylesheets minimieren: Minimiere in den Site Settings von Webflow den HTML-, CSS- und Javascript-Code
- Alt-Texte zu Bildern hinzufügen: Füge aussagekräftige Alt-Texte zu Deinen Bildern in Webflow hinzu
- Bilder komprimieren: Komprimiere Deine Bilder, am besten in Webflow direkt zu WebP, um die Ladezeit zu optimieren
- Strukturierte Daten: Füge Strukturierte Daten zu Deiner Webflow Website hinzu, sodass Google Deine Inhalte leichter interpretieren kann
Seitengeschwindigkeit
Schnelle Ladezeiten sind das A und O einer guten Webpräsenz. Du kannst diese mit den Google PageSpeed Insights überprüfen und bei Bedarf optimieren.
Neben dem Komprimieren von Bildern und Minimieren von Code kannst Du in Webflow nicht benötigte Klassen und Animationen löschen. Achte außerdem auf einen sauberen und nicht überladenen Aufbau.
Qualitative Inhalte
Die Inhalte Deines Internetauftritts sollten speziell auf die Zielgruppe zugeschnitten sei. Es ist entscheidend, dass die angebotenen Inhalte das Thema gesamtheitlich abdecken und sämtliche Nutzerfragen umfassend beantworten.
Hochwertiger Content entsteht durch die Bereitstellung eines deutlichen Nutzens für die Leserschaft, wobei stets die Qualität im Vordergrund steht. Er zeichnet sich durch eine logische Struktur, klare Ausdrucksweise und die Bereitstellung aktueller Informationen aus.
Eine Seite sollte im Optimalfall über 1000 Wörter beinhalten, Unterseiten mit unter 300 Wörtern ranken schlecht bis gar nicht. Qualitative Inhalte beschränken sich nicht nur auf Texte, sondern sind ganzheitlich zu betrachten. Ob Bilder, Videos, Sprachaufnahmen oder Grafiken – alle Inhaltstypen sollten den Besuchernutzer in den Vordergrund stellen.
Mobile Entwicklung
Die Nutzung des Internets verschiebt sich immer stärker hin zu mobilen Geräten. 2023 griffen 85% der Menschen in Deutschland über Smartphones auf das Internet zu. (Quelle: https://de.statista.com/statistik/daten/studie/633698/umfrage/anteil-der-mobilen-internetnutzer-in-deutschland/) Diese Entwicklung zeigt deutlich, wie entscheidend es ist, Websites für Mobilgeräte zu optimieren. Sie müssen nicht nur gut aussehen, sondern auch reibungslos funktionieren, um den Anforderungen der Nutzer gerecht zu werden.
Wichtige Informationen und der Call-to-Action sollte sofort sichtbar sein, ohne zu scrollen, um Nutzer schnell zu informieren. Dies fördert das Nutzererlebnis und erhöht die Wahrscheinlichkeit, dass Besucher auf der Seite bleiben und interagieren.
Interaktionen & Animationen
Um das volle Potenzial von Webflow auszuschöpfen, sind Interaktionen und Animationen unverzichtbar. Mit dem CMS kannst Du einfach per Klick Elemente individuell animieren. Anpassungen für Hover-, Fokus- oder Current-States lassen sich bequem über das Einstellungsmenü vornehmen. Für komplexere Animationen bietet das Interaktions-Panel detaillierte Einstellungsmöglichkeiten.
Besonders interessant: Scrollytelling.
Scrollytelling, eine Methode, bei der durch Scrollen eine Geschichte erzählt oder Informationen präsentiert werden – eine Webexperience entsteht. Diese Scrollanimationen lassen sich direkt in Webflow erstellen.
Ein sehr schönes Beispiel für Scrollytelling in Webflow ist folgende Website:
Quelle: https://hauntedhouse.webflow.io
Fazit
Prinzipiell gilt: Eine gute Website lässt sich mit jedem CMS erstellen. Um in Webflow das Potential voll auszuschöpfen ist es wichtig sich an bestehende Design- und Entwicklungsprinzipien zu halten. Webdesigner, die bereits einen technischen Hintergrund haben, werden sich in Webflow sehr wohl fühlen und sind in der Lage eine ansprechende Website im CMS zu entwickeln. Vor allem das Thema Suchmaschinenoptimierung – besonders das Thema der Inhalte – fällt häufig unter den Tisch und sollte bei jeder Webflow Website diskutiert werden.
FAQ
Wie steige ich effektiv in die Nutzung von Webflow ein und welche Ressourcen stehen zur Verfügung?
Webflow stellt einen kostenlosen Plan zur Verfügung, der alle Basisfunktionen umfasst. Registriere Dich einfach für einen Account, beginne mit Deinem ersten Projekt und erkunde die Benutzeroberfläche sowie die Funktionen, die Webflow bietet.
Die Webflow University (Link: https://university.webflow.com/) bietet vor allem für Einsteiger eine super Möglichkeit sich mit den Prinzipien von dem CMS vertraut zu machen. Außerdem hat Webflow eine sehr aktive Community und Du findest auf YouTube, in Blogbeiträgen oder im Webflow Forum so gut wie zu allen Fragen passende Antworten.
Welche Kosten sind mit der Nutzung von Webflow verbunden und welche Pläne sind am besten für meine Bedürfnisse geeignet?
Webflow unterscheidet zwischen „Site Plans“, die sich auf einzelne Websites beziehen, und „Workspace Plans“, die für Teams oder Freelancer gedacht sind, die mehrere Websites verwalten. Der „Starter Plan“ ist in beiden Fällen kostenlos und bietet Grundfunktionen, während höhere Pläne (z.B. „Basic – $14“, „CMS – $23“, „Business – $39“ für Site Plans und „Core – $19“, „Growth – $49“ für Workspace Plans) erweiterte Funktionen wie mehr Seiten, Bandbreite, CMS-Items und Zugriffsberechtigungen bieten.
Die meisten Unternehmen arbeiten mit einem Site Plan auf der jeweiligen Unternehmenswebsite. Für einfachere Seiten ohne eigenes CMS, um Blogartikel, Teammitglieder oder News einfacher zu verwalten, reicht Basic in der Regel aus. Für größere und skalierbare Projekte empfehle ich CMS.
Welche Herausforderungen könnten beim Übergang von einem anderen CMS zu Webflow auftreten und wie überwinde ich diese?
Der Umstieg auf Webflow kann aufgrund seines einzigartigen Ansatzes im Vergleich zu anderen CMS Herausforderungen mit sich bringen.
Benutzeroberfläche: Webflow bietet eine Menge an Anpassungsmöglichkeiten, die anfangs für Einsteiger überwältigend wirken können. Das Design des Systems ist jedoch grundsätzlich klar strukturiert, was bedeutet, dass man mit der Zeit ein besseres Verständnis und eine effektivere Nutzung entwickelt.
Kostenstruktur: Die Preisgestaltung von Webflow kann für Neulinge zunächst schwer zu durchschauen sein. Es empfiehlt sich, die verschiedenen Tarifoptionen genau zu prüfen und eventuell mit einem Webflow Experten zu sprechen.
Arbeiten ohne Plugins: Webflow strebt danach, möglichst unabhängig von Plugins zu funktionieren. Dies bedeutet, dass die meisten Anpassungen und Funktionen direkt in Webflow gemacht werden können.
Datenmigration: Die Migration von vielen Daten z. B. bei größeren Blogs kann mit viel Zeitaufwand verbunden sein. Beim Übertragen von Inhalten, wie Blogartikeln, bietet Webflow Importfunktionen. Dies erleichtert den Umzug von Inhalten erheblich und minimiert manuellen Aufwand.
SEO-Rankings: Wenn Du Deine Website zu Webflow umziehst, können sich die URL-Strukturen ändern, was potenziell deine SEO-Rankings beeinträchtigen könnte. Durch das Einrichten von 301-Weiterleitungen in den Site Settings kannst Du jedoch 404-Fehler vermeiden und die Funktion der Links gewährleisten.