InDesign erweitern: So klappt die strukturierte Ausgabe in HTML

Mit Adobe InDesign werden Print-Publikationen für verschiedenste Anwendungsbereiche erstellt. Das Programm hat sich dabei nicht nur für die Gestaltung von Marketingmaterial, sondern auch für die Erstellung von Bedienungsanleitungen etabliert und überzeugt mit den umfassenden Möglichkeiten zur Layout-Gestaltung und der Verwaltung von umfangreichen Dokumenten. InDesign ist für die Publikation von interaktiven PDF-Dateien und PDF-Dateien für die Druckproduktion optimiert, sodass ein Teil der benötigten Ausgabeformate für Anleitungen abgedeckt ist.

Das Problem mit PDF-Dateien

Viele Jahre war eine Ausgabe aus InDesign als PDF-Dateien für die Druckproduktion vollkommen ausreichend, da Anleitungen hauptsächlich gedruckt und dem Produkt beigelegt wurden. Auch ein erster Schritt in Richtung Digitalisierung konnte mit InDesign noch gut bewerkstelligt werden, da InDesign die Möglichkeit bietet, interaktive PDF-Dateien zu erzeugen, die auf Websites einbezogen und als Download bereitgestellt werden können. Heutzutage werden diese PDF-Dateien dann meistens auf Mobilgeräten abgerufen und betrachtet. Dies führt jedoch zu einem erheblichen Nachteil für den Benutzer.

In der Regel wird das Layout von Bedienungsanleitungen für den Druck gestaltet und berücksichtigt überhaupt nicht die Betrachtung auf einem Mobilgerät. Das Layout orientiert sich viel mehr an genormten Papierformaten oder an der Verpackungsgröße. Dadurch vergeht vielen Benutzern die Lust in der Anleitung zu lesen oder sie überhaupt zu öffnen. Wenn eine Anleitung auf einem Mobilgerät betrachtet wird, gelten nämlich ganz andere Anforderungen für die Lesbarkeit und die Gestaltung, als wenn die Anleitung in Papierform vorliegt.

Beispielsweise kann ein zweispaltiges Layout für eine gedruckte Anleitung von Vorteil sein und die Verständlichkeit erhöhen. Allerdings kann ein zweispaltiges Layout auf einem Mobilgerät nur sehr umständlich gelesen werden, da der Benutzer in den Text hineinzoomen und ständig mit den Fingern verschieben muss. Wer schon einmal versucht hat eine mehrsprachige Anleitung auf einem Mobilgerät zu lesen, die eigentlich als gedruckte und gefaltete Anleitung auf einem DIN A2 Blatt gedacht war, weiß, welche Schwierigkeiten das mit sich bringt. Um diesem Problem entgegenzuwirken, könnte das Layout der Anleitung für die unterschiedlichen Ausgabeformate in InDesign angepasst werden. Allerdings hätte das einen erhöhten Arbeitsaufwand zur Folge, da zwei Dokumente parallel erstellt und gepflegt werden müssen – ein Dokument für die Druckausgabe und ein Dokument für die Ansicht auf Mobilgeräten.

Ein Programm, viele Ausgabemöglichkeiten

Die optimale Lösung sieht also so aus, dass die Inhalte ausschließlich in einem Quelldokument erstellt werden, aus dem die unterschiedlichen Ausgabeformate für den Druck und für Mobilgeräte exportiert werden können. InDesign bringt für eine Ausgabe in HTML-Dateien mit den vorinstallierten Funktionen allerdings nicht die besten Voraussetzungen mit, da das Programm wie bereits beschrieben für die Ausgabe von PDF-Dateien für die Druckproduktion optimiert ist. Somit müsste der Anwender nun in Erwägung ziehen die Erstellung und Verwaltung der Anleitungen in einem anderen Programm durchzuführen, welches beide Möglichkeiten optimal ausführen kann. Manche Anwender verwenden InDesign schon seit vielen Jahren und haben somit über die Zeit eine große Dateimenge angesammelt. Ein Umstieg auf ein anderes Programm wäre mit einem großen Kosten- und Zeitaufwand verbunden. Somit wird eine Lösung benötigt um auch mit InDesign HTML-Dateien zu erstellen, die für eine mobile Ansicht optimiert sind. Wir zeigen nun, wie eine mögliche Lösung aussehen könnte.

Ein Blick auf die Bordmittel

InDesign bietet eine vorinstallierte Möglichkeit die Dateien nach HTML zu exportieren, sodass die HTML-Dateien im Browser betrachtet werden können. Wenn man den Aufbau der HTML-Datei in einem Editor betrachten, wird deutlich, dass InDesign Überschriften, Absätze, Listen, Tabellen und Bilder erkennt und diese den entsprechenden HTML-Elementen mit Klassen zuordnet. Die Benennung der Klassen wird dabei von der Benennung der Absatzformate übernommen, sodass die HTML-Datei anschließend mit einer CSS-Datei gestaltet werden kann. Die auf diesem Weg exportierte HTML-Datei kann für kleine Dokumente ausreichend sein, allerdings besitzt die HTML-Datei keine hierarchische Struktur, sondern alle Elemente befinden sich auf der selben Ebene. Vor allem für die Übersichtlichkeit von großen Dokumenten und die nachträgliche Gestaltung mit CSS ist solch eine flache Hierarchie von Nachteil. Um für den Benutzer eine ansprechende und gut lesbare Anleitung zu gestalten ist der Aufbau in einer hierarchische Struktur unvermeidbar. Daher stellt sich die Frage, wie in der InDesign-Datei und der HTML-Datei ohne großen Aufwand eine Struktur hinzugefügt werden kann.

XML in InDesign

Da InDesign-Dateien auf XML basieren, bietet das Programm die Funktion die Datei mit einer XML-Struktur und Element-Tags zu versehen. Das Einfügen von Element-Tags und der Aufbau einer Struktur kann manuell vorgenommen werden. Allerdings ist diese Arbeit sehr zeitaufwendig und anfällig für Fehler, wenn sie nachträglich in bestehenden InDesign-Dateien vorgenommen wird. Deshalb empfiehlt es sich die Element-Tags automatisch zuzuweisen. Die Voraussetzung hierfür ist jedoch, dass alle Texte in der InDesign-Datei bereits mit Absatzformaten versehen sind. Die nun erstellte Struktur kann aus InDesign als XML exportiert werden. Man erhält dabei eine flache XML-Datei, die zwar alle Elemente mit den Inhalten aus der InDesign-Datei enthält, aber immer noch keine hierarchische Struktur besitzt. Um der XML-Datei nun automatisch eine hierarchische Struktur zuzuweisen, kann ein Python-Skript verwendet werden, welches alle Elemente nach bestimmten Vorgaben ordnet.

Die fertige HTML-Datei

Im nächsten Schritt soll aus der strukturierten XML-Datei die fertige HTML-Datei erzeugt werden. Dafür wird eine XSL-Transformation auf die XML-Datei angewendet. Mit der XSL-Transformation werden die Element-Tags aus der XML-Datei in die entsprechenden Element-Tags in HTML umgewandelt. Außerdem können Klassen vergeben werden, sodass die HTML-Datei mit CSS gestaltet und somit für eine optimale Ansicht auf verschiedenen Mobilgeräten angepasst werden kann. Die fertige HTML-Datei kann nun auf der eigenen Website oder in einer App eingebunden werden.

Die Vorteile zusammengefasst

Mit der beschriebenen Vorgehensweise können sämtliche InDesign-Dateien zeitsparend und effizient in eine strukturierte HTML-Datei umgewandelt werden. Die HTML-Datei kann wiederum an die Lesebedürfnisse des Benutzers angepasst werden und die Usability im Vergleich zu PDF-Dateien deutlich verbessern. Somit wird das gesamte Produkterlebnis für den Benutzer verbessert. Mit einer strukturierten Anleitung in HTML sind Sie zudem für zukünftige Anforderungen vorbereitet, denn strukturierte Informationen sind für die Verarbeitung durch künstliche Intelligenz oder für die Bereitstellung von Produktinformationen von großer Bedeutung.

Erstellen Sie Ihre Anleitungen in InDesign und planen Sie, die Anleitungen Ihren Kunden als HTML zur Verfügung zu stellen? Oder möchten Sie Ihre InDesign-Dateien nachträglich strukturieren? Dann nehmen Sie gerne Kontakt zu uns auf. Wir helfen Ihnen zu einer individuellen und automatisierten Lösung.