WYSIWYG-Editor: Definition & Nutzen

1. Was ist WYSIWYG?

Die Abkürzung WYSIWYG („What You See Is What You Get“) kommt aus dem Englischen und bedeutet übersetzt so viel wie „Was du siehst, ist das, was du bekommst.“ Doch wozu dient WYSIWYG eigentlich?

Webseiten, E-Mail-Kampagnen oder Formulare können heutzutage in unterschiedlichsten Formen, Designs und Formaten ausgespielt oder abgerufen werden. Erhalten wir eine E-Mail, so können wir diese am Laptop auf dem Schreibtisch, in der Mittagspause auf dem Handy oder abends auf dem Sofa mit einem Tablet lesen. Ohne das richtige Tool ist es jedoch gar nicht so einfach, eine fehlerfreie Darstellung zu gewährleisten. Besonders im Online-Marketing ist eine plattformübergreifende und einheitliche Darstellung Ihrer Inhalte essenziell. Erstellte Inhalte können, von Interessenten und Kunden auf unterschiedlichsten Geräten aufgerufen werden. Allein die Wahl des persönlich favorisierten Browsers sorgt für unzählige weitere Konstellationen und mögliche Darstellungsvarianten. Neben der technischen Funktionalität ist jedoch auch ein sauberes Erscheinungsbild von großer Bedeutung. Andernfalls könnten potenzielle Interessenten und Kunden abgeschreckt werden oder möglicherweise auch ein unprofessioneller Eindruck entsteht.

Mithilfe eines WYSIWYG-Editors oder Tool mit WYSIWYG-Funktion lassen sich unkompliziert Echtzeitdarstellung von Web-Inhalten, wie beispielsweise HTML-Templates, erzielen. So stellen Sie sicher, dass bereits vor der Live-Schaltung eine reibungslose Newsletter-Anmeldung möglich ist, Ihr Firmen-Design einheitlich ausgespielt wird oder ausgedruckte Dokumente gewünschte Inhalte auch wirklich entsprechend darstellt.

2. Die Geschichte der WYSIWYG-Editoren

Der Beginn des Computerzeitalters wird oft auf die Entwicklung des ersten programmgesteuerten PCs in der Mitte des letzten Jahrhunderts zurückgeführt. Dies markierte den Aufbau des ENIAC („Electronic Numerical Integrator and Computer“) in den Jahren 1943/1945 durch John Mauchly und J. Presper Eckert an der Universität von Pennsylvania. Dieses Ereignis wird als Meilenstein angesehen. Er läutete den Beginn einer neuen Ära ein, in der Computer eine bedeutende Rolle in Wissenschaft, Industrie und im Alltagsleben der Menschen einnahmen.

Vor dem Aufkommen des modernen Computerzeitalters und der Entwicklung von Kompilierungstechniken war der zukünftige Mehrwert von WYSIWYG-Editoren noch nicht absehbar. Ob es sich um Zeitungen, Bücher oder Werbebanner handelte, sie alle folgten letztendlich dem Prinzip von WYSIWYG („What You See Is What You Get“), jedoch auf analoge Weise. Es war erst mit dem Fortschritt in der Computertechnologie, dass sich die Notwendigkeit und der Wert von WYSIWYG-Editoren vollständig entfalteten. Diese Editoren ermöglichten es den Benutzern, Inhalte auf dem Bildschirm so zu bearbeiten und zu formatieren, wie sie letztendlich auf dem gedruckten oder digitalen Medium erscheinen würden. Diese Entwicklung revolutionierte die Art und Weise, wie Dokumente erstellt und bearbeitet wurden, und legte den Grundstein für moderne Textverarbeitungstools, die wir heute kennen.

3. Was ist ein WYSIWYG-HTML-Editor?

Technisch betrachtet basiert ein WYSIWYG-HTML-Editor auf einer Kombination aus HTML, CSS und JavaScript. Dabei strukturiert HTML die Seite, CSS ist für das Styling und die Formatierung zuständig, während JavaScript interaktive Funktionen wie Drag&Drop oder die Echtzeitvorschau implementiert. Ein zentraler Vorteil der WYSIWYG-HTML-Editor ist die einfache Einbindung und Formatierung verschiedener HTML-Elemente wie z. B. Text, Bilder, Button und Links per Mausklick. Ähnliche Logiken kennen wir aus geläufigen Programmen zur Textverarbeitung. Während der Anwender gewünschte Inhalte erstellt, generiert der WYSIWYG-HTML-Editor im Hintergrund automatisch den dazugehörigen HTML-Code.

Durch die Nutzung eines WYSIWYG-HTML-Editors können auch Nutzer ohne tiefe Kenntnisse in HTML und CSS professionell aussehende Webinhalte erstellen. Dies macht den Editor zu einem äußerst nützlichen Werkzeug für Webdesigner, Marketingfachleute und andere, die regelmäßig Webinhalte erstellen. Die Echtzeitvorschau ermöglicht es Benutzern, getätigte Änderungen sofort einzusehen und ggf. weitere Anpassungen vorzunehmen, was den Workflow beschleunigt und die Effizienz spürbar steigert. Doch auch auf kreativer Ebene profitiert man von einer verlässlichen Echtzeitvorschau. Zu leicht kommt man aus dem Konzept oder verliert einen wichtigen Gedanken, wird man durch technische Hürden ausgebremst.

Besonders im Bereich des Online-Marketings sind WYSIWYG-HTML-Editoren von großem Wert, da sie Marketingfachleuten ermöglichen, ansprechende E-Mail-Kampagnen, Landing-Pages und andere Marketing-Materialien schnell und einfach zu erstellen, ohne auf die Unterstützung der Entwickler-Kollegen angewiesen zu sein. Dies ermöglicht Unternehmen, flexibler und agiler auf die Bedürfnisse ihrer Kunden oder neue Aktionen zu reagieren und ihre Marketingstrategien effektiver umzusetzen.

4. Vor- & Nachteile im Überblick

Der Einsatz von WYSIWYG ist vielseitig und bringt spannende Vorteile mit sich. Darüber hinaus sollte man sich jedoch auch über mögliche Nachteile bewusst sein. Mit unserer Übersicht möchten wir Ihnen eine hilfreiche Orientierungshilfe bieten und aufwendigen Recherchen entgegenwirken.

Vorteile:

• Einfache Bearbeitung und Erstellung Ihrer (Web-)Inhalte
• Sicherstellung einer einheitlichen Darstellung
• Nutzung auch ohne Fachwissen über HTML, CSS etc. möglich
• Daher, keine Programmierkenntnisse bzw. Programmierer notwendig
• Erstellung eines für SEO optimierten Quellcodes

Nachteile:

• Interpretation von WYSIWYG-Inhalten nicht immer fehlerfrei
• Einheitliche Darstellung durch Sonderfälle nicht bei 100 % (z. B. mobile Darstellung, Browser)
• Gefahr, dass unnötiger oder fehlerhafter Code erzeugt wird

Die genannten Vor- und Nachteile dienen als grober Orientierungspunkt. Selbstverständlich gibt es auch unter WYSIWYG-Editor Unterschiede. Wie bei den meisten Tools ist es daher immer eine Frage der eigenen Branche und Prozesse, welcher WYSIWYG-Editor am besten zu Ihnen passt. Sind Sie auf der Suche nach WYSIWYG für Ihr E-Mail-Marketing?  Dann empfehlen wir Ihnen unseren Maileon Editor2.0.

5. WYSIWYG mit Maileon

Mit Maileon steht Ihnen unser professioneller Editor2.0 für Ihr E-Mail-Marketing zur Verfügung. Der WYSIWYG-Editor wurde speziell für Marketer konzipiert und an die unterschiedlichsten Herausforderungen eines professionellen und effektiven E-Mail-Marketings angepasst. Mit Erkenntnissen aus über 20 Jahres am Markt, verfügt der Editor über eine breite Funktionsvielfalt und eine intuitive Handhabung für Einsteiger und oder Experten. Zusätzlich bietet die Vorschau des Editor2.0 eine umfangreiche Review Ihrer E-Mail-Kampagnen. Prüfen Sie die Darstellung und Funktionalität auf unterschiedlichsten Endgeräten, sowie die Darkmode-Version, um einen reibungslosen Versand sicherzustellen.

Sie wünschen mehr Informationen zu den Möglichkeiten des Maileon Editor2.0 oder haben Rückfragen über die Handhabung oder Gestaltungsfreiheit? Dann melden Sie sich gerne jederzeit über unser Kontaktformular oder direkt bei Ihrem Ansprechpartner.

6. Der WYSIWYGizer

Die Funktion des WYSIWYGizer erlaubt Ihnen extern erstellte HTML-Templates bzw. Newsletter richtig zu interpretieren, um eine fehlerfreie und flexible Bearbeitung in Maileons Editor2.0 zu ermöglichen. Umgewandelte Templates lassen sich mit wenigen Klicks abspeichern oder, dank Drag&Drop-Funktion, intuitiv und schnell bearbeiten.

Wie das funktioniert? Beim Einsatz der Funktion analysiert der WYSIWYGizer den DOM-Baum („Document Object Model“) der Vorlage und führt entsprechende Umwandlungen durch, um logische Blöcke zu erkennen und eine Struktur zu erhalten, die mit den Drag&Drop-Funktionen des Editor2.0 kompatibel ist. Zu diesem Zweck können Tabellen gruppiert, eingefügt oder gelöscht und Styles teilweise umgeschrieben oder verschoben werden.

Es ist jedoch nicht immer garantiert, dass alle Styles editierbar sind, da z. B. einzelne CSS-Styles nicht unterstützt werden oder Elementen zugewiesen wurden, die nicht direkt editierbar sind. Solche Styles bleiben hart kodiert, sind jedoch über den Code-Editor in Maileon zugänglich. Der Algorithmus geht davon aus, dass dynamische Felder für Abmeldelinks, Open Pixel, Kontaktfelder usw. in der erwarteten Syntax bereitgestellt werden. Sollte dies nicht der Fall sein, denken Sie bitte daran, diese später durch die entsprechenden Platzhalter zu ersetzen. Daher empfehlen wir Ihnen, die WYSIWYGisierte Vorlage zu testen, da keine 100%-Garantie für die Korrektheit gewährleistet werden kann.

7. Fazit

Mit WYSIWYG können (Web-)Inhalte ohne großen Aufwand erstellt und bearbeitet werden. Bereits bei der Erstellung erhalten Sie einen aussagekräftigen Eindruck über die Darstellung gewünschter Inhalte. Insbesondere bei der Konzeptionierung können Design, Struktur und Inhalt optimal aufgesetzt und abgestimmt werden. Da keine extra Programmierkenntnisse erforderlich sind, können gewünschte Inhalte, danke WYSIWYG, professionell und unkompliziert erstellt werden.

Dank Maileons Editor2.0 verfügen Marketer über einen intuitiven Drag&Drop-Editor inkl. WYSIWYG für eine optimale Darstellung Ihrer E-Mail-Kampagnen. Darüber hinaus lassen sich externe Vorlagen mit wenigen Klicks in ein kompatibles Template verwandelt. Somit erweitern Sie Ihre Möglichkeiten bei der Erstellung anspruchsvoller Kampagnen und erzielen wachsende Erfolge für Ihr E-Mail-Marketing.

Sie haben Fragen zum Einsatz des Editor2.0 und WYSIWYG? Unser Service-Team steht Ihnen jederzeit für Ihre Anliegen zur Verfügung. Rufen Sie uns gerne an oder kontaktieren Sie unsere Kollegen über das Maileon Kontaktformular.