sIFR 3: A Request for Requests

The excellent new sIFR-licious UW Admissions Site, designed and developed by Mercury Cloud.Now that Flash 7 penetration is well into the 90% range, it’s time to start thinking about version 3 of sIFR. One of the big selling points of sIFR 2 was that it was backwards-compatible with Flash 6, but given the most current Flash adoption numbers, that doesn’t seem necessary anymore.

SO… what The Dutch Wolf and I would like to do is provide a new version of sIFR which offers baseline compatibility with Flash 7 and progressive-enhancement for Flash 8.

We’ve already come up with a few things we’d like to add but are requesting feature requests from designers and developers in order to make sure this new version is as complete as possible. Here’s initial punchlist:

  • Ability to display crisper text (especially at small sizes) for people with Flash 8. The Flash 8 Player uses a new anti-aliasing algorithm that now renders Flash text as beautifully as Photoshop does.
  • More complete text formatting options using Flash’s CSS support. This includes the ability to color individual spans within a single sIFR file.
  • Ability to use (and abuse) Flash 8’s live effects like soft drop shadows behind text.
  • On-the-fly resizability of sIFR elements when windows are resized.
  • Actionscript 2 syntax.

A major requirement of this release is that it should only take you a minute or two to upgrade any existing sIFR installations, so rest assured that when the new version comes out, it’ll be a snap to install.

Since we’re already talking about sIFR, I wanted to quickly call out some excellent uses of it I’ve seen over the past few months:

  • Will Prater and friends over at Mercury Cloud have redesigned the admissions site for my alma-mater, The University of Washington, and it is spectacular. Some of the best use of sIFR I’ve ever seen and just a fabulous site to boot.
  • Chevrolet.com now uses sIFR on almost every page on the site thanks to Jim Amos and Campbell-Ewald.
  • Khoi Vinh has redesigned The Onion and Paragraph making subtle and disciplined use of sIFR.
  • Thanks to Eric Webster and Digitas, the Pontiac.com site uses sIFR for their mastheads. Pontiac.com is a good example of a Flash-heavy site making smart use of the technology.
  • I can’t remember who sent me this site (please let me know so I can give you credit) but Propel Fitness Water now makes nice use of sIFR and they even somehow managed to give their sIFR text nice wide kerning. I’d like to know if that required manual editing of font files. Looks very nice.

sIFR also was featured in Print Magazine this month thanks to the excellent Patric King.

So enough of the sIFR lovefest… let’s hear some feature requests!

UPDATE: I almost forgot… well actually I *did* forget… the entire AT&T.com site now also uses sIFR, thanks to the great work of Joe D’Andrea.
Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

132 Responses:

  1. Ben Haldenby says:

    Not sure if this has already been mentioned, but is it possible to apply the new blending modes to dynamic text in Flash? If so, it would be great to see this in future versions of sIFR.

  2. Ben says:

    Drop caps would be great…

  3. cuce says:

    Easier Font tuning would rock my socks, but otherwise I’m quite happy with sifr, it does what I need it to.

  4. ben scott says:

    would be good to be able to not need to supply pixel based font sizes and for the sifr technique to not screw with all headlines e.g. any replacement techniques used for h1 and top header graphics dont come out

    also noticed that any element set to relative positioning doesnt come out in SIFR, you need a div wrapping round it to get it to work.

    would be really nice to see drop shadows as this would make the text work a lot better at the site i am working on at moment http://jimbyrne.co.uk/thcarpets/template_static_html/testhome2.html#

  5. sIFR should not in any way hide textual content from search engines or users. I find that text rendered by sIFR cannot be found when you use the “Find (on this page)” command in the browser. Hope you can fix it.

  6. No content is hidden from search engines. It’s too bad that Flash doesn’t let the browser search it’s the text it renders, but replacing the text is pretty much the point of sIFR.

  7. I want to echo Ben Scott’s comment that font sizes shouldn’t have to be specified in pixels. I always (and this is generally regarded as best practice in CSS) set my headings as a percentage of the base font size to ensure they are always some degree bigger than the regular paragraph text. If I have to set font sizes for SIFR in pixels, and a user has a larger than default font size set on his browser, he will get heading text that is smaller than the regular paragraph text.

    In the SIFR 3 alpha, I can set font sizes in percentages and have the size of the Flash text come out roughly correct (which is all I desire), but it does screwy things to the margins of the headings.

  8. Nan says:

    Can sFIR be used with other languages? for example, Japanese font

  9. jw_developer says:

    Scalibality is the only request I have. Both resize when the browser resizes, and resizes the text when the user changes the text. There was an article on that may be useful.

  10. david says:

    Possibility to give em sizes for padding and offSet in the sIFR.replaceElement method

  11. Ivo Sabev says:

    Soon i’ve encountered a problem, making sIFR replacing the text for menu created from block A elements with changing background in normal and hover state.

    I think it will be nice if you enable attaching background images using the backgound definition from the CSS.

  12. Anthony McLin says:

    A wishlist item I would like to see implement in v3:

    The ability to replace multiple selectors with one sIFR.replace() call.

    I’m finding myself frequently duplicating calls to sIFR.replace() with the same parameters because the same style needs to be applied to multiple selectors. If I could pass an array of selectors instead of just one at a time, it would cleanup the code a bit.

  13. Come on now Anthony, after all we’ve discussed you’d think I’d leave that out? ;-) Just seperate the selectors using a comma, like in a normal CSS file.

  14. Phil Schalm says:

    The ability to do a “not” selector, for example (to borrow from a previous example):

    sIFR.replaceElement(named({
    sSelector:”#topnav h2″,
    sNotSelector:”#topnav h2.noSIFR”,
    sFlashSrc:”swf/tradegothic.swf”
    ));

    Which would replace all the h2 elements in topnav that don’t have the class noSIFR applied to them.

  15. Phil Schalm says:

    … and I missed a } in that example. Oh well, you get my point :)

  16. The current version of sIFR 3 has support for this, in the form of a sIFR-ignore class. It might also be possible do support a not() selector. I’m not sure of the syntax but something like “#topnav h2::not(#topnav h2.special)”.

  17. Nicolas R says:

    One good thing for sIFR 3 would be to replace the “onload” trigger by a DOM Content Loaded event. So the javascript replacement wont wait for all the pictures to be loaded before replacing sIFR text.

    You can look at the jQuery library who succesfully implemented this function for cross-browser.

  18. Stu says:

    Possibility to integrate with IE7 javascript (use the DOM query stuff from there) — this should save some CPU when using both

    php To generate a font from a ttf (I’ve been meaning to write this for a while but haven’t got round to it)

  19. RobH says:

    Yes, this would break backwards compatibility, but a version that was integrated with swfobject and used it’s simple object property way of setting parameters would be interesting.

  20. Xsss4hell says:

    I wish:

    • – FLash 9
    • – Better selectability
    • – CTRL+A Listener
    • – AXAX like loading OR NO LOADING DELAYS
    • – Easier coding for us

  21. Sam says:

    Slightly off-topic I know, but there’s a typo on the example page — The designer and font are called Frutiger, not Fruitiger (I don’t assume this was itended).

  22. Mike D. says:

    Sam: Good catch! Fixed…

  23. KJ says:

    I’d like to see a solution to this problem implemented :)

    http://forum.textdrive.com/viewtopic.php?pid=128166#p128166

  24. adam says:

    Someone here posted that they were having a problem using fixpng with sIFR… I had a similar problem where sIFR was breaking my fixpng so I thought I’d post my solution….

    in fixpng.js wrap the script in a function, and call it at the end using window.onload like so:

    function fixPNGs(); {

    …… pngfix script …..

    }

    window.onload = fixPNGs();

    /* Your PNGfix should now work with sIFR */

  25. adam says:

    forgot to mention that for PNGfix to work you must also place the pngfix SCRIPT tag at the bottom of the page below the sIFR replacement calls.

  26. Cholo says:

    I use swfdec (aka “the free flash implementation that works with youtube”) but sIFR doesn’t work. And it doesn’t degrade either. I don’t know if sIFR can be fixed to work with swfdec (probably it should be the other way ’round) but it would be nice to at least be able to see the browser text.

  27. Michel says:

    SIFR could implement writing-mode so we could have vertical/rotated tb-rl flipV/flipH for Firefox?

  28. […] Mike Davidson – sIFR 3: A Request for Requestsvia Tommi (again) – let’s you replace any html text by a flash file generated on the fly which let’s you use custom not standard typefaces… […]

  29. Pasquale says:

    A fix for sifr widows: http://darkmotion.com/blog/2008/07/21/reuniting-lonesome-sifr-widows/

  30. micthemouse says:

    Just wondering what the status is of sIFR 3. The request for requests was made back in Oct. of 2005 and there have been no recent posts or updates. I realize that 128 requests is a tall order, but is it still being developed or has something else come along that makes sIFR obsolete?

  31. Mike D. says:

    micthemouse: Good question. In my mind, it’s ready to be released, and has been for about a year. I’ve been using it on Mike Industries for probably a year now and it’s been great. Mark, the lead developer on the project, still has a few things he wants to work out before officially releasing it. I encourage you to bug him. :)

  32. One good thing for sIFR 3 would be to replace the “onload” trigger by a DOM Content Loaded event. So the javascript replacement wont wait for all the pictures to be loaded before replacing sIFR text.

Shared
The Ocean in 185 Lines of Javascript:

Mesmerizing. Try tweaking some of the variables in the “sea” section of the code.

“"Design had been a vertical stripe in the chain of events in a product’s delivery; at Apple, it became a long horizontal stripe, where design is part of every conversation.””
Why I Just Asked My Students To Put Their Laptops Away:

A great essay about how toxic everyday distractions can be.

Humanity's deep future:

A group of researchers at the Future of Humanity Institute talk about where our race may be going and how artificial intelligence could save or kill us all.

Steve Jobs speaks about the future at the International Design Conference in 1983:

31 years later, it’s safe to say this is one of the most prescient speeches about technology ever delivered. Jobs covers wireless networking, tablets, Google StreetView, Siri, and the App Store (among other things) many years before their proliferation. A fantastic listen.

How to travel around the world for a year:

Great advice for when you finally find the time.

LiveSurface:

A fantastic app for prototyping your design work onto real world objects like billboards, book covers, and coffee cups. This seems like just as great of a tool for people learning design as it does for experts.

50 problems in 50 days:

One man’s attempt to solve 50 problems in 50 days using only great design. Some good startup ideas in here…

How to Do Philosophy:

If you’ve ever suspected that most classical philosophy is a colossal waste of time, Paul Graham tells you why you’re probably right.

TIME: Why Medical Bills Are Killing Us:

Stephen Brill follows the money to uncover the pinnacle of corruption that is the U.S. Health Care system. A must-read article if there ever was one.

DIY Dot Org:

A beautifully designed site full of fun and challenging DIY projects. I could spend months on here.

The Steve Jobs Video Archive:

A collection of over 250 Steve Jobs videos in biographical order

Self-portraits from an artist under the influence of 48 different psychoactive drug combos.

Water Wigs are pretty amazing.

David Pogue proposes to his girlfriend by creating a fake movie trailer about them and then getting a theater to play it before a real movie. Beautiful and totally awesome.