I received a clever notepad for Christmas from one of my favorite web-based paper companies, KnockKnock.biz.  Knock Knock’s pads, post-its and other paper-based products are incredibly smart, clever, witty, and downright useful.  My one issue with these incredibly funny products is that they are paper-based leaving their use incredibly limited (though, when appropriately timed, incredibly hysterical).

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!

It’s early, early, early on Dec. 5 and I can’t sleep.  What better way to spend a sleepless morning than in the Labs running through an Adobe After Effects tutorial??  Stay tuned for my creation.

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.

What’s that you don’t see? The continued and (up until now) necessary overuse of Arial on Brettro Labs??  It’s true! Tonight in the Labs, Brettro took Typekit out for a spin to see how this new service performs.

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.

This weekend in the labs, I’ll be installing and working with Expression Engine, a very versatile and very popular web content management system. Stay tuned for thoughts and reactions…and maybe even a sample website!

I was surprised to discover today that I hadn’t been back to the Lab in almost a month!  The perfect opportunity to flex a little Lab muscle came in the form of a Vimeo Weekend Project.  Vimeo is a website similar to YouTube: it’s a place to post videos you make so your friends and family can see your work and so hobbyists can comment on and critique your work.

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.

When Adobe Creative Suite CS 4 was released, I decided to upgrade to the Master Collection in hopes that one day I’d be able to “get my hands dirty” in Premiere and After Effects.  I’d always worked in Apple’s Final Cut Suite (including Motion), but had heard that After Effects was better in so many ways.

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

There’s so much to know and learn and explore in the world of creative media design.  And the crazy thing is, I find almost all of it incredibly interesting!  Between the constantly evolving world of Web design, the rapid “mainstreaming” of video production, and the struggle for relevance of print materials, there’s just so much to learn.

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