Eine Website erstellen - So gelingt es mit Webflow

Veraltete Webseiten sind manchmal schlimmer als überhaupt keine zu haben. Auch wenn sich wichtige Informationen daraus ableiten lassen - das Baukastendesign aus den 90ern, die unbeholfene Struktur und die schlechte Navigation können abschreckend wirken. Die Professionalität eines Internetauftritts wird von Interessenten auch als Indikator der Firmenkultur wahrgenommen. Das bedeutet, wer schon bei seiner öffentlichen Präsentation versagt hat, dem traut man keine Qualität bei Service und Produkten zu.

Aber wie soll man an eine repräsentative Webseite kommen? Möglichkeiten für den schnellen Einstieg gibt es viele. Wer sich in wenigen Stunden einen einigermaßen ansehnlichen Internetauftritt zusammen basteln möchte, für den stehen Wix oder Jimdo bereit. Diese Baukästen sind für private Homepages und kleine Unternehmen eine preiswerte Lösung, um dieses Problem zu beheben. Jedoch kommen diese Systeme schnell an die Grenze ihrer Leistungsfähigkeit. Dynamischer Content, komplexe Seitenstrukturen oder aufwendige Shopsysteme sind mit diesen Ansätzen nicht umsetzbar. Doch das heißt nicht, dass ab diesem Moment nur noch ein teurer HTML-Programmierer weiterhelfen kann. Webflow ist ein Service, der genau die Lücke zwischen Baukastensystem und individueller und komplexer Programmierung ausfüllen kann.
‍

‍
Was ist Webflow?

Webflow ist ein System zur individuellen Gestaltung von Internetseiten mit mittlerer Komplexität. Es verbindet die Einfachheit eines Baukastens mit der Dynamik und Anpassungsfähigkeit einer individuell gestalteten Seite. Die "Brandmauern" HTML und CSS sind bei Webflow extrem niedrig gehalten. Das macht dieses Tool zu der bevorzugten Lösung von Designern zur Erstellung individueller Websites ohne den dazu erforderlichen Programmieraufwand. Der Schlüsselbegriff in diesem Zusammenhang ist das "Visuelle Programmieren".
‍

‍
Was ist "visuelles Programmieren"?

Es ist auch heute noch für Laien schwer vorstellbar, wie aus den kryptischen Zeilen eines Codes eine sichtbare und nutzbare Website entstehen kann. Das Programmier-Kauderwelsch schreckt dem entsprechend viele davon ab, es selbst mit HTML oder CSS zu versuchen. Visuelles Programmieren holt die Webdesigner dort ab, wo sie stehen. Mit Tools, die an bekannte Programme erinnern, gelingt die Umsetzung wesentlich intuitiver. Der Code wird parallel zur Drag+Drop Gestaltung im Hintergrund automatisch mit geschrieben. Er ist jederzeit zugänglich und lässt sich für Feinarbeiten anpassen.
‍

‍
Webflow für Einsteiger?

Trotz maximaler Usability ist Webflow dennoch kein Tool für blutige Anfänger. Der Anwender sollte einiges an Kompetenz mitbringen, um mit Webflow zu brauchbaren Ergebnissen zu kommen. Ein einigermaßen sicherer Umgang mit Photoshop oder Illustrator erleichtern den Einstieg in Webflow erheblich. Zumindest ist mit diesen Kenntnissen das grundsätzliche Handling der Webflow Oberfläche deutlich einfacher.

Webflow ist als erweitertes Baukastensystem für anspruchsvolle Anwendungen zu verstehen. Um es effektiv einsetzen zu können, ist auch die Kenntnis um das Layout von professionellen Webseiten erforderlich. Grundsätzliche Anforderungen wie einfache Navigation und klare Seitenstruktur sind mit Webflow schnell umsetzbar. Die Voraussetzung ist jedoch, dass der Bediener nicht "drauflos" gestaltet, sondern er sich mit den etablierten Gestaltungsmerkmalen von Websites auskennt.
‍

‍
Die Webflow Oberfläche

Die Oberfläche von Webflow ist ein Whiteboard mit vertraut wirkenden Werkzeugen an den Seitenrändern. Das macht den Einstieg in die Software für erfahrene Designer besonders einfach. Die weiße Wand wirkt zudem sehr vertrauenserweckend im Hinblick auf kreative Gestaltungsfreiheit. Anders als bei traditionellen Baukastensystemen lädt die Webflow Oberfläche zum beliebigen Gestalten der Webseite ein. Gewisse Limitierungen sind nicht ganz unvermeidlich. So ist die Sektionierung der Seite primär auf vier Grunddesigns beschränkt. Mit Kopfzeile, Blocksatz, Quadranten und Spalten sind die üblichen Grundelemente einer Webseite vorhanden. Eine weitere Ausdifferenzierung ist später aber immer noch möglich. Der Ablauf der Gestaltung verläuft bei Webflow stets nach dem folgendem Schema:

• Section
• Container

‍
Die Section

Die Section ist in Position, Höhe und Breite individuell und dynamisch einstellbar. Hier lassen sich in Webflow bereits Abhängigkeiten zum verwendeten Browser einstellen. Das ist vor allem für Multi-Plattform-Anwendungen interessant, was jedoch auch heute zum Standard gehört. Mit diesen voreingestellten Abhängigkeiten lässt sich die Webseite auf jeder Bildschirmgröße und jedem Endgerät in der gleich bleibenden Lesbarkeit darstellen. Ob alter 4:3 Monitor, 16:9 Labtop-Bildschirm, Smartphone oder Tablet , die dynamische Layoutverwaltung von Webflow garantiert eine gleich bleibende Usability. In der Section wird auch die Hintergrundfarbe definiert. Deren Einstellung ist vor allem für erfahrene Photoshop-User besonders einfach zugänglich. Die RGB Farbverwaltung sieht annähernd identisch aus. Dazu gehört auch das codebasierte Einstellen der Hintergrundfarbe. Diese gewährleistet unter Webflow stets die maximale Präzision.
‍

‍
Der Container

Im Container wird der Content, also der Text eingetragen. Dazu bietet Webflow einige bewährte Strukturen an. Eine typische Formatierung ist H1 - H2 - H3 - body - caption- links. Das Einhalten dieser Strukturen ist vor allem unter SEO-Gesichtpunkten sehr wichtig. Schließlich geht es bei der Arbeit mit Webflow auch um professionelle Gestaltung von Unternehmensseiten. Das zieht eine gute Sichtbarkeit bei den Suchmaschinen mit sich. Webflow kommt dieser Forderung entgegen, indem es die Seiten schon im Aufbau auf SEO optimiert. Die Content-Struktur in den Containern ist dazu ein zentrales Bestandteil.

Die Texte in den Containern werden durch die ausgewählten Schriftarten dargestellt. Diese sind beliebig konfigurierbar. Empfohlen ist der Rückgriff auf die Google Fonts. Bei diesen Schriftarten sollten keine Probleme bei Darstellung und Umsetzung zu erwarten sein. Auf der Webflow Oberfläche lassen sich die Schriftarten noch nachträglich in die üblichen Varianten "Schräg" (Italic) und "Fett" (Bold) verändern. Interessant bei den Google Fonts ist, dass diese Umgestaltungen einer Schriftart sich deutlich differenzierter einstellen lässt. So kann man mit wenigen Klicks der Webseite ein besonders individuelles Antlitz geben.

Etwas bedauerlich bei Webflow ist, dass die bekannte Option "Inhalte unformatiert einfügen" nicht verfügbar ist. Einfaches Copy+Paste aus anderen Dokumenten kann deshalb zu unangenehmen Störungen führen. Der Trick dabei ist, kopierten Content zunächst in Notepad zwischenzuspeichern. Texte, die aus Notepad kopiert werden, sind grundsätzlich unformatiert. Die lästigen Formatierungen aus dem originalen Content werden damit gelöscht.

Für die Gestaltung des Containers bietet Webflow die üblichen Elemente an, die man für diesen Content erwartet. Dazu gehört auch die Einrichtung von Links und linkbasierten Buttons. Buttons, also "klickbare" Schaltelemente haben ihr eigenes Menü. Mit seiner Hilfe gestattet Webflow die oberflächliche Gestaltung von Buttons. Das schließt vor allem Schriftart und Hintergrundfarbe ein. Etwas bedauerlich ist es, dass die direkte Gestaltbarkeit von Buttons unter Webflow hier schon aufhört. Wenn der Button animiert werden soll, beispielsweise zum Ändern der Farbe beim Anwählen, dann muss er nachgebaut werden. Aber auch das ist unter Webflow recht unproblematisch und lässt sich mit ein paar Klicks realisieren.

Interessant an den Gestaltungsmöglichkeiten von Containern ist, dass es für die Positionierung und Gestaltung mehr als eine Möglichkeit gibt. Das punktgenaue Positionieren und Einstellen über Parameter ist natürlich immer gegeben. Darüber hinaus bietet Webflow auch Navigations-Schaltflächen an. Mit deren Hilfe ist die Gestaltung der Container wesentlich intuitiver möglich. Statt vorher wissen zu müssen, wie es nach dem Eintippen der Parameter werden soll, kann man sich mit dieser Lösung per Mausklick visuell an den gewünschten Zustand herantasten.
‍

‍
Importieren von Bildern und Grafiken unter Webflow

Eine mutlimediale Webseite präsentiert nicht nur Text, sondern zumindest auch Bilder. Deren Import ist unter Webflow überschaubar komplex. Dass sich keine Bilder per Copy + Paste auf einer Webseite einfügen lassen, versteht sich von selbst. Auch wenn die Oberfläche des Tools auf maximale Benutzerfreundlichkeit hin optimiert ist, es ist dennoch ein HTML Editor. Dieser kann nur an einem definierten Ort gespeicherten Bilder zu bestimmten Sektionen einer Webseite verlinken. Wie immer, sollte man einigen Aufwand in die Gestaltung der Bilder investieren. Neben Farbwahl und Kontrasteinstellungen ist vor allem die Pixelgröße wichtig. Eine zu geringe Auflösung führt zu unscharfen Darstellungen. Das sieht nicht nur unschön aus, es senkt auch die Benutzbarkeit der Webseite. Eine zu hohe Auflösung macht die Webseite wiederum langsam und führt zu Problemen auf anderen Plattformen. Grundsätzlich gilt: Ladezeiten werden bei Seiten ohne Videos praktisch nicht mehr akzeptiert.
Es ist deshalb erforderlich, Bilder zunächst hochzuladen. Dazu bietet Webflow ein eigenes Fenster an, mit dem sich die Medien gut verwalten lassen.
Nachdem das Bild gespeichert ist, lässt es sich unter definierten Voreinstellungen auf der Oberfläche platzieren. Dazu bietet Webflow folgende Optionen an:

• Bild-Widget
• Hintergrund

Das Bild-Widget ist besonders schnell und einfach. Es eignet sich für Abbildungen, die nur auf einer bestimmten Seite und an einer bestimmten Position zu sehen sein sollen. Ein typisches Beispiel dafür sind die Produktabbildungen in einem Webshop.
Der Hintergrund ist hingegen auf mehreren Seiten zu sehen. Er ist immer an derselben Stelle und wird immer gleich dargestellt.
Mit einigen zusätzlichen Einstellungen lässt sich so die Webseite Stück für Stück aufbauen.
‍

‍
Webflow Oberfläche vs. Browser Darstellung

Die Webflow Oberfläche ist darauf ausgelegt, dem Anwender eine möglichst wirklichkeitsnahe Darstellung seiner Webseite zu vermitteln. Eine vollständige Kongruenz zwischen Bearbeitungs-Bildschirm und Darstellung im Browser ist natürlich nicht möglich. Um festzustellen, wie die Webseite tatsächlich aussieht, klickt man auf den "Publish" Button. Dieser führt zu einer normalen Webseiten-Darstellung. Der Anwender kann sich so ein Bild von den bisherigen Ergebnissen machen und ggf. Anpassungen vornehmen.
‍

‍
Wie sauber ist die Codierung unter Webflow?

Theoretisch ist es möglich, eine Webseite vollständig mit Word oder Excel zu erstellen. Schaut man sich bei diesen Lösungen aber den HTML-Code an, reibt man sich die Augen. Auch einfachste Webseiten führen schnell zu Zeilenwüsten, die sich kaum noch nachvollziehen lassen. Ähnlich sieht es bei den traditionellen Baukastensystemen für Webseiten aus. Webflow legt hingegen größten Wert auf einen sauberen Code. Das bedeutet, dass sich der Code im Hintergrund permanent dynamisch anpasst. Eine ständige Reduktion auf das Wesentliche wird durch eine KI umgesetzt. Das hält die Programmierung schlank und nachvollziehbar. Außerdem trägt es zur schnellen Darstellung der mit Webflow erstellten Seiten bei.
‍

‍
Ideale Zwischenlösung

Zusammengefasst lässt sich festhalten, dass Webflow eine praktikable und schnelle Zwischenlösung zwischen einfachem Baukasten-System und individueller Programmierung darstellt. Die Software ist schnell zu erlernen und kann einigermaßen versierten Designern zeitnah interessante Ergebnisse liefern. Die Sauberkeit des HTML-Codes macht ein nachträgliches Feintuning durch professionelle Programmierer besonders leicht. Mit Webflow sind mit geringfügig größerem Aufwand wesentlich bessere Ergebnissemöglich als unter Jimdo oder Wix. Wer mehr erreichen möchte als eine einfache Hobby-Webseite, aber keine Programmier-Kompetenz besitzt, der ist mit dem Produkt von Webflow gut bedient.
‍

‍
Kostenlose Starterversionen

Webflow ist in einer Grundversion kostenlos. Mit dieser abgespeckten Version lassen sich bereits einige interessante Projekte umsetzen. Vor allem ist die Version dazu geeignet, die ersten Schritte mit diesem Programm zu unternehmen. Die weitere Staffelung ist folgende:

• 12 $ im Monat (Starterpack)
• 16$ im Monat (erweiterte Möglichkeiten)
• 36$ im Monat (Business Lösung)

‍

‍
Mehr als ein "weiteres Baukastensystem"

Webflow ist dank seiner dynamischen Programmierung ein beliebtes Tool für Webentwickler geworden. Es verspricht schnelle Ergebnisse bei stets sauberem Code. Das gibt dieser Lösung einen unique factor, der in dieser Form von keinem anderen Unternehmen angeboten wird. Webflow hat daher das Potenzial, sich zu einem neuen Standard zu entwickeln. Schon heute ist "Webflow Programmierung" eine sehr gefragte Schlüsselkompetenz bei Webdienstleistern. Sie verspricht schnellere Ergebnisse und niedrigere Kosten als bei der herkömmlichen Vollprogrammierung. Das lässt auf eine große Zukunft dieser Anwendung hoffen.

‍