SIFR: Neue Schriftenvielfalt
Das kleine FlashTool SIFR löst ein großes Problem der WebDesigner …. und schafft neue.
Ende 2004 sorgte eine Idee für Unruhe unter den WebDesignern. Ein findiger amerikanischer Entwickler hat eine Technik entwickelt, mit deren Hilfe man Fließtexte in HTML-Seiten on the fly gegen Flash-formatierte Texte austauschen kann. Damit wären Designer endlich in der Lage, Seiten hinsichtlich der typographischen Gestaltung so zu formatieren, wie es ihre gestalterische Ambition wünschenswert erscheinen lässt. Und das, ohne dabei lange Ladezeiten zu riskieren, Seiten zu erzeugen, die nicht zwischen den Browsern kompatibel sind oder für jede Headline in Photoshop ein GIF erzeugen zu müssen.
So könnte die Dr. Web Headline mit SIFR aussehen
SIFR heißt das Werkzeug, das eigentlich gar keines ist. Stattdessen handelt es sich um einen kleinen Flash-Film und eine Javascript-Datei, sowie um etwas CSS- und Script-Quellcode für die betreffende HTML-Seite. Dieser Quellcode ließt die Tags in einer HTML-Seite und ordnet diese den CSS-Stilen zu. Von diesen Stilen sind einige an den Flash-Film gebunden. Der Texte, der innerhalb solcher Tags auftaucht, wird durch Flash-Text ersetzt. Da Flash in der Lage ist, seinen Filmen Schriftartkonturen mitzugeben, nehmen die Texte eben diese Konturen an. Das Ergebnis ist ein skalierbarer Text in jedem beliebigen Font, der nach wie vor auswählbar bleibt und von Suchmaschinen gefunden wird. Unterstützt ein Browser Flash nicht, dann bleibt die Formatierung im ursprünglichen Stil erhalten.
Barrierefreies Design
Auf den ersten Blick hört sich die Lösung umwerfend einfach an. Wenn man sich die Beispiele im Netz betrachtet (siehe Links) und weiß, dass die beiden Dateien in der aktuellen Form gerade mal acht Kilobyte in die Wagschale werfen, ist man geneigt in Euphorie auszubrechen.
Denn im Gegensatz zur heute üblichen Praxis, Grafiken einzusetzen, wenn man Schriftarten in Seiten einbinden will, die nicht dem Standard entsprechen, bleibt bei SIFR-Text der Text erhalten. Er genügt damit den Regeln für barrierefreies Design und kann von Text-Browsern, ScreenReadern (Vorlesesoftware für Sehbehinderte) und natürlich von Suchmaschinen erkannt werden. Außerdem entscheidet der Browser über die Größe der Schriftdarstellung. Je nach Bedarf kann der User diese Einstellung ändern.
Das Kontextmenü ist anders, als bei normalem Text
Für die Seitenmacher ergibt sich ein weiterer Pluspunkt: Alle Texte innerhalb einer Seite lassen sich im Quelltext oder im Redaktionssystem editieren. Man muss nicht mehr für jede Headline einen Grafiker beschäftigen. Der kann sich stattdessen tatsächlich den grafischen Aufgaben widmen. Viele Sites erzeugen Textgrafiken auch dynamisch über ein PHP-Modul. Auch das entfällt und damit auch die Server-Last, die bei den großen WebSites hierdurch entsteht.
Alles schön, aber …
Für die Mehrzahl der WebSites eignet sich diese Technik. Man sollte nicht allzu viele Schriften innerhalb einer Seite ersetzen, denn darunter leidet die Performance. Ideal wäre, sich auf die Headline zu konzentrieren, die dann vielleicht in der Hausschrift, die auch im Logo vorkommt, formatiert werden. Sehr positiv wirkt sich aus, dass die beiden Dateien nur einmal geladen werden müssen, auch wenn mehrere Seiten mit SIFR formatiert werden.
Doch es gibt auch Nachteile. Der gravierendste ist, dass Firefox und Safari Probleme mit dem Modul haben können. Das hängt vor allem von deren Flash-Einstellungen ab. Firefox bietet Beispielsweise als PlugIn einen Flash-Blocker an. Der blockt Flash aber nicht, sondern verhindert nur den Start des Films. Da der Browser denkt, er könne Flash, zeigt er den Text dann gar nicht mehr an, nicht einmal im Originalformat.
Der Anzeigenblocker zerstört das SIFR-Design
Weitere kleine Mängel kommen hinzu. Laufweite, Schriftschnitt und andere typographische Parameter lassen sich auf diesem Weg nicht kontrollieren. Das geht bei Schriftgrafiken besser. Der Rechtsklick auf den Text zeigt nicht das normale Kontextmenü des Browsers, sondern ein spezifisches SIFR-Menü. Hier fehlen vor allem die Hyperlink-Optionen, etwa zum Öffnen eines Links in einer neuen Seite. Apropos Hyperlink: Auch die Anzeige des Linkzieles in der Statuszeile fehlt.
Fazit
Tolle Technik und ein gutes Beispiel für die barrierefreie Weiterentwicklung von Flash. Aber sie sollte mit bedacht eingesetzt werden und für die anderen Browser ist eine Notfall-Lösung anzubieten, etwa ein Hyperlink zur „normal“ formatierten Seite. Bei Hyperlinks setzt man das Tool besser nicht ein.
Links:
- SIFR und Download
- Diskussion der Vor- und Nachteile
- Image-Replacement-Techniken: Eine Übersicht von Jens Meiert
- Beispiel: ABC News
- Beispiel: Design by Fire
- Beispiel: Jukebox
Über Frank Puscher
Verwandte Artikel
(No Ratings Yet)
