Flash Replacement

One major downside of image replacement is that it requires a lot of manual labor.
Every heading that you want to include on a site has to be created in Photoshop, cut up,
saved as an image, and included in your CSS.
If you’re creating content regularly, this work can become very time consuming;
sometimes it’s just impossible. Imagine a site that has a content management system
with multiple authors, none of whom have access to—let alone know how to use—a
graphics program. It’s simply not feasible to have someone there just to create imagereplaced
headings.
But what if you had a system that automatically created nice headings, in a typeface of
your choice, without you having to do anything to the HTML? That would be heaven. And
there is such a system: sIFR.
Scalable Inman Flash Replacement is now in its second version (with a third already in
beta) and, after being around for a couple of years, is rock solid. You’ll need to download
some source files from the sIFR homepage in order to get it going.5 Don’t worry, I’ll wait
around while you download it.
sIFR works like this: you include a JavaScript file on your pages that scans for headings,
copies the text from inside those headings, and uses that text inside a Flash object that
replaces the HTML text. The Flash object contains the font you want, so the text is
automatically formatted the way you want it, and you don’t have to do any customization
work. sIFR also scales the Flash object appropriately to fill the same amount of space that
the HTML text occupied, so your text replacement will be the same size.
Technically, the HTML text isn’t replaced, it’s just hidden, so the text remains fully
accessible. If Flash isn’t available, the sIFR JavaScript detects that and leaves the page
untouched; if JavaScript isn’t turned on, the page will remain in its normal state. This way
users see nice headings if their browsers allow it, but if their browsers don’t handle these
headings, they degrade to perfectly readable text.
For a beautiful example of sIFR, take a look at the Noodlebox site.6 Noodlebox’s
introduction text and other headings all use a custom typeface that reinforces its identity
and also produces a more refined design.

Figure 1.11 shows the result when sIFR
is unavailable, due to the user’s lack of
either Flash or JavaScript. The HTML
text acts as a backup and provides an
approximation of the designer’s real
vision.
It’s a win–win situation! Those users
who have Flash and JavaScript reap
the benefits; those without are none the
wiser.