Einmal andersrum: Print to Web � L�sung f�r kleine Publikationen

Überführung von Printinhalten ins Internet, dies lässt sich ohne zusätzliche Software und Serversysteme in nur wenigen Minuten mit InDesign und Dreamweaver CS4 realisieren.

TILO RUST Das Motto «Single Source – multiple Output» ist ein hochbeschworenes Thema der Medienbranche. Das Ziel, Texte und Bilder nur an einer Stelle zentral zu setzen und diesen Content für Print- und Webpublika­tio­nen aufzubereiten, ist hochgesteckt und selten erreicht. Ein Grund dafür sind die grundlegenden Unterschiede der Medien. Die Catchphrase «Web to Print» beschäftigt seit Monaten die Branche. Auch Content-Management-Systeme (CMS) sind seit Jahren ausgereift. Während die erste Lösung jedoch für kleine Projekte zu kostspielig, zu aufwendig in der Individualisierung und zu gross für das Auftragsvolumen angesetzt ist, sind die meisten CMS meist nicht in der Lage, druckfertige Dateien auszugeben. Zudem übersteigt der Customizing­aufwand den Arbeitsaufwand für die individuelle Programmierung einer Website und damit häufig das Budget kleiner Unternehmen.

Wenn auch Printdienstleister sicher einen anderen Arbeitsschwerpunkt haben, so stellen sie doch für Kleinunternehmen eine Art allumfassender Ansprechpartner dar, weswegen eine schnelle Webumsetzung immer häufiger inhouse als Service erledigt wird.

Ein Lösungsansatz ist der umgekehrte Weg, nämlich «Print to Web». Gerade kleine Unternehmen stellen häufig die Forderung, einen bereits erstellten Flyer auch «ins Internet zu bringen». Grund genug, Adobes Schlachtschiffe InDesign und Dreamweaver CS4 einmal genauer auf diese Möglichkeit zu untersuchen. Beide besitzen nämlich einen kleinen Austauschkanal, worüber dies prinzipiell recht einfach möglich sein dürfte.

Flash kontra XHTML

Der schnellste und nicht selten praktizierte Weg, Printprodukte ins Internet zu bringen, ist es, ein PDF zu erstellen und dieses hochzuladen. Die Nachteile des PDF sind aber offensichtlich, denn es handelt sich dabei nicht um eine programmierte Website. Das Einpassen in ein vorhandenes Design ist daher ausgeschlossen.

Seit der Version CS4 erlaubt InDesign, die Inhalte in ein spezielles Flash-Format zu konvertieren, welches dann – mit Interaktionen versehen – publiziert wird. Diese Möglichkeit wird zurzeit häufig genutzt, stösst aber schnell an ihre Grenzen. Solche Webumsetzungen eignen sich vor allem für mehrseitige Kataloge oder Magazine, bei denen das Umblättern der Seiten die hauptsäc­hliche Interaktivität darstellt. Diese Flash-Files dahingehend zu bearbeiten, dass daraus ein Shoppingsystem oder pflegbare Inhalte resultieren, übersteigt jegliche Kosten-Nutzen-Rechnung. Sollen Navigation und Look&Feel passen, ist auch das Einbinden der generierten Flash-Inhalte in bereits bestehende Flash-Sites nicht einfach mit ein paar Klicks zu bewerkstelligen.

Daher haben Webdesigner bisher die Inhalte aus Printpublikationen oftmals per Copy/Paste herausgezogen und manuell auf einer bestehenden Website platziert. Pfiffige Experten nahmen dabei das zur Verfügung stehende Script «Export all Stories» zu Hilfe. Dieses gibt sämtliche Textkästen als Reintext aus und erleichtert damit das Übernehmen in eine Website.

Layout exportieren

Doch es geht noch komfortabler. Der Export der Inhalte aus einem Printdokument über die InDesign-Funktion für Dreamweaver exportieren im Dateimenü ist zwar selten genutzt, für kleinere Publikationen aber durchaus praktikabel.

In den Exporteinstellungen empfiehlt es sich, optimiert und Externe CSS-Datei zu wählen. Damit herrscht weiterhin Ordnung und die Trennung von Inhalt und Design ist gewährleistet. Ausserdem können mit dieser Einstellung bereits existierende Style Sheets verwendet werden.

Entstanden ist nun eine XHTML-Seite mit den in einem Unterordner liegenden Bildern. Die Vorschau im Browser sieht allerdings sehr ernüchternd aus, sind doch plötzlich alle Inhalte untereinander angeordnet und die Schriften nicht formatiert.

Daten importieren

Nach einem Wechsel der Werkzeuge hin zu Dreamweaver erscheint die dort geöffnete XHTML-Datei bei der ersten Untersuchung eigentlich in sehr aufgeräumtem Code, den ein Webdesigner schnell weiterverarbeiten kann.

Alle Textkästen sind in DIVs gesetzt und mit einer Klasse versehen. Im Kopf ist die angegebene CSS-Datei eingebunden. Aufzählungen erhalten eigene Klassen und Fliesstext bekommt Klassenbezeichnungen entsprechend den in InDesign verwendeten Absatzformaten. Alle Bilder wurden klein gerechnet und sind sauber eingebunden.

Für den Webdesigner ist nun die Übernahme des kompletten Layouts recht einfach: Der komplette Body-Inhalt kann in den bearbeitbaren Bereich der bereits erstellten Templates kopiert werden. Damit sind die Navigation und das globale Design gesichert.

Layout aufbereiten

Natürlich müssen Inhalte bei einer Konvertierung und einem Export immer nachbearbeitet werden. Dies fällt aber dank der Vorarbeit leicht. Zwei Möglichkeiten ergeben sich prinzipiell.

Entweder man stülpt sozusagen eine vorhandene CSS-Layoutdatei über die Seite und passt die Bezeichnungen der Container an. Dies ist die schnellste Methode, sofern Design und Style Sheets bereits durchdacht und erstellt sind. Allerdings bedarf dies einer guten Planung und einer sauberen Vorarbeit durch einen erfahrenen Webdesigner.

Der zweite Weg gefällt Einsteigern sicherlich besser, ist aber nicht unbedingt State of the Art. In Dreamweaver werden dazu die einzelnen Container als AP-Elemente positioniert. AP steht für absolut positionierte DIV-Container. Um dies einfach zu bewerkstelligen, muss jedem Container im Quelltext eine eindeutige ID zugewiesen werden. Das Style Sheet enthält dann die Positionsangaben, die in der Entwurfsansicht per Drag&Drop verändert werden können. Hilfslinien und Raster helfen dabei.

Web for Printies

Dass sich die Medien Print und Web grundsätzlich unterscheiden, ist kein Geheimnis. Dennoch ziehen Profis aus der Prepress-Branche immer wieder verdutzte Gesichter, wenn sie in Schulungen erfahren, was denn alles im Internet nicht geht. Diese technischen Hürden sind es, die eine 1:1-Umsetzung von Printlayouts auf das Internet verhindern oder ad absurdum führen.

• Nur drei Schriftarten. Generell kennt das Internet gerade mal drei Schriftarten mit jeweils sehr kleiner Auswahl: Sans-Serif-Schriften (z.B. Arial und Helvetica), Serifenschriften (z.B. Times) und die monospaced Courier. Alle anderen Schriften können nicht dargestellt werden, es sei denn, man überträgt sie als Bild oder Flash. Damit geht der zweite Punkt einher:
• Keine Schriftformatierung. Möglich sind zwar (faux) Fetten und Kursiva, jedoch sind Laufweitenangaben, Unterschneidungen und alle feinen typografischen Angaben auf dem Internet nicht umsetzbar. Diese zwei Fakten allein reduzieren eine Webumsetzung doch sehr auf das Wesentliche.
• Keine Konturenführung. Zwar lassen sich Bilder vom Text umflies­sen, aber eine Konturenführung mit geschwungenen Linien ist im Internet nicht möglich. Dadurch sehen runde Bilder oder Grafiken oft sehr verloren aus.
• Spaltensatz ist tabu. Viele Websites sind zwar in Spalten aufgeteilt, die Artikel selbst laufen aber nicht über mehrere Spalten oder Seiten hinweg, denn der Benutzer müsste, am Ende einer Spalte angelangt, weit nach oben scrollen, um weiterlesen zu können. Die Umsetzung in breiterem einspaltigem Layout mit stark gekürztem Text ist daher ratsam.
• Kein einheitliches Seitenlayout. Das Internet kennt keine DIN-Formate. Die Frage nach der optimalen Bildschirmauflösung, für die man die Website designen soll, wird bei jeder Schulung gestellt und kann nur mit «kommt darauf an» beantwortet werden. Fakt ist, dass heute eigentlich kein Browser mehr auf eine Breite von 800 Pixeln eingeschränkt ist, auf die noch viele alte Sites angepasst wurden. Auch die nächstgrössere Stufe 1024 Pixel Breite ist nicht der Weisheit letzter Schluss, denn einige Benutzer haben weit grössere Displays, andere lassen den Browser nicht im Vollbild laufen und der nächste hat Seitenleisten individueller Breite. Zwei Lösungs­ansätze: Magazinseiten wie z.B. www.stern.de bevorzugen ein starres Layout mit festgelegter Pixelanzahl, da Bilder und Spalten hier in das feste Raster eingepasst werden. Die Inhalte kommen dabei aus einem CMS, welches die Einschränkungen überwacht. Sites mit Inhalten, die eher der Repräsentation dienen, also weniger einem redaktionellen Umfeld entspringen, sollten eine Seitenbreite von 100% (des Browserfensters) und ein so genanntes fliessendes Layout, das sich der Browserbreite anpasst, wählen.
• Interaktivität muss sein. Vergessen wird bei einer Webumsetzung oft der Punkt der Interaktivität. So benötigt jede Inhaltsseite eine Navigation, ein Menü, damit die anderen Seiten, zumindest aber die Homepage, erreichen werden können. Diese Verknüpfungen können aber nicht aus einem Printprodukt entnommen werden und sind also immer in Handarbeit einzufügen.

Der goldene Mittelweg

Bei Betrachtung der zwei grundsätzlich unterschiedlichen Medien ist klar, dass es so schnell keine 1:1-Umsetzung der Inhalte geben wird und diese auch keinen Sinn machen kann. Dennoch wird es in Zukunft aufgrund des Produktionsdrucks immer öfter nötig sein, die Inhalte speziell kleiner Publikationen schnell und sauber in das Internet zu überführen.

Der Mittelweg heisst also Vorformatieren und Automatisieren so weit möglich, um den manuellen Aufwand so gering wie möglich zu halten. Auch wenn Adobe an dieser Stelle unbedingt nachlegen muss, ist doch ein prakti­kabler Ansatz gefunden.