Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Frank Puscher 30. Juni 2005

SIFR: Neue Schriftenvielfalt

Kein Beitragsbild

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

Ende 2004 sorg­te eine Idee für Unruhe unter den WebDesignern. Ein fin­di­ger ame­ri­ka­ni­scher Entwickler hat eine Technik ent­wi­ckelt, mit deren Hilfe man Fließtexte in HTML-Seiten on the fly gegen Flash-for­ma­tier­te Texte aus­tau­schen kann. Damit wären Designer end­lich in der Lage, Seiten hin­sicht­lich der typo­gra­phi­schen Gestaltung so zu for­ma­tie­ren, wie es ihre gestal­te­ri­sche Ambition wün­schens­wert erschei­nen lässt. Und das, ohne dabei lan­ge Ladezeiten zu ris­kie­ren, Seiten zu erzeu­gen, die nicht zwi­schen den Browsern kom­pa­ti­bel sind oder für jede Headline in Photoshop ein GIF erzeu­gen zu müs­sen.

Screenshot
So könn­te die Dr. Web Headline mit SIFR aus­se­hen

SIFR heißt das Werkzeug, das eigent­lich gar kei­nes ist. Stattdessen han­delt es sich um einen klei­nen Flash-Film und eine Javascript-Datei, sowie um etwas CSS- und Script-Quellcode für die betref­fen­de HTML-Seite. Dieser Quellcode ließt die Tags in einer HTML-Seite und ord­net die­se den CSS-Stilen zu. Von die­sen Stilen sind eini­ge an den Flash-Film gebun­den. Der Texte, der inner­halb sol­cher Tags auf­taucht, wird durch Flash-Text ersetzt. Da Flash in der Lage ist, sei­nen Filmen Schriftartkonturen mit­zu­ge­ben, neh­men die Texte eben die­se Konturen an. Das Ergebnis ist ein ska­lier­ba­rer Text in jedem belie­bi­gen Font, der nach wie vor aus­wähl­bar bleibt und von Suchmaschinen gefun­den wird. Unterstützt ein Browser Flash nicht, dann bleibt die Formatierung im ursprüng­li­chen Stil erhal­ten.

Barrierefreies Design
Auf den ers­ten Blick hört sich die Lösung umwer­fend ein­fach an. Wenn man sich die Beispiele im Netz betrach­tet (sie­he Links) und weiß, dass die bei­den Dateien in der aktu­el­len Form gera­de mal acht Kilobyte in die Wagschale wer­fen, ist man geneigt in Euphorie aus­zu­bre­chen.

Denn im Gegensatz zur heu­te übli­chen Praxis, Grafiken ein­zu­set­zen, wenn man Schriftarten in Seiten ein­bin­den will, die nicht dem Standard ent­spre­chen, bleibt bei SIFR-Text der Text erhal­ten. Er genügt damit den Regeln für bar­rie­re­frei­es Design und kann von Text-Browsern, ScreenReadern (Vorlesesoftware für Sehbehinderte) und natür­lich von Suchmaschinen erkannt wer­den. Außerdem ent­schei­det der Browser über die Größe der Schriftdarstellung. Je nach Bedarf kann der User die­se Einstellung ändern.

Screenshot
Das Kontextmenü ist anders, als bei nor­ma­lem Text

Für die Seitenmacher ergibt sich ein wei­te­rer Pluspunkt: Alle Texte inner­halb einer Seite las­sen sich im Quelltext oder im Redaktionssystem edi­tie­ren. Man muss nicht mehr für jede Headline einen Grafiker beschäf­ti­gen. Der kann sich statt­des­sen tat­säch­lich den gra­fi­schen Aufgaben wid­men. Viele Sites erzeu­gen Textgrafiken auch dyna­misch über ein PHP-Modul. Auch das ent­fällt und damit auch die Server-Last, die bei den gro­ßen WebSites hier­durch ent­steht.

Alles schön, aber …
Für die Mehrzahl der WebSites eig­net sich die­se Technik. Man soll­te nicht all­zu vie­le Schriften inner­halb einer Seite erset­zen, denn dar­un­ter lei­det die Performance. Ideal wäre, sich auf die Headline zu kon­zen­trie­ren, die dann viel­leicht in der Hausschrift, die auch im Logo vor­kommt, for­ma­tiert wer­den. Sehr posi­tiv wirkt sich aus, dass die bei­den Dateien nur ein­mal gela­den wer­den müs­sen, auch wenn meh­re­re Seiten mit SIFR for­ma­tiert wer­den.

Doch es gibt auch Nachteile. Der gra­vie­rends­te ist, dass Firefox und Safari Probleme mit dem Modul haben kön­nen. Das hängt vor allem von deren Flash-Einstellungen ab. Firefox bie­tet Beispielsweise als PlugIn einen Flash-Blocker an. Der blockt Flash aber nicht, son­dern ver­hin­dert nur den Start des Films. Da der Browser denkt, er kön­ne Flash, zeigt er den Text dann gar nicht mehr an, nicht ein­mal im Originalformat.

Screenshot
Der Anzeigenblocker zer­stört das SIFR-Design

Weitere klei­ne Mängel kom­men hin­zu. Laufweite, Schriftschnitt und ande­re typo­gra­phi­sche Parameter las­sen sich auf die­sem Weg nicht kon­trol­lie­ren. Das geht bei Schriftgrafiken bes­ser. Der Rechtsklick auf den Text zeigt nicht das nor­ma­le Kontextmenü des Browsers, son­dern ein spe­zi­fi­sches SIFR-Menü. Hier feh­len vor allem die Hyperlink-Optionen, etwa zum Öffnen eines Links in einer neu­en Seite. Apropos Hyperlink: Auch die Anzeige des Linkzieles in der Statuszeile fehlt.

Fazit
Tolle Technik und ein gutes Beispiel für die bar­rie­re­freie Weiterentwicklung von Flash. Aber sie soll­te mit bedacht ein­ge­setzt wer­den und für die ande­ren Browser ist eine Notfall-Lösung anzu­bie­ten, etwa ein Hyperlink zur „nor­mal“ for­ma­tier­ten Seite. Bei Hyperlinks setzt man das Tool bes­ser 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 gra­de erst dar­auf gesto­ßen, fin­de es klas­se end­lich eine lösung SEO gerecht Schriftdesign pro­ble­me zu lösen! Super Artikel hat mir sehr Weitergeholfen

  2. Hi,

    wir haben ein plugin für Joomla 1.5 gebas­telt damit man sIFR auf ein­fachs­te wei­se in sei­ne Webseite ein­bau­en kann, um jeg­li­che Texte zu erset­zen. (http://club.freakedout.de/downloads.html)Aber wie auch oben in dem Artikel erwähnt emp­feh­len wir auch nur jeg­li­che sIFR Implementierung um Akzente zu set­zen und nicht um gan­ze Textpasagen umzu­wan­deln. Viel Spaß! Guter Artikel!

    Alexis

  3. Was ist eigent­lich die aktu­el­le Version von SIFR? Mittlerweile gibt es ja schon sIFR3 ). Ist das eine Weiterentwicklung oder etwas ande­res? Auf der “alten” Seite (http://www.mikeindustries.com/blog/sifr/) gibt es kei­ner­lei Hinweis dazu.

Schreibe einen Kommentar zu alexis Antworten abbrechen

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