Mit Webflow zu neuen Schuhen

»Der Schuster hat die schlechtesten Schuh’«, heißt es im Volksmund, »und ich laufe gerade barfuß«, ergänze ich bisweilen, wenn es um meine Website geht. Ein kleiner Lacher hinterher und weiter geht’s. Man hat doch genug zu tun und es läuft ja.

Aber ein wenig Ärger bleibt trotzdem immer hängen, der sich mit der Zeit mehr und mehr auftürmt und irgendwann darauf drängt, endlich beseitigt zu werden.

Viele kennen das Problem bei der Erstellung der eigenen Website: Design, Entwicklung, CMS, Bilder, Texte, usw., all das muss man als Einzelkämpfer selbst stemmen, quasi die eierlegende Wollmilchsau beim Pferderennen spielen, damit das alles in ansprechender Qualität und überschaubarer Zeit gelingen kann.

Wenn nicht der anstehende Berg an Arbeit bereits zur Resignation führt, ist es mit Sicherheit der nächste Kundenanruf, der die zarten Pflänzchen der ersten Designversuche und Textentwürfe hinweg fegt und bis zum nächsten Motivationsschub einsam vor sich hin vegetieren lässt. Willkommen in einem Kreislauf aus Versuch, Ablenkung und wieder mal verschieben.

Damit soll nun Schluss sein. Ich habe mir zum Ziel gesetzt, noch in diesem Jahr meine neue Website online zu stellen.

Wo bislang der Schuh drückt

Ein Problem betrifft meinen Entwicklungsprozess. Am liebsten entwickle ich Websites »von Hand«. Das sorgt für schlanken Code, modernes CSS, schnelle Ladezeiten und natürlich volle Kontrolle. Bedeutet auf der anderen Seite aber auch sehr viel Aufwand. Hier müssen Prozesse stärker automatisiert werden.

Dann beschäftigt mich das Pareto-Prinzip. Es besagt, dass sich etwa 80% der Aufgaben mit einem Aufwand von 20% erledigen lassen. Bedeutet für die restlichen 20% der Aufgaben aber auch 80% des Aufwands. In diesem letzen 20% liegt der Unterschied zwischen guten und mittelmäßigen Websites, weshalb ich diesen Aufwand gerne annehme. Trotzdem muss man nicht immer die 100% anpeilen. Akzeptiert man dezente Abstriche bei der Qualität, lässt sich  eine Menge Zeit sparen.

Drittens ist da FOMO, »Fear of missing out«. In jedem Bereich des Webdesign-Prozesses gibt es ständig Veränderungen, deren Tempo es schwer macht, am Puls der Zeit zu bleiben: Aktuelle Typografie- und Designtrends, neue CSS-Eigenschaften, Best Practices, Accessibility, neue CMS-Features, und und und. Gerade wenn man all diese Bereiche bedient, führt das bisweilen zu Überforderung und letztendlich zu dem Gefühl, in keinem Thema mehr richtig zu Hause zu sein. Es gilt also, den Fokus auf weniger Themen zu beschränken und ein Setting zu finden, dass mir Arbeit in den anderen Bereichen abnimmt.

Als vierter Punkt möchte ich mehr Animationen anwenden. Animationen sind ein spannender Aspekt des Webdesigns und werten das Nutzer-Erlebnis auf. Ich habe bislang kleinere CSS-Animationen in Websites verbaut, aber spätestens, wenn ich scroll-basierte Effekte realisieren wollte, war ich mit meinem Latein schnell am Ende. Hier benötige ich ein Tool, das mich unterstützt.

Enter Webflow

Ich bin nach einigem hin und her zu dem Entschluss gekommen, das Frontend-Thema und händisches Programmieren erst mal hinten anzustellen. Helfen sollen dabei sogenannte No-Code-Tools, die diesen Part dann für mich übernehmen. In den letzten Jahren habe ich häufiger No-Code-Tools unter die Lupe genommen und wieder verworfen, weil ich allzu schnell über jene Dinge gestolpert bin, die diese Werkzeuge nicht können oder eher schlecht umsetzen, statt herauszufinden, wo sie mir Zeit sparen können. Nun möchte ich dem ganzen einen neuen Versuch widmen.

Nach kurzer Recherche und vor allem auch dank des Podcasts von Jonas Arleth bin ich recht schnell bei Webflow gelandet und auch hängen geblieben. Daneben gibt es noch zahlreiche andere Tools auf dem Markt, die damit werben, ohne Code-Kenntnisse Websites bauen zu können. Die verschiedenen Website-Baukästen wie Squarespace, Wix, Jimdo & Co scheinen mir den Bereich der Frontend-Entwicklung aber zu sehr zu abstrahieren. Das mentale Modell von Webflow mit HTML-Baum und CSS-Klassen kommt meinem Frontend-Hirn da mehr entgegen.

Mit Webflow kannst du Websites in einem visuellen Editor erstellen, ohne dich mit der Programmierung selbst auseinander setzen zu müssen. Es abstrahiert den gesamten Frontend-Bereich in ein Interface. HTML und CSS klicken statt schreiben wird mir vertraute Wege wegnehmen, ich muss mir aber auch bestimmte Dinge nicht merken oder durch Probieren mühsam herausfinden. An dieser Stelle mal ein Gruß an alle, die schonmal versucht haben, in CSS einen komplexeren Verlauf zu notieren.

Bei Webflow geht es nicht nur um die Vereinfachung des Entwicklungsprozesses, auch eine vernünftige Ausgabe des generierten Quellcodes steht weit oben auf der Agenda. Sicher kann man darüber streiten, ob eine zwingende Verwendung von jQuery im Jahr 2022 noch zeitgemäß ist, die Entwickler werden sich etwas dabei gedacht haben.

Themen wie Performance und Accessibility sind auf der Webflow-Agenda, auch wenn hier noch Luft nach oben ist.

Ein ganz großer Pluspunkt ist die Möglichkeit, über das Interface recht komplexe Animationen zu bauen. Hier bin ich besonders gespannt, wie mir das mit Webflow gelingt.

Ein weiterer Vorteil ist das integrierte Content Management System, das ebenfalls komplett über das Interface verwaltet und konfiguriert wird. Was wann wie ausgegeben wird, entschieden keine PHP-Schleifen in Templates, sondern Dropdown-Felder im Editor. Eine weitere Vereinfachung, die mir einiges erleichtern wird.

Erste Eindrücke

Webflow verlangt ein gewisses Verständnis von Webentwicklung, was ich nicht als Nachteil, sondern als Vorteil ansehe. Idealerweise hast du also schon mal mit HTML und CSS gearbeitet, wenn du Webflow ausprobierst, zumindest erleichtert das den Einstieg enorm.

Im Gegensatz zur Arbeit in einem reinen Code-Editor läuft die Programmierung nicht über das Schreiben von Code-Zeilen, sondern mittels Buttons, Regler und Eingabefelder in einem Interface. Die Auswirkungen der Eingaben sind direkt in der Live-Vorschau sichtbar. Man muss sich nicht jede CSS-Eigenschaft und die damit verknüpften Werte merken, das erledigt Webflow im Hintergrund für dich. So wird der Prozess der Umsetzung beschleunigt und visuell orientierten Menschen, wie es Designer:innen nun mal sind, die Arbeit erleichtert. Nebenbei ermöglicht Webflow auch einen sanften Einstieg in das Thema Webentwicklung, falls man als Designer:in  tiefer in die Materie einsteigen möchte (was nie schaden kann!).

Das Unternehmen wirbt auf seiner Website:

The site you want — without the dev time

Heißt übersetzt, als Designer spare ich mir Zeit bei der Entwicklung, weil Webflow mir einiges an Arbeit abnimmt, auch durch Vorlagen und Komponenten oder – für mich zwar weniger interessant – ganze Website-Templates. Heißt im Umkehrschluss aber auch, ich muss mich auf das verlassen können, was dieses Programm im Hintergrund produziert. Hier wird sich zeigen, wie sehr ich mich darauf einstellen und vor allem damit leben kann 😉.

Demgegenüber stehen die Animationsfunktionen. Schon lange interessiert mich das Thema Scrollytelling (Storytelling mit Scroll-basierten Animationen), das Websites noch mal aufwertet und ganz tolle Möglichkeiten bietet. Mein erster Eindruck bestätigt mir, dass das Interface für das Anlegen der Animationen sehr übersichtlich und leicht verständlich aufgebaut ist.

Es bleibt natürlich noch herauszufinden, wie sich solche Websites hinsichtlich Ladezeit und Rechenintensität verhalten. Ich kannte Webflow bisher als ein Tool für pompöse Wow-Effekte, bei denen mein Mac-Lüfter regelmäßig unseren Staubsauger nachahmte. Viele Animationen dienen dabei gerne als Selbstzweck, weil es eben so einfach geht – Fluch und Segen zugleich.

Aber auch ohne pompöse Animationen schneiden Webflow-Websites beim Blick auf die Google Core Web Vitals nicht herausragend ab. Hier wäre natürlich eine volle Kontrolle über den Quellcode wichtig, den Webflow aber nicht bietet. Durch meinen bisherigen Prozess konnte ich für meine Kunden oft volle Gummipunkte in allen Disziplinen der Web Vitals erzielen. Da nahe heran zu kommen, wäre mir wichtig.

Neue Wege, neue Motivation

Mit Webflow betrete ich nun ganz neue Pfade, die mir gerade eine Menge Neugier und Motivation im Webdesign-Bereich zurückgeben. Mit meiner eigenen Website als Versuchskaninchen habe ich ein konkretes Projekt um herauszufinden, ob Webflow das richtige für mich ist.

Um dem ganzen noch etwas mehr Verbindlichkeit zu verpassen, möchte ich über den Fortschritt und meine Erfahrungen öffentlich berichten. Im stillen Kämmerlein kann ich viel tüfteln und wieder verwerfen, kriegt ja keiner mit. Wenn aber nur wenige Verirrte hier mitlesen und mir auf die Finger schauen, ist das ein guter Antrieb und Stachel im Hintern, das Ding auch wirklich voranzubringen. Soweit, so optimistisch.

Startschuss

So, nun wird es Zeit, Webflow anzuschmeißen und damit zu experimentieren. Wenn du das hier liest, habe ich es zumindest schon mal geschafft, den Blog einzurichten. Meine weiteren Fortschritte und Erfahrungen mit Webflow werde ich hier dokumentieren. Wir sehen uns am anderen Seite der Sonnenallee!

Wenn es euch interessiert, wie es weitergeht, folgt meinem Blog oder meinem frisch eingerichten Mastodon-Account.

‍