Mike Industries

A List Apart, the venerable online periodical for web people, has quite possibly just pulled off the perfect redesign.

Everything is great. Nothing is bad. Click here to see the wickedness.

Favorite design touch: The hover underlines which disappear in the middle of the center-stacked text.

Favorite new feature: Adjustable color palettes for different issues.

Congratulations to Jeffrey Zeldman, Jason Santa Maria, Eric Meyer, Dan Benjamin, Kevin Cornell, Erin Kissane, and team on a great piece of work.

Meatspace Stan has more here.

*Prediction: A center-stacked headline mini-boom begins today.

So the New York Times is looking for a Design Director to lead the redesign of their flagship site, nytimes.com. Wow. Talk about a dream position.

If I didn’t love Seattle and what I’m doing right now so much, I’d be talking to them in a heartbeat. A chance to lead one of the world’s all-time most respected newspapers in an all-encompassing redesign and live in of one of the greatest cities on earth? What more could one ask for?

If you or anyone you know fits the bill, head on over to the Times job site (direct job link here) and check it out. We need more good people running more major news organizations’ web sites these days.

Hat Tip: Mark Hurst of Good Experience

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!

UPDATE: Version 2.0 is now available. See article here.

Alright, sIFR 2.0 is finally ready for release! Before Mark and I release it, however, we’d like sIFR developers to run through a short set of testcases over on the sIFR Wiki.

The testcases represent some of the more complicated things that are happening under the hood of sIFR and can be found here.

Since we’ve only added two small things (a tiny Opera tweak and the ability to show browser text while the sIFR text is loading), we don’t anticipate any problems, but these testcases are meant to insure nothing was overlooked.

If you have a free minute, please run through the tests and let Mark or I know if you experience anything out of the ordinary. The whole suite should only take a minute. If every seems to work ok, please also feel free to post a comment on this page saying something like “Win XP/Flash 7 — Firefox 1.0, IE 6, all tests passed.”

Many thanks, and sIFR 2.0 will follow within days.

UPDATE: Version 2.0 is now available. See article here.

Introducing sIFR 2.0 Release Candidate 4! RC4, you say? Why so many release candidates? Don’t you guys beta test?

Well, yes, we do… vigorously. But the truth is that RC1 should have still been a beta, but we had no idea how many improvements we could still make. The good news is that with RC4, we really don’t have any outstanding issues that we know of anymore. sIFR even works in Konqueror now! Hot damn!

So anyway, here is a list of what’s improved in RC4:

• Ability to roll sIFR headlines back to plain text dynamically, or turn them off or on persistently via cookies
• Better support for fringe browsers like Konqueror
• Improved transparency support for Mac browsers
• Squashage of various minor bugs affecting tiny percentages of the population
• Multiple speed improvements
• Mac IE support is now turned off by default. Although sIFR works fine with Mac IE in most situations, we figured since no one tests in that browser anymore and it accounts for such a small percentage of the population, we might as well save people the worry of having to test in it. It is possible to turn sIFR on for Mac IE if you’d like, however.

I may be forgetting a few minor things, but I think that’s about it. Many thanks to Mark Wubben, whose javascript expertise is responsible for almost all of RC4’s improvements. If anyone ever needs javascript or DOM work done, I highly recommend contacting Mark. His skills are second-to-none.

I also want to point everyone in the direction of the new sIFR Wiki. It is only in its beginning stages right now, but feel free to consult it for documentation, tips, tricks, and other sIFR-related goodness. If you are using sIFR on your site, also feel free to add yourself to the list of examples.

Big ups also to Danilo Celic who has created a fabulous Dreamweaver extension which can automatically export your sIFR-ized swfs for you. Danilo also has a nice video presentation showing how to use sIFR that you might want to check out if you haven’t already.

Here are the details about upgrading from previous sIFR versions:
(more…)

UPDATE: Version 2.0 is now available. See article here.

Alright, I know I said Release Candidate 2 might be the final release of sIFR 2.0, but hey, Mark and I found some more things to improve on… so we did. Today’s release of sIFR 2.0 RC3 introduces the following new features/fixes/improvements:

• The javascript file has been reduced down to 8.8k.
• Replacement calls now use named arguments so you don’t need to specify parameters in any particular order. The function is backwards-compatible, however, so existing installs will remain functional.
• Newline support (<br> and <br />) now works perfectly.
• Now compatible with Opera 7 and above.
• New support for a “fallback” transparency color for browsers which don’t support transparency. This eliminates the green background displayed in some older browsers when specifying transparency.
• A shiny new sIFR logo!

Since all changes from RC2 to RC3 are contained within the “sifr.js” file, you need only replace your existing “sifr.js” file to complete the upgrade. No .html or .swf work is necessary. You may, however, decide to change your replacement calls to the new named argument syntax if you wish. This is not necessary, but you may find it preferable.

Note: if you are using a version earlier than RC2, please re-export your swfs as well.

Here are links to the new files and updated example page:

• Download sIFR 2.0 RC3
• View the updated example page

Incidentally, it looks like Metafilter has picked up on sIFR today and is sending over a ton of traffic to the original sIFR article. Thanks guys!

Reading the Metafilter comment thread is a bit humorous, however. It never ceases to amaze me how some people will see the word “Flash” and cry about imaginary accessibility issues, imaginary proprietary file format issues, and other imaginary “sky is falling” issues. Look at the code people. Study it. Analyze it. Understand it before you jump to conclusions. And above all else, understand that the entire web as we know it is a hack. I’d respond on the Metafilter thread myself but I don’t feel like paying $5 to join.

UPDATE: Version 2.0 is now available. See article here.

Alright, sIFR Release Candidate 2 is finally here. It’s been exactly two months since Release Candidate 1 and we’re happy to say that things have held up very well so far. Release Candidate 2 fixes a handful of minor issues, and barring any regression behavior which may turn up in RC2 (but probably won’t), we think we have a solid 2.0 release on our hands. Thankfully, we’ve taken care of this before the end of 2004, because according to the 2005 Web Design Forecast, sIFR will be a huge part of the emerging typographical landscape in the coming year.

We couldn’t agree more.

Before I get into the details of RC2, I just want to thank Mark Wubben for a) all the great javascript work he’s done on sIFR, and b) all the helpful support he’s provided to people asking for assistance in the comments. There have been over 700 comments on all sIFR threads so far, and Mark has managed to successfully attend to almost all of them which pertain to javascript or implementation. So once again, thanks Mark for being so helpful, and also for being a genius.

I also want to thank Danilo Celic and Stephanie Sullivan of Community MX for their help in bringing sIFR to the masses. Check out Danilo’s Breeze Presentation for a great overview of sIFR and also a peek at the power of Macromedia Breeze. I love Breeze more every time I see it.

And finally, two more thank yous. One to Zen Master Dave Shea for his helpful, even-handed, positive review of sIFR, and one to Sean Schroeder for his beautiful sIFR work on Prosper Magazine.

Oh yeah, and I almost forgot, Wes Carr and the folks at 2Entwine have taken sIFR and expanded it into Fotobuzz.org, a photo annotation engine. Instead of replacing text with sIFR, Fotobuzz replaces images for the purpose of annotating them inside Flash. It is really really slick. Make sure and check it out.

Now… on to the details.

First of all, to upgrade to sIFR 2.0 RC2, you need only re-export your .swf files and pop in the new sifr.js file. No implementation details have changed. So in other words, upgrading should only take a minute.

Here’s what we’ve improved/changed/fixed:

• sIFR now works in all reasonable versions of Opera. This should include all flavors of 7.x on both platforms.
• URLs of unlimited length are now supported. Flash unfortunately has a 128-character URL limit on textfields, but we’ve gotten around that with some crafty coding.
• Newline support is now added. If you place <br />'s in your replaced elements, they will now be honored.
• HTTPS is now supported for domain-protected files.
• sIFR now uses exact domain matching for domain-protected files. As a result, two-part domains like .co.uk are now eligible for protection.
• Various speed improvements.
• Minor selector bugs have been squashed.
• Browser detection is now exposed in the javascript so you can easily disable sIFR for any browser you’d like.

At this point, we believe all outstanding issues are now resolved. Please feel free to download the new release and let us know what you think! The instructions are now contained in a readme.txt file within the zip archive below.

• Download sIFR 2.0 RC2
• View the updated example page

UPDATE: Version 2.0 is now available. See article here.

Alright, we have a solid release candidate! This evening, I present sIFR 2.0 Release Candidate 1, and unless any major problems are found, this will end up being the exact code in the final release. I want to thank everyone who has put sIFR through its paces and helped Mark and me squash bugs and add feature enhancements. It wasn’t until I released sIFR that I fully realized the power of open source. What may have taken months to develop otherwise, instead took only weeks… and only evenings at that. I know I still have to create the official sIFR primer and idiotproof instructions, so I’ll be doing that over the next week or so and monitoring this comment thread for any issues which may arise. The download is here and the updated example is here.

And since David Guillory asked, it is indeed pronounced “siffer”. Spread the word to the homies.

What’s new in this release

Here are some details about sIFR 2.0 RC1:

• This release was mostly for fine-tuning. The concentration was on stability and reliability.
• Proper uppercasing is now supported and it won’t mistakenly uppercase your URLs in the process. Please note that “upper” or “lower” are now passed in as the last parameter of the function to induce uppercasing or lowercasing. This is the only change which may affect existing implementations.
• Various DOM and speed improvements.
• More consistent font sizing.
• Support for common usually-escaped characters like “, ‘, &, and %.
• Automatic whitespace-stripping, following the same conventions as HTML.
• Complete IE 5 Mac compatibility.

Quick Instructions

The usage instructions are identical to the previous betas with the exception of the upper/lowercasing change mentioned above. Here is what to do:

1. Download 2.0 Release Candidate. sIFR is licensed free of charge under the standard CC-GNU LGPL.
2. Get familiar with index.html. That’s really the only file which contains the things you’ll need to adapt. It contains the replace statements at the bottom and the CSS at the top.
3. To make your own .swf files, simply open up the .fla file in Flash, doubleclick the textbox which is on stage (it takes up the whole stage), and choose your own font from the Properties palette. Then, choose File > Export and you’re done!
4. The parameters to use in your replacement functions are explained in the html file. Plug in your parameters and you’re good to go!

Additional Notes

You won’t have to replace any of your existing replace statements (from beta 2) unless they are affected by the upper/lowercasing change mentioned above. You need only replace your .js file and your .swf files. You may notice a slight font sizing difference between the last beta and this release. This release’s sizing is more correct and consistent so please roll with the new.

There are only two significant issues I know of which remain unsolved:

1. Possible weirdness in certain versions of Opera.
2. Certain typefaces, especially script fonts, may contain characters with non-conventional metrics which can cause clipping of letters in some cases. An example is a handwriting font (like Cezanne, for instance) where the crossbar on the “t” extends far beyond the width of the T. Sort of like if you were signing your name and you dragged the tail end of the last letter back over the word. The problem with this sort of font is that Flash is unaware of the stray strokes. The only solution to this, moving forward, is for users to manual adjust the left and right margins in the Formatting palette in Flash if necessary. I don’t consider this necessarily “solving” the issue, but if you find yourself in this predicament with an ornate script font, give it a try.

UPDATE: Version 2.0 is now available. See article here.

Another week, another round of improvements to sIFR. I think we’re 95% of the way to an official release now. Here are the improvements in the latest beta:

• Syntax now 100% compatible with XHTML Strict, even when served as application/xml
• Optional conversion to uppercase or lowercase now supported
• Optional link underlining on hover
• Bolding and italicizing of TrueType fonts now supported
• Automatic removal of extra white space in HTML
• Full support for Safari, Firefox, Mozilla, Mac IE, and PC IE
• Improved support for Opera
• Better international character support
• Ability to use quotes, ampersands, and other normally escaped characters
• Various speed improvements and bug fixes

For people who have already implemented sIFR, you don’t need to redo any of your CSS. Simply pop the new JS file into place, re-export your SWFs, and you should be good to go. Please make sure you have the updated .as files in the same folder as your .fla when you re-export.

There was only one minor change to implementation you should be aware of: The replacement calls must now go either at the end of your HTML document or at the end of the JS file. This only affects people who may have embedded the replacement calls in the middle of the JS file previously.

Alright, here’s the sIFR 2.0b2 download. Bang away.

UPDATE: Version 2.0 is now available. See article here.

Without further ado, I present for download sIFR 2.0b (or Scalable Inman Flash Replacement Two Point Oh Beta). Before I get into the details, I just wanted to post the link first, and also, an example of sIFR 2.0b in action. Note that this new example does not have a single image anywhere on the page or even in the CSS. It’s pure XHTML text. That’s it.

Now then.

How about an update on what’s occurred since 1.0.

Major goings on

Perhaps the most interesting thing that’s happened in the last couple of weeks is that according to Daypop, the original sIFR article was the 13th most popular page in the entire world (well, blogosphere at least) for a short period last week. That’s pretty cool, damnit. As blogging spreads from the techies to the general public over the next several years, reaching the top 20 is going to get harder and harder, so I reckon that’s probably it for me. Might as well retire now.

Besides the nice linkage, I received posts or e-mails from people in over 20 countries. Most posts or e-mails were feature requests, improvements, or written expressions of glee. Besides all the nice e-mails, it’s interesting to note who hasn’t shown up in the comments. The highly esteemed Joe Clark is absent, which means one of three things:

1. Joe is vacationing on a beach and away from a computer.
2. Joe is sick of responding to my nonsense.
3. sIFR is actually accessible!

So now that I’ve shot the big accessibility flaregun into the air, we’ll see what happens. Great accessibility improvements have already been made, but I don’t claim to be a master at testing screenreaders, so if you have insight, please post it.
(more…)