General sIFR question vs img and hidden text

Hi all

I’ve used the sIFR method a number of times to get the desired font for the client, but I’ve also been using <h2>some title</h2> with the below CSS:

h2 {text-indent: -9999px; background: url(images/someTitle.gif) }

So my question is: why go to all the bother using flash(sIFR ), adding extra markup, CSS, javascript… when you can achieve the same result with a graphic as above, and still get your text indexed, crawled for SEO reasons etc.

Am I missing something here?

Thanks :cool:

If the text is dynamic, then you won’t have an image already prepared to use as a background. SIFR renders the text at display time, so it can say anything.

I see Dan, didn’t see it like that(you can tell I haven’t done much dynamic stuff lately) :). So for dynamic reasons then stick with the full proof sIFR, and for everything else… would I be right and saying a graphic with hidden text will work fine (static content, fixed title names)?

So, just to get this clear:

sIFR for dynamic
graphic for static

correct?

thanks :cool:

I would not draw that conclusion; Take a blog as an example: Your client might write numerous entries per day, week, and year. Do you want to create a heading graphic for each new entry you post? That’s pretty inefficient, when done manually, unless you use a script that will automatically convert text into an image format.

The easiest solution to this is not using any image replacement technique at all because there isn’t a single solution that works in every scenario (images on/off, CSS on/off, Flash on/off, Javascript on/off). Not very satisfying for most designers, but you can do lots of cool, typographically sophisticated stuff with standard fonts. For the few browser versions that do support it, you could implement it and have a fallback solution for everyone else (progressive enhancement).

The best solution, however, is using @font-face. The downside is that this will leave you, as a designer, pretty frustrated because there’s hardly any support for it, yet.

Both of the methods you have described do the same thing. And there are plenty [URL=“http://articles.sitepoint.com/article/image-replacement-state-scope”]more [URL=“http://cameronmoll.com/archives/2009/03/cufon_font_embedding/”]to [URL=“http://typeface.neocracy.org/”]choose from. There’s no bulletproof method as of yet. [URL=“http://www.sitepoint.com/forums/showthread.php?t=642149&highlight=replacement”]This thread highlights a few very interesting methods for image replacement techniques that are not all that common and offers food for thought. :slight_smile:

I noticed that a blog (geenstijl.nl) used to use sIFR to give its ugly Barbie-pink headers some font like Cooper Black (something most users don’t have by default). I noticed at a later time that they removed this. Being a blog, with new headers every few hours or whatever, sIFR made sense. I think they removed it because it either conflicted with some other scripts of theirs, or created loading problems for some visitors. I’m not sure.

So just wanted to say I have seen sites (yeah more than one) who had sIFR going on and then got rid of it (reasons unknown).

I would only use image replacement for text that never changes, like a logo or a static heading. This is my preferred method, that works in all scenarios:

http://www.pmob.co.uk/temp/headerreplacement2.htm
http://www.pmob.co.uk/temp/headerreplacement3.htm

The only limitation is that the images can’t be transparent, hence the experiment that kohoutek linked to above.