Working with agencies, we often receive beautiful layouts with clever marketing that could win design awards in print and other online mediums. However, we are frequently the bearers of bad news when we have to tell them that their layouts are lousy for email marketing. For tips on how to stay creative and still get through to your audience, click here.

Did you miss our latest issue of Factory Direct? Click here to subscribe!

Many of us have been there before: you spend hours carefully crafting your email, including all the CSS and images you need to convey your message in an artful and eye-catching way, and when you receive it in Outlook 2007 or Gmail the email is stripped down to almost text-only content. Every email program renders your email differently due to inconsistent web standards, causing major frustration when coding emails. A new organization is out to change that.

The Email Standards Project aims to open the lines of communication between email client developers and designers to help improve web standards support for designers and accessibility for readers. The site includes a bevy of information on the differences between email clients, including the web standards used by each and examples of test renderings. The biggest offenders (needing improvement) are:

Apple .Mac
Google Gmail
Lotus Notes 8
Microsoft Outlook 2007
Windows Live Hotmail

The ultimate goal of the project is to educate designers in hopes of getting them involved, and to provide feedback to the email client developers to help make the changes. This is not only a very exciting step in the right direction for email marketing, but it’s also an opportunity for email designers to learn more about best practices in designing emails for accessibility by all.

To read more about the project or to get involved, click here.

Over the last 5 years, the world of website design has experienced a progressive shift in the way HTML is built. Table-based layouts are slowly becoming a dying art. Now, CSS (Cascading Style Sheets) layouts are far superior. They are lightweight, load fast, and are incredibly easy to build, thus reducing production time considerably. The shift is a good thing. Unfortunately, this shift has been dramatically hindered in the world of email design.

Email browsers still prefer tables. There is no way around that. You can send a CSS email to your list, but you better have a “View this email in your web browser” link at the top because it could get ugly. Chances are Gmail, Hotmail, and yes, even Outlook are going to eat your design for breakfast. Specifically, these email browsers scan your code and remove “style” or “link” elements anywhere on the page. This in turn kills any chance of your strictly CSS-based layout of displaying how you intended. So how do you get away with incorporating CSS while still keeping your layout intact?

Get inline.

Maximizing layout integrity across multiple email browsers while still being able to use some of the great advantages of CSS design is not unachievable, you just have to get a little sneaky. Inline style embedding is a method of incorporating CSS mark-up into your table cells. The table cell then takes on the parameters of the style that you set. Take a look the graphic below for an example.

This method works in almost every email browser. Plus, your layout is still going to be table-based. So if for some reason the style attributes don’t work, your content will fall nicely into the table cell it’s sitting in, causing a subtle break instead of a dramatic one. Inline styles will save you a lot of headaches when designing with tables and save you time as well.

While inline styles are a great work-around, they are still not perfect. Even when using inline style, some of the more advanced properties of CSS will not work in email. It’s best to stick with the basics. Background color, padding, margin, and font properties are among the select classes that are widely acceptable. Another drawback to the inline technique is that it has to be repeated for every table cell. Plan to get very familiar with your copy/paste key commands.

You’ve probably used inline CSS without even knowing it. It’s not strictly limited to table cells. You can use it in your “div” and “span” tags too. I tend to use it in web design when I know a particular style will only occur once. That way you don’t clutter up your external style sheet.

In email design, inline styles are an easy thing to do and an excellent practice to ensure your email is rendered properly across various email clients. Eventually, CSS will have the freedom in email as it does on the web. Until that great day, this is a nice work-around to keep you happy.

If you have any questions or comments about using inline styles in email designs, feel free to contact us at bsfinfo@blueskyfactory.com.

Across the industry, desginers are going back to the basics regarding their email creative. These simple guidelines will not only help your email render well across the various email clients, but will also make your email stand out above the rest. Click here to view our 2007 Email Design Guidelines, as featured in this month’s issue of Factory Direct.

Get your copy of the printer-friendly PDF verison of this guide here:

2007EmailDesignGuidelines.pdf

Don’t miss out on another issue of our monthly e-newsletter, Factory Direct! Click here to subscribe.

We have read many articles and heard many people state this over and over again: Place your important information “above the fold.” Or in the case of email, in the preview pane.

Here are three small changes and that could make a big difference in your clicks, conversions, opens and even deliverability.

1) Place your call to action in the top part of your email. Make sure that your recipients can click on the call action link without scrolling down. You can include a link again at the bottom for good measure, but by adding it to the top you may garner a better click rate and possibly a high conversion.

2) Add a link to view the email in a browser. If an email client scrambles your HTML or the client has their images blocked, this will allow them to still view your email. You can use Publicaster to do this without hosting a version of your email on your website.

3) Ask recipients to add your from address to their address book. A small line of plain text at the top of the email asking to be white-listed can help ensure that your future emails get to the inbox.

These steps are easy to implement and should improve your email marketing results.

This post was derived from my recent speaking engagement at Click Z’s Specific: Email Marketing conference in NYC. I gave a talk titled “Cutting Through the Clutter Creatively” which focused on why marketers should be strategic when considering the creative variables that make up their email marketing campaigns.

More than ever the inbox is a challenging place to capture the attention of your recipients. Some of the stats that I referenced at my talk include the Nielsen Norman research whichs states that the average recipient of marketing or promotional email has an attention span of your email of five seconds or less. And those monthly newsletters we all work so hard on producing typically only capture the attention of users for 40-50 seconds max. This information reinforces the fact that creative elements can sometimes make or break your email marketing efforts.

The key creative variables in email that marketers must embrace are the following:

From: Build the trust of your recipients by making your identity obvious. Be consistent with your From line, make sure its branded with your company name or an individual from your organization.

Subject Line: Jupiter Research found that 35% of email users open email based on what is contained within the subject line. Be sure to include your company name or brand name within the subject line, as recent research shows this can have a dramatic effect on open rates.

Copy: Personalized, targeted and relevant are three words that should define the copy in your email marketing campaigns. Write clear and concise copy, putting your main message and identifiers above the fold, and make sure you use fonts and a font size that makes reading your email easy on the eye.

Imagery: Always include your company logo at the top right or somewhere on the header. This helps with establishing the brand recognition. Always have your audience in mind and use relevant imagery that is targeted towards your recipent and tailored around your message. Be sure to hyperlink all imagery to your main call to action.

Call to Action: Place your key call to action above the fold as often as possible. During your testing phase, conduct your own internal “5 second test” to a small group of individuals to make sure your call to action is clear and to the point.

During my talk I also mentioned the importance of keeping your landing page consistent with your email creative. If you do manage to get a recipient to open and then act on your email, don’t lead them astray. Targeted landing pages with consistent creative elements can go a long way in increasing your conversion rate.

Finally, we all know that one of the best attributes of the email medium is that its easy to test and tweak your initiative. Every audience is different, so learn as much as you can about your list of recipients by testing a variety of creative elements before drawing any hard conclusions on what works and what doesn’t.

If you are interested in receiving a copy of my power point presentation from Click Z Specifics, feel free to email me at greg [at] blueskyfactory [dot] com.

Happy emailing!

This is one of those topics that may be elementary to some, mystifying to others….but either way it’s an important topic for email marketers.

Seems logical that all email marketers would want to deliver a Multipart email to optimize delivery and performance, yet a surprising number of companies choose not to include the Plain Text version.

Quick Review: Multipart email format allows you to set up both an HTML and a Plain Text version of your email. The goal being to ensure that anyone who can’t see HTML will still receive a Plain Text version.

With Multipart format, however, if you don’t provide a plain text version of your email when you set it up, and a recipient can’t get an HTML version (ie., Blackberry, Treo….) then they won’t see anything but a blank email….not something companies want to have happen.

The alternative is to choose to send an HTML Only version, rather than a Multipart version. With an HTML Only set-up, those users who can’t receive HTML format emails will instead receive the HTML version stripped of all HTML formatting. In essence they will see a modified Plain Text version consisting only of the pure text left over from the HTML version before it was stripped down….

It’s not the best option to choose, but in most cases it’s better than sending a blank email.

What’s the lesson here?

The best choice is Multipart format, but if adding a Plain Text version isn’t in your plans, then consider sending an HTML Only format to increase your odds for success!

According to a recent article in Marketing Sherpa, 69% of Outlook users employ some type of email preview before opening it. They discovered that many heavy emailers (themselves included) do not take this feature under consideration when designing an email. Basically, the first 3 lines of text in your email are displayed in Outlook’s auto-preview as well as many portable electronic devices that read email.

The trick is to make those first 3 lines compelling copy. Try to avoid putting administration text first like: “Click here to view this email with images” or your issue date and issue number. Also, try and make this text as intriguing as possible. It will be competing with other email to get read, so consider standing out with CAPITAL LETTERS or text symbols to catch the eye:-)

Try viewing some of your own designs in auto-preview and see how compelled you are to open them. Here is a link to good and bad samples to help model your next design.
http://www.marketingsherpa.com/cs/epreview/study.html

Here is a great article from the ClickZ network that goes over some of the best practices of formatting your HTML email. Great tips for consideration when developing your email campaigns.

• Code e-mail by hand. HTML design for e-mail is trickier than Web HTML. HTML design programs such as FrontPage aren’t ideal for designing HTML e-mail. They typically add extra code that wreaks havoc with certain e-mail clients. Also, don’t use Microsoft Word’s “Save as Web Page” functions. It looks easy, but trust us — you’ll commit an HTML abomination.
• Have an HTML programmer code your e-mail template by hand to keep it clean. Alternately, use programs such as HomeSite and Dreamweaver and remove any unnecessary code by hand.
• Be careful with tables. Avoid using nested tables. Some e-mail clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly. Also, avoid 1 x 1 pixel spacer GIFs (to force widths in your table data cells). These are often found in spam and could get your e-mail blocked.
• Use care with background images. Background images for individual table cells are generally acceptable but may not appear in clients such as Lotus Notes.
• Host images on your Web site instead of embedding them in messages. Some ISPs filter e-mail with embedded images. File size can get quite large with multiple embedded images, which can also get the message blocked. Instead, host those images on your Web site and make sure all paths point to the full URL (e.g., http://www.mysite.com/images). Additionally, use absolute rather than relative links. We often see messages with broken images that pointing to “images\image.gif” rather than a full absolute link.
• Avoid CSS. CSS on a Web site can simplify the coding process and ensure a consistent style. In HTML e-mail, they can cause incorrect rendering in some e-mail clients, or get stripped out or overwritten. If you must use CSS, choose the embedded styles also known as inline. Embed the style within the two body tags, not within the header. Inline CSS can also be embedded directly in the message code.
• Keep HTML e-mail 500-650 pixels wide. Wider HTML messages often force the recipient to scroll horizontally to view the whole message. Messages that are too wide are problematic, especially in a preview pane.
• Use image alt tags. These show one or two words describing an image or an action when the image doesn’t display because of slow loading time or image blocking. (However, except for Gmail, most ISPs/e-mail clients that block images also block alt tags.) A sample alt tag looks like this: “E-mail marketing solutions”
• Add functionalities (e.g., send to a friend) carefully. Many e-mail clients won’t render forms correctly or pass data from an e-mail form to your Web site. Use links to your Web site for send-to-friend forms, surveys, search boxes, and so forth to ensure the greatest compatibility.
• Just say no to Flash. Host rich-media functions such as inline audio, video, or Flash on your Web site instead of embedding them in an e-mail. Post a link that connects directly to these functions on your site. Many recipients won’t have the compatible computer platform, e-mail software, or correct version they need to render those functions correctly.
• Avoid scripting (JavaScript, Visual Basic etc.) if you can. Usually the scripts will be stripped out, causing the intended function to break. Sometimes scripts are mistaken for malicious code and get the message rejected outright. Instead, move readers to your Web site, where you can more safely use dynamic components.

This is simple, but I’ve noticed lately that it is often overlooked.

We all know that there are four critical elements for every email:

-Content (email creative, message, offer, landing page, etc.)
-From Line
-Reply To email address
-Subject Line

When preparing an email, it’s very important to test the email to be sure everything works, that there are no spellling or other grammatical errors, etc., but it’s also important to focus on something else….

How does the email look when it lands in the Inbox, and what is the First Impression!

How does the From Line look, and how does it look with the Reply To email address? Is it too long? Misleading? Odd looking?

It’s important to be consistent as you continue to email, so it’s important to get it right the first time so you don’t have to keep making changes.

How does the Subject Line appear? Test some variations to see if you can find something that seems better, and gets a better response with your test audience.

Test in a few different email clients if you are sending to web-based email clients like Yahoo, AOL, Hotmail, etc. (you can set up free accounts very easily). And ask colleagues, friends, relatives, etc., to give you their own first impressions before locking into to a final format…

Email testing is too easy to skip….and it may make a world of difference in your success!