Meanwhile, several months ago, I bookmarked Apple, Inc.’s developer page on creating HTML email templates for its Apple Mail program thinking that “one of these days” I’d get around to seeing how easy creating a template or two would be.

Knock Knock's ‘Obscenely Important Memo’

As I was cleaning up the Christmas carnage yesterday, new Knock Knock “Obscenely Important Memo” pad in hand, the idea struck me that this would be the perfect test case for creating an Apple Mail template. All I needed to do was scan a sheet from the pad and my artwork was complete.  With that out of the way, I could focus completely on learning the nuances of creating a template. (Full disclosure: I did not have Knock Knock’s permission to use their artwork, but I figure since I’m not going to sell the Knock Knock template, they wouldn’t mind.  And, if I was successful, I have given them a potentially new product stream.)

From the outset, I knew that pretty much 99% of all email programs completely thumb their noses at web standards-based coding practices, which makes creating an HTML email template a nightmare.  Throwing years of coding best practices out the window, I reverted back to my late-90’s/early-2000’s HTML table-based design sense and got to work.  I also know that there are at least 25 different email applications widely used throughout the world today.  This makes designing a complex email template (like the Obscenely Important Memo) that will look correct in multiple email applications a difficult task.  But I like a challenge.

Hours later, I emerge victorious with a working template!  It is now time to test in a variety of email programs.  I send a test message to an Apple Mail account, a Yahoo! account and a Gmail account. The results are below.

The results are these:

• Apple Mail: renders the message correctly (not surprising since it was designed for Apple Mail);
• Yahoo!: renders the message correctly (pretty surprising to me);
• Gmail: renders the message incorrectly in Safari (surprising), but renders the message correctly in Firefox

Screen shots from Apple Mail, Gmail, and Yahoo! mail

With 3 email applications down and potentially 22 more to go, there’s more testing to be done!  This is where I need your help. If you use any other email program besides the 3 I list above and are interested in helping me test, send me a message.  Your responsibilities are minimal. You will:

• Need to supply a working email address;
• Let me know what email application and version you are using;
• Be able to take a screen shot of how the email appears

And that’s it!

One hour later…here is my 6 second video:

Power of Words from Brett Bearce on Vimeo.

This is the After Effects tutorial from the July/August 2009 issue of Layers Magazine.  It’s a quick tutorial covering type in motion with one camera angle.  I need to sit back and review it more closely to understand what I’ve done.

Typekit? What is It?

Several weeks ago a colleague of mine forwarded me an invitation to join this new, still-in-beta service called Typekit.  He told me that it was going to bring professional-class typography to HTML text on the Web. Flash forward a few more weeks and I read via Twitter that Typekit has launched.  I’m excited!

Typekit is a web-based tool that makes typefaces available to websites without using Flash or images like .gif, .jpg, or .png.  In doing so, it seems to satisfy both the licensing requirements for type foundries and the desires for web designers to have great fonts available.

How Does it Work?

Since I’m really just taking the ‘kit for a spin, I chose the free option for now, which puts a Typekit dingbat in the lower, right-hand side of my website.  Since it’s free, I think it’s a small price to pay.  Fortunately for paid accounts, this dingbat is removed.

At first, I thought Typekit was overly complex.  I had to:

• Register for an account,
• Choose from 4 different account types (from free to enterprise),
• Browse the different typefaces available for the account type I chose,
• Create my type kit

After working with the product, though, I think the folks at Typekit have done an amazing job at making the process as simple as possible while remaining mindful of download times, on-screen type readability, and the licensing requirements for the typeface use.

Type: the Final Web Design Frontier?

I have to laud the folks at Typekit.  They tackled a difficult problem and are working to be part of the solution.  Is it the best solution? Or the ultimate solution?  I’m not sure. Support for the @font-face CSS tag is already available in most modern browsers.  But the proper licensing and distribution of fonts has kept widespread use of this tag at bay for quite some time.  Though I’m sure there are issues with the Typekit method of font distribution on the web, I’m not sure what they might be yet.

And, after browsing the support forum for the product, I’m also pleased to see the Typekit folks actively listening to its user base to quickly implement changes and improvements.

For now, this seems to be the best thing going.  And, from what I can tell, it’s working well.  In the coming weeks, I’ll be implementing Typekit throughout the Brettro sites and—hopefully—in a few client sites to giving both Brettro and its clients the forward-leaning edge in Web design.

The Weekend Project challenge:

• Videos must be exactly one minute.
• No camera movement (no dollying, tilting, panning or zooming.) So, leave the Steadicam at home.
• Use original sound.
• No editing whatsoever (no titles, no cuts, no nuthin’)

I thought the perfect plan was a video of Roosevelt, my cat.  After 8 minutes of trying to get him to do anything, I gave up.  But in the process, I discovered some really cool footage I already had.

First, I stumbled on some old footage driving down Skyline Drive on a January morning with my friends Meg and Matt.

Virginia’s Skyline Drive in January from Brett Bearce on Vimeo.

Then I found footage of a sunrise in Durango, Colorado I took a few years ago.

Sunrise in Durango from Brett Bearce on Vimeo.

But I finally settled on Marine 1 departing the White House from this past summer (you might want to turn down your sound)

Marine 1 Departs the White House from Brett Bearce on Vimeo.

I decided I’d use After Effects to redo the intro sequence (or “front bumper” as I call it) to the videos I create.  Here’s how it turned out:

Brettro “Front Bumper” from Brett Bearce on Vimeo.

(Note: I also created the music to go along with it.)

With that in mind, today Brettro launches Brettro Labs.

This is my playground for trying things out, for royally screwing things up, and for learning, learning and learning.  And all along the way, I’ll be posting my trials and triumphs here.

Enjoy.

- B