Kategorien
Webentwicklung

WYSIWYG

Erinnerst du dich, wie Computer aussahen, bevor wir hübsche Betriebssysteme wie Windows mit schicken Ordnern und Icons hatten? Es war nichts weiter als ein schwarzer Bildschirm mit weißem Text, der als Kommandozeileninterface bezeichnet wurde. Es war langweilig, es war kompliziert, und es war einst die einzige Möglichkeit, die wir hatten, um Befehle auf unserem PC auszuführen.

Das Gleiche gilt für Webdesign. In den ersten Jahren bestand Webdesign aus einer Wand aus kompliziertem Code, den nur der erfahrene Programmierer verstehen konnte – bis der WYSIWYG-Editor erfunden wurde, das heißt.

Was ist WYSIWYG genau?
WYSIWYG steht für “what you see is what you get”. Mit einem WYSIWYG-Editor sieht dein Design und dein Inhalt auf der Bearbeitungsplattform genau so aus, wie er in der Endversion aussehen wird.

Microsoft Word ist ein gängiges Beispiel, das hilft, einen WYSIWYG-Editor zu definieren. Du hast eine leere Seite mit einigen Formatierungswerkzeugen, mit denen du Wörter, Tabellen, Bilder und so weiter hinzufügen und formatieren kannst. Was du auf dem Bildschirm siehst, ist genau das, was du siehst, wenn du das Dokument druckst oder weitergibst. Mit anderen Worten: Es ist “what you see is what you get”. Wahrscheinlich hast du sie schon einige Male benutzt, ohne es zu wissen. Hier ist ein Beispiel von einem unten:

Einfach, nicht wahr?

Der WYSIWYG-Ansatz für Webdesign unterscheidet sich von konventionellen Methoden, die HTML und andere Auszeichnungssprachen verwenden, bei denen der Entwicklungsbildschirm nur eine Wand aus Code ist und du nicht in der Lage bist, das Endergebnis in Echtzeit zu sehen, während du neue Seitenelemente oder Codezeilen hinzufügst.

WYSIWYG-Editoren erreichten die Massen, als benutzerfreundliche Website-Builder wie Wix aufkamen, die auch nicht-technischen Menschen eine zugängliche Möglichkeit boten, Webseiten zu erstellen. Langsam aber sicher begannen Enterprise Content Management Systeme der WYSIWYG-Bearbeitung einen höheren Stellenwert einzuräumen und gaben Marketern eine Möglichkeit, Webseiten, Landingpages und E-Mail-Newsletter zu erstellen, ohne die IT-Abteilung einschalten zu müssen.

Alles in allem macht es ein WYSIWYG-Editor für Marketer einfacher, eigenständig ein angenehmeres Kundenerlebnis zu liefern. Schließlich wollen Web-Besucher nicht auf eine Wand aus optisch nicht so ansprechendem Text starren. Sie wollen schön formatierte Absätze, Bilder, Videos und andere Grafiken sehen – alles, was das Nutzererlebnis verbessert.

Was sind die Vorteile der WYSIWYG-Bearbeitung?
Es gibt viele Vorteile von WYSIWYG-Editoren, vor allem aus Design-Sicht, wie wir unten sehen:

Einfachheit der Bedienung: Viele WYSIWYG-Editoren verfügen über eine Drag-and-Drop-Oberfläche, mit der Nutzer verschiedene Komponenten (z.B. Text, Bilder und Videos) auf einer Webseite hinzufügen (oder entfernen) können, ohne Kenntnisse in Webprogrammierung zu haben. Die Möglichkeit, Teile einer Webseite auf diese Weise zusammenzusetzen, ist intuitiv und entspricht der natürlichen Art des Gehirns, Elemente zu organisieren.
Geschwindigkeit und Effizienz: WYSIWYG-Editoren arbeiten viel schneller, als eine Seite von Grund auf zu programmieren – vor allem, wenn der zuständige Mann oder die zuständige Frau ein nicht-technischer Marketer ist. Es ist nicht nötig, den Bildschirm zu wechseln und auf die Vorschau zu warten. Zusätzlich zu der sofortigen Befriedigung, die sich bietet, können sich die Nutzer mehr auf das Design konzentrieren, anstatt sich mit den technischen Aspekten zu beschäftigen.
Flexibilität: WYSIWYG-Design-Tools ermöglichen es dir, kleine Änderungen im Handumdrehen vorzunehmen. Wenn ein Bild nicht an der richtigen Stelle ist, kannst du das mit ein paar einfachen Klicks korrigieren und deine Seite auf diese Weise aktueller halten.
Fool-proofing: Fehler sind in einem WYSIWYG-Editor viel leichter zu finden als in einem Codeblock. Außerdem können diese Fehler in einem WYSIWYG-Editor leicht behoben werden.
Quickstarts: Viele WYSIWYG-Editoren lassen dich aus einer Auswahl von Vorlagen wählen, mit denen du beginnen kannst. Durch die Beschleunigung der frühen Entwicklungsphasen hast du mehr Zeit, dich auf die Inhalte für dein Zielpublikum zu konzentrieren.
Was sind die größten Nachteile von WYSIWYG-Editoren?
Wie alles, haben auch WYSIWYG-Editoren einige Nachteile. Die bemerkenswertesten, die du unserer Meinung nach kennen solltest, sind unten aufgelistet:

Möglicherweise irreführende Darstellung: Gelegentlich ist das, was du siehst, nicht immer das, was du bekommst. Jetzt, wo Websites auf einer Vielzahl von Geräten, Bildschirmgrößen und Auflösungen betrachtet werden können, bieten einige WYSIWYG-Editoren kein responsives Design oder die Möglichkeit, zu sehen, wie deine Website auf einem mobilen Gerät aussehen wird.
Inkonsistenz: Bei den unzähligen WYSIWYG-Lösungen, die es da draußen gibt, werden viele Dienste unterschiedliche Benutzeroberflächen und Konventionen haben. Wenn du dich an die Verwendung eines Editors gewöhnt hast, ist der Wechsel zu einem anderen nicht immer einfach.
Eingeschränkte Funktionalität: Nicht alles kann auf ein Drag-and-Drop-Interface vereinfacht werden. Einige Seitenelemente benötigen immer noch einige HTML/CSS-Tricks, um das gewünschte Endergebnis zu erzielen. In anderen Fällen kann es sein, dass du ein bestimmtes vorgefertigtes Element auf einer Seite anpassen musst (z.B. die Anmeldebox), um deine Anforderungen zu erfüllen, und dies erfordert einige Änderungen “unter der Haube”.
Nicht-standardisierte Kodierung: Viele Editoren generieren entweder übermäßigen Code oder generieren Code, der nicht mit den aktuellen Standards und Protokollen konform ist. Während es für das Aussehen deiner Website keinen Unterschied macht, kann zu viel Code die Ladezeiten einer Website gelegentlich verlangsamen.
Abgesehen davon werden WYSIWYG-Editoren ständig verbessert, wobei WYSIWYG-Editoren für Unternehmen wie der Zesty.io-Editor mit sauberem Code, besserer Ästhetik und eingebauten SEO-Funktionen aufwarten können.

WYSIWYG-Editor Beispiele
Wenn du deine Website mit einem WYSIWYG-Editor erstellen möchtest, aber nicht weißt, wo du anfangen sollst, findest du hier einige bekannte Editoren, die du dir anschauen solltest:

Adobe Dreamweaver: Diese sehr beliebte Option verfügt über eine große Bibliothek von Code-Snippets und Funktionen zur Dateiübertragung. Allerdings hat er einen stolzen Preis und ist nur zu empfehlen, wenn du ein detailliertes und komplexes Design erfahren möchtest.
Create: Exklusiv für Mac-Betriebssysteme, kombiniert dieser Dienst die wichtigsten Funktionen vieler der namhaften Editoren in einem einzigen, günstigen Paket.
Quill: Diese kostenlose und Open-Source-Option ist in hohem Maße anpassbar. Ziehe diese Option in Betracht, wenn dir die Anpassung der Benutzeroberfläche wichtig ist.
Seamonkey Composer: Eine einfache All-in-One-Alternative zu seinen komplexen Brüdern. Er ist auch einer der wenigen Editoren, die mit Linux kompatibel sind.
Summernote: Ein weiteres Open-Source-Projekt, das sich leicht an deine Bedürfnisse anpassen lässt. Außerdem wird es von einer aktiven Forum-Community unterstützt, die dir gerne hilft, wenn du sie brauchst.
Zesty.io: Erinnerst du dich daran, dass wir erwähnt haben, dass sich die meisten Editoren nicht auf SEO konzentrieren? Hier ist die Ausnahme! Zesty.io ist einzigartig darauf abgestimmt, Kunden anzusprechen und die Seitenaufrufe durch seine Funktionen zur Suchmaschinenoptimierung zu beschleunigen.
Die Wahl des richtigen WYSIWYG-Editors für dein Unternehmen
Wie wählst du also den richtigen WYSIWYG-Editor aus?

Unserer Meinung nach kommt es auf die persönlichen Vorlieben und die jeweilige Aufgabe an. Bestimmte Editoren sind für bestimmte Aufgaben besser geeignet. Quill ist großartig, wenn du ein effizientes und benutzerfreundliches UI erstellen willst, während etwas wie Zesty.io gut für größere Firmen und Unternehmen geeignet ist, die Webseiten, Apps und Single-Page-Anwendungen mit größerer Flexibilität und Funktionalität erstellen wollen.

Es gibt keine falsche Antwort, wenn es um einen WYSIWYG-Editor geht, aber du wirst feststellen, dass du dich zu bestimmten Editoren hingezogen fühlst, die sich für dich vertraut anfühlen, die zu deinem Designstil passen, die vielleicht am besten zu deinem Geschäftsmodell passen und die dich ansprechen, egal welche Aufgaben du versuchst zu erledigen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

10 + zehn =