Coding email newsletters can be a trip down memory lane: nested tables, font tags and plenty of inline styling. This is all fun and games until you run into varying levels of CSS support from different email clients. Luckily Campaign Monitor has an extensive chart detailing CSS support in almost every email client known to man. View the chart online or download a .PDF for handy reference.

The design community seems to be having mixed reactions to this announcement. What do you think? Feel free to share your thoughts in the comments.

Brunello Creative designed and implemented the new website for author Elizabeth Hawes. A biography-memoir, Camus, a Romance reveals the man behind the famous name: the French-Algerian of humble birth and Mediterranean passions; the TB-stricken exile who edited the World War II resistance newspaper Combat; the pied noir in anguish over the Algerian War; the Don Juan who loved a multitude of women; the writer in search of a truer voice.

The Camus, a Romance website is powered by our easy to use content management system–Bruno CMS.

View the website at http://CamusaRomance.com

The Children’s Health website is powered by our easy to use content management system–Bruno CMS.
View the website at http://www.childrenshealthmag.com

Brunello just received our Typekit invite yesterday and I thought I would share with you how easy it was to get Typekit up and running on a demo page.

Check out the simple demo we created using the typeface “Skolar” from Type Together.

Fist Impressions of Typekit

After logging in and tinkering with the free account for a while, I was initially frustrated with the lack of decent fonts. Of course Typekit offers you a much better selection of typefaces for the paid accounts - So I bit the bullet and upgraded to a paid account.

Now when I log-in I’m greeted with hundreds of lovely typefaces ready for use on our website.

Once you select a typeface the Typekit editor pops open in a new window you can then add a class name that will specify the use of the Typekit typeface.

If you click on advanced options you can see how Typekit specifys the font-family in CSS. In order to prevent sneaky type thief’s Typekit splits the type-family into two files and then combines them in the CSS font stack.

Another feature to note is the size of your ‘kit’ in the lower left of the editor. I’ve opted to only use one typeface in order to reduce the size of my kit. Adding several fonts and weights of fonts can easily increase the kit size to 300k.

Implementing Typekit

We have spent quite a bit of time implementing SIFR on client websites in the past - So we were amazed at how easy it was to implement Typekit.

The first step involves throwing a few lines of javascript into the head of your page:

If you want to assign the typeface selectively you can just add the class you specified in your editor:

You can also add the typeface via the font-family css-selector:

Pros and Cons of using Typekit

Pros

1. Typekit web interface is easy to use
2. Easy to implement without a steep learning curve (like SIFR)
3. Makes web designers and typefoundries happy at the same time

We’ve been working on a lot of HTML E-Newsletters lately and thought we would share some of the helpful resources we have found over the past few weeks. Leave a comment and let us know if we missed anything!

1 Beautiful Email Newsletters Gallery

http://www.beautiful-email-newsletters.com/

BEN is a gallery site decidicated solely to email newsletters. Great source for inspiration if you are looking to break outside the normal ‘mold’ of newsletter designs.

2 Mailchimp Email Templates

http://www.mailchimp.com/resources/html_email_templates/

I’ve been using these basic templates from MailChimp for a while. They take the guesswork (and time) out of creating a basic layout for your newsletter. Great way to get a head start on your e-news project.

3 Litmus

http://Litmusapp.com

The most difficult aspect of coding e-newsletter is making it look nice in each email client. This is far more dificult than wrestling with IE6. Most of us dont even have access to all the email clients that exist. This is where Litmus steps in. Litmus will render your email in:

4 Email Standards

http://www.email-standards.org/

Want to know why Gmail is eating your lovely background images? Or why is apple mail 3 not supporting inline css? Check out The Email Standards Project and find out about all those lovely quirks of almost every email client (desktop and web) under the sun.

What resources do you recommend?

Leave a comment and let us know if we missed anything or if you have a favorite resource for E-newsletter design and coding.

MONITOR

Why guess? Use Google Analytics and Woopra to track visits to your site, see where people are coming from, what they’re looking at, and identify areas of opportunity on your site.

OPTIMIZE

Continuously make updates to your website content, make your site easy to find. Search engine optimization (SEO), is an ongoing process of updates and adjustments to maximize the effectiveness of your content.

STAY-TUNED

Know when and why your site goes down, respond immediately and minimize any negative impact.

TEST

How effective are your call to action pages? Find out by using A/B testing with Google Website Optimizer.

PROMOTE

Get the word out about your new site: Try a Direct mail campaign to customers, Pay-per-click advertising, Use social media - Facebook, Twitter, blogs, send out a Press Release.

How does your website score?

Learn more about how Brunello Creative can help you track and improve your website by taking our site analytics quiz.

Mat Marquis and Niki Brown have both recently received Google certification in Google Analytics.

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way. With Google Analytics, you’re more prepared to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites.

Learn more about how Brunello Creative can help you track and improve your website by taking our site analytics quiz.

We spend a lot time making sure our brand, images, messaging, sales presentations are done well, look beautiful and motivate our customers. I think it’s safe to say we take our customer “experience” for granted when people call our comapny. This blog post by Seth Godin made me think a little different - perhaps it will do the same for you…

During Dan Cederholm’s talk at An Event Apart he brought up the topic of progressive enhancement. I’m pretty excited about all the things that CSS3 will allow us to do but I also have some reservations. Do we go crazy and start embracing all these new-fangled CSS selectors or do we look at our content and design and see if they add meaning and clarity to our message?

<Bling />

The excitement around border radius and text shadow are definitely understandable. It makes me think of the HTML days of yesteryear when I was just learning. I thought that <Blink> and <Marquee> were THE COOLEST THINGS IN THE WORLD!!! But let’s stop a second and think - The way I was using these tags were not thought out and they didn’t add to the message I was trying to convey. They were just BLING.

We need to back up our design decisions instead of always jumping on the “cool things” bandwagon.

We Are Guilty…

I worked on a website a few months ago in which I implemented rounded corners.  I have to admit that I really had no reasoning for using border radius on this navigation. Now that I take a look at it again it does not really fit with the design. I think of sports or athletic training as something that’s straight forward and rounded corners are more of a softer touch.

Some Progressive Enhancements To Consider…

Some of the coolest things CSS3 will offers us are border radius, RGBa transparency and text-shadow. Check out these examples of these new CSS selectors in action.

Border Radius

View the CSS

RBGA Transparency

View the CSS

Text Shadow

Apple Style nav tutorial that uses text shadow

Conclusion

Just because you can does not mean you should…unless you have a reason for it.

What do you think?

Do you live by CSS3 and think its the greatest thing since sliced bread? Leave a comment! Are you an ie6 lover and don’t use anything not supported by the outdated browser? I want to hear from you! Chime in and let your voice be heard.