When do you use sIFR?

Question

I heard Joel and Jeff talking about sIFR in one of the early podcasts. I've been using it on www.american-data.com and www.chartright.us with some fairly mixed results.

Yesterday I was informed that the first line of text on my website appeared upside down in Internet Explorer 6 without flash player. I'm pretty sure that assessment was wrong, owing to no flash player = no sIFR. But I'm getting some odd behavior on my pages, at least in IE 6, 7 and 8. I only really wanted to use sIFR because my fonts looked crummy on my computer in Firefox.

My question is: if you use sIFR, when do you use sIFR? In which cases do you disable sIFR? When is it better to just use the browser font?

Answer 1

I had plenty of headaches after implementing sIFR on my last website project. Most of the problems were to do with browser inconsistencies like you are describing. Text would appear in odd places, not wrap properly or just not display the way I wanted it to. I found that, as per usual, firefox was displaying nicely while I had to implement several different css hacks in order to get the same code to display properly in IE7 and IE6.

I say stick to standard browser fonts if you can, but if the project / client requires you to use it then make sure you test it thoroughly in all browsers and with various flash blockers etc.

Answer 2

You use sIFR moderately, say for headlines. Try not to use it for links, because links in Flash don't work as well as normal HTML links. It also makes little sense to use sIFR only for text that never changes, an image would work a lot better.

I haven't heard about the upside-down problem in a few years now, but in any case, that's an issue with IE 6 and (an old?) Flash player. In any case, it always makes sense to test thoroughly.

Also, did you look into sIFR 3 lately? It's much improved over v2.

Answer 3

Try to consider up front what kind of headache you're creating for yourself (if you are, which isn't always the case) by implementing sIFR. It's probably advisable to only use it when your site design is relatively straightforward. As soon as you start having to deal with specific browser rendering exceptions (CSS, for instance) due to a complex design, you're going to run into problems related to sIFR. And if you design sites for clients, it's tough to go back and tell them halfway through that sIFR is going to have to be removed. So try to identify issues up front.

One example we ran into was having sIFR titles, and then directly to the right of the title, say about padding-right: 20px (so, dependent on the width of the title text), some kind of icon. That led to a lot of hassle, making us wish we hadn't started using sIFR in the first place.