ecommerce-blog.at
Juni (
4
)
Juli (
2
)
August (
3
)
März (
1
)
April (
1
)
Mai (
1
)
Juli (
2
)
August (
2
)
März (
2
)
April (
3
)
Mai (
2
)
Juni (
3
)
Juli (
3
)
August (
2
)
März (
3
)
April (
4
)
Mai (
3
)
Juni (
3
)
Juli (
3
)
August (
3
)
März (
3
)
April (
3
)
Mai (
3
)
Juni (
3
)
Juli (
3
)
August (
3
)
März (
4
)
April (
3
)
Mai (
4
)
Juni (
3
)
Juli (
3
)
August (
2
)
März (
3
)
April (
4
)
Mai (
4
)
Juni (
2
)
Juli (
4
)
August (
3
)
März (
5
)
April (
4
)
Mai (
4
)
Juni (
4
)
Juli (
4
)
August (
4
)

01.04.2011 - Online-Inhalte – worauf man beim Einpflegen achten sollte

Wer ein CMS oder Onlineshopsystem nutzt und selbst seine Inhalte einpflegt, muss dabei zwangsläufig die Regeln des World Wide Web verstehen und befolgen.

Online-WYSIWYG-Editoren erlauben uns inzwischen Seiteninhalte sehr einfach einzupflegen, allerdings kann Inhalt dabei nicht 1:1 aus Offlinedateien oder anderen Internetseiten übernommen werden.
Aber warum eigentlich nicht und worauf ist zu achten? Genau darauf möchten wir mit diesem Artikel näher eingehen.

Was ist ein WYSIWYG-Editor?

WYSIWYG ist ein Akronym und steht für What You See Is What You Get.
Es handelt sich also um einen Editor, der den Inhalt bereits beim Editieren so darstellt, wie er letztendlich auf der Website oder im Onlineshop aussieht. Dabei gilt zu beachten, dass bei Online-WYSIWYG-Editoren in den meisten Fällen jedoch keine exakt identische Darstellung möglich ist. Mehr dazu später.

Wie funktioniert ein Online-WYSIWYG-Editor?

Alle gängigen Online-WYSIWYG-Editoren greifen auf die browserinternen WYSIWYG-Funktionalitäten zu. Das bedeutet, die gesamte Programmlogik des Editors bringt bereits der verwendete Internetbrowser mit sich. Das CMS bzw. das dahinter steckende Redaktionssystem macht im Grunde nichts anderes, als bereits vorhandene Funktionen anzusteuern. Markiert man beispielsweise einen Text und klickt dann auf „fett“, so ruft das CMS lediglich die „Umwandeln-in-Fett-Funktion“ des Browsers auf. Den Rest übernimmt der Browser. Genauso verhält es sich mit all den anderen Funktionen des Editors.

Nimmt man eine Formatierung vor, so fügt der Browser entsprechende HTML-Tags ein. Diese HTML-Tags werden dann im Frontend, also auf der öffentlichen Internetseite ausgegeben, wodurch der Inhalt vom Internetbrowser entsprechend formatiert dargestellt wird.

Das Zeitalter von CSS

Doch heute wird die Formatierung von Website-Inhalten nicht mehr durch HTML alleine gesteuert, vielmehr werden diese im Frontend durch CSS definiert.

CSS ermöglicht es zu definieren, wie eine Überschrift 1. Grades, 2. Grades, 3. Grades aussehen soll, wie fetter Text dargestellt werden soll, wie Standardtext dargestellt werden soll, wie sich die standardmässigen Ausrichtungen in Tabellenzellen verhalten sollen usw.

Damit aber nicht genug. Breiten- und Höhendefinitionen von Content-Containern, Farben, Hintergrundbilder und vieles mehr können mit CSS übersichtlich und unabhängig von den darzustellenden Daten definiert werden.
CSS ist sehr flexibel, kostengünstig zu implementieren und kostengünstig zu erweitern. Aber genau diese Flexibilität rsp. die Abkapselung zwischen Daten und Design bringt auch eine kleine aber dennoch zu beachtende Problematik mit sich: Die im Online-WYSIWYG-Editor eingepflegten Inhalte werden mit anderen CSS-Definitionen dargestellt als später im Frontend. Folglich zeigt der Editor den Inhalt in aller Regel nicht exakt so an wie dann später im Frontend.

Konkret heisst dies: Wenn die Überschrift 1. Grades im Frontend rot und mit 20px Größe definiert ist, und im Adminbereich schwarz mit 16px Größe, dann wird die Überschrift im Adminbereich eben schwarz und im Frontend rot dargestellt. Für die Anwendung ist dies im Grunde kein wirkliches Problem, man muss über dieses Verhalten einfach nur Bescheid wissen.

Leistungsfähigere Onlineshopsysteme wie etwa Trade-System, bieten auch die Möglichkeit für Multifrontending. Darunter versteht man die Verwendung mehrerer Frontends mit ein- und demselben Administrationsbereich.
Verwendungszwecke dafür gibt es viele. Einfachstes Beispiel wäre ein und dasselbe Produkt in 2 unterschiedlichen Onlineshop-Frontends zu vertreiben, beispielsweise um mit einem anderen Erscheinungsbild eine andere Zielgruppe anzusprechen. So ist es beispielsweise möglich, dass ein und dieselbe Überschrift in Frontend 1 in rot, und in Frontend 2 in blau, dargestellt wird. Vielleicht gibt es noch ein 3., 4. Und 5. Frontend mit der Überschrift in grün, violett und braun. Die Darstellung des Inhaltes im Online-WYSIWYG-Editor bleibt abstrakt und unabhängig von den einzelnen Frontends.

Es ist daher unabdingbar, den Online-WYSIWYG-Editor lediglich als unterstützende Einpflegehilfe von Inhalten zu betrachten und eingepflegte Seiteninhalte nach deren Einfplege im Frontend zu überprüfen und ggf. nachzuformatieren.

Einkopieren von anderen Internetseiten

Leider unterstützen es alle gängigen Internetbrowser, Inhalte von unbekannten Quellen einfach per Copy & Paste in das Online-WYSIWYG-Editorfenster des Browsers einzukopieren. Leider, denn damit ergibt sich ebenfalls eine kleine aber dennoch vorhandene Problematik.

Gehen wir einmal davon aus, wir würden auf einer anderen Internetseite Text markieren, diesen kopieren und schließlich im Online-WYSIWYG-Editorfenster einfügen. Dabei wird nun aber nicht nur der Text, sondern auch ein Teil der Formatierung mitkopiert. "Ein Teil" - denn die CSS-Definitionen der Website werden damit natürlich nicht mitkopiert (technisch unmöglich). Dadurch wird der Inhalt im Editor und auch im Frontend mit höchster Wahrscheinlichkeit anders dargestellt als auf der Quell-Website.

Um dieses Problem zu umgehen, empfiehlt es sich die Inhalte ohne Formatierungen zu kopieren und im Online-WYSIWYG-Editor nachzuformatieren. Klingt logisch, aber wie geht das?

Früher hatte man den Inhalt einfach in einen Texteditor, welcher keinerlei Formatierungsmöglichkeiten bot, kopiert, anschließend den Text im Texteditor erneut markiert, kopiert und schließlich im Online-WYSIWYG-Editor eingefügt. Durch den Zwischenschritt gehen sämtliche Formatierungen verloren und eine Nachformatierung im Online-WYSIWYG-Editor ist rasch erledigt.

Heute gibt es dafür komfortablere Möglichkeiten. Modernste Online-WYSIWYG-Editoren bieten hierfür eine „Nur Text einfügen“ Funktion an, welche sämtliche Formatierungen in der Zwischenablage verwirft.

Einkopieren von anderen Programmen

Wer seine Seitentexte zuerst mit Microsoft Word oder einem anderen Programm schreibt, könnte auch auf die Idee kommen, den geschriebenen und formatierten Text einfach per Copy & Paste in den Online-WYSIWYG-Editor zu kopieren. Und damit wären wir bei der nächsten Problematik: Anstelle von "HTML" nutzen externe Programme "Richtext" zur Formatierung von Text. In Internetbrowsern kann jedoch nur HTML-Code dargestellt werden.

Um das Einkopieren von Inhalten aus externen Programmen dennoch zu ermöglichen, haben die Browserhersteller ihre Internetbrowser mit einer Autokonvertierungs-Funktion beim Einfügen aus der Zwischenablage ausgestattet. Fügt man also in einem Internetbrowser Inhalte aus der Zwischenablage ein, so wird dieser automatisch in HTML umgewandelt.
Ob die Browserhersteller damit eine gute Idee verwirklichten sei dahingestellt. Denn Richtext und HTML sind zwei völlig andere und voneinander unabhängige Standards. Wahrscheinlich werden Sie schon erahnen, dass diese Umwandlung keine 100% saubere Sache sein kann – und genauso verhält es sich leider auch. Das Resultat ist meist ein langes, unsauberes HTML-Konstrukt, welches erfahrungsgemäß fast ausschließlich zu unvorhersehbaren Problemen führt.

Auch in diesem Fall empfiehlt es sich daher, den Zwischenschritt über einen Texteditor zu verwenden, oder wer einen moderneren Online-WYSIWYG-Editor einsetzt, gleich direkt ohne Formatierungen einzufügen.

Darüber hinaus bieten inzwischen die meisten Online-WYSIWYG-Editoren auch eine sogenannte „Word-Import“ Funktion. Dabei kann Text, der ursprünglich in externen Programmen geschrieben und formatiert wurde, durch automatische Umformatierung „repariert“ eingefügt werden. Diese Funktion heisst deshalb Word-Import, da es meist das Programm Word von Microsoft ist, von welchem fehlerhaft formatierte HTML-Codes eingefügt werden. Mit dieser Funktion werden aber nur die bekannten problematischen Formatierungen entfernt bzw. umgewandelt. Wer eine wirklich saubere Lösung bevorzugt, die auch nachträglich keinerlei Probleme verursacht, sollte mit dem unformatierten Einfügen bzw. mit dem Zwischenschritt über den Texteditor arbeiten.

Ändern von Schriftarten, Schriftgröße, Schriftfarbe, usw.

Wie weiter oben bereits erwähnt, werden Seiteninhalte mit CSS definiert. Möchten Sie nun auf jeder Seite z.B. eine andere Standardschriftart verwenden, ändern Sie bitte nicht im Online-WYSIWYG-Editor bei jeder Seite den Schriftstil, sondern nehmen Sie die Änderungen lieber per CSS vor. Wer keine Kenntnisse in CSS hat, kann seinen Webprogrammierer dazu beauftragen. Erfahrungsgemäß sind derartige Stiländerungen kein all zu großer Aufwand, was sich auch in den Kosten entsprechend wiederspiegelt.
Doch warum mit CSS? Ganz einfach: Ändert sich das Erscheinungsbild Ihrer Website oder Ihres Webshops eines Tages, und sei es nur die allgemeine Schriftformatierung, so müssten Sie auf jeder Seite die Formatierungen neu festlegen – auf jeder! Werden derartige Grundformatierungen hingegen per CSS definiert, können solche Stil-Änderungen meist innerhalb weniger Minuten durchgeführt werden.

Vermeiden Sie Höhen- und Breitendefinitionen

Aus demselben Grund, weshalb Sie Ihre Standardschrift, Überschrift, usw. per CSS definieren sollten, sollten Sie es dem Browser überlassen, wann ein Text umbricht. Verzichten Sie daher auf Tabellen mit fixer Größenvorgabe. Wenn Sie eine Tabelle verwenden möchten, fügen Sie eine ohne Größenangabe ein. Der Browser wird die Tabelle dynamisch an die Größenverhältnisse des Frontends anpassen.

Auch bei Bildern sollte man anstelle einer Größenangabe zur verkleinerten Darstellung die Bilder lieber gleich in der gewünschten Größe hochladen. Ein häufig begangener Anwendungsfehler ist es nämlich, ein Bild in einer sehr hohen Auflösung hochzuladen und dann einfach kleiner gezoomt auf einer Seite einzubinden. Das Bild wird im Frontend dabei mit voller Auflösung auf den PC des Seitenbesuchers übertragen, was die Ladezeit und Serverlast unnötig erhöht.

Zusammenfassend kann man also sagen, dass Online-WYSIWYG-Editoren heute schon sehr leistungsfähig und komfortabel sind, dennoch gibt es Unterschiede zur Bearbeitung in Offline-Programmen. Wer diese beim Einpflegen von Inhalten berücksichtigt, spart viel Zeit und Nerven.

Wir wünschen Ihnen weiterhin viel Erfolg mit Ihrem Onlineshop!

zurück zur Übersicht


Kommentare

11 Kommentar(e) gefunden:


Erich
01.04.2011 10:23
Ich bin begeistert! So eine Anleitung suche ich schon seit Jahren vergeblich. Danke :-)

Lauran
01.04.2011 12:47
**100% zustimm** wollte typo3 schon in den müll werfen wegen seines armseligen editors. aber die anleitung hier schaut wirklich vielversprechend aus.

Tom
01.04.2011 16:33
Jep, das sind echt gute Tips. Sollte man halt wissen wenn man mit nem wys...-Editor werkelt ;)

Klaus
02.04.2011 10:37
Ich find es einen Witz dass die Browserhersteller da nicht endlich eine wirklich saubere Lösung finden. Vielleicht sollten aber auch die Betriebssystemhersteller einfach die notwendigen Funktionalitäten schaffen.

MyFace
02.04.2011 19:56
@Klaus: Wie denn? Es sind einfach mal unterschiedliche Standards HTML vs. Richtext. Man könnte sich überlegen von Richtext wegzukommen und alles in HTML zu speichern, aber dann wird man im Offlinebereich sehr in seinen Möglichkeiten eingeschränkt sein.

Fritz
02.04.2011 22:22
Oder anders rum: Im Internet statt HTML Richtext verwenden. Dann werden es Suchmaschinenspider aber ziemlich schwer haben, den Seiteninhalt zu spidern. Ich glaube da gibt es keine einheitliche Lösung, die für alle Zwecke ideal ist. Just live with it.

Henk
03.04.2011 19:12
Also ich finde das nicht weiter schlimm. Ein bisschen Mitdenken kann man als Anwender schon. Wenn di großen Konzerne mal eine bessere Lösung finden ist gut, sonst kann ich auch gut wie im Moment arbeiten. Schade nur, daß ich den Beitrag erst jetzt gelesen habe. Den hätte ich vor ein paar Jahren schon gut gebrauchen können :)

Jürgen
04.04.2011 12:03
Lauran, die anderen CMS haben auch keinen besseren Editor. Einfach die Tipps von oben beherzigen. Ein CMS wählt man gewöhnlich auch nicht wegen des Editors aus. Ist wie bei einer Frau - da zählen die inneren Werte :)

Frank
11.04.2011 09:33
Dem kann ich nur zustimmen: Den Wysiwyg Editor einfach nur als Eingabehilfe sehen und mitdenken beim eintippen.

Darth Vader
14.04.2011 11:35
Ich arbeite schon seit vielen Jahren mit Wisiwyg Editors und bin eigentlich noch nie auf irgendwelche schlimmen Probleme gestoßen. Ja klar. So umfangreich wie ein Textverarbeitungsprogramm (z.b. Word) kanns natürlich nicht sein. Aber für das Internet doch voll ausreichend.

Susanne
20.04.2011 13:16
Ich bin gleicher Meinung. Und wer will die Texte denn schon pixelgenau eingesetzt haben. Wenn überhaupt dann ein Großunternehmen, das sich die dafür notwendigen CSS-Programmierarbeiten auch leisten kann :)
ecommerce-blog.at - Onlineshop & Shopsystem Österreich
Wir danken unserem Sponsor www.arweb.at

Empfohlene Bücher: