{"id":1889,"date":"2022-12-07T14:52:53","date_gmt":"2022-12-07T13:52:53","guid":{"rendered":"https:\/\/informatik.htwk-leipzig.de\/seminar\/?p=1889"},"modified":"2022-12-08T14:50:57","modified_gmt":"2022-12-08T13:50:57","slug":"webflow","status":"publish","type":"post","link":"https:\/\/informatik.htwk-leipzig.de\/seminar\/lehrveranstaltungen\/betriebliche-informationssysteme\/2022\/webflow\/","title":{"rendered":"Webflow"},"content":{"rendered":"

Allgemein: Pagebuilder<\/h1>\n

Pagebuilder sind Tools, die es erm\u00f6glichen, Webseiten ohne tiefgehende Programmierkenntnisse in HTML oder CSS zu erstellen. Somit k\u00f6nnen Personen mithilfe von Pagebuildern Webseiten erstellen, die bislang keine Erfahrungen in der Website Programmierung haben. Im betrieblichen Kontext bedeutet dies beispielsweise, dass auch Angestellte im Bereich Marketing, Management oder Design, Websites erstellen oder bearbeiten k\u00f6nnen.<\/p>\n

Je nach Tool sind allerdings die Gestaltungsm\u00f6glichkeiten mitunter stark eingeschr\u00e4nkt, da auf Templates und vorgegebene Komponenten zur\u00fcckgegriffen werden muss. Auch ist es teilweise unm\u00f6glich mithilfe von Pagebuildern komplexe Funktionalit\u00e4ten (Bezahlvorg\u00e4nge, Content Mangement, Login-Funktionen, …) in Webseiten zu integrieren.<\/p>\n

\"\"<\/a>
Quelle: webflow.com<\/figcaption><\/figure>\n

Webflow: \u00dcberblick<\/h1>\n
\"Webflow
Quelle: webflow.com<\/figcaption><\/figure>\n

Webflow existiert bereits seit \u00fcber 10 Jahren und hat sich als SaaS (Software as a Service) im Bereich der Website-Pagebuilder etabliert. Nutzer k\u00f6nnen mit dem Cloud-basierten Tool Webseiten entwerfen und direkt \u00fcber Webflow hosten.<\/p>\n

Im Gegensatz zu namenhaften Konkurrenten wie „Wix“, „Squarespace“ oder „Jimdo“ ist Webflow eher f\u00fcr fortgeschrittene Anwender geeignet. Um Webflows M\u00f6glichkeiten komplett auszusch\u00f6pfen, sollte ein grundlegendes Verst\u00e4ndnis von Webprogrammierung vorhanden sein. Anders als bei einfacheren Tools, arbeitet man in Webflow direkt mit den HTML-Elementen und passt deren Optik \u00fcber CSS Attribute an. Man sollte also die prinzipielle Funktionsweise von HTML-Elementen kennen und wissen, welche CSS Attribute deren Gestaltung auf welche Weise beeinflussen.<\/p>\n

Die Erstellung einer aufw\u00e4ndigen Webseite von Grund auf, eignet sich in Webflow somit nicht f\u00fcr Laien der Website-Programmierung. Einfache Seiten k\u00f6nnen jedoch anhand von Templates und vorab erstellten Komponenten erstellt werden, ohne ein tiefgehendes Verst\u00e4ndnis der dahinterliegenden Technologie zu haben (dazu mehr unter Ressourcen & Community).<\/p>\n

Anders als bei einfacheren Pagebuilder Tools werden fortgeschrittene Webdesigner & -entwickler durch die M\u00f6glichkeiten von Webflow nicht ausgebremst. Es besteht die M\u00f6glichkeit eigenen HTML, CSS und JS Code in der Seite zu integrieren und bestehende Elemente \u00fcber den visuellen Editor pr\u00e4zise auf CSS-basis anzupassen. Dazu kommen zahlreiche Funktionen, mit denen einfache Seiten mit einem Content Mangement Systemt (CMS) oder einer Online-Shop Funktionalit\u00e4t erweitert werden k\u00f6nnen.<\/p>\n

Funktionsumfang<\/h2>\n

Im folgenden werden verschiedene Funktionen von Webflow beschrieben. Zu Beginn wird auf die beiden Oberfl\u00e4chen der Website-Bearbeitung (Designer und Editor) eingegangen. Im Anschluss wird die Hosting-Funktion erl\u00e4utert, die es erm\u00f6glicht, die erstellte Webseite \u00fcber einen Webserver abzurufen. Die darauf folgenden Funktionen (CMS, E-Commerce, Memberships und Logikautomatisierung) stellen Erweiterungen dar, mit denen komplexere Webseiten erstellt werden k\u00f6nnen.<\/p>\n

Designer<\/h3>\n

Der Webflow Designer ist die Oberfl\u00e4che, in der Webseiten mit visuellen Werkzeugen erstellt werden k\u00f6nnen. Vorgegebene HTML-Elemente (wie bspw. Texte, \u00dcberschriften, Links,\u00a0Bild<\/span>er<\/span>,<\/span> Sch<\/span>alt<\/span>fl<\/span>\u00e4<\/span>chen und<\/span>\u00a0Form<\/span>ul<\/span>are<\/span>) k\u00f6nnen per Drag & Drop in die zu erstellende Seite gezogen werden. Die Elemente k\u00f6nnen hierarchisch angelegt und in verschiedenen Ansichten (Desktop, Tablet, Mobil) betrachtet werden. Nach dem Platzieren der Elemente k\u00f6nnen diese anhand von CSS-Attributen angepasst werden. Im Designer ist es ebenfalls m\u00f6glich, CMS-Elemente (siehe CMS Integration), Online-Shop Produkte (siehe E-Commerce) oder eigenen JavaScript-, CSS- oder HTML-Code einzupflegen.<\/p>\n

\"\"<\/a>
Screenshot des Webflow Designers<\/figcaption><\/figure>\n

Editor<\/h3>\n

Webflow bietet \u00fcber den Webflow Editor eine M\u00f6glichkeit an, bestehende Webflow Projekte direkt auf der Live-Seite der jeweiligen Webseite zu bearbeiten. Hierbei kommt ein WYSIWYG (What You See Is What You Get) Prinzip zum Einsatz, bei dem die Elemente der Webseite bearbeitet oder ausgetauscht werden k\u00f6nnen. Hierbei k\u00f6nnen lediglich bestehende Elemente redaktionell (Texte, Bilder, Videos) ausgetauscht, sowie CMS-Elemente angelegt, bearbeitet und gel\u00f6scht werden.<\/p>\n

\"\"<\/a>
Screenshot des Webflow Editors<\/figcaption><\/figure>\n
\"\"<\/a>
Bearbeitung eines CMS Eintrags im Webflow Editor<\/figcaption><\/figure>\n

Hosting<\/h3>\n

Eine Webflow Webseite kann direkt \u00fcber Webflow gehostet werden. Standardm\u00e4\u00dfig ist das Projekt dann unter einer Subdomain von \u201cwebflow.io<\/a>\u201d erreichbar. Durch eine einfache Verbindung zu Domainregistraren kann die Webseite auch unter einer eigenen Domain verf\u00fcgbar gemacht werden.<\/p>\n

Ab einer Preiskategorie l\u00e4sst sich auch der HTML-, CSS- und JS-Code der Webflow Webseite exportieren, wodurch ein externes Hosting der Webflow Seite m\u00f6glich ist. Beim Code-Export werden allerdings nur statische Elemente exportiert. Elemente, die beispielsweise per CMS oder E-Commerce Funktion angelegt wurden, werden nicht mit exportiert und gehen verloren.<\/p>\n

CMS Integration<\/h3>\n

Mit der CMS (Content Management System) -Funktion von Webflow kann man Daten, die man in der Webseite verwenden m\u00f6chte, in einer zentralen Datenbank verwalten. Diese Daten k\u00f6nnen dann im Designer in Form von Platzhaltern eingesetzt und visuell angepasst werden. Dies ist vor allem n\u00fctzlich f\u00fcr Inhalte, die mehrfach auf Unterseiten der Website vorkommen und hiermit zentral bearbeitet werden k\u00f6nnen.<\/p>\n

In den sog. Collections, kann definiert werden, welche Form die gespeicherten Daten annehmen (bspw. Text, Bilder, Videos, Wahrheitswerte, Datumsangaben, etc.). Innerhalb der Collection k\u00f6nnen dann Eintr\u00e4ge angelegt werden, die jeweils die festgelegten Datentypen der Collection enthalten.<\/p>\n

F\u00fcr jede Collection kann eingestellt werden, dass jeder Eintrag eine eigne Unterseite erh\u00e4lt. Mit diesem Prinzip lassen sich beispielsweise Blogs oder Portolio Webseiten erstellen, bei denen automatisch eine Unterseite f\u00fcr jeden neuen CMS-Eintrag erstellt wird.<\/p>\n

\"\"<\/a>
Konfiguration einer CMS Collection<\/figcaption><\/figure>\n

E-Commerce<\/h3>\n

Mit der E-Commerce Funktion kann innerhalb von Webflow ein Online-Shop erstellt werden. Daf\u00fcr stehen zahlreiche vorgefertigte Elemente zur Verf\u00fcgung, mit denen sich bspw. die Produktvorschau, der Bezahlvorgang und die Warenkorbverwaltung implementieren lassen.<\/p>\n

\"\"<\/a>
Screenshot des E-Commerce Bereichs im Webflow Designer<\/figcaption><\/figure>\n

Memberships (Beta)<\/h3>\n

Mit dem Memberships Feature kann man Mitgliedschaften f\u00fcr die Webseite erstellen und verwalten. \u00dcber ein Login-Portal k\u00f6nnen sich Mitglieder anmelden, um Zugriff auf spezielle Seiten zu erhalten, die dem Gast Nutzer verwehrt sind.<\/p>\n

Durch die Kombination von Membership und E-Commerce Funktionen lassen sich hierdurch beispielsweise Paywalls einstellen, womit nur Nutzer den Zugriff auf Inhalte haben, f\u00fcr die sie bezahlt haben.<\/p>\n

Logikautomatisierung (Beta)<\/h3>\n

Mit dem Feature namens „Logic“ k\u00f6nnen Automationen innerhalb von Webflow erstellt werden. Logic Automationen bestehen aus drei Schritten: Trigger, Bedingungen und Aktionen.<\/p>\n

Trigger<\/strong> sto\u00dfen Automationen an, und k\u00f6nnen von abgesendeten Webflow-Formularen oder externen Webhooks ausgel\u00f6st werden. Als Webhooks werden Zugriffe auf Schnittstellen (APIs) anderer webbasierten Systeme bezeichnet.<\/p>\n

Bedingungen<\/strong> werden verwendet, um auf der Grundlage der Daten (des Formulars oder Webhooks) Unterscheidungen durchzuf\u00fchren.<\/p>\n

Aktionen<\/strong> werden ausgef\u00fchrt, sobald die entsprechenden Bedingungen zutreffen. Hierbei k\u00f6nnen beispielsweise Benachrichtigungen gesendet, Berichte erzeugt oder die Daten weiterverarbeitet werden.<\/p>\n

\"\"<\/a>
Screenshot des Webflow Logic Features<\/figcaption><\/figure>\n

Ressourcen & Community<\/h2>\n

Um mit Webflow komplexe Webseiten und beeindruckende Designs erstellen zu k\u00f6nnen, muss der Anwender sich entweder bereits gut mit dem System auskennen, oder auf Ressourcen (bspw. aus dem Webflow Marketplace) und Hilfe aus der Webflow Community zur\u00fcckgreifen. Webflow hat bereits zahlreiche Anh\u00e4nger, die ihre Arbeit und Erfahrungen (meist) kostenfrei mit der Community teilen.<\/p>\n

„Made with Webflow“ Clonables<\/h3>\n

Ein Beispiel f\u00fcr den Austausch von Projekten innerhalb der Community ist hierbei die Plattform „Made with Webflow“, welche auf der Webflow Homepage zu finden ist. Hier stellen Webdesigner ihre Webflow Projekte vor. Neben einer Beschreibung und Screenshots ist auch die Webseite direkt aufrufbar und benutzbar.<\/p>\n

Ein gro\u00dfer Teil der Webseiten sind als sogenannte „Clonables“ kostenfrei in den eigenen Webflow Arbeitsbereich duplizierbar. Hierdurch kann sich zum einen angesehen werden, wie das Projekt in Webflow umgesetzt wurde (z.B. welche Struktur aufgebaut wurde und wie diese gestaltet wurde) und andererseits k\u00f6nnen einzelne Komponenten des Projekts in eigene Webflow Seiten kopiert werden.<\/p>\n

Clonables tragen dazu bei, zu verstehen, wie bestimmte Webseiten-Features in Webflow konzipiert werden und k\u00f6nnen als Ausgangspunkt f\u00fcr eigene Designs dienen.<\/p>\n

Templates<\/h3>\n

Webflow bietet neben den Clonables auch einen Marktplatz f\u00fcr Templates an. Auf diesem k\u00f6nnen hochqualitative Webdesigns von professionellen Agenturen oder Webflow selbst erworben werden. W\u00e4hrend vereinzelte einfache Templates kostenfrei verwendet werden k\u00f6nnen, kosten die allermeisten Templates aktuell zwischen $30 USD und $150 USD.<\/p>\n

Templates eignen sich ideal f\u00fcr Laien oder Anf\u00e4nger der Website-Entwicklung, da ohne spezielle Vorkenntnisse Webseiten erstellt werden k\u00f6nnen.<\/p>\n

Libraries (Beta)<\/h3>\n

Neben den Clonables und Templates werden auf dem Webflow Marketplace auch Librarys (Bibliotheken) angeboten. Diese k\u00f6nnen in ein Webflow Projekt integriert werden und enthalten einzelne, anpassbare Website-Komponenten (Hero Banner, CTA Buttons, Spezielle Layouts).<\/p>\n

Integrationen (Webflow Apps)<\/h2>\n

Seit kurzem bietet Webflow auf ihrem Marketplace auch sogenannte Webflow Apps an, die \u00fcber eine API Schnittstelle die Funktionalit\u00e4t der Webseite erweitern k\u00f6nnen. Webflow kuratiert hierbei anhand bestimmter Standards die Apps, wodurch nur hochqualitative Anwendungen Zugriff auf die Webflow API erhalten sollen.<\/p>\n

Mit Webflow Apps k\u00f6nnen beispielsweise Webflows CMS-Eintr\u00e4ge mit externen Datenbanken synchronisiert oder zeitgesteuert ver\u00f6ffentlicht werden (z.B. mit Story Chief oder Whalesync). Andere Apps erlauben tiefgreifendere E-Commerce Funktionalit\u00e4ten, wie die Anbindung von CRM (Customer-Relationship-Management) – Systemen oder Cross-Selling-Systemen (z.B. mit Monto oder Upsells). Auch Analysetools sind per Webflow App in eine Webseite integrierbar (z.B. mit Audienceful oder Nocodelytics).<\/p>\n

Ablauf einer Website-Erstellung<\/h1>\n

Anhand des folgenden BPMN (Business Process Model and Notation) Diagramms soll beispielhaft der Prozess einer Website-Erstellung mit Webflow dargestellt werden. Dabei soll als fiktives Beispiel eine Marketing One-Page Website (Webseite ohne Unterseiten) f\u00fcr ein neues Produkt erstellt werden. F\u00fcr diesen Prozess sind drei Personen aus unterschiedlichen Bereichen eines Unternehmens beteiligt:<\/p>\n

Projektmanager<\/strong>:<\/strong> In unserem Beispiel startet der Prozess, in dem ein Projektmanager sich f\u00fcr die Verwendung von Webflow entscheidet. Nun muss dieser sowohl ein Site-Plan als auch ein Workspace-Plan ausw\u00e4hlen. Die verschiedenen Pl\u00e4ne unterscheiden sich ma\u00dfgeblich im Umfang der enthaltenen Funktionen, der Skalierung und dem Preis. Da nur eine einfache One-Page Webseite ohne Unterseiten oder Online-Shop erstellt werden soll, gen\u00fcgt es, einen „Basic Plan“ als Site-Plan zu w\u00e4hlen. Da eine parallele Bearbeitung der Seite vorerst nicht gew\u00fcnscht wird, wird sich beim Workspace-Plan f\u00fcr den Starter Plan entschieden. Nach dem Entscheidungsprozess muss ein Account mit zugeh\u00f6rigem Login erstellt werden und dar\u00fcber die gew\u00e4hlten Pl\u00e4ne gebucht werden. Die weitere Arbeit der Website-Erstellung \u00fcbernehmen nun spezialisierte Web-Designer und Marketing-Spezialisten. Anschlie\u00dfend kann der Projektmanager die Website ver\u00f6ffentlichen, indem die firmeneigene Domain angebunden wird.<\/p>\n

Web-Designer:<\/strong> Nachdem der Web-Designer Zugriff auf das Interface von Webflow erhalten hat, kann er beginnen, das Layout und Design der Website im Webflow Designer zu erstellen. Je nach Anforderungen und Know-How kann der Designer entweder mit einer blanken Seite starten, oder auf Basis eines Templates, Clonables oder einer Library die Webseite entwerfen.<\/p>\n

Marketing-Spezialist:\u00a0<\/strong>Nachdem die Webseite vom Web-Designer fertig erstellt wurde, kann ein Marketing-Spezialist das Wording von Texten oder Bilder redaktionell im Webflow Editor austauschen. Hierf\u00fcr ist keine Erfahrung in der Website-Programmierung erforderlich.<\/p>\n

\"\"<\/a>
BPNM Diagramm: Beispielhafter Ablauf einer Marketing OnePage Website Erstellung mit Webflow (Klicken zum Vergr\u00f6\u00dfern)<\/figcaption><\/figure>\n

Nachteile von Webflow<\/h1>\n

Tr\u00fcgerische Einfachheit<\/h2>\n

Der visuelle Editor von Webflow erscheint zun\u00e4chst leicht zu bedienen und schnell l\u00e4sst sich ein Design anlegen. Fehlt jedoch das n\u00f6tige Verst\u00e4ndnis der HTML Elemente und CSS Layout Systeme (Flexbox, Grid, Float, etc.) so bekommt man sp\u00e4testens beim Versuch, die Webseite responsive (f\u00fcr Mobilger\u00e4te optimiert) anzulegen gro\u00dfe Probleme. Dem kann teilweise durch die Verwendung von Clonables, Librarys und Templates entgegengewirkt werden. Doch auch hierbei sollte ein Grundverst\u00e4ndnis f\u00fcr Webentwicklung vorhanden sein, da man sonst Gefahr l\u00e4uft, fahrl\u00e4ssig im Umgang mit sensible Nutzerdaten oder dem allgemeinen Datenschutz zu handeln.<\/p>\n

Datenschutz<\/h2>\n

Webflow wird in den USA entwickelt und die Projekte werden auch dort gehostet. Besonders, wenn auf einer mit Webflow erstellten Seite Nutzerdaten gespeichert werden, sollte genau gekl\u00e4rt werden, dass dies im Einklang mit der DSGVO geschieht. Allgemein sollte darauf geachtet werden, dass in der Datenschutzerkl\u00e4rung einer Seite, die mit Webflow erstellt wurde, der Webseitenbesucher auf die Technologie und das Hosting in der USA hingewiesen wird.<\/p>\n

Hosting<\/h2>\n

Wie bereits beschrieben, ist das Exportieren des Website-Codes aus Webflow heraus nur bedingt m\u00f6glich. Sobald CMS oder E-Commerce Elemente auf der Webseite verwendet wurden, gehen diese Daten beim Export verloren. Somit ist man meist auf das von Webflow angebotene Hosting Paket angewiesen, was sich auf Dauer teurer als vergleichbare Hosting Services erweisen kann.<\/p>\n

Trennung der Entwicklungsumgebung<\/h2>\n

In der professionellen Webentwicklung wird darauf geachtet, dass die \u00f6ffentlich zug\u00e4ngliche Website immer in einem perfekten Zustand ist. Das bedeutet, dass es f\u00fcr die Entwicklung und das Testen von neuen Features oder \u00c4nderungen separate Systeme gibt, welche nicht \u00f6ffentlich zug\u00e4nglich sind. Konkret erfolgt dies durch \u201cBranching\u201d in git, sowie die Trennung von \u201cStaging\u201d- und \u201cLive\u201d-Websiten. Sobald ein Feature in einem Entwicklungs-Branch ausreichend getestet ist, wird der Code in den prim\u00e4ren Branch \u00fcberf\u00fchrt und die Live-Website dementsprechend aktualisiert. Webflow bietet kein vergleichbares Konzept. Hier kann nur an der Live-Seite gearbeitet werden.<\/p>\n

Alternativen<\/h1>\n

Eine Auswahl alternativer Systeme sind hier aufgelistet. All diese Systeme fallen (teilweise mit Pugins; vorallem bei WordPress) in die Kategorie der Pagebuilder:<\/p>\n

    \n
  • WIX<\/li>\n
  • Elementor<\/li>\n
  • Squarespace<\/li>\n
  • WordPress<\/li>\n
  • Weebly<\/li>\n
  • Jimdo<\/li>\n<\/ul>\n

    Quellen<\/h1>\n
      \n
    • https:\/\/webflow.com (mit allen Unterseiten)<\/li>\n
    • https:\/\/www.webflow-lernen.de\/lp\/das-webflow-cms-ein-umfangreicher-einblick-in-die-funktionen<\/li>\n
    • <\/li>\n
    • https:\/\/raidboxes.io\/blog\/webdesign-development\/wordpress-pagebuilder-nachteile<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

      Allgemein: Pagebuilder Pagebuilder sind Tools, die es erm\u00f6glichen, Webseiten ohne tiefgehende Programmierkenntnisse in HTML oder CSS zu erstellen. Somit k\u00f6nnen<\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1889","post","type-post","status-publish","format-standard","hentry","category-betriebliche-informationssysteme"],"_links":{"self":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/1889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/comments?post=1889"}],"version-history":[{"count":24,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/1889\/revisions"}],"predecessor-version":[{"id":2357,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/posts\/1889\/revisions\/2357"}],"wp:attachment":[{"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/media?parent=1889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/categories?post=1889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatik.htwk-leipzig.de\/seminar\/wp-json\/wp\/v2\/tags?post=1889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}