sIFR, ever used it?

[Xenonsoft]

sIFR | Scalable Inman Flash Replacement

I'm not a fan after reading the brief overviews below, but wondered if anyone else has heard of it/uses it.

Scalable Inman Flash Replacement - Wikipedia, the free encyclopedia | Mike Davidson - sIFR

[Helen]

Yes I have heard of it.

Personally, I do think there should be more of a choice of "web-safe fonts". But I do think it could become abused until all the text on a site becomes completely unreadable and inaccessible.

I have also heard it slows down page load.

I suppose if it is just used for headings, then ok. But I can't see myself using it. Sounds like more trouble than it's worth.

[Xenonsoft]

Agreed, I'm not a fan of it yet. The idea behind it seems good, but it's not for me.

[minucocat]

sIFR is quite good. I use it on our website.

why is good?

You can display the text much pretty.

If you don't have flash, you still can see the text.

ne sIFR can allow you to use this effect for links.

The text are searchable and you can selected as well.

Why is not good?

Can't use a lot on the page, heading a fine, not content.

Take time use to test and learn how to use it.



You can download the different sifr3 versions from here:

Index of /sifr3/nightlies


One thing, don't download the latest few versions as I realise some of the new versions don't work for all the browsers.

sIFR takes a bit of time to learn and use, but I think it's worth to try. Remember one thing, use it for headers not the content, as it will take a bit more time to load than normal text.

This website has some info you can read:

This is How You Get sIFR to Work | Design Intellection

[Xenonsoft]

Hey Minuco. Cheers for your input. I'm still not a massive fan, but can see that for some it has it's uses.

I like your site by the way, very nice, did you design it yourself?

[minucocat]

Hey Minuco. Cheers for your input. I'm still not a massive fan, but can see that for some it has it's uses.

I like your site by the way, very nice, did you design it yourself?

Thanks, then. I am front end developer. The design is by our designer. I only implement the design.

[Xenonsoft]

That's cool minu. Nice design that.

[Pete]

We actually use sifr on pretty much every site we do nowadays, I even use it on the sites I do in my freelance time. The older versions were quite hard to configure because the size of the font was dictated by a combination of line height and some other stuff but all that has been sorted now. Version 3 is very nice as everything is configured using simple CSS in a separate config file.

Anyways, if the user doesn't have flash or javascript installed, you can still specify a standard font in your CSS. It's pretty good for tying the look of websites in with printed material. I can understand why you guys are skeptical but give it a shot the next time you get a chance and you'll fall in love. Remember to stick to using it for headings though otherwise you'll affect the sites performance.

[Helen]

Must admit, I am now tempted to give it a go on my site, but I'm a total newb when it comes to javascript and the likes.

If you lot who have used it have any pointers, I'm all ears (well eyes actually)

[Pete]

I've put together a little demo because there's not too much help on the Sifr site, you can see it all working here.

First of all, download the zip file:
http://www.petemorley-portfolio.co.uk/s/sifr.zip

Once you open that up, you'll see three folders and an index file, open up the flash folder, then open up Sifr.fla in flash.

Setting your font
Once you have the Sifr.fla file open, you'll see a blank text box on your flash stage. Double click this and you're greeted with "Bold Italic Normal". highlight this text and set it to the font you want to use. Now, double click the grey area around the flash document so the text disappears again. Go to file > Export movie. I've chosen to use Helvetica Neue so I've saved the movie in the flash folder as hel.swf.

Configuring Sifr
Next you'll need to open up the config file in the js folder, this is the little script that tells your page when to replace a selector with your chosen font.

Here's what each line in the config means...

Here, we're telling Sifr the flash/font file and path that relates to the name helNeu.

var helNeu = {
src: 'flash/hel.swf'
};


This bit of code tells Sifr that I want to replace my H1 tags with the helNu font and what CSS to apply...

Sifr.activate(helNeu); // From revision 209 and onwards

Sifr.replace(helNeu, {
selector: 'h1',
css: [
'.Sifr-root{ font-size:26px; color:#009ee0; text-align: left; }'
],
wmode: 'transparent'
});


Get it all saved up, you only need to call the two CSS files and the two Javascript files that I've referenced in the head of index.html, but you will have to put everything up on your server because a few of the files in the flash folder are still needed in the background.

That's it really, it takes a bit of playing with. You aren't restricted to headings, for example if I had a H1 in a div on the right of my website I could tell Sifr that I just wanted to style the selector: '#right h1'.

Hope this makes sense. You can call as many font files as you like, simply repeat the line of code that's calling Helvetica as many times as you need to, then reference your new font. It's also possible to style links, while keeping them clickable. Be careful of large font files such as Bleeding Cowboys or Trashed, they'll create a large .swf file that takes a while to call