Wie Web-Fonts den Workflow effizienter machen

Eines der stärksten Argumente für die Verwendung von Web-Fonts in HTML5-Anzeigen ist der gestraffte Workflow. Im Vergleich zu anderen Methoden zur Implementierung von Text in digitalen Anzeigen ist die Anwendung von Web-Fonts auf HTML-Text deutlich effizienter und erfordert weniger zeitintensive Arbeitsschritte.

Hier zunächst ein paar Erläuterungen

In diesem Artikel unterscheiden wir zwischen zwei grundlegenden Methoden zur Implementierung von Text in HTML5-Anzeigen: Anzeigen aus Bildern mit Text und Anzeigen mit HTML-Text.

Die beiden Workflows zur Erstellung der Anzeigen sind in den ersten Arbeitsschritten noch ähnlich:

    • Die Design- und Texterteams erstellen Mockups in Photoshop und senden sie dann als JPEG oder PDF zur Überarbeitung. Diese Mockups können Versionen für mehrere Anzeigengrößen umfassen.
    • Die Mockups werden überarbeitet, bis schließlich eine finale Version freigegeben wird.
    • Die ursprünglichen Photoshop-Dateien werden normalerweise an ein Produktionsteam geschickt, das die HTML5-Anzeige erstellt – entweder manuell oder mit Tools wie Google Web Designer, Adobe Animate, Hype oder auch mit webbasierten Ad-Authoring-Tools wie Celtra, Flite, Flexitive bzw. Responsive Ads.

Ab hier verlaufen die Workflows unterschiedlich.

Eine Version statt … wie viele waren es noch einmal?

Im Workflow für bildbasierten Text muss der Entwickler für jeden Textblock eine eigene JPEG oder PNG erstellen. Wenn Sie also eine Anzeige aus einer Überschrift, einer Zeile Fließtext und einem Rechtshinweis haben, macht das schon drei Bilddateien. Benötigen Sie die Anzeige in 6 verschiedenen Größen, dann sind das 3 Bilder in jeweils 6 Größen, also insgesamt 18 Bilder. Und wenn Ihre Anzeige dann noch verschiedene Versionen hat – etwa vier verschiedene Varianten für regionale Märkte – wird sofort klar, dass die Zahl der Bilddateien schnell außer Kontrolle geraten kann. Und hierbei werden nicht einmal die zusätzlichen Bilder für Hintergrund und Hero Shots berücksichtigt – es geht nur um den Text!

Mit HTML-Text kann eine einzige Datei für eine fast unbegrenzte Zahl an Anzeigengrößen genutzt werden. HTML5-Anzeigen bieten Flexibilität und Responsiveness. Mit HTML kann die Anzeige so codiert werden, dass das Erscheinungsbild des Texts sich an eine große Zahl von Placements anpassen kann (anstelle von mehreren statischen Versionen für die verschiedenen Größen).

An flexiblen, responsiven Anzeigen-Designs wird man 2017 wohl kaum noch vorbeikommen.

Das Internet Advertising Bureau (IAB) ist bereits dabei, ein brandneues Anzeigenportfolio mit flexiblen, responsiven Größen zu entwerfen, das zum neuen Industriestandard für Anzeigenspezifikationen werden soll. Die Verwendung von HTML-Text (mit Web-Fonts) in diesen flexiblen Anzeigen wird ausschlaggebend sein. Im Gegensatz dazu wird sich die Verwaltung der schier unendlichen Zahl von Bildern aus Text bei der Nutzung dieser Anzeigengrößen deutlich komplizierter gestalten.

Abgesehen von zukünftigen Anzeigenspezifikationen ermöglicht die Verwendung von HTML-Text dynamische Inhalte wie regional ausgerichtete Werbebotschaften, personalisierten Text, Übersetzungen und andere Varianten. Mit bildbasierten Workflows müssten einzelne Bilder aus Text für jede Variante angepasst werden. HTML-Code hingegen ermöglicht die Automatisierung dieser Alternativen. Zudem können Regeln angewendet werden, die unerwünschte Textumbrüche verhindern. Auf diesen Punkt werden wir bei unserem nächsten Thema zurückkommen …

Änderungen

Änderungen in letzter Minute kennt jeder. Egal, ob es sich um verspätetes Feedback vom Marketingleiter oder um einen übersehenen Tippfehler handelt, das Ändern von Anzeigen nach ihrer Freigabe gehört einfach zum Alltag dazu.

Wenn Sie nicht mit HTML-Text arbeiten, muss ein überarbeiteter Bildsatz (mit Text) erstellt werden – meist in Photoshop – und die alten Bilder werden manuell durch diese neuen Versionen ersetzt. Das ist nicht nur aufwendig, sondern kann auch dazu führen, dass die Einhaltung der Deadlines anderer Projekte gefährdet wird. Zudem bringen solche Änderungen und die Übergabe an andere Teammitglieder mehr Fehler und Probleme bei der Versionskontrolle mit sich. Der absolute Albtraum für jeden Designer ....

Bei HTML-Text kann der Entwickler direkt auf den HTML5-Code zugreifen, den Text anpassen und so alle Änderungen innerhalb von wenigen Minuten anstatt von Stunden oder Tagen durchführen.

Vorlagen

Bei der bildbasierten Methode muss jede Anzeige mehr oder weniger aus dem Nichts erstellt werden. Wenn Anzeige A und Anzeige B auf genau demselben Layout basieren, müssen sie dennoch individuell erstellt werden – eine Datei nach der anderen.

Mit HTML-Text lassen sich Vorlagen generieren, die im Handumdrehen aktualisiert werden können. Die Anzeigenvorlage lässt sich wiederverwenden, wodurch Aktualisierungen zu Ihrer neuen Lieblingsbeschäftigung werden, denn die dauernde Erstellung neuer .jpegs oder der ständige Export von mehreren Anzeigen fällt weg. Eine erstellte Vorlage kann langfristig genutzt werden, da es sich um schnell zu bearbeitenden HTML-Text handelt. Änderungen werden unabhängig vom Bildschirmformat auf jede Version angewendet.

Und der Zeitgewinn dabei?

Die Gestaltung einzelner Anzeigen mit bildbasiertem Text kann – einschließlich der Überarbeitungen – selbst bei einer recht einfachen Kampagne mehrere Stunden in Anspruch nehmen. Bei komplexeren Kampagnen mit einer Vielzahl von Größen und Versionen ist der Aufwand noch größer. Die Lösung: Web-Fonts. Einziges Manko: Ihre Anforderungen werden sehr unterschiedlich sein. Am besten sprechen Sie mit Ihren Designern und Entwicklern, um herauszufinden, wo HTML-Text den Workflow vereinfachen kann.

Natürlich sollen Web-Fonts nicht dabei helfen, Anzeigen von gestern schneller zu erstellen, sondern sie sollen die Ausführung besserer, sprich gezielter, responsiver und dynamischer Anzeigen genauso schnell und noch effizienter machen. Das erwartet Ihr Zielpublikum, die Branche fordert es – und Ihre Designer werden begeistert sein.