HTML5

HTML5-Anzeigen: Was Designer über Webfonts wissen müssen
Kommentare

Schrift im Web ist wie die Luft zum Atmen: Wir ziehen sie pausenlos in uns hinein, ohne darüber nachzudenken. Erst wenn etwas schief läuft, werden wir ihr bewusst. Dass mit der Schrift nichts schief läuft, dafür sorgen Webdesigner und Coder. Sie wissen, dass Schrift die Basis eines jeden Brandings ist, und daher auch bei der Gestaltung von Websites und Online-Anzeigen nichts dem Zufall überlassen bleibt. Product Designer Jamie Neely erklärt die drei wichtigsten Dinge bei der Verwendung von Schrift im Internet.

Bei der Gestaltung von Online-Anzeigen mit Adobe Flash konnten Webdesigner die Schriften meist einbetten. Doch Flash gehört aus technischen und Performance-Gründen inzwischen zum alten Eisen. Heute ist HTLM5 der Standard, um digitalen Content und insbesondere (textbasierte) Web-Anzeigen zu gestalten.

Trotz der Umstellung von Flash auf das flexible HTML5 gehen viele Designer noch auf die gleiche Art und Weise an die Gestaltung digitaler Anzeigen heran, wie sie das seit Jahren tun. Sie bauen ein Mock-up des Konzepts und verfeinern ihre Designs bis auf den letzten Pixel in ein perfektes Photoshop Dokument. Das ist unnötig kompliziert und zeitaufwändig, vor allem wenn eine Serie unterschiedlicher Formaten hergeleitet werden muss, Stichwort: Responsive Design.

Mit diesen drei Tipps gelingt die Gestaltung von digitalen, textbasierten Anzeigen in HTML5 leichter:

1. Webfonts sind das Tool der Wahl

Die Aufgabe von Designern ist es, gut durchdachte und fundierte Entscheidungen bezüglich der Schrift einer Marke zu treffen und diese dann in der digitalen Anzeige bei den Überschriften, dem Fließtext und den User Interface-Elementen umzusetzen. Dabei ist das Umwandeln von Text in Grafik schon lange verpönt. Zwar wird auf diese Weise das typografische Erscheinungsbild gesichert, doch jpg- oder gif-Texte blasen das Datenvolumen auf, Suchmaschinen können sie nicht lesen und das Bauen diverser Formate ist aufwändig. Spätestens seit Designer x1.5 und x2 Responsive-Image-Variationen speziell für Displays mit höherer Auflösung von iOS und Android Geräten gestalten müssen, sind statische Texte nicht mehr zu empfehlen.

Die Lösung für das Probleme ist relativ einfach: Designer sollten bei der Gestaltung von digitalen Anzeigen Webfonts einsetzen. HTML5 unterstützt Webfonts nativ – so erhält man editierbaren, gebrandeten Text, der ohne großen Aufwand umformatiert werden kann und sich an jede Art von Bildschirm anpasst. Außerdem „wiegen” Webfonts nur wenige KB, so dass sich Banner schneller aufbauen und die Websites nicht ausbremsen.

Woran erkennt man geeignete Webfonts? Hier ein paar Entscheidungshilfen:

  • Gute Webfonts sind bildschirmopimiert (gehinted), so dass sie in kleinen Größen gut lesbar sind und auf allen möglichen Bildschirmumgebungen passend reagieren. Gerade hier sind die Webfonts der großen Fonthersteller den kostenlos im Web verfügbaren Webfonts überlegen. Außerdem führen die kommerziellen Anbieter die im Branding verwendeten und etablierten Schriftdesigns.
  • Generell kann man sagen, dass alle Webfonts bei einer Größe von mindestens 20 px gut aussehen. Webfonts, die bei Größen von 12 px noch gute Leistungen erbringen, sind jedoch selten. Einige Schriftenanbieter haben allerdings Varianten von Font-Familien umgestaltet, so dass sie speziell in kleinen Schriftgraden auf Displays funktionieren. Ich empfehle, beispielsweise die eText-Serien von Monotype und die Reading Edge Releases von Font Bureau auszuprobieren.
  • Gute Webfonts zeichnen sich durch ein großen Zeichenvorrat aus und können neben den Latin-Sprachen auch Griechisch und Kyrillisch darstellen. Das ist insbesondere für Websites oder Anzeigenkampagnen wichtig, die über verschiedene Ländergrenzen hinweg funktionieren sollen. Richtig clevere Webfont-Services sorgen wiederum dafür, dass nur jene Schriftzeichen ausgeliefert werden, die – zum Beispiel in einer Anzeige – tatsächlich zum Einsatz kommen (dynamic subsetting).

2. Jeder Schnitt zählt

Eine Schriftfamilie mit mehreren Schnitten (normal, fett, kursiv, etc.) ist eine wichtige Ressource, um Anzeigen zu strukturieren und das Branding einer Marke einzuhalten. Bei der Gestaltung einer Webanzeige ist zu beachten: Die Wahl der Schrift(en) hat Einfluss auf die Ladezeit einer Website. Das wird bei Anzeigen kritischer gesehen als bei Websites allgemein, denn die Größe des digitalen Gasts erhöht die Ladezeit der Muttersite. Jedes KB zu viel ist eine Bremse und summiert sich, bei tausenden von Aufrufen.

Daher sollte die Verwendung mehrerer Schriftschnitte bei der Gestaltung einer Web-Anzeige sorgfältig abgewogen werden. Jeder zusätzliche Schnitt eines Webfonts, der in einer Anzeige verwendet wird, erfordert einen separaten Aufruf aus dem Content Delivery Network (CDN) und trägt zwischen 15 kb und 60 kb zur Dateigröße bei. Werden weniger Schriftschnitte verwendet, reduzieren sich dementsprechend Netzwerk-Traffic und Ladezeit.

Außerdem helfen folgende Techniken, die Gesamtgröße von Anzeigen gering zu halten:

  • Mit Technologien für ein Subsetting (siehe oben) können Font-Dateien so reduziert werden, dass sie nur noch die Zeichen enthalten, die für den Text-Inhalt einer Anzeige relevant sind. Die Datei von mehreren Hundert Zeichen auf ein paar Dutzend zu verkleinern, trägt erheblich dazu bei, die Gesamtgröße klein zu halten.
  • Mithilfe der Technik „Base64 Encoding” kann man Webfonts in das HTML Dokument einbetten und so den Bedarf an zusätzlichen http-Anfragen reduzieren. Die daraus resultierende Dateigröße variiert allerdings und sollte von Fall zu Fall getestet werden.

3. Web-Anzeigen-Services leisten wertvolle Hilfe beim Bauen und Testen von Anzeigen

Heute ist es ist hilfreicher denn je, direkt im Browser zu designen, denn nur so kann der Webdesigner unmittelbar sehen, wie seine Anzeige im Endeffekt dargestellt wird. Außerdem ist es zeitaufwändig und unpraktisch, statische Mock-ups für jede Kombination aus Browser, Betriebssystem und Endgerät zu erstellen und zu testen.

Es gibt zwei weit verbreitete Möglichkeiten, Anzeigen im Browser mit Webfonts zu gestalten:

  • Tools für die Gestaltung digitaler Anzeigen von Unternehmen wie Celtra, Adcade, Flite und Responsive Ads eignen sich sehr gut, um schnell ein Photoshop-Dokument in HTML umzuwandeln. Diese neue Art von Authoring Tools unterstützt auch Webfonts. Die meisten von ihnen beinhalten Möglichkeiten, Fonts von Fonts.com sowie Google Fonts hochzuladen oder zu durchsuchen.
  • Viele Teams fangen bei der Gestaltung von HTML Anzeigen-Kampagnen ganz von vorne an. Das erfordert natürlich einiges an technischem Know-how, aber glücklicherweise sind die Regeln von @font-face in CSS für jemanden mit Erfahrung im Erarbeiten von Web Content einfach zu verstehen.

Fazit: Die Gestaltung von Webanzeigen in HTML5 bringt Herausforderungen mit sich, aber auch jede Menge (typo)grafischer Qualität. Wer die oben genannten Tipps beachtet, wird leistungsfähige, CI-konforme und schnelle digitale Anzeigen erstellen, die auf jedem Bildschirm und jedem Gerät sauber dargestellt werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -