„Wie ging das mit dem Rechnungsversand gleich wieder?“

„Warum hat niemand dokumentiert, wie wir das letzte Mal gelöst haben?“

Kommt dir das bekannt vor?

Dann ist es höchste Zeit, dein Wissen und deine Abläufe so zu dokumentieren, dass du dich nicht mehr täglich damit aufhalten musst. Gerade als Selbstständige:r oder kleines Team brauchst du kein aufgeblähtes Wiki oder stundenlange Schulungsvideos. Du brauchst einfache, klare Strukturen, die dir und anderen helfen, schneller zu handeln und weniger zu vergessen.

In diesem Artikel zeige ich dir, wie du dein internes Wissen festhältst und weitergibst, ohne dass es dich Zeit, Energie oder Nerven kostet. Und wie du mit smarten Tools aus deiner täglichen Arbeit automatisch wertvolle Dokumentationen erzeugst.

Warum interne Wissensdokumentation dir den Alltag rettet

Wenn du alleine arbeitest, mag es eine Zeit lang funktionieren, alles im Kopf zu behalten. Aber je mehr Kunden, Tools und Aufgaben dazukommen, desto häufiger fängst du an zu suchen, zu zweifeln oder dich zu wiederholen. Und wenn du mit jemandem zusammenarbeitest – egal ob fest im Team oder projektweise mit einer VA – ist klare Dokumentation keine Option, sondern eine Voraussetzung.

Denn nur dokumentiertes Wissen ist:

• nachvollziehbar: für dich selbst in 3 Monaten
• weitergebbar: für neue Mitarbeiter:innen oder Freelancer
• skalierbar: weil du Abläufe standardisieren kannst
• automatisierbar: sobald etwas klar definiert ist, kannst du es auch automatisieren oder abgeben

Die gute Nachricht: Du musst keine Romane schreiben. Es reichen einfache Schritt-für-Schritt-Anleitungen, Checklisten oder kurze Screenshots mit Erklärungen. Und das geht heute einfacher denn je.

So dokumentierst du Wissen direkt bei der Arbeit

Das Geheimnis: Nicht nachträglich dokumentieren, sondern direkt im Tun mitdokumentieren. Stell dir vor, du erklärst einer Kundin, wie sie ein neues Produkt in deinem Shop einpflegt. Statt es nur zu zeigen, nimmst du es gleich als Schritt-für-Schritt-Guide auf. Schon hast du wertvollen Content für dein Team, deinen FAQ-Bereich oder deinen nächsten Kurs.

Hier sind einige Tools, die dir das maximal erleichtern:

1. Scribe (scribehow.com)

Dieses praktische Tool hilft dir, Anleitungen direkt während der Arbeit zu erstellen. Du startest die Aufnahme, führst die Aufgabe wie gewohnt durch – und Scribe wandelt deine Klicks automatisch in eine verständliche Schritt-für-Schritt-Anleitung mit Screenshots und erklärenden Texten um. Besonders nützlich, wenn du Prozesse erklären, Arbeitsabläufe dokumentieren oder jemand Neues einarbeiten möchtest – ohne dir im Nachhinein alles mühsam zusammenreimen zu müssen.

2. Tango (tango.us)

Ähnlich wie Scribe, mit Fokus auf Teamarbeit und einfaches Teilen. Auch hier entsteht eine schön formatierte Anleitung fast wie von selbst.

3. Snagit mit Schritt-für-Schritt-Capture (www.techsmith.de/snagit)

Viele kennen Snagit als Screenshot-Tool. Mit der „Step Tool“-Funktion kannst du jedoch automatisch einzelne Klicks erfassen und in eine Schritt-für-Schritt-Erklärung umwandeln. Besonders hilfreich, wenn du ohnehin gern visuell arbeitest. Zusätzlich kann Snagit auch Bildschirmvideos aufnehmen – du brauchst also nur ein Tool für beides.

4. Loom, Tella, CleanShot oder Snagit

Wenn du lieber Videos machst: Diese Tools nehmen deinen Bildschirm samt Stimme auf. Ideal für kurze Erklärvideos oder zum Zeigen komplexer Abläufe. Besonders praktisch: Snagit kann sowohl Screenshots als auch Videos erstellen – ein Werkzeug für beide Aufgaben.

Natürlich sind das nur einige Beispiele – es gibt viele weitere Tools mit ähnlichen Funktionen. Aber hier gilt: Nicht das Tool ist entscheidend, sondern das Tun. Such dir das Werkzeug, das für dich am einfachsten ist – und fang an. Je leichter der Einstieg, desto wahrscheinlicher bleibst du dabei.

Was du dokumentieren solltest (und wie)

Nicht alles muss festgehalten werden. Aber es gibt typische Bereiche, bei denen Dokumentation besonders viel bringt:

• Wiederkehrende Abläufe (z. B. Newsletter verschicken, Angebote erstellen)
• Technik-Setups (z. B. Plugin-Konfigurationen, Tool-Verknüpfungen)
• Kommunikationsprozesse (z. B. wie du Kundenanfragen beantwortest)
• Onboarding-Schritte (für neue Kunden, neue Teammitglieder)

Das Format deiner Dokumentation kann unterschiedlich sein. Für Schritt-für-Schritt-Anleitungen eignen sich sogenannte SOPs (Standard Operating Procedures). Bei strukturierten Aufgaben helfen einfache Checklisten enorm. In visuellen Tools sind Screenshots mit Kommentaren oft wirkungsvoller als lange Texte. Und für komplexere Prozesse kann ein kurzes Erklärvideo Wunder wirken – idealerweise ergänzt durch eine knappe schriftliche Zusammenfassung.

Die Faustregel: Was du mehr als 2× erklärst, verdient eine Dokumentation.

So startest du ohne Überforderung

Du musst nicht alle Prozesse auf einmal dokumentieren. Starte mit diesen einfachen 5 Schritten:

1. Mach eine Liste von 5 Aufgaben, die du regelmäßig machst oder oft erklärst
2. Wähle ein Tool (z.B. Scribe oder Snagit)
3. Zeichne beim nächsten Durchlauf mit, ohne viel nachzudenken
4. Speichere den Guide ab (z.B. in einem geteilten Ordner oder in Notion)
5. Verlinke ihn an relevanten Stellen (z.B. bei Aufgaben im Projekttool oder CRM)

Mit jedem Schritt entsteht so nach und nach dein eigenes kleines „Business-Wiki“ – ohne großes System, aber mit maximaler Wirkung.

Praxisbeispiele

Tom, Webdesigner und Kursanbieter, hat seine neue VA früher immer einzeln eingeschult. Irgendwann wurde klar: Das kostet zu viel Zeit. Beim nächsten Mal zeichnete er alle Aufgaben einfach mit Scribe auf, packte sie in ein geteiltes Google Drive und ergänzte zwei Loom-Videos für die Erklärung – fertig war das Onboarding-Paket. Seitdem sparen beide Zeit und vermeiden Missverständnisse.

Ein weiteres Beispiel ist Sandra, die regelmäßig technische Supportanfragen zu ihren Onlinekursen bekommt. Statt jede Anfrage einzeln zu beantworten, hat sie die häufigsten Probleme als kurze Bildschirmvideos mit Snagit aufgenommen und in ihrem Supportbereich hinterlegt. Heute erhält sie kaum noch direkte Fragen – und wenn doch, genügt meist ein Link zur passenden Anleitung. Das entlastet nicht nur sie, sondern verbessert auch die Kundenzufriedenheit deutlich.

Dokumentation ist keine Belastung, sondern Entlastung

Klar, am Anfang wirkt es wie zusätzliche Arbeit. Aber langfristig ist jede gut gemachte Anleitung ein Geschenk an dein zukünftiges Ich – und an alle, die mit dir zusammenarbeiten.

Mit den richtigen Tools kannst du im Arbeitsfluss dokumentieren, ohne deinen Fokus zu verlieren. Du machst dein Wissen sichtbar, nutzbar und teilbar. Genau das ist der erste Schritt zu mehr Klarheit, Effizienz und Wachstum.

Also: Was wirst du heute dokumentieren?

Bist du überhaupt davon betroffen. Werden deine Google Fonts „legal“ oder „illegal“ geladen? Diese Frage stellt man sich in diesem Zusammenhang.

In meinem kurzen Quick-Tipp Video zeige ich dir, wie du herausfindest, ob deine Website Google Fonts legal verwendet und das mit einer einfachen und schnellen Methode. Nur so kannst du sicher sein, dass du sicher bist vor teuren Abmahnungen.

In meinem zweiten und dritten Teil dieser kurzen Quick-Tipp Serie zeige ich dir noch 2 Möglichkeiten, wie du Google Fonts in deiner WordPress Installation so verwenden kannst, dass diese nicht von Google geladen werden.

Das Video zum Quick-Tipp, wie du erkennst, ob Google Fonts legal eingebunden sind.

Weitere Quick-Tipps zum Thema Google Fonts in WordPress legal einbinden

Quick-Tipp #2 – Google Fonts in WordPress – Schnell und einfach korrekt einbinden
Hier zeige ich dir einen schnellen und einfachen Weg, der (fast) immer funktioniert:
https://www.youtube.com/watch?v=Qu-v-S_32PQ

Quick-Tipp #3 – Google Fonts in WordPress und Elementor – schnell und einfach korrekt einbinden
Hier zeige ich die eine Lösung, falls du Elementor gemeinsam mit dem OceanWP Theme verwendest.
https://www.youtube.com/watch?v=rZ3TnB5R7aM

Damals war mir noch nicht so recht klar, welche Ausrichtung mein Blog genau haben soll.

Mittlerweile liegt mein Fokus klar darauf, anderen zu helfen, ihre eigene Website zu realisieren – unabhängig davon, mit welchem System sie die Seite umsetzen wollen.

Nicht nur Tools und Technik

Websites Umsetzen beginnt und endet aber nicht mit dem Tool und der Technik. 

Es gehört viel mehr dazu. Schon bei der Planung & Konzeption kann man Vieles richtig aber auch falsch machen. 

Ein geeignetes Design und Layout macht die Website für Besucher erst so richtig attraktiv. Schlussendlich will man nach der Umsetzung lange Freude an der Website haben. 

Deshalb muss man sich auch um den laufenden Betrieb und die Optimierung kümmern.

All diese Infos stellte ich in irgendeiner Form zur Verfügung, sie waren aber leider nicht immer leicht auffindbar.

Neben dem Blog habe ich Schritt für Schritt die Veröffentlichung von immer mehr Inhalten auf verschiedenen Plattformen ausprobiert. Audios mit dem Podcast, Videos auf meinem YouTube Kanal, Kurse auf meiner Kursplattform oder auf UDEMY, einen Mitgliederbereich in meinem CLUB,  Livevideos auf Facebook, Webinare und Vieles mehr.

Viele der Inhalte waren aber nicht über meine Website 

https://www.andreasstocker.at

zu finden sondern unter anderen Domains oder auf andern Plattformen.

Das war sowohl für mich verwirrend, weil ich manchmal nicht mehr wusste, wo und wie ich meine geplanten Inhalte veröffentlichen sollte, und vor allem für dich, weil du möglicherweise gar nicht alles gefunden hast.

So, und damit ist jetzt Schluss!

Ab heute gibt es all meinen Content zusammengefasst auf meiner Website

https://www.andreasstocker.at

Diese ist der Ausgangspunkt für den Weg zu all meinen Inhalten und Angeboten.
Damit es dir leichter fällt, die für dich relevanten Inhalte zu finden, habe ich den contentselector in meine Seite eingebaut.

Mit ihm kannst du auswählen, in welcher Projektphase du dich befindest und auf welche Art und Weise du meine Inhalte konsumieren willst. Du kannst aber auch über die Stichworte oder mittels Volltextsuche die gewünschten Informationen finden.

Neue Vorschaubilder sollen dir auf den ersten Blick zeigen, wie du den Content erleben wirst. Denn ich stelle meine Inhalte in verschiedenen Formaten zur Verfügung: 

Als Blogbeitrag zum Lesen
als Podcast zum Hören
als Video zum Schauen und
als Coaching zum Lernen

Schlussendlich habe ich auch noch die Möglichkeiten zusammengefasst, wie du mit mir persönlich zusammen arbeiten kannst.

So, jetzt aber genug der Theorie.

Ich will dich nicht länger mit meiner Mail langweilen. Besuche mich einfach auf meiner neuen Website

https://www.andreasstocker.at

und mach dir selbst ein Bild davon.

Über deine Rückmeldung würde ich mich sehr freuen. Vielleicht hast du ja noch den einen oder anderen Tipp, was ich für dich verbessern könnte.

Also, dann bis gleich auf meiner neuen Website!

Liebe Grüße
Andreas Stocker – Dein Webdesign Coach

PS: Mein besonderer Dank bei diesem Projekt gilt übrigens meinem langjährigen Freund Alex Wastian, mit dem ich bereits Mitte der 1990er Jahre meine ersten Webprojekte umgesetzt habe und der mich vor allem im Bereich Design & Layout mit Rat und Tat unterstützt hat.

Da sich in Bezug auf die Navigation mit Bootstrap 4 einiges gegenüber Bootstrap 3 geändert hat, zeige ich dir in diesem Video, wie du die Navigation (Bootstrap 4 Navbar) mit Bootstrap 4 gestalten kannst.

Das Video ist für jene interessant, die direkt mit HTML und CSS Code arbeiten oder neuere Dreamweaver Versionen ab Dreamweaver CC 2018 verwenden.

Wenn dich interessiert, wie eine Bootstrap 4 Navigation aufgebaut ist oder wie man diese in Dreamweaver ab CC 2018 einbaut, dann sieh dir auch meine anderen beiden Videos zu diesem Thema an.

Teil 1: Bootstrap 4 Navigation (Navbar) erstellen und verstehen

Teil 2: Bootstrap 4 Navigation (Navbar) in Dreamweaver 2020

Die Navigation hat sich mit Bootstrap 4 im Gegensatz zu Bootstrap 3 doch etwas verändert. Dadurch gibt es auch Änderungen in neueren Dreamweaver Versionen ab Dreamweaver 2018, da ab dieser Version Bootstrap 4 eingesetzt wird.

Da meine bisherigen Dreamweaver Video auf Dreamweaver 2015 aufbauen, möchte ich dir jetzt erklären, wie eine Navigation in neueren Versionen einzubauen ist.

In einem weiteren Video zeige ich dir dann, wie man die Bootstrap 4 Navigation gestalten kann.

Teil 1: Bootstrap 4 Navigation (Navbar) erstellen und verstehen

Teil 3: Bootstrap 4 Navigation (Navbar) Aussehen und Gestaltung

Mit der Bootstrap 4 Navbar kann man schnell und einfach responsive Navigationen erstellen.

In diesem Video erkläre ich dir den Aufbau und die Funktion der einzelnen Navigations Elemente.

Egal, ob du deine Website direkt mit HTML umsetzt oder Tools wie Dreamweaver verwendest, das Verständnis der Elemente und Klassen hilft dir sicher weiter dein Wunsch Menü selbst umzusetzen.

Die weiteren beiden Teile:

Teil 2: Bootstrap 4 Navigation (Navbar) in Dreamweaver 2020

Teil 3: Bootstrap 4 Navigation (Navbar) Aussehen und Gestaltung

In diesem Video zeige ich dir, wie du in webflow ein individuelles Modal Popup Window erstellen kannst.

Bei einem Modal Popup Window kannst du auf einen beliebigen Inhalt auf deiner Website klicken und es erscheint auf der selben Seite ein Popup Fenster.

Die Inhalte und das Aussehen in diesem Fenster kannst du frei gestalten.

Die 5 Schritte:

• Modal Background erstellen
• Modal Window erstellen
• Content für Modal Popup
• Close Action
• Open Action

Webflow bietet umfangreiche Möglichkeiten für Animation auf deiner Website.

In diesem Video zeige ich dir die Grundlagen wie Animationen in webflow funktionieren.

Egal welches Tool wir betrachten. Adobe Dreamweaver, Adobe Muse (mittlerweile aufgelassen), WordPress mit diversen Pagebuildern oder auch Tools wie Webflow, Pinegrow und BLOCS. Alle haben die Möglichkeit, dass damit Websites erstellt werden können.

Welches Programm ist aber jetzt die beste Wahl und warum gibt es überhaupt so viele verschiedene Lösungen?

Diese Fragen möchte ich dir mit meiner Artikel Serie, die mit diesem Beitrag, beginnt beantworten.

[toc]

Viele kennen mich wahrscheinlich durch meine Inhalte zum Thema Website Erstellung mit den Produkten Adobe Dreamweaver oder Adobe Muse.

Spätestens, seit Adobe Muse im Jahr 2018 von Adobe eingestellt wurde und dessen Support 2020 ausläuft, ist an vielen Stellen die Frage offen: was nehme ich jetzt? Am Markt gibt es kaum Vergleichbares, womit man durch freies Hin- und Herschieben von Elementen statische responsive Websites erzeugen kann.

Welche Tools für Webseiten Erstellung gibt es?

Sind CMS (Content Management System) Lösungen die richtige Wahl?

Ich verwende seit längerem CMS, wie z.B. Typo 3, Contao oder WordPress und bin damit auch sehr zufrieden. Für meine Kunden, die gerne selbst Hand anlegen wollen, biete ich vor allem Unterstützung im Bereich WordPress an.

Aber auch WordPress erzeugt bei vielen Website Betreibern immer mehr Unmut. Irgendwann bemerken sie, dass nicht alles so einfach ist, wie oftmals erzählt wird.

Damit endet die Auswahl an Lösungen noch nicht. Es gibt nicht nur die gerade genannten Tools, da sind noch einige mehr am Markt.

Ich verwende für eigene Projekte und als Empfehlung für meine KundInnen, die selbst Websites erstellen und betreiben wollen, immer öfter Alternativen zu den bereits genannten.

Dazu zählen Tools wie Webflow, Pinegrow und BLOCS. Aber wie schon erwähnt, zählt auch WordPress – im speziellen mit dem Pagebuilder Elementor – zu meinem Angebot.

Auf die Frage, was jetzt am besten verwendet werden soll, gibt es leider keine eindeutige Antwort. Zwar versuchen viele da draussen in der Internet Welt ihren Kunden einzureden, dass z.B. WordPress das einzig wahre Tool ist.

Aber ist das wirklich so?

Es ist richtig – WordPress ist einfach in wenigen Minuten installiert. Dann noch einige Erweiterungen dazu – geht auch ruck zuck. Schließlich noch ein Template auswählen und am Schluss mit eigenen Inhalten befüllen. Schon ist die eigene Website fertig. Alles kein Problem, oder?

Wenn die Welt so einfach wäre, dann würde ich mich freuen und ich könnte mir diesen Artikel sparen. Aber so ist es halt leider nicht. Warum manche gerade bei WordPress früher oder später die Erkenntnis erlangen, den falschen Weg gewählt zu haben, ist etwas komplexer und wird noch in einem eigenen Beitrag behandelt.

Übrigens – auch das Thema „Soll ich mit vorgefertigten Templates arbeiten?“ werde ich in einem eigenen Beitrag noch ausführlich besprechen.

Welches ist das beste Tool zum Webseiten erstellen?

Welches ist denn jetzt das ideale Tool zum Erstellen von Websites?

Bei dieser Frage kommt von mir in der Regel immer die Antwort – „Kommt darauf an …“.

Worauf es ankommt und was ich als Auswahl empfehle, darum geht es in diesem Beitrag, bzw. in dieser Beitragsserie.

Ich habe dabei neben einigen meiner Favoriten auch Tools ausgewählt, die am Markt recht beliebt sind.

Ich werde aber nicht nur eine Übersicht mit Vor- und Nachteilen zusammenstellen. Ich werde noch etwas weiter gehen.

Es geht vor allem darum, wie einfach man mit diesen Lösungen Websites erstellen und betreiben kann.

Ich spreche mit diesem Beitrag vor allem jene an, die für sich selbst, für ihr eigenes Unternehmen, für ihren Verein u.ä. eine Webseite erstellen wollen. Er ist weniger für Nerds und Freaks gedacht, die über ein ganz anderes technisches Basiswissen verfügen.

Im Vordergrund stehen Einfachheit, Flexibilität aber auch Sicherheit und Aufwand für den laufenden Betrieb.

Um den Unterschied bezüglich Einfachheit und Flexibilität bei der Erstellung beurteilen zu können, habe ich ein und dieselbe Webseite mit den verschiedenen Tools umgesetzt. Ich habe dafür die Seite, die in meinem Dreamweaver Kurs erstellt wird, als Basis hergenommen.

Die Erfahrungen, die ich dabei gemacht habe, möchte ich dir jetzt weitergeben. Damit bekommst du einmal eine Übersicht, was man mit den einzelnen Tools prinzipiell machen kann und wo die Grenzen liegen.

Zusätzlich gehe ich dann jeweils auf den Betrieb und die anfallenden Kosten ein. Beides Faktoren, die nicht unwichtig sind. Willst du dich selber darum kümmern oder am besten alles aus der Hand geben und deine Ruhe haben? Auch diese Frage spielt bei der Wahl des richtigen Tools eine entscheidende Rolle.

Bei der Software kannst du zwischen drei grundlegenden Typen unterscheiden:

Auf der einen Seite sind da Produkte für die Erstellung einer statischen Website. Auf der anderen Seite gibt es Websites, die mit einem CMS (Content Management System) betrieben werden.

Dazu kommen noch die diversen Baukastensysteme, die für mich keinem der beiden Bereiche so richtig zuzuordnen sind.

So, jetzt genug der einleitenden Worte; gehen wir über zu den Tools.

In diesem Beitrag will ich dir einmal vorstellen, was dich erwartet. Du bekommst eine Übersicht, welche Produkte ich mir mit dir gemeinsam ansehen will, und eine kurze Beschreibung zu den Tools, damit du sie besser einordnen kannst.

1. Adobe Dreamweaver

Fangen wir mit der Software an, mit der ich angefangen habe, Webseiten zu erstellen. Naja, nicht ganz richtig – ich habe zu Beginn meiner Webdesign Karriere im Jahr 1995 mit einem reinen Text Editor gearbeitet. Einfach deshalb, weil es kaum brauchbare Tools gab, und weil ich am Anfang Geld sparen wollte.

Schließlich gab es doch ein Produkt am Markt, das mich überzeugte. Es war von der Firma Macromedia und nannte sich Dreamweaver, bevor es dann vor vielen Jahren an die Firma Adobe verkauft wurde, die sich von nun an um die Weiterentwicklung kümmerte.

Dreamweaver ist eigentlich immer noch der Klassiker unter den Website Erstellungstools. Das Programm hat sicher auch eine so große Verbreitung, weil es Teil der Adobe Creative Cloud und daher in vielen Agenturen vertreten ist.

Die Unterstützung der Betriebssysteme Windows und MacOS ist sicher ein weiterer Grund für die Verbreitung.

Zudem haben alle anderen Nutzer der Creative Cloud von Adobe (Privat, EPU, KMU, Vereine, …) die Möglichkeit, auf dieses Tool zurückzugreifen, und tun dies auch.

Dreamweaver ist ein WYSIWYG (What you see is what you get) Editor. Das bedeutet, du siehst beim Erstellen der Webseite sofort, wie diese auch später im Browser aussehen wird. Zumindest annähernd.

Dreamweaver bietet aber noch mehr. Du kannst mit diesem Programm auch komplett auf den WYSIWYG Mode verzichten und den sehr guten Code Editor (Brackets) nutzen.

Man kann beide Optionen zugleich nutzen und im Split Modus in beiden Darstellungen arbeiten. Damit ist Adobe Dreamweaver sowohl für Designer als auch für Entwickler geeignet, die oftmals eine der beiden Darstellungsformen bevorzugen, trotzdem aber die Unterstützung der anderen Darstellung benötigen.

Ich nutzte das Tools selbst noch bei dem einen oder anderen Projekt und gebe mein Wissen bei On- und Offline Schulungen weiter.

Der Markt entwickelt sich weiter und es gibt mittlerweile Tools, die Dreamweaver in der Funktion überholt haben und auch vom Preis wesentlich attraktiver sind. Eines dieser Tools ist in meiner Übersicht – es handelt sich dabei um Pinegrow.

Link: https://www.adobe.com/de/products/dreamweaver.html

2. Webflow

Ich gebe es gleich zu – Webflow ist derzeit einer meiner Favoriten im Bereich Website Erstellung.

Mit Webflow kannst du deine Website einfach online bauen. Es handelt sich dabei aber nicht um eines der typischen Baukasten Systeme. Es ist mehr ein Webdesign Tool, mit dem man keinen Code angreifen muss.

Da du bei der visuellen Erstellung deiner Webseiten „normale“ Webtechniken benutzen kannst, sind dir beim Layout fast keine Grenzen gesetzt.

Beim Betrieb deiner Webflow Website hast du verschiedene Möglichkeiten. Die einfachste wäre, auch das Hosting von Webflow übernehmen zu lassen. Dann kannst du unter deiner eigenen Domain die Webseite direkt bei Webflow freischalten. Änderungen erstellst du zuerst in deinem internen Bereich und kannst sie dann bei Bedarf mit einem Klick freigeben.

Wenn du das Hosting nicht von Webflow haben möchtest, kannst du dir die fertige Website auch als ZIP File mit allen HTML, CSS und JavaScript Dateien herunterladen und auf deinem eigenen Webspace ablegen.

Das funktioniert sehr gut, solange du nicht irgendwelche dynamischen Elemente, wie Shop oder Blog, verwendest.

Zur Unterstützung bei der Erstellung gibt es eine Menge Templates, die man nicht nur für eigene Projekte verwenden, sondern von denen man sich auch Einiges abschauen kann.

Auch eine umfangreiche Sammlung an umgesetzten Projekten hilft dir Ideen sammeln, was man mit Webflow so alles verwirklichen kann.

Das Betriebssystem spielt bei der Erstellung von Webseiten mit Webflow keine große Rolle. Du benötigst einfach nur einen Browser und schon kannst du damit arbeiten.

Link: https://webflow.com/

3. WordPress und Elementor

Auch WordPress ist einer meiner Favoriten, um Webprojekte umzusetzen. Für die Gestaltung setzte ich dabei aktuell auf den Pagebuilder Elementor.

Genauer genommen ist Elementor auch ein Themebuilder, aber das ist an dieser Stelle jetzt nicht so wichtig.

Ich habe schon erwähnt, dass ich WordPress immer etwas kritisch gegenüber stehe. Denn es muss dir klar sein, dass der Einsatz von WordPress nicht immer so einfach ist, wie es auf den ersten Blick aussieht.

Erstens musst du dich regelmäßig um deine WordPress Installation kümmern und du musst darauf achten, nicht in den Plugin Installations Wahn zu verfallen. Denn ein Grossteil der Probleme, die man mit WordPress haben kann, kommt von Plugins, die nicht gut zusammenarbeiten oder vielleicht gar nicht mehr supported werden.

Wenn du aber weißt, worauf du dich einlässt und im Notfall auch jemanden an der Hand hast, der sich bei technischen Problemen um dein WordPress kümmert, dann steht auch einer Verwendung dieser Software nichts im Wege.

Worauf du beim Einsatz einer eigenen WordPress Website achten solltest, das erfährst du von mir noch in einem eigenen Beitrag.

Mit dem Elementor Pagebuilder hast du ein ausgereiftes und leistungsfähiges Plugin, um deine Layout Wünsche recht einfach Wirklichkeit werden zu lassen.

Das Elementor Pagebuilder Plugin ist genauso wie WordPress kostenlos erhältlich. Damit kannst du das komplette System theoretisch ohne weitere Zusatzkosten – abgesehen von den anfallenden Providerkosten – betreiben.

Allerdings gibt es von Elementor auch eine PRO Version, die dieses Tool noch um einige sehr praktische Funktionen erweitert. Ob man diese wirklich braucht, hängt sehr vom jeweiligen Projekt ab.

Link zu WordPress: https://wordpress.org/

Link zum Elementor Pagebuilder: https://elementor.com/

4. Pinegrow

Pinegrow ist für mich der bessere Dreamweaver. Es ist ein Tool, das – ähnlich wie Dreamweaver – darauf ausgelegt ist, Webseiten im WYSIWYG Verfahren zu erstellen und dabei die volle Kontrolle über den HTML und CSS Code zu haben.

Auch bei Pinegrow ist es notwendig, sich etwas intensiver mit der Software und der darunter liegenden Technik auseinander zu setzen.

Wenn du dazu bereit bist oder vielleicht schon mit Dreamweaver gearbeitet hast, dann solltest du diese Alternative durchaus einmal ins Auge fassen.

Der Vorteil: du erstellst schnelle und wartungsfreie Webseiten, hast aber trotzdem die volle Kontrolle über das Design.

Im Vergleich zu Dreamweaver unterstützt Pinegrow unterschiedliche Methoden um responsive Webseiten aufzubauen. Natürlich gehört das bekannte CSS Framework Bootstrap dazu, das ja auch von Dreamweaver unterstützt wird.

Pinegrow bietet aber auch einige Funktionen, die in Dreamweaver fehlen und aus meiner Sicht unbedingt notwendig wären.

So kann man mit Pinegrow seine Website in der Struktur planen und daraus die Navigation für die Website erstellen lassen. Ein Feature, das vor allem bei größeren Websites unbedingt notwendig ist.

Aber auch das Arbeiten im WYSIWYG Modus ist wesentlich einfacher, intuitiver und moderner.

Mit dem Erstellen von Websites endet die Funktion der Pinegrow Produkte aber nicht. Es gibt eine Version, mit der du aus den statisch erstellten Websites dein eigenes WordPress Theme machen kannst.

Damit kannst du deine individuellen Design Ideen direkt in WordPress bringen und benötigst keinen speziellen Themebuilder mehr.

Und dann ist auch noch das Thema Animationen abgedeckt; ähnlich einfach, wie die Erstellung, kannst du Animationen und damit Interaktivität in deine Website einbauen.

Ähnlich wie Dreamweaver ist Pinegrow für die Betriebssysteme Windows und MacOS verfügbar.

Bei den Kosten unterscheidet sich Pinegrow ein wenig von Dreamweaver. Es gibt kein Abo Modell. Für Pinegrow zahlst du jährlich eine Lizenz, wenn du regelmäßig Updates erhalten willst, was ich auf jeden Fall empfehlen würde. Wenn du nicht verlängern möchtest, dann kannst du das Programm trotzdem weiter nutzen.

Die Kosten dafür liegen in etwa bei 100 Euro, was meiner Ansicht nach ein fairer Preis ist. Verlängerungen gibt es dann meist wesentlich günstiger (oft nur 50 % vom Initialpreis).

Link: https://pinegrow.com/

5. BLOCS

BLOCS gehört zu den Programmen, mit denen statische Websites erstellt werden können. Dieses Tool würde ich am ehesten als Adobe Muse Nachfolger bezeichnen.

Ähnlich einfach zu bedienen, ist es damit möglich Websites mit Drag & Drop zu erstellen und dabei keine Berührung mit dem darunter liegenden Code haben zu müssen.

Sollte es doch mal notwendig sein, dann hast du im Gegensatz zu Muse sogar die Möglichkeit, den Code zu bearbeiten oder zu erweitern.

Selbstverständlich kannst du damit auch sehr einfach responsive Websites erstellen. Ich würde dir gar kein Tool vorstellen, mit dem das nicht möglich wäre.

Mit BLOCS kannst du die Struktur planen und daraus – wie von einem modernen Tool zu erwarten ist – eine Navigation erstellen lassen.

Das Ergebnis deiner Arbeit sind statische Webseiten, die du dann nur mehr auf deinen Webspace hochladen musst.

Von allen Tools, die ich getestet habe, kommt dieses am ehesten an Adobe Muse heran und zwar hinsichtlich der einfachen Bedingung und der Möglichkeit, statische Seiten zu erzeugen.

Einziger Nachteil dieses Tools ist, dass es nur für das MacOS Betriebssystem verfügbar ist. Windows User können dieses tolle Programm leider nicht nutzen.

Für BLOCS ist ein einmaliger Betrag fällig, der alle Updates innerhalb der aktuellen Release abdeckt. Für Upgrades auf eine neue Release gibt es dann meist günstige Upgrade Angebote.

Link: https://blocsapp.com/

6. WIX

WIX ist eines der typischen Baukastensysteme. Früher war ich ein großer Gegner dieser Tools. Mittlerweile haben sie sich aber stark weiterentwickelt und ich habe meine Meinung etwas geändert.

Da ich immer öfter die Frage gestellt bekomme, was ich von diesen Tools halte, habe ich zwei davon in meinen Test aufgenommen.

Auf der einen Seite ist das einmal WIX, und dann noch weiter unten erwähnt, Squarespace.

Die Entscheidung für diese beiden Tools ist eher durch mein Umfeld gefällt worden, da ich bei beiden Anwender kenne, die sehr zufrieden damit sind.

Das soll nicht bedeuten, dass andere Baukastensysteme schlechter sind. Hätte ich diese aber alle in meinen Test reingenommen, hätte das den Rahmen bei weitem gesprengt.

Baukastensysteme bauen meist darauf auf, dass du mit einer der vielen Vorlagen beginnst und diese an deine persönlichen Bedürfnisse anpasst.

Wenn du bei der Auswahl der Vorlagen einige wichtige Grundlagen beachtest, muss deren Verwendung nicht schlecht sein. Ich persönlich bin der Meinung, dass es besser ist, mit einem gut gestalteten und mit einer gewissen Sorgfalt ausgewählten Template zu arbeiten, als eine nicht responsive Website zu haben, die aussieht, als wäre sie aus den 1990er Jahren.

Auch sonst brauchen sich die Baukastensysteme in ihrer Funktion nicht vor den anderen Lösungen zu verstecken.

Du musst allerdings in Kauf nehmen, dass es mitunter Grenzen bei den Gestaltungsmöglichkeiten gibt, und auch damit leben können, dich in eine gewisse Abhängigkeit zu begeben. Wenn das kein Problem ist, dann solltest du auch diese Systeme in deine Wahlmöglichkeiten aufnehmen.

Link: https://de.wix.com/

7. Squarespace

Wie schon oben erwähnt, habe ich mich für zwei der am Markt befindlichen Baukastensysteme entschieden.

Auf der einen Seite WIX und dann eben Squarespace. Beide Lösungen sprechen unterschiedliche Zielgruppen an, was man schon bei den zur Auswahl stehenden Vorlagen sieht.

Im Prinzip gelten auch bei Squarespace ähnliche Argumente, wie bei WIX vorhin erwähnt.

Squarespace präsentiert sich etwas moderner und mit besseren Designs, WIX dafür etwas einfacher und flexibler.

Worin Unterschiede bestehen, wirst du dann bei meinen Detail Tests sehen.

Link: https://de.squarespace.com/

8. WordPress und DIVI

Über WordPress habe ich ja schon vorhin ausführlich gesprochen. Diese Argumente gelten für alle Lösungen, die technisch auf WordPress aufbauen.

Doch mit WordPress alleine hat man selten eine ausreichende Lösung. Man braucht in der Regel ein Theme oder eben einen Pagebuilder, um damit einfach seine Seiten erstellen zu können.

DIVI von Elegant Themes ist eine Lösung, die es schon sehr lange am Markt gibt und die sehr ausgereift ist.

Vor nicht allzu langer Zeit gab es ein großes Update, bei dem dieses Produkt wieder hinsichtlich seinen Funktionen und der Bedienung gegenüber moderneren Pagebuildern aufgeholt hat.

DIVI hat jetzt, wie auch Elementor, eine Themebuilder Funktion.

Ich selbst betreibe DIVI immer noch bei sehr vielen Kunden Projekten und kann darüber nicht wirklich viel Kritik üben.

Warum ich lieber mit Elementor arbeite, ist zum Teil auch eine persönliche Vorliebe. Es sind Funktionen und die Art damit zu arbeiten, die mir an Elementor besser gefallen.

DIVI ist aber ein solides und leistungsfähiges Tool und wird daher auch Bestandteil der Tests sein.

Was die Kosten betrifft, so ist DIVI nicht gratis verfügbar. Allerdings gibt es von DIVI im Gegensatz zu anderen Anbietern, wie etwa Elementor, auch eine Lifetime Version und das zu einem relativ günstigen Preis. Vor allem, wenn man an einen der Aktionstage, wie etwa am Cyber Monday kauft.

Link zu WordPress: https://wordpress.org/

Link zu DIVI: https://www.elegantthemes.com/

9. Brizy (WordPress oder Cloud Hosting)

Wie auch Elementor oder DIVI ist Brizy ein Pagebuilder, den man mit WordPress betreiben kann.

Brizy hat aber einen großen Unterschied. Du kannst eine Brizy Website auch ohne WordPress betreiben. Dazu kannst du dir einfach einen Zugang bei Brizy Cloud anlegen und dann deine Website von Brizy hosten lassen. In diesem Fall steht kein WordPress dahinter und auch die Wartung wird von Brizy übernommen.

Brizy kann aber noch mehr: du kannst die erstellen Webseiten als HTML und CSS exportieren und dann manuell auf deinen eigenen statischen Webspace ablegen. Zusätzlich kannst du deine in Brizy Cloud erstellten Seiten mit deinem Server automatisch synchronisieren.

Der Pagebuilder ist einfach und recht intuitiv bedienbar und am Projekt wird sehr aktiv gearbeitet.

Aktuell gibt es bei Brizy übrigens noch die Möglichkeit eines Lifetime Zugangs für die PRO Version. Damit kostet Brizy PRO einmalig 299.- statt jährlich 99.- für eine unlimitierte Anzahl an Websites – siehe https://www.brizy.io/brizy-pro-pricing/.

Brizy ist damit eine Lösung, die vielfältige Optionen für den Betrieb deiner erstellten Website anbietet.

Link: https://www.brizy.io/

Brizy für WordPress: https://www.brizy.io/download-brizy/

Brizy mit Hosting: https://www.brizy.cloud/

10. sitejet.io

Sitejet behauptet von sich selbst, eine Adobe Muse Alternative zu sein.

Eigentlich habe ich nicht vorgehabt, dieses Tool in meine Vergleiche mit aufzunehmen. Aber wenn ein Unternehmen eine solche Behauptung aufstellt, dann muss diese auch überprüft werden.

Sitejet hat viel Ähnlichkeit mit Webflow, hat aber aus meiner Sicht nicht dieselbe Verbreitung – zumindest, wenn man sich an vorhandenen Beiträgen und Tutorials im Internet orientiert.

Im Gegensatz zu Webflow ist Sitejet mehr auf die Arbeit in Agenturen ausgelegt. Das sieht man schon am Workflow, den sie beim Erstellen von Websites zu Verfügung stellen. Auf die Verwaltung von Projekten und die Kommunikation im Team und mit dem Kunden wird viel Wert gelegt.

Den Eindruck, dass man als „normaler“ Kunde nicht so erwünscht ist, hat man auch, wenn man Anfragen an Sitejet stellt. Ich habe noch nie ein Unternehmen erlebt, das so ignorant und überheblich auf Anfragen reagiert.

Man könnte annehmen, dass man bezüglich Kommunikation mit einem Unternehmen aus dem deutschsprachigen Raum, wie Sitejet, besser bedient ist, aber das war zumindest bei mir nicht der Fall.

Aber egal, es soll ja das Tool im Vordergrund stehen. Vielleicht war ich auch nur zur falschen Zeit an der falschen Stelle.

Mit Sitejet kannst du online im Browser deine Webseiten erstellen und dann entweder von Sitejet hosten lassen oder die HTML und alle verbundenen Files herunterladen, um diese dann auf deinen eigenen Webspace hochzuladen.

Mit Drag & Drop werden verschiedene Elemente zu deiner Seite hinzugefügt, deren Eigenschaften dann vielfältig verändert werden können.

Der Designer der Seite hat bei den Elementen die Möglichkeit, anzugeben, ob die Inhalte dieser Bereiche von Usern mit Editor Rechten bearbeitet werden können. Auch daran erkennt man die Ausrichtung auf Agenturen, die ja nicht wollen, dass Kunden alles uneingeschränkt verändern können.

Mehrsprachigkeit und E-Commerce Funktionalitäten runden die Palette dieses Tools ab.

Bezüglich der Preise gibt es drei Pläne. Ab der zweiten Stufe hast du die Möglichkeit, deine Website als ZIP File zu exportieren und selbst zu hosten.

Bei jedem Plan ist bereits das Hosting für eine Website inkludiert und es kann relativ günstig das Hosting für weitere Websites dazu gekauft werden.

Link: https://www.sitejet.io/de

Bereit für die Tests

So, das waren einmal die 10 verschiedenen Tools, die ich jetzt schrittweise im Detail testen werde um herauszufinden, wie einfach, schnell und flexibel eine Website damit umgesetzt werden kann.

Ich werde dabei vor allem darauf Wert legen, herauszufinden, wie weit diese Programme eine Alternative zu Lösungen bieten, die du bereits kennst oder auch schon verwendest.

Wenn du einen Tipp für mich hast, worauf ich bei meinen Test noch achten sollte, dann schreibe mir bitte ein Kommentar unter diesen Beitrag.

Einer der Gründe, warum Webseiten langsam sind, liegt oft daran, dass die grosse Datenmenge der Bilder die Ladezeit erhöht.

Aus diesem Grund empfehle ich dir auf die Dateigrößen deiner Bilder zu schauen und diese bei Bedarf zu optimieren.

In diesem Artikel zeige ich dir, wie du das einfach, schnell und kostenlos machen kannst.

Bilder optimieren geht schneller und einfacher als du denkst

Um das zu machen, benötigst du weder viel Wissen über Bildbearbeitung noch viel Zeit und auch keine teueren Tools. Mit dem Online Tool TinyPNG geht das mit Drag&Drop in wenigen Sekunden.

Besuche dazu die Website https://tinypng.com

Mittels Drag & Drop kannst du dein oder deine Bilder auf die Website ziehen. Die Bilder werden hochgeladen und anschließend optimiert. Alternativ zum Drag & Drop kann man die Bilder auch durch einen Klick auf den Button „Drop your .png or .jpg file here!“ mittels Dateiauswahl von der Platte hochladen.

Sind die Bilder optimiert, dann wird dir angezeigt, wie gut das Bild komprimiert werden konnte. Es wird dir die neue Dateigröße und in Prozent angezeigt, wieviel du gespart hast.

Es gibt jetzt verschiedene Möglichkeiten die Files herunter zu laden. Entweder kannst du die Bilder einzeln mittels dem Link „download“ herunterladen oder alle gemeinsam über den darunter stehenden Button „Download all“. Ebenso kannst du deine Bilder direkt in deine Dropbox spielen. Ein einfach Klick auf den Button „Save to Dropbox“ genügt.

Der Dienst kann mit PNG und JPG files umgehen. In der kostenlosen Variante kann man 20 Bilder gleichzeitig hochladen. Dabei darf jedes Bild maximal 5MB gross sein.

Wenn du mehr benötigst, dann kannst du für $25 pro User und Jahr auf die Pro Version upgraden.

Das Ergebnis

Um dir zu zeigen, ob man einen Unterschied merkt, habe ich mir ein Bild aus meinem letzten Urlaub ausgewählt und es optimiert.

Hier siehst du das Ergebnis:

Das Original Bild (192KB) …

… und das optimierte Bild (118KB / -39%).

Du merkst also an diesem Vergleich, dass kein Unterschied zu festzustellen ist.

Mit dem WordPress Plugin Bilder noch einfacher optimieren

Wenn du mit einem CMS wie WordPress arbeitest, dann geht der Vorgang noch einfacher. TinyPNG stellt ein Plugin zur Verfügung, dass dir die Arbeit automatisiert abnimmt.

Einfach die Bilder wie gewohnt hochladen. Die Bilder werden dann automatisch im Hintergrund optimiert. In der kostenlosen Variante kannst du bis zu 100 Bilder pro Monat optimieren.

Sieh dir vorher an, wie deine Website optimiert werden könnte

Zum Schluss noch ein kleiner Zusatz. Auf der Unterseite Analyzer (https://tinypng.com/analyzer) kannst du deine Website URL eingeben und TinyPNG berechnet dir, wie die Bilder deiner Website komprimiert werden können und welche Auswirkungen das auf die gesamte Dateigröße aller Bilder und der Ladezeit hat.

Wenn du sehen willst, wie der ganze Ablauf funktioniert, dann sieh dir zu diesem Thema auch mein Video an.

Zum YouTube Video „Dateigöße deiner Bilder optimieren„