Mehrwert per Tablet-Newsletter

Beat Kipfer Wie es zum Modul kam: Am jährlich stattfindenden VSD-Forum wird jeweils ein 4-seitiger Newsletter im Format A4 ­erstellt. In gedruckter Form wird er an die Teilnehmenden und an alle Interessierten verteilt. Nun tauchte der Wunsch auf, den Newsletter mit zusätzlichem Inhalt und medien­gerechter Interaktivität für Tablets (in erster Linie für das iPad) zur Verfügung zu stellen. Das Ganze sollte rasch geschehen, damit die Informationen aktuell zum Leser gelangen; dabei sollte der Aufwand überschaubar bleiben. Die Lösung: Mit Adobe Muse eine Tablet-optimierte Website in Anlehnung an das Printlayout erstellen und veröffentlichen.

Website und nicht DPS

Mit der Website – erstellt mit Adobe Muse – gelingt es, den Inhalt des Newsletters in Anlehnung an die Gestaltung in InDesign relativ rasch aufzubauen. Muse stellt beim Erstellen des Dokuments ein Tablet-Layout zur Verfügung. Wenn bereits ein Name für die Site registriert wurde und ein Webserver zur Verfügung steht, ist die Veröffentlichung mit ein paar Klicks erledigt.

Dies ganz im Gegensatz zur Publikation über die Digital Publishing Suite, welche die Ausgabe einer Datei im Format .folio zum Ziel hat. In diesem Fall müsste eine App erstellt werden, um das gewünschte Publikum zu er­reichen. Das Erstellen des Layouts wäre zwar nochmals einfacher als mit Muse, da es direkt in InDesign erstellt werden könnte. Bis aber das Prozedere über den Folio Builder bis zur fertigen App und der Bewilligung durch Apple geschehen ist, vergehen Tage oder gar Wochen. Je nach Abomodell ist die Veröffentlichung nicht eben günstig.

Zum Lesen der Website auf dem Tablet muss eine Onlineverbindung vorhanden sein – im Gegensatz zur DPS-­Lösung, welche auf das Tablet heruntergeladen werden kann. Dieses Argument war aber für den Entscheid bezüglich Vorgehen nicht relevant, da das in aller Regel vorausgesetzt werden kann.

Warum Adobe Muse?

Muse ist das ideale Tool zum Erstellen von Websites für Anwender, welche sich noch nie mit HTML 5 oder datenbankgestütztem Arbeiten auseinandergesetzt haben. Es wird rein visuell gearbeitet; die Möglichkeiten entsprechen zwar bei weitem nicht denjenigen von InDesign, doch das vorliegende Projekt konnte damit ohne grosse Kompromisse umgesetzt werden. Zum Teil ist man zwar noch auf den einen oder anderen Workaround angewiesen, die Vorgehensweise findet man aber in der Regel schnell heraus. Muse selbst wird rasant weiterentwickelt – was im Moment noch nicht funktioniert, ist vielleicht nach dem nächsten Update bereits möglich.

Die wichtigsten Schritte und Elemente bei der Konzeption und Umsetzung des Tablet-Newsletters mit Adobe Muse

Bevor man sich an den Computer setzt, muss unbedingt eine Siteplanung erfolgen. Diese war im vorliegenden Fall nicht besonders schwierig. Es stellte sich die Frage nach der Seiteneinteilung, da auf einer Tablet-Seite wesentlich weniger Inhalt dargestellt werden kann als auf einer gedruckten A4-Seite. Aus den vier gedruckten Seiten entstand deshalb eine Site mit insgesamt neun Seiten (2). Dies ergibt eine logische Menüführung, welche auf die wichtigsten Inhalte Bezug nimmt (3).

Zur Planung des Ablaufs kommen alle Gestaltungs- und Design­fragen hinzu. Im vorliegenden Fall galt der gedruckte Newsletter als Vorbild. Der Kopf wurde in gleicher Weise neu aufgebaut; das Layout wurde 8-spaltig gewählt. Bei der Schriftwahl kamen aber technische Faktoren ins Spiel, welche auf die Gestaltung Einfluss nehmen. Die im Printlayout verwendeten Fonts Milo Serif OT und Milo Pro Bold sind als Webfonts nicht verfügbar. Zudem ist aus Sicht der Lesbarkeit auf dem Bildschirm nach wie vor empfehlenswert, serifenlose Schriften zu verwenden. Aus diesen Gründen sind wir bei der Fontwahl vom gedruckten Layout abgewichen.

Aus der grossen Auswahl von Webfonts auf dem Adobe-Typekit-Server (4) haben wir uns für die Asap und die Open Sans Condensed entschieden. Über die Schaltfläche Webschriften hinzufügen gelangen wir ­direkt zur Auswahl auf dem Font­server (5). Mit OK wird die Schrift geladen und steht nun im Muse-Schriftmenü zur Verfügung. Bei Verwendung von Webfonts wird beim Aufruf der Site im Browser eine Verknüpfung zum Typekit-Server hergestellt. Das Portfolio-Abo von ­Typekit ist im Creative-Cloud-Abo enthalten. Solange das Abo gültig ist, läuft es mit den Fonts einwandfrei. Sollte das Abo einmal aufgehoben werden, stünden die Fonts nicht mehr zur Verfügung; sie würden beim nächsten Öffnen mit Muse durch Standardfonts ersetzt …

Material vorbereiten

Nicht zu unterschätzen ist der Aufwand, um Bilder, Logos, Grafiken und Texte in den geeigneten Formaten und Mengen bereitzustellen. Im vorliegenden Beispiel mussten die Bilder für die Referate aus den vorhandenen PDF-Dateien extrahiert werden (6). Je nach PDF-Qualität braucht es dann mehr oder weniger Nachbearbeitung.

Site anlegen

Dialog Neue Site (7): Das Tablet-Layout weist 1024 × 768 Pixel auf. Es wird generell mit dieser Seitengrösse gearbeitet, obschon es iPads mit der doppelten Pixelanzahl in der Breite und Höhe gibt. Die Erstellung spezieller, angepasster Layouts für andere Tablet-Formate drängte sich hier nicht auf.

Seitenanordnung, Musterseite

Im Planungsbereich von Muse werden die Seiten des Projekts angezeigt. Deren Anordnung kann per Drag&Drop verändert werden. Jede Veränderung wirkt sich direkt auf das Navigationsmenü aus. Es ist diese Bedienerfreundlichkeit, welche Muse auszeichnet. So funktionieren die Musterseiten zum Beispiel analog denjenigen von InDesign – mit dem Unterschied, dass die Musterseiten-Elemente auf den Dokumentseiten momentan immer fix sind und nicht entsperrt werden können, um sie zu verändern. Es können aber beliebig viele Musterseiten angelegt werden.

Widgets für Interaktivität

Der interaktive Newsletter enthält die folgenden interaktiven Elemente:

Menü: Das horizontale Navigationsmenü wurde mit dem entsprechenden Widget (8) erstellt und mit den zur Verfügung stehenden Optionen gestaltet (Farbe, Statusfarben, Font etc.).

Präsentation: Die Autorenporträts werden über Schaltflächen geöffnet.

Diashows: Damit lassen sich alle Folien der Vorträge auf dem Tablet «durchwischen»; dank Schaltflächen können sie beim Betrachten auf einem normalen Bildschirm auch durchgeklickt werden.

Akkordeon-Fenster für den Event­kalender: Damit können die einzelnen Veranstaltungen per Klick auf den Titel geöffnet werden. Es wurde so konfiguriert, dass immer nur ein Beschreibungstext gleichzeitig geöffnet ist.

Widgets sind vorprogrammierte Module mit unterschiedlichen Funktionen. Im Netz gibt es schon einen regen Markt; Widgets können gratis oder gegen Bezahlung auf einfache Art in Muse übernommen werden.

Site auf Webserver hochladen

Schon während der Bearbeitung wurde die Site auf einen FTP-Webserver hochgeladen. Die Site lässt sich bei Änderungen rasch aktualisieren. Der Kunde kann zudem den Site-Inhalt über den Browser bearbeiten.