Developmentables

On Batteries and Brainstorms

“I’m fully charged by this idea.”

I re-read Mark Boulton’s A Practical Guide to Designing for the Web this week and was inspired by a bit of wisdom from his ‘Ideas’ chapter.

In this chapter, Mr. Boulton lays out a very useful strategy for conducting brainstorm meetings that involves ranking generated ideas using what he calls a ‘Passion-O-Meter.’ By his own admission, this is just a “fancy name for using some stickers”, but I was struck by the potential of the idea to offset emotions that often accompany such an exercise.

Have you ever been in meeting where someone got offended because their idea was ill-received? I have.

Because Mr. Boulton did not provide any explicit instructions (or ready-made stickers for that matter), I was required to develop my own version of the ‘Passion-O-Meter.’ I wanted to make the ranking process as fluid, fun, and free of conflict as possible. So the first thing I had to decide was what to actually put on the stickers themselves. In my experience ideas generally fall into 1 of 3 categories:

• Great
• Good
• Not So Good

Since I knew the stickers were going to be physically affixed to the ideas themselves (we write them out on a giant 20ft X 20ft whiteboard) I had to make sure they weren’t egregious in any way. No ‘loser stamps’ allowed. At the same time, I wanted something clever and memorable. For some reason, my mind very quickly jumped to the idea of battery meters. Maybe I was inspired by the errant behavior of my iPhone 3G’s battery since updating to the latest OS.

Who knew how much the fluctuating charge level of an iPhone battery could affect one’s mood?

Inspired by the iPhone’s battery meter icon and Simple Bits’ Charge T-Shirt, I created icons and phrases for three possible rankings:

After creating the artwork, the next step was to import the images into an Avery template, in this case #5160. I dubbed my version of the idea ranking process the ‘Passion-O-Meter Blitz’ as the team was only given 5 minutes to rank about 30 ideas. I wanted there to be a flurry of activity so that each team member’s votes could be more or less anonymous.

Based on the feedback I received after the meeting (and the efficacy of the ranking procedure itself) it would seem that the battery stickers and my interpretation of Mark Boulton’s ‘Passion-O-Meter’ exercise were a success!

If you’d like to use the battery stickers I created in your own brainstorm meetings, please feel free to download the Adobe Illustrator source file from my repository on GitHub:

http://github.com/wwhited/brainstorm_battery_stickers/tree/

—Written by Billy

Adventures in Typekit

One of the many great things about working at Inventables is that we, the development team, are continually afforded the opportunity to experiment with—and even implement—cutting edge web technologies like CSS3, HTML5, Typekit, and many others. Because we’re small and nimble we are able to adapt quickly to the changing landscape of the modern web. It’s a great atmosphere in which to create.

But while being at the cutting edge is great for our team’s morale, we must balance our excitement with restraint. Using advanced and not-always-fully-supported web technologies is an exercise in trial and error, frustration and reward.

Case in point: Typekit, the web-font hosting service that has been gaining popularity in recent months.

Where Typekit succeeds

Typekit works well as a repository for high quality, professional and legal web-ready (though not always “web-optimized”) fonts. Because Typekit has struck partnerships with several well established foundries they are able to serve up many excellent, complete and otherwise unavailable (due to strict licensing agreements) fonts that free-font sites like fontsquirrel simply cannot. As a result, Typekit takes the guesswork out of choosing custom web fonts. I can browse the site and quickly/easily identify a host of viable fonts without having to worry about EULAs and without being restricted by a limited number of available font weights. Until the WOFF takes off, Typekit and similar font-serving sites like Font Deck provide the best options to those designers looking to use fully-featured, custom fonts on their websites.

The Unfortunate FOUT!

The biggest frustration I currently have with Typekit is with what is known as the “flash of unstyled text,” or FOUT for short, which is an issue that effects websites that use font-linking. The FOUT is an unsightly effect that occurs because of the fact that linked fonts are loaded, like images, after all the other content on a webpage has been loaded. As a result, your back-up fonts (as specified by your CSS font stack) will flash for a few milliseconds before your typekit fonts load. Due to the spatial difference between various typefaces, this produces a distracting “visual hiccup” that can make a site look broken even to the most oblivious of non-designers. To put it bluntly, the FOUT sucks. It is for many who would otherwise commit to a Typekit service plan, an outright deal breaker.

Now unfortunately for the folks at Typekit (who are painfully aware of this problem and taking on much of the blame), the FOUT is an issue that affects everyone using linked fonts whether they employ a third-party solution or host fonts themselves. As far as I’ve been able to tell, it’s a browser based issue. Typekit performance appears to vary, to some degree anyway, between Firefox, Chrome, Safari, and IE.

Nonetheless, much to my disappointment, the only way I found to effectively manage the FOUT was to significantly reduce the file size of my “type kit” to around 75k, or just one font with two weights. So much for my dreams of versatility!

With that said, Typekit is working on improving this issue and they have made some experimental solutions available that seem quite interesting. However, considering the monthly cost of the service, I am really hoping these solutions move beyond the experimental stage in the very near future.

To keep tabs on Typekit’s response to the FOUT, check out these threads:

http://getsatisfaction.com/typekit/topics/avoiding_the_fout

http://getsatisfaction.com/typekit/topics/flash_of_unstyled_content

So, The Empire Strikes Back…you’re gonna proof those fonts right?

Another equally serious issue I’ve had with Typekit surrounds the display of certain custom fonts on Windows (mainly while running XP). Windows uses a system called Cleartype for anti-aliasing fonts which needs to be turned on in order for font smoothing to occur. In Windows 7 and Vista, Cleartype is turned on by default and Typekit fonts look more or less like they should (if we use OS X as a benchmark). But in Windows XP Cleartype is turned off by default which can mutate the appearance of certain fonts and make them look jagged and unreadable.

Again, this is an issue that the folks at Typekit are not directly responsible for as the problem is rooted elsewhere (in this case, both in Windows XP’s native font rendering settings and the actual “hinting” of the offensive fonts). Nonetheless, it is a real problem that can affect a design in truly serious ways. And though Typekit does offer a robust “type tester” feature that does a pretty good job at approximating what a chosen typeface will look like in each browser, I believe Typekit could do more to advise it users on which fonts are best suited for use in Windows and which are not. Perhaps by flagging troublesome or poorly hinted fonts?

For a discussion of this problem, check out these threads:

http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems

http://getsatisfaction.com/typekit/topics/only_readable_if_cleartype_is_enabled

Conclusion

For the time being, we are still using Typekit here at Inventables, despite its shortcomings. We believe in the “case for real fonts on the web” and prefer the greater freedom and flexibility that using custom fonts provides. However, despite our hopes for Typekit, we believe it still has some issues to work though before it becomes more widely adopted.

—Written by Billy