Trying Out sIFR For Show

The mysterious sIFR, short for Scalable Inman Flash Replacement, is a brainchild of web designer Shaun Inman, further improved by Mike Davidson, et al.

It is a neat system, that truly allows for rich text headlines on the web.

Update: I’ve decided on whether or not to use sIFR.

Since the dawn of HTML, web designers have been aching that they were limited to fonts that were installed on the end users system. Comic Sans flourished, and there was little control over appearance.

Countless attempts have been made to embed fonts on web pages, but none were really successful. Just like the floppy drive, this nuisance has persisted way longer than it should have.

Not so much anymore

With sIFR, most modern browsers will render rich headlines, with fonts chosen by the designer. It is search engine friendly and degrades gracefully. How so? Simple, and not so simple.

Basically, the idea is that one version of the website is presented for search engines, screen readers and old browsers. This version has a separate style layer, that applies design, divisions and styles. This is what semantic XHTML and CSS has done for a couple of years now, but sIFR takes it a little further. JavaScript detects whether Flash is installed, and if this is the case, replaces all headlines of choice (in my case, #main h1) with small Flash movies. The old headline is hidden, and a new, crisp Flash movie shows the headline in a font of your choice. Once the system is installed, it is fully automated.

Style vs. Usability

While rich headlines can be neat, it does unfortunately detract a little from website usability.

Mike has been kind enough to shed some light on some of these issues. Initial descriptions are striked out—actual behavior is added.

Key usability issues are:

  • Dynamic (on the fly) font scaling breaks
  • If you adjust the font size using your browsers, headlines won’t scale along with the rest of the text. Text size will be applied when page is reloaded after text size is adjusted

  • No visual feedback on text selection
  • Since each headline becomes its own Flash movie, it is not possible to select text, and headers and copy/paste it. The headline will have to be selected individually, so does the body text. Text selection of body text and header works, but there is no visual feedback to indicate the header is selected.

  • In some instances, links can’t be copied
  • While headers, including links, work in the replaced Flash movies, right-clicking and copying them doesn’t work. If sIFR is used in conjunction with a hover color, one cannot right-click/copy target links.

  • Firefox users can’t middle-click
  • For Firefox users, middle-clicking a link opens it in a new tab, a feature that breaks with sIFR (a feature that breaks for all Flash movies, for that matter)

  • Rollover status bar link target disappears

Further related to Flash—rolling over links usually reveal their targets in the statusbar

Furthermore, there is a 3px text jog that happens immediately when the headlines are being replaced. I think this is something I can fix, though. Additionally, it relies on JavaScript, which I have come to have little faith in.

Is it worth it?

I have not yet finally decided on whether or not to use sIFR. For one thing, things look much more stylized and nice, especially for a weblog. Still, it requires the sacrifice of some usability. So the big question is, does it look good enough to warrant itself?

I’ll let it stay here for a while, and then decide.

References

16 thoughts on “Trying Out sIFR For Show”

  1. Michael says:

    I also want to give it a try in my new design, so I’m looking forward to seeing what your experiences with it are.

    Personally, I don’t think the usability sacrifices are that bad. At least they are show-stoppers in my book.

    BTW, I’ve noticed that your blog seems to forget me every time I return? Any problems on your end with that?

  2. Joen says:

    Indeed I have noticed it didn’t always remember me. I’ll look into it, thanks.

    I just noticed a couple of extra usability issues I’ll add to the article. For one, since the headers/permalinks are flash movies, you can’t rightclick and copy the link. Secondly, you can’t middleclick it in Firefox, to open in a new tab.

  3. Mark Wubben says:

    (Not intending to sound harsh, here are some clarifications:)

    What exactly is the problem with sIFR using JavaScript? If the browser does not support it, elements won’t be replaced, and everything will still be fine.

    If you use sIFR for headlines, I don’t think it’s that big a problem if it doesn’t resize with the rest of the text. If you resize text it’s because you can’t read it. Headders usually stand out enough.

    Regarding the text selection and right click stuff.. that’s Flash. Can’t do much about it 🙂 However, the replaced text stays in the browser, only it’s invisible. Therefore, if you select surrounding text it’ll be selected as well. You just don’t see it.

  4. Joen says:

    First of all, sIFR is great, I’m loving it, and while I am still undecided, I am leaning towards keeping it.

    With that said, it IS still a usability problem that it “doesn’t behave like the rest of the text does”. This is confusing to the layman user. Albeit a minuscule problem, it is worth noting.

    As for the JavaScript, I’m not really criticizing anything specific, rather noting that I’ve had problems with it in the past. If it does indeed degrade gracefully (as seems to be the case), then I’m a happy camper.

    Finally, as for the Flash, I am all but certain that this will change for the better come Flash 8.

  5. Anonymous says:

    Actually, while sFIR font scaling is broken, it still does work (at least on IE6 & Gecko on WinXP and Safari & Gecko on MacOSX), but not dynamically. The page must be reloaded after the text-size change.

  6. Mike D. says:

    Hey, really great looking site you have here. I haven’t read any back articles yet but I’m adding it to the ol’ blogroll on looks alone!

    Regarding sIFR, a few things:

    1. As long as you don’t specify a hovercolor or hover-underlining, you can indeed right-click the Flash movie and have the link open in a new window. Not sure if it works in every browser but it does in IE and Firefox.

    2. As Anon said, font scaling does indeed work, just not on-the-fly. My feeling is that those who are vision-impaired don’t hit text zoom on a page by page basis but are more likely to have it on at all times, so the text will scale appropriately for them.

    3. Text selection: As Mark said, it’s indeed fully selectable… the visual feedback just isn’t there when selecting both the headline and body copy.

    4. Copying links: I believe you can indeed copy links as long as you don’t have the hovercolor or hover-underlining turned on.

    The deal with the hovercolor and hover-underlining is that in order to achieve this, I had to turn the entire Flash movie into a Flash button which unfortunately robs it of the functionality you speak of.

  7. Rogier says:

    One thing I’ve noticed, is that when you look at your pages with their css stripped out (eg. when you select “Disable Styles” from your Firefox extension Developer Toolbar), the headers are displayed 2 times. First the flash and next to it, the original html headers.

    Is that normal?

  8. Joen says:

    Mike,

    It’s an honor, and thank you for your kind words.

    1 & 4. I was wondering why that didn’t work. I seem to remember Flash 7 allowing to copy/paste the URL and/or opening it in a new browser. Neat. I’ll try it out tonight.

    However, this still doesn’t fix the problem with Firefox middleclick, not that I think that is even fixable.

    2. Good news. I do as well think that the people who that feature the most, have it preset. However, it is still a usability issue, albeit minor.

    3. Text selection. Great. I will add that to the article.

    Rogier,

    I’m using a favelet, “Zap Stylesheets“, to turn off stylesheets. I am aware of the page style menu item, but this favelet works in IE as well.

    As for showing the headers twice, I think that is normal yes. The reason is, that prior to Flash replacement, all headers are given display: none; via CSS. As such, zapping / turning off stylesheets will turn off this CSS as well, thus showing the headers again.

  9. Rogier says:

    Yeah, I figured that was the case.

    Though Mike seems to have found a solution for this, because his headers don’t get repeated with styles disabled. I’ll look in to it, as soon as I have some free time on my hands 🙂

  10. Mark Wubben says:

    Rogier, unfortunately Mike is still using a 1.x version, which removes the old text completely.

  11. Rogier says:

    Ah, I see. So there isn’t really a simple solution to this problem?

  12. Joen says:

    I don’t think there is a solution right at hand to that particular problem, no. However, I don’t see it as much of a problem—after all, the only users that will actually see two headlines, are you and me, turning off stylesheets, not screen readers and/or archaic browsers.

  13. Jina says:

    I so want to try it – but was wondering if it was “worth it”.

    Then I thought to myself – I usually use Helvetica – most people have that. I don’t really need the sIFR! 🙂

    On a serious note, I’ll keep reading on the experiences people have with this method, before I jump right in. 🙂

  14. Michael says:

    I might be mistaken, but Helvetica isn’t bundled with Windows, is it? Instead it’s the faux Helvetica, Arial…

  15. Joen says:

    Actually, you’re right on the spot Michael, It’s not. Plus, I have personally had problems with using Helvetica, as some versions are dubbed using the Frutiger/Univers naming scheme (55 = medium, 57 = medium italic, 65 = bold, 75 = extra bold).

    In other words, if you do go with Helvetica, go “Helvetica, Arial, sans-serif” 🙂

  16. Joen says:

    I’ve now decided on whether or not to use sIFR. Additionally, I’ve described my experiences in using it.

Comments are closed.