Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Frank Puscher 30. Juni 2005

SIFR: Neue Schriftenvielfalt

Kein Beitragsbild

Das kleine FlashTool SIFR löst ein großes Problem der WebDesigner …. und schafft neue.

Anzeige

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.

Screenshot
So könnte die Dr. Web Headline mit SIFR aussehen

Anzeige

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.

Screenshot
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.

Screenshot
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:

Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

3 Kommentare

  1. SIFR bin grade erst darauf gestoßen, finde es klasse endlich eine lösung SEO gerecht Schriftdesign probleme zu lösen! Super Artikel hat mir sehr Weitergeholfen

  2. Hi,

    wir haben ein plugin für Joomla 1.5 gebastelt damit man sIFR auf einfachste weise in seine Webseite einbauen kann, um jegliche Texte zu ersetzen. (http://club.freakedout.de/downloads.html)Aber wie auch oben in dem Artikel erwähnt empfehlen wir auch nur jegliche sIFR Implementierung um Akzente zu setzen und nicht um ganze Textpasagen umzuwandeln. Viel Spaß! Guter Artikel!

    Alexis

  3. Was ist eigentlich die aktuelle Version von SIFR? Mittlerweile gibt es ja schon sIFR3 ). Ist das eine Weiterentwicklung oder etwas anderes? Auf der „alten“ Seite (http://www.mikeindustries.com/blog/sifr/) gibt es keinerlei Hinweis dazu.

Schreibe einen Kommentar zu alexis Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.