sIFR 2.0 Released

It’s released! A long effort of several months is finally complete. sIFR 2.0 is here.

I’m all worn out from writing the official sIFR landing page so I’m going to keep this entry short, but I’ll just say that this release is the realization of everything we’ve always strived for in sIFR: rich, accessible typography for the masses with no pitfalls under any reasonable browsing conditions.

Release Candidate 4 was pretty solid, but this final release adds two improvements to the already rich feature set: the ability to show browser text while Flash text is loading (if desired) and graceful degradation to HTML text if users have FlashBlock installed. We’re particularly jazzed about working through the FlashBlock issue because it was the only circumstance where we felt sIFR wasn’t degrading perfectly, but thanks to the FlashBlock folks’ willingness to work with us and upgrade the FlashBlock extension, all is good in Flash-blocking land now. :)

I’d like to give a final thank you to the following people for the following reasons:

  • Mark Wubben — Mark’s world-class javascript skills are the reason that sIFR is as robust and well-formed as it is. He and I have been working together long-distance from Seattle to The Netherlands for several months now, and I can say he’s the easily the best javascripter I’ve ever collaborated with. His only shortcoming is that he doesn’t have a Mac yet, but that will change before the summer I’m told. If you’re ever in need of a great javascripter or just an object-oriented developer genius, Mark is your guy.
  • Shaun Inman — I can’t really say anything about The Wolf that hasn’t already been said. He is the man. His original IFR DOM-based Flash replacement routine was the catalyst for the creation of sIFR, and to this day, he’s still the first person I bug on Instant Messenger when I have a problem. In fact, I find him so useful that I embedded him in a Dashboard widget earlier this week… details possibly forthcoming (seriously). Shaun has some interesting things he’s getting ready to release as well, so keep an eye on him.
  • Stephanie Sullivan — Hot beach volleyball mom by day, rabid sIFR advocate by night, Stephanie has helped write a lot of the sIFR documentation on the official sIFR Wiki as well as evangelize the technology at conferences and classes around the country. Tonight, Stephanie’s introducing sIFR 2.0 at TODCON in Las Vegas… we wish her luck.
  • Danilo Celic — Along with Stephanie, Danilo is a key contributor over at Community MX. Danilo took the time to create a Dreamweaver extension to export sIFR swf files and even made sIFR tutorial in the form of a slick Breeze presentation… go check it out.
  • Matt May — As an accessibility expert, member of the W3C, and just all around great guy, Matt’s opinion means a lot to us, and when he gave a clean bill of accessibility health to sIFR, we really started to feel great about what we’d done.
  • Joe Clark — Much like Matt, Joe’s opinions on accessibility mean a lot to us. And much like Matt, Joe sees nothing inaccessible about sIFR. We like Joe.
  • Dave Shea — Dave provided a very even-handed review of sIFR back in the beta days which helped us focus on making the good better and making the not-so-good, not-so-bad anymore. Thanks for a good post and the healthy discussion which followed.
  • Andrew Hume — Andrew wrote a great article on his site, Usabletype.com, about how and when to use sIFR. He’s also been helpful in explaining proper usage to people when the opportunity arises.
  • Jeff Croft — Croftie’s a big sIFR guy and much like Andrew, he’s been helpful in mitigating some of the discussion around the internet about proper use of this method. Jeff’s site is also a great example of beautiful sIFR use.
  • Everyone who has used sIFR — Without the pool of hundreds of developers putting sIFR through its paces, we wouldn’t have made it as good as it is. There are simply too many combinations of browsers, OSes, plug-ins, and extensions out there to properly test something like this by yourself. To all who have helped us over the last several months, a big thank you.

Alright, now go check it out already!

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.

59 Responses:

  1. AkaXakA says:

    Wonderful!

    The best things is probably that not only is sIFR easy to integrate by coders, with the dreamweaver integration it’s in the hands of everybody. Also, the Flashblock breakthrough is great news! I am concerned however that ads may try to immitate sIFR to not get blocked.

    So what’s up for version 3.0 ?

  2. Chris says:

    Wow. Looks solid. AkaXakA commented on ads imitating it. Blahh! It’s something to worry about for sure.

  3. Bob says:

    Congratulations on a fine release!

  4. AkaXakA: It falls back to HTML only when FlashBlock is present – so the only way it can be “abused” is to replace Flash with HTML in the presence of FlashBlock.

    At least that is how I read it.

  5. Mike, thanks again for the great tool! It’s the people like who make the web improve and evaluate. Good luck with your future projects!

  6. Awesome work!

    Quick question, what happenes in the case of AdBlock? I’ve never heard of FlashBlock but I know many people who use AdBlock.

    Thus far, the reason I haven’t commited to sIFR is simply due to that damn plugin that so many use.

  7. Nevermind! You answered my question on the landing page.

    sIFR runs fine under other extensions like AdBlock, but users can always disable the loading of sifr.js if they’d like.

    Sweet!

  8. Olly says:

    ROCK RIGHT ON! That’s ace :)

  9. Brilliant!

    This technique is fantastic. Now the world can have custom font headings with dynamically driven sites!

    Mike, thanks again for the great tool! It’s the people like who make the web improve and evaluate. Good luck with your future projects!

    I’ll second and third that!

  10. Great work, guys. Congrats on the release. Looking forward to getting my sites updated.

    And Mike — thanks for the thanks. I sure haven’t done much, but I do really believe in this technology, and you can bet I’ll keep pimping it. :)

  11. This rocks. I introduced sIFR on a project I’m working on now and it’s great. Eveyone assumes they’re looking at images. Change all the H1 headings to blue? No problem – give me 30 seconds! Try doing that with 70 pages of image based headings. Thanks for all the hard work!

  12. Mike S. says:

    Absolutely fantastic!

    Thanks to the entire team of amazing developers that working on making this happen the web can start to become a better looking place for typography. You guys are my hero’s.

    I’m sure it’s been a long journey but it was definitely worth it.

  13. Switch says:

    I use the Flashblock extension to dispose myself of annoying adverts. I’ve added Mikeindustries.com to the allow list – I trust you – and I see your Flash header, but no sIFR. Maybe you guys and Flashblock could work closer together so that Flashblock will allow sIFR if it is on the allow list…

  14. Justin P says:

    Just tried to show your site to a coworker, because they have FlashBlock installed, and it crashed. This was in Firefox 1.0. After the crash, tried to bring your site up and Firefox crashed again. This was after clicking through your splash page to the “Blog” section.

    I am using Firefox 1.0.3 and I have no problems. I also installed FlashBlock to see if there was an issue with that and your site still loaded fine. I could even see the plain headings when FlashBlock was enabled.

    Mr. Inman’s site wasn’t so lucky, however.

  15. Joe Clark says:

    It seems you use JavaScript to hide invalid code from the validator. While this is a known technique and is the sort of thing Mike would be OK with, I am not. For the record.

  16. Hey thanks for the kind remarks :) I’ve also written a 2.0 celebration article, feel free to read it.

  17. Mike D. says:

    Hi Joe: Yeah, for the record the only thing that’s invalid is the embed tags we have to use in order to get Flash to render properly in all browsers. Methods such as the object-only Flash Satay work fine for basic animations that require no FlashVars or other advanced methods, but we have to use embed for compatibility. Heck, even Firefox doesn’t properly support object-based implementation. Opera, ironically enough, is the only browser we’re serving the object tag to, so at least with those people, there is no invalid code. Surely a minor beef though, I hope you’ll agree.

  18. Sweet! I love this. Props all around.

  19. Actually we are using an illegal sifr attribute as a hook to detect IE, Safari wouldn’t let you access the classes on the embed elements…

    Anyway, I’m only writing this because I forgot to sign up for notification :)

  20. (detect IE should be detect sIFR)

  21. Chris Hester says:

    Works great! On the Test Page though, I cannot highlight any of the text in the header, because it is a link. Is there a way round that? (I use Opera 8 on Windows XP.)

    How popular is sIFR? I was looking at the University of Sheffield site recently when I noticed the sub pages used a nice font for the headers. I found I could select the text, so I looked in the Source and saw sIFR! So even university sites are using it.

  22. ivan says:

    Thanks! It’s great! I’m thinking to incorporate it with my Drupal site. Will see how it goes…

  23. Fil says:

    Did you work on supporting accentuated letters (or unicode in general) and bidirectional writing? I’ve tried to modify a header in the example page and the accentuated chars just disappeared — maybe I juste did it the wrong way. I didn’t see this question mentioned on the wiki.

  24. Paul van Steenoven says:

    Anyone have problems publishing the FLA using OS X with Suitcase?

    Whenever i export a SWF its totaly transparent. I use the default export options and when using dynamic text the font is automaticle exported right?

  25. Fil, you have to add those characters to the Flash movie.

  26. Joe Clark says:

    I didn’t check it with great thoroughness. I tend to agree that if your only validation error is using embed, it’s not much of a big deal. However, anyone who’s using SIFR is sophisticated enough to use a custom DTD that makes it legal.

    Cf. Standards-compliant Web pages with captioning.

    BTW, if all you’re doing is using embed, why not just use real HTML instead of document.written HTML or whatever?

    (Editor’s Note: One of the pillars of sIFR is the complete abstraction of the method from your (X)HTML code, and thus we keep it separate. Also, since the embeds are generated dynamically, there’s no telling how many of them may need to appear on the page until the script runs.)

  27. Congrats again guys… I really appreciate how hard you all worked to have this released so I could give it to the people attending my sIFR session at TODCon… You rock! :)

  28. Benoit says:

    BIG UP sIFR ;-)

  29. John says:

    One thing kinda stumps me about this sIFR thing:

    All the colour and background elements are within a js file at the bottom of your testpage, this is no big issue but what if I wanted to put some text in a list with the sIFR active and I wanted the background colour and text colour to change on hover?

    For example if I want to use something like:

    99 special things

    I would like the 99 in a red colour and the rest of the text in black… On mouseover I would like the 99 to change to black and the rest to change to red…. How would this be achieved without too much bother?

    Hope this can be resolved, I’d be very interested :)

  30. Joen says:

    Congrats on making this the best thing to happen to typography on the web in a long while.

    A quick question:

    I stumbled upon a neat system that allows DOM JavaScript to run before “onload”, and immediately thought of sIFR. Could this technique be implemented?

  31. Hey Joen, yeah, it could be. Actually, you can implement this on top of sIFR by putting the replacement statements in the head and fire sIFR() on “domready”.

    On the other hand, we already have a system which will kick in without waiting for images, so I’m not sure if it’ll add that much.

  32. Joen says:

    Hey Mark,

    On the other hand, we already have a system which will kick in without waiting for images, so I’m not sure if it’ll add that much.

    Very very cool! When was this system added? In RC3 or something?

  33. Joen, in beta one, if I’m not mistaken. ;-)

  34. Shaun says:

    I’ve one issue that’s puzzling me with Safari 2.0. and sIFR 2.0.1

    If you have a float:left div then follow it with an h1 which sIFR is replacing the h1 doesn’t float alongside the DIV unless you add display:inline to the H1 in the css.

    I think it’s just Safari though I’ve not done extensive testing.

  35. Srini says:

    This is awesome!!!

    Is there any performance issue with this?

    -SN

  36. Srini, of course there is, unfortunately. The JavaScript needs to execute, the Flash needs to render, files need to be downloaded… give it a shot and decide for yourself if it’s worth it :)

  37. Simo says:

    Am I missing something, but I can’t get sIFR work with “ö ä õ ü” :S
    Is there some basic font(s) with these letters as I can’t make my own font (no MX) ?

  38. dblue says:

    has anyone got an idea of how to resolve this bug?
    http://forum.textdrive.com/viewtopic.php?pid=96100#p96100

    im using sifr 2.0.2 and the bug apears on:
    win > firefox 1.5.0.4
    win > opera 8.52
    win > opera 9.0
    mac os x > safari 2.0.3
    mac os x > firefox 1.5.0.4
    mac os x > opera 8.5
    mac os x > opera 9.0

  39. Elaine says:

    Thanks for this Mike. Its excellent.

    I have been looking for ways to insert fonts ( into the web pages I am designing ) not readily available on users PCs while maintaining accessibility. So it was great to come across sIFR.

  40. agung says:

    Jenious…

  41. Demon says:

    On IE6 sifr v2.0.2 dosn’t work, the same and your website page too, strange, I cleaned cache, but not helped.

  42. I seem to have encountered a bug. It appears that apostrophes (‘ and ‘) don’t render. I’ve added both apostrophes above to the flash file under the character options, as well as selecting to embed all outlines. In both cases the apostrophe never appears.

    You can see an example (or lack thereof) at http://www.darlinghomeforkids.ca/for-families/testimonials.html

    Does anyone have any ideas?

  43. Are you looking for the quotes in, say, Joshua’s Mother? Cause I see those here.

    What’s your setup?

  44. JD on MX says:

    sIFR 2.0

    PING:
    sIFR 2.0: Mike Davidson does another significant thing here… he figures out a way that his headline-creation technique can cooperate with the Firefox FlashBlock extension. (See context on sIFR.) He has also incorporated the recent surge of real-world…

  45. SIFR

    La versión 2.0 de SIFR (Scalable Inman Flash Replacement) ha sido lanzada. Esta versión del script para reemplazo de textos tiene varias nuevas mejoras, entre ellas la capacidad de detectar si un usuario tiene la extensión Flashblock….

  46. sIFR 2.0 has been released

    Well, Mike Davidson (from Mike Industries) and his crew have done it again. They have released sIFR 2.0 which has built some stable walls up on some flaws and/or bugs that earlier versions had. Apparently, the big thing in this…

  47. ProNet says:

    sIFR 2.0 Released

    Mike Davidson has just announced the release of sIFR 2.0. This popular combination of slick javascript and smart use of Flash lets you choose custom fonts to display headlines on a website, for situations where the presentation of your page…

  48. sIFR 2.0 Released

    Mike Davidson has released sIFR 2.0. This is the release that I’ve been waiting for–I didn’t want to impement sIFR before this, but I think it’s time to start playing with this. After all, [Joe Clark](http://www.joeclark.org) says it’s ok, so it must …

  49. BIGSEA says:

    sIFR 2.0 Released

    sIFR 2.0 Released : “It’s released! A long effort of several months is finally complete.

  50. Mein Senf says:

    sIFR deine Webseite

    “Mike Davidson”:http://www.mikeindustries.com/ stellt ein interessantes Flash-tool vor, das er mitentwickelt hat: “sIFR”:http://www.mikeindustries.com/sifr/ Damit ist es möglich, normale Ãœberschriften auf Webseiten in saubere und schön anzuschauende…

  51. dev: customized typography with sIFR

    during the last few days I’ve been diligently working on a web-application in the area of print/typography, featuring a browser-based text-editor with support for various fontfaces. the main problem in realizing such an editor is the impossibilit…

  52. Dug North says:

    I have discovered a strange edge-case bug in .sifr 2.0 while using Firefox on the Mac OSX.

    Upon initial page rendering the Flash titles show up just fine. I then have a pop up above the main page content (it is a printer-friendly format). As intended, The Flash element are covered by this DIV.

    If you then choose File > Print > Preview from the browser’s menu, the Flash elements reappear and “shine through” the popped up DIV (in the browser window, not the browser’s print preview window). I have not been able to fix this with CSS background or z-index values.

    If I close and reopen the DIV, the Flash element do not shine through. Also, if I click and draw over the popped up DIV (selecting its content), the Flash elements disappear.

    Any ideas?

    Thanks

  53. kidmang says:

    I’m having a similar problem as Dug’s for FF Mac (FF PC, safari, ie6, ie7 are ok)

    I have a drop down menu that covers two sifrs, an h1 and h2. The h1 sifr stays on top of the dropdown instead of being covered. The h2 gets covered just fine. No z-index edits have solved this problem.

    Any suggestions?

  54. erik says:

    Nice piece of work, guys. Great job.

  55. colin says:

    Brilliant: a holy grail for HTML

    had a little trouble installing it for a CMS: as I had to put the swfs at the level of the index.php (and had to add the php path variables to find the various .js, and .css files)

    But thats probably because I’m not using php everyday

    Thanks a lot for all the work

  56. aaron says:

    so i have a question in regards to using sifr on a corporate website. if i would use this technique to display a purchased font (with 5 user licenses) would i be doing something illegal. since it is not a graphic and a font would this be a form of distribution of the font i purchased. this may more of a legal question than anything, but i would like to know if anyone else has run into this problem.

  57. Mike D. says:

    Aaron: Shouldn’t be a problem.

  58. […] Berea Sreet, till synes en dag efter Mike Davidsson lanserade sIFR 1.0. Mindre än ett Ã¥r senare lanseras sIFR 2.0 och sÃ¥vitt jag förstÃ¥r har version 3.0 inte kommit längre än till beta – men det är version […]

  59. How and When Link in this paragraph is broken.
    “Andrew Hume — Andrew wrote a great article on his site, Usabletype.com, about how and when to use sIFR. He’s also been helpful in explaining proper usage to people when the opportunity arises.”

Shared
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.

Jonah Peretti's letter to BuzzFeed’s employees:

If you’re wondering what a excellent blueprint for a modern media company looks like, look no further than Buzzfeed CEO Jonah Peretti’s latest email to his employees. In it, Peretti explains a lot of his company’s virtues, the most important being a relentless focus on always providing what’s best for the user. Vox Media (operators of The Verge) is the only other company I can think of which approaches this level of reform and execution.

The Covers Project:

I love this so much: a cross-referenceable database of cover songs, searchable by song or artist. Slowed down, acoustic covers — no matter the song — are so enjoyable to me that I wish it was a requirement to play one at every show. If you like them as much as I do, make sure to check out M. Ward’s Let’s Dance or Sun Kil Moon’s entire album of Modest Mouse covers.