Inhaltsverzeichnis
Mit dem Online Media Designer (OMD) gestalten Sie in SCHEMA ST4 die HTML-Ausgabe Ihres Contents. Diese Aussage kommt ganz leicht daher. Aber wenn Sie sich einmal die verschiedenen Techniken und Herausforderungen vergegenwärtigen, die hier zusammenkommen, merken Sie schnell: Dieses Tool hat einiges unter der Haube.
ST4-XML, XPath, HTML, CSS, JavaScript und responsives Design greifen ineinander und müssen auch bei Änderungen und Anpassungen berücksichtigt werden. Ich habe mir für Sie vier Tipps aus meiner täglichen Arbeit mit und an OMD-Layouts überlegt, die Ihnen bei Ihrer Layout-Entwicklung helfen können.
Tipp 1: Sprechende Farbvariablen verwenden
Sie kennen das Prinzip „Single source of truth“ aus der Content-Verwaltung, und genau dieses Prinzip sollten Sie auch im OMD-Layout beherzigen. Wenn Sie Ihr Layout an die Corporate-Design-Richtlinien anpassen, stehen Farben ganz oben auf der To-do-Liste.
Machen Sie es sich dabei nicht nur heute leicht, sondern auch in Zukunft. Legen Sie konkrete Farbwerte nicht direkt an einzelnen Elementen fest. Nutzen Sie stattdessen die Möglichkeit, ein Inventar von Farbvariablen mit sprechenden Variablennamen für unterschiedliche Zwecke zu definieren, und nutzen Sie dann diese Farbvariablen bei den einzelnen Elementen.
Wenn später etwas geändert werden muss, ändern Sie nur eine Farbvariable – und nicht zig Stellen im Layout. Das ST4-OMD-Layout berücksichtigt das bereits an vielen Stellen, allerdings nicht durchgängig. Das können Sie bestimmt besser!
Tipp 2: Vorsicht beim Kopieren von CSS-Regeln
Mit CSS (Cascading Style Sheets) steht Ihnen bei der Arbeit im OMD ein sehr mächtiges Werkzeug zum Formatieren Ihres HTML-Contents zur Verfügung. Im Gegensatz zum Formatvorlagen-Denken aus der Welt von Word oder InDesign gilt bei CSS: Auf ein Element können mehr als eine CSS-Regel angewandt werden; und wenn mehr als eine CSS-Regel vorhanden ist, dann passiert das auch.
Dabei können CSS-Anweisungen auch durch andere Anweisungen überschrieben werden. Verantwortlich dafür ist die CSS-Kaskade. Das Überschreiben passiert dabei oft versehentlich. Immer wieder begegnet mir, dass vorhandene Regeln kopiert werden, um deren Anweisungen im Custom-Bereich zu verändern. Dabei passiert es leicht, dass diese Kopie wiederum Anweisungen aus anderen Regeln überschreibt, die man hätte beibehalten wollen. Hier sollten Sie also besonders gründlich prüfen, dass keine unerwünschten Nebeneffekte auftreten.
Tipp 3: Im echten Browser testen
Testen Sie Ihre Änderungen zwischendurch immer wieder im echten Browser und nicht nur in der eingebauten Vorschau. Wenden Sie Ihren Layout-Zwischenstand auf ein ST4-Projekt an und produzieren Sie realistischen HTML-Output, den Sie dann in einem Browser testen und sich die relevanten Stellen genauer anschauen können.
So stellen Sie sicher, dass Sie Ihre Bearbeitung nicht ausschließlich auf Basis der OMD-Vorschau durchführen. Die OMD-Vorschau interpretiert nämlich manche Angaben anders als die aktuellen Versionen der gängigen Browser. Insbesondere bei interaktiven Funktionalitäten und auch bei der Ausgabe von Callout-Grafiken verlassen Sie sich besser nicht nur auf diese Vorschau.
Tipp 4: Versteckte CSS-Regeln mit Browser-Entwicklertools aufspüren
Das Layout, auf dessen Basis Sie im OMD arbeiten, bringt schon etliche Formatdefinitionen in Form von CSS-Regeln mit, damit die Grundfunktionalität des HTML-Outputs gewährleistet ist. Aber: Nicht alle dieser Formatdefinitionen finden Sie im OMD, um sie nach eigenen Vorstellungen anpassen zu können.
Manche CSS-Regeln sind so tief in den Layout-Strukturen versteckt, dass man sie nur über Umwege entdeckt. Falls Sie doch mal solch eine Regel aufspüren wollen, sind die „Entwicklertools“ hilfreich, die bei den aktuellen Browsern als Zusatzfeatures aktiviert werden können. Diese zeigen unter anderem an, an welchen Stellen CSS-Regeln definiert sind. Dort können Sie dann anknüpfen, um Anpassungen vorzunehmen und solche Regeln ggf. gezielt zu überschreiben.
Zusätzlich – da blicken wir noch mal kurz auf Tipp 3 zurück – können Sie mit diesen Entwicklertools auch testen, wie sich Ihr Output auf Smartphone- oder Tablet-Displays verhält. Denn auch da sind die aktuellen Browser der OMD-Vorschau voraus. Und auch für Tipp 2 sind diese Tools hilfreich, da Sie die CSS-Kaskade anzeigen und somit deutlich machen, welche Regel jetzt wirklich greift.
Fazit
Der OMD von SCHEMA ST4 ist ein sehr mächtiges Werkzeug. Der Weg zum gewünschten Ergebnis ist nicht immer einfach, aber er lohnt sich. Auch wenn das Basislayout von ST4 einiges für den Einstieg bietet, ist mit etwas Know-how deutlich mehr möglich.
Wenn Sie mal schauen wollen, was wir schon mit speziellen OMD-Layouts gestaltet haben, dann empfehle ich Ihnen unsere Webinaraufzeichnung „Pimp your OMD – User Experience Ihrer Onlinehilfe verbessern“. Und wenn Sie richtig in die Erstellung von Layouts einsteigen wollen, freue ich mich, Sie bei meinem PowerWebinar „HTML-Layouts mit SCHEMA ST4 erstellen: Grundlagen des OMD“ zu treffen.
