Email Marketing Design

Design Tip of the Week: Email Rendering in Gmail

Thursday, November 5, 2009 by Andrea Smith

This week we’re focusing on email rendering in Gmail. Gmail, like other web-based email clients, is constantly evolving. These updates continually change the way HTML emails are rendered. Not only do email designers need to pay special attention to Gmail, they need to be aware that their Gmail subscribers may be seeing one of two different versions of Gmail. Depending which browser and version you are using, scroll to the bottom of your account and select the “older version” link to test that version of Gmail. To revert back to the newest version, select the “newer version” link in the top right section of the account.

Below are some great tips to consider when building your email campaign in order to create the best experience possible for Gmail subscribers.  

Image Blocking - Alt Tags
 Images are blocked by default in Gmail. Gmail does display stylized “alt” tags, so add those to your design when it makes sense to help create brand synergy. 

CSS
In both versions of Gmail, CSS must be applied inline. External or embedded CSS in the head of the HTML will be stripped out.

 CSS Borders
The newer version of Gmail has difficulty rendering CSS borders in IE8. Occasionally, 1-2 pixels of white space will be added to the left or right side of the content enclosed within the border. This issue affects some designs more than others, so if you have a particular element that depends on symmetry, test both old and new Gmail versions to ensure your design renders properly. If CSS borders are giving you trouble, you may want to consider using a background color combined with a spacer .gif to create the same look.

Background Images
Background images are supported in both versions of Gmail. However, the “background-image” CSS property is not supported, so the HTML “background” attribute must be used to assign a background image. Previously, there were issues using the CSS property “background-repeat”, but that property is also now currently supported.

Gmail Themes
Gmail introduced the concept of “themes” this year, which allow the user to select different combinations of background colors, text and link colors to personalize their inbox. Some combinations may render light text on a light background, or dark text on a dark background. The bottom line: you must specify background, text, and link colors in your HTML, or they may be changed in accordance with your subscriber’s Gmail Theme.

Testing
Always be sure to test in major web browsers like Internet Explorer and Firefox, and remember that there are both newer and older versions of Gmail. Gmail is a great client to test first when finishing your campaign, as it exposes rendering problems and is unforgiving of any HTML syntax errors. 

Personally, I love using Gmail — it has great features including shared docs, calendars, folder organization tools and other interactive capabilities, so let's make sure our subscribers continue to have a great experience in Gmail. Portions of this blog, Design Tip of the Week: Email Rendering in Gmail, and more information on email rendering can be found in our whitepaper "Email Marketing Design: The New Essentials”.

Time for your Halloween email...I mean Holiday Email Program

Monday, October 26, 2009 by Shelly Griffin

I don't know about you, but I like to enjoy each holiday on its own and in order. Especially in the Fall when the three big holidays come hurtling at you back to back from the dark days of Fall: Halloween, Thanksgiving and Christmas. I don't put out Halloween decorations until October, I don't buy a turkey until November and I don't really start planning for Christmas until after Thanksgiving. I definitely do not shop for Christmas presents in July! Who really does that anyway?

Unfortunately in the world of email marketing, you need to start planning your holiday email program now - today - Yesterday! You need to ensure that your emails are planned, designed, tested, scheduled and ready for delivery. The holiday season is when the inbox gets the most congested and without advance planning, your emails may be lost in the crowd. In addition to driving for results, you want to ensure that you are not one of those marketers that over do it - sending a different offer everyday. After just a few of these emails, your subscribers will start ignoring (and deleting) your emails. Chip House spoke to this very subject in a blog post from last year "High Holiday Frequency Drives the Ignore Rate to New Heights".

You also don't want to be one of those marketers that make no significant change or improvement in your email campaign. Those emails seem uninspiring at a time of year when you should be grabbing the attention of your subscribers. Make sure to check out our design tips and tricks at Email Marketing Design blog. Then on top of everything else, there are deliverability challenges at the holidays.

Where will your email program land?

Design Tip of the Week: Email Rendering in Outlook 2007

Thursday, October 22, 2009 by Andrea Smith

written by David Hoang

With the move from Outlook 2003 to 2007, Microsoft made a lot of security improvements. Along with that, however, were a number of design changes. Outlook changed its engine for rendering HTML content from Internet Explorer to Microsoft Word. Before, it essentially meant that if your code looked good in Internet Explorer, it looked good in Outlook.

However, that is not the case anymore.

This is a huge impact in the way we design emails; because of the high volume of Outlook users, particularly in the Business-to-Business realm.

Here are a few key elements to consider while designing email messages in Outlook 2007 to ensure it looks sharp.

Keep your styles in-line
Though Outlook 2007 does support embedded CSS, there are certain properties that present challenges, such as margin, line-height and float/clear. Keep your styles in-line while you are designing. In addition to being an email design best practice, using style attributes in-line will help ensure that your message renders properly.

No Animated .gif files
Animated .gif files will not function in Outlook 2007. However, there is a solution for using .gif files with Outlook 2007. Since the file will not animate, you only need to make sure the first frame makes sense; as that is what will appear in Outlook 2007.

Contain Yourself, No Floating!
Outlook 2007 does not support floating or CSS positioning in any capacity. Use standard HTML tables to contain and control the layout. This will ensure that your design elements won’t go flying all over the place!

Specify Accurate Table Widths
When using HTML tables it is important to specify accurate table widths to ensure proper display in Outlook 2007. This is especially important in table structures that contain multiple columns. For example, when you have a table cell that spans two columns, the width for that cell should equal the sum of the widths of the other two cells.

Continue Using Alt Tags
As it was in Outlook 2003, it is in 2007; images will automatically be blocked. While you’re designing your email message, keep in mind of what it will look like with images disabled. Remember that Outlook will display alt tags, but they will only appear after a default security message. For a list of acceptable tags in Outlook 2007, check out this guide on Microsoft’s website.

No Forms
Outlook 2007 disables embedded forms. If you design an email with a survey or form in the content, include a direct link (hosted from a website) to the survey for your Outlook users. Indicate clearly in your design that the form is not broken, so subscribers don’t get frustrated by trying to fill out the form.

With 2010 quickly approaching, you may be wonder if there will be any major CSS/HTML changes in Outlook 2010. Right now, don’t expect major changes.

To conclude, sticking to standard HTML table design for emails should help you effectively render emails in Outlook 2007. Be sure to read our design tips in the coming weeks for rendering tips in other email clients, including our past issue: Email Rendering in Hotmail by Anna Meier. Portions of this blog, Design Tip of the Week: Email Rendering in Outlook 2007 and more information on email rendering can be found in our white paper “Email Marketing Design: The New Essentials.”

For additional information about rendering in Outlook 2007, check out our white paper, Seven Email Marketing Design Tips for Outlook 2007.

Design Tip of the Week: Email Rendering in Hotmail

Friday, September 25, 2009 by Anna Meier

We know by now that all email clients are not created equal. Your email campaign will not render the same in Outlook 2007 as it does in Yahoo, Gmail or Lotus Notes. This week we’re focusing on email rendering in Hotmail. Look for design tips for other email clients in weeks to come. Below are six important topics to consider when building your email campaign in order to create the best experience possible for Hotmail subscribers.

Preview Pane
Hotmail users have the option of viewing their email in a vertical or horizontal preview pane. Be sure to consider the content of your top left email real estate to ensure your primary message is received. Read Considering the Preview Pane for more information.

Image Blocking - Alt Tags
Images are blocked by default in Hotmail. Hotmail also uses gray rectangles in place of blocked images and does not display “alt” tags. While there is no way to force Hotmail to display “alt” tags, we recommend including them for other email clients that do render them when images are blocked by default.

Images
When a subscriber uses a Firefox browser to view email in Hotmail, the subscriber may see extra white space under images, severely impacting email rendering. Avoid this problem by placing a “display: block” style in image tags: <img src=“image.jpg” style=“display: block;”>. This workaround could potentially cause rendering issues with other email clients, so be certain to test.

*View in Hotmail with images on and off.

Links
Hotmail automatically displays all links without an underline, and the underline only appears when the mouse hovers over a link. If underlined links are desired, you will need to set the “text-decoration” property to underline with inline CSS in the <a> tag of every individual link. For instructions, read last week’s Design Tip of the Week.

Non-Black Default Font Color
Hotmail will set any text without a specific font color to dark gray. To ensure colors maintain brand standards and display as intended, assign a specific color (even if it’s black) to all text in your message.

Avoid Forms
Hotmail will render forms properly, but disables the submit button—so forms will not function as intended. Encourage subscribers to view the email as a webpage or drive them to a website where the form can be rendered properly.

Be sure to read our design tips in the coming weeks for rendering tips in other email clients. Portions of this blog, Design Tip of the Week: Email Rendering in Hotmail, and more information on email rendering can be found in our whitepaper “Email Marketing Design: The New Essentials”.

Utilize Video to Bring Emails to Life

Thursday, September 3, 2009 by Vince PeGan

After receiving an email yesterday linking me to the video of "Ethan the Laughing Baby," I laughed so hard I nearly cried. When done correctly, video can be the perfect medium for grabbing your customer's attention, even if you don't have a cute laughing baby. Has your company thought about adopting a video email campaign?

A recent article on Email Insider shows how some of the nations biggest brands are using video in their 1 to 1 email marketing campaigns. These companies are using new and dynamic design approaches to showcase their products and services. If you want to learn how to create your own unique email design check out ExactTarget's Email Marketing Design: The New Essentials.

Your video can help drive some serious ROI. Last month a download link in the YouTube hit “JK Wedding Entrance" gave Chris Brown's song Forever a serious boost to 50,000 downloads (up from 3,000 the previous week). So what are you waiting for? Grab a camera and get to work.

To keep up to date with the latest in 1 to 1 marketing news and practices sign up for ET InSight & Scene today.

Email Design Tip of the Week: A Designer’s Take on “Presenting Data and Information”, a Seminar by Edward Tufte

Wednesday, August 26, 2009 by Andrea Smith

Several of my colleagues and the Design Solutions team had the opportunity to attend a fantastic seminar in Indianapolis this week given by Edward Tufte. Without diving into the full breadth of his rich background and teachings, Edward Tufte is an influential writer, analytical designer, and landscape sculpture artist. Through his work, he has provided amazing thought leadership into how to effectively display information and content.

This fresh insight begs the question, how can we create better, more effective presentations based on Tufte’s strategy for success? Or in an email marketer’s case, how can we create better emails? Here is what we gleaned:

1. Better Content

If what you have needs improvement or is not working, simply get better content. Make useful comparisons and show them. It’s vastly important to have solid evidence and content before you can begin to develop a great email program.
All presentations (or email programs) stand or fall based on the quality and integrity of the content presented.

2. Effective Presentation

Be as effective as possible in a given space and respect the unique landscape of email. Don’t cloud what you have to say – keep it simple.
Look to your audience for cues. Feel free to teach them or present new information, but respect their time and interests.

3. Redesign

If your communications are cluttered or confusing, redesign them!

As always, check out "Email Marketing Design: The New Essentials" for more design tips and recommendations.

Email Design Tip of the Week: HTML for the Unique Email Landscape

Wednesday, August 19, 2009 by Andrea Smith

As we touch on this issue time and time again, HTML for email can be very different than HTML for websites. Here are a few tips to get started, and for coding veterans, some thoughts to freshen your perspective.

Coding HTML for a Custom Template or an HTML Paste Email

The creative is done, copy is approved – time to start coding and testing for proper rendering! Since the rendering of the email is crucial to ensuring the subscriber has a positive experience, it’s important to choose the appropriate editor to achieve that result. Many popular WYSIWYG editors such as Dreamweaver and FrontPage will work well for web pages, but experience display issues when used to create emails. In a nutshell, this is due to the differences in the way email clients support and display HTML and CSS. There is a firm set of standards in place for coding HTML for web pages, but email standards are still a topic under debate. Programs like Dreamweaver and FrontPage were created with web standards in mind and won’t necessarily generate code that is optimized for email.

Even though these programs are designed with web standards in mind, using them doesn’t guarantee you are left with 100% compliant code. Make sure to avoid using the “Save as a web page” functionality in Microsoft Word. The resulting HTML contains proprietary code and embedded CSS that will not display properly in most email clients.

Advanced Tip
For best results, code HTML emails and templates in a plain-text editor. NotePad and TextEdit come pre-installed on your PC or Mac. Here are our favorites available for download:

E Text Editor (PC)
CoffeeCup (PC)
 Komodo Edit (PC and Mac) 
TextMate (Mac)

These programs output the cleanest html without adding anything extra that may lead to rendering problems. Even better, some editors have productivity tools that allow you to add snippets or pieces of code you might type again and again and allow you to access those snippets with simple keyword triggers. Designer Chris Studabaker elaborates on other productivity tools.

For more design tips and recommendations like this, check out:
Email Marketing Design: The New Essentials

Email Marketing Tip of the Week: Double Check Everything Before Hitting Send

Tuesday, August 11, 2009 by Megan Sabine

We've all been there. You have a deadline that is 10 minutes away, but you are still working on the creative. 9 minutes and 30 seconds later you are miraculously done with the email creative in time and you send it out into the world. A big sigh of relief, and then the sudden feel of dread. Did you remember to change the link, update the copy in the third paragraph, and update the subject line?

Last week I received a few emails with common mistakes. Whether it was a misspelling in the headline or they left a word out in the subject line, I sympathize with the person who hit send on that email newsletter. Every email marketer has been there at one point, and if they haven’t – they will be.

When we (the email marketers of the world) spend endless hours with a communication, we are more likely to see what should be there instead of what is really there. And there is nothing more frustrating than spending that time with an email communication and something being off – even if we are the only ones who notice it.

So the next time you’re about to hit send on an email communication, check the links one more time and read the copy just one more time before you hit send and your work of art is out in the world. I’ve also been known to ask anyone who happens to be walking by my desk to read over it once before I hit send to get another set of eyes on it, you know someone who hasn’t been looking at the html of the email for the last 4 hours straight.

I may (or may not) have been the victim of not double checking everything in the past, but I can tell you that I triple check everything now. So be sure to check things twice before you hit the send button. Not only will you no longer feverishly check everything after you've hit send hoping you didn't forget anything, your subscribers will appreciate the extra effort.

For more tips on creating great one to one marketing emails, check out Email Marketing Design: The New Essentials.

Email Design Tip of the Week: Understanding CSS Support for Email

Wednesday, July 29, 2009 by Justine Jordan

Creating a beautifully designed email that displays properly and consistently across email clients can be a stressful, headache-inducing experience, especially for those new to email. It doesn't have to be! You can plan ahead and anticipate display issues by designing and coding your email with this information in mind.

CSS, or Cascading Style Sheets, is a powerful language that was created to allow web developers the ability to separate content from presentation in web pages. While CSS is a modern standard for the web, it’s history and support in the email world has been rocky at best. There are three different ways that you can use CSS to style your email: External, Embedded (sometimes referred to as Internal), and Inline:

External CSS: External styles are listed on one page or sheet, and the email links to the separate file to reference the styles.

<link rel="stylesheet" type="text/css" href="styles.css">

Embedded (Internal) CSS: Embedded styles are listed in the same fashion as external styles. Rather than the email linking to a separate page to reference the styles, internal styles are listed in the header (or <head> tag) of the email.

<style type="text/css">
a:link {color: #000000}
a:visited {color: #CCCCCC}
a:hover {color: #333333}
a:active {color: #333333}
</style>

Inline CSS: Inline styles are used directly within HTML tags by adding the “style” attribute. The style attribute can contain any CSS property, and will only affect the tag they are applied to.

<a href="http://www.exacttarget.com" style="text-decoration: none;">

Which CSS technique is best for email? To date, the majority of email clients support inline CSS, along with most basic formatting styles. Be mindful that many web-supported CSS properties aren’t consistently supported in email. Among the properties that are well supported in email include: font-family, font-size, font-style, font-weight, color, padding and border.

Remember these tips:

CSS-based layouts are only successful in the most compliant of email clients. Your design will render more consistently when HTML tables are used for layout. The use of embedded or external styles is not recommended for consistent display across email clients (Gmail only supports inline styles).
Many CSS properties popular with web developers have poor support in email. These include (but are not limited to) margin, line-height, clear, list-style-image, position, z-index, background-image, background-position and background-repeat. Avoid the use of these properties, or test thoroughly to ensure your email is displaying as intended.
Small changes in how web-based email clients support CSS occur often and without much fanfare, making a case for frequent and continued testing.
Know your audience. If you have data showing that all of your subscribers use Thunderbird to view their email, you'll have more flexibility in the types of CSS you may use. On the other hand, if most of your audience is using Outlook 2007, you may want to take a more conservative approach.

For more tips on how to design and code for email, download our whitepaper, "Email Marketing Design & Rendering: The New Essentials."

Design Tip of the Week: Using Free Tools for Email Photo Editing

Wednesday, July 8, 2009 by Andrea Smith

Written by Tana Babcock, Email Marketing Designer

As a follow up to a previous post detailing the use of Photoshop.com, there is another useful website that can assist you with your photo editing and other graphics needs. Aviary.com is an inexpensive online resource that allows anyone to sign up for access to an image editor, color editor, effects editor, vector editor, image markup, or screen capture tool. Using this website may be a great solution for those of us that can’t afford pricey software suites, but need a specific size for email images, or web safe colors to match your brand. Although each editor is available for use at no cost, you will find that your no-cost options are very limited. Upgrading to the “premium” package (at $24.99 per year) allows you to have ultimate control over your content. Note – the free version of Aviary.com will attach a watermark to your work.

After you have signed up for your account, you can begin to import your images. Your personal library is located under the “You” tab as “Your Creations”. To resize an image, first upload your file, next, select “Image” then “Image Resize”.

Change the image size to the exact pixel ratio needed to fit into your email. When finished editing, save out your new file.

Once saved, Aviary will supply you with the URL information needed to put into your HTML file. After exiting the “image editor” window, you can navigate back to your library of creations via the “You” tab.

Note: The settings default to “Public Permission”, so you may want to consider editing your account. While on the right hand side of the “You” page, there are a few navigation panels. Within your Profile settings, you will find a tab called “Permissions & License” which will allow you to hide your files as well as copyright protect them. It will not allow you to change these settings until you have uploaded a file.

Aviary is a cost effective and easy-to-use program that puts some image editing tools at your fingertips. Use it for your next email design project to ensure a pixel-perfect layout!

Outlook 2010: The more things change, the more they stay the same.

Friday, June 26, 2009 by Tim Siukola

There has been a great deal of discussion over the past few days concerning Outlook 2010 and Microsoft’s decision to continue to use Microsoft Word to render HTML emails. When Outlook 2007 was first released, Microsoft switched the email rendering engine used in previous versions of Outlook (2000, 2003) from Internet Explorer to Microsoft Word. This caused some major differences in the way HTML emails were displayed since the engine changed from a web browser to word processing software. As a result, support for a number of CSS properties, background images, HTML forms, and animated .gifs was removed.

The current email landscape is very unique and diverse. Emails clients and ISPs each display HTML emails differently due to varying support for HTML and CSS. Unlike the web, there are no set standards in place to govern which HTML attributes and CSS properties email clients should support. Efforts have been made over the past few years by the Email Standards Project to work with email client developers to improve the support of web standards in email. Much of the buzz surrounding Outlook 2010 is a result of the Twitter campaign the group behind the project launched to bring their concerns to Microsoft’s attention. Microsoft has responded with an explanation of their decision to use Word as Outlook’s email editor.

Based upon the Email Standards Project testing with the Outlook 2010 beta, no significant changes were reported. The same display issues that are present in Outlook 2007 remain in 2010. Thankfully, if you have optimized your emails to display properly in 2007 you should be in good shape when 2010 is released next year. Until the final version of the software is available, we won’t know for sure what other differences exist. However, the transition from Outlook 2007 to 2010 shouldn’t be as jarring as it was when we switched from 2003 to 2007.

It’s important to remember that the email landscape is in a constant state of flux, with email clients adding or removing support for various HTML attributes and CSS properties. Because of this, you must remain diligent in your testing efforts to ensure that your subscribers are treated to the most positive inbox experience. Regardless of the outcome, we’ll do our best to provide you with the information necessary to create emails that display the way you intended.

If you are looking for tips on how to code emails for proper display in Outlook 2007, please reference our whitepaper.

For other email design tips please read Email Marketing Design: The New Essentials.

8 Ways to Think Like A Designer, And One Way to Hire One

Tuesday, May 19, 2009 by Justine Jordan

Written by Kristina Schott, Email Marketing Designer

Design is not a deliverable, it’s a process. It’s a way of seeing the world, not the black rimmed glasses on your face or the Chuck Taylors on your feet. Here are a few ideas from ExactTarget’s Design Team on boosting creative thinking.

Always keep a sketchbook handy
You'll never lose a great idea if you write it down. I like Moleskine Pocket-sized plain notebooks.

Write down everything
Don't be shy to write or draw anything that will help you remember it later when it's time to put it into action. An idea can come in the form of a word, color, shape, concept or a feeling. Write down all of them - get those bad ideas out of your head and on paper in order to make room for the good ones.

Change up your scenery
Go to a new place so you can focus on the problem and solution at hand. Depending on your industry, maybe go somewhere to put yourself in the shoes of your subscribers.

Do something repetitive
Have you ever noticed that good ideas arrive while you're lost in the zone of doing something like driving, showering, washing dishes, running, importing lists into ExactTarget...

Abandon a good idea
Are you holding onto a design, color, photograph or concept solely because you personally like it and put time into developing it? These are not good reasons to keep it around if you're starting to discover that it's not a good design solution. The creative process is not a linear path.

Surf for inspiration
Here are some of our favorite web sites for visual inspiration. Browse the items that come up first, or search for keywords associated with your challenge or project.
flickr.com/explore
ffffound.com
smashingmagazine.com
designarchives.aiga.org
digg.com/design
images.google.com

Get active
Free play opens the mind, reduces stress, and creates a positive environment that fosters creative thinking. Kick around the hacky sack, play a quick game of 4-square over lunch, or just throw the stress ball back and forth while talking through concepts.

Embrace restrictions
Remember that not every concept you come up with can translate to email. Love that dancing hamster on your website? Remember that animated gifs aren't consistently supported in email. Can't stand settling for Arial? Sorry, but Univers 67 Bold Condensed is not a web-safe font. See ExactTarget's Design Whitepaper for best practices. Adding limitations will challenge you to push yourself toward creative solutions.

Hire ExactTarget Design Services
Don't have time to navigate the creative process, or need a professional to guide you? Our Moleskine-equipped team is ready to pour our creative energies into your email marketing efforts. Dancing hamsters not included.

Email Design Tip of the Week: Preheader Teaser Text

Tuesday, April 28, 2009 by Justine Jordan

Written by Kristina Schott, Email Marketing Designer

In a previous blog post, we took a look at one customer’s results with testing some variations on their preheader language to encourage subscribers to “view as a webpage.”

We saw that “view this email with images” outperformed “Having trouble viewing this email? Click here.” language by 33%.

The challenge:
Florida Power & Light wanted more subscribers to open their emails in an internet browser due to the robustness of their newsletters.

Viewing an email in an internet browser (Internet Explorer, Firefox, etc.) will allow your subscribers to become more engaged in the email by bypassing the preview pane, image-blocking, survey-blocking, and other inbox rendering issues.

The proposed solution:
One emerging trend we’ve seen is adding teaser text above the “view with images” link in the preheader. This teaser text is also linked to the “view with images” URL, and could be the main topic in an email newsletter, the best offer in a retail email, or an interesting or clear call to action. This text should entice subscribers to click, which also registers an open and opens the email in their browser window.

For Florida Power & Light, we used the main article’s headline as the teaser text. We conducted a random A/B split test.

The original preheader:
View this email with images.

The challenger:
Lower bills in 2009 – Find out more.
View this email with images.

The results:
When comparing tracking from the teaser versus non-teaser emails, the total percent of preheader clickthroughs were identical for both test segments. On the email with both teaser text and view as a webpage language, the teaser received about the same number of clicks as the “view with images” link did. The teaser did not add to the overall number of clicks.

Our Conclusion:
We removed the teaser from their email newsletters because the data didn’t show a clear benefit. As always, make sure to test before adding a teaser permanently. Your audience might respond differently to this type of preheader text!

Post your comments below - we’d love to hear a preheader teaser success story!

Email Design Tip of the Week: Using Free Tools for Photo Editing

Wednesday, April 8, 2009 by Justine Jordan

Written by Tana Babcock, Email Marketing Designer

Often, the Design Team is approached by customers who need their images resized to fit their newly designed template. Because most templates are created with width constraints, it’s important for whoever builds the email to stay true to those guidelines. Not everyone has access to Photoshop, and so keeping within these guidelines can be difficult when you don’t have the right tools to make necessary edits. A nice online tool for image editing is Adobe Photoshop Express. In order to get started you will need to sign up for a free account.

Today I’m working with a two-column template. I need to place an image into the right column that is 250px wide, and will have to resize my image down from 2295px.

Click “Upload Photo” to get started. On the left hand side is a navigation system that allows you to view your library, albums, and log into other online photo sites. Feel free to either upload from your desktop or from the "other sites" section. I will be uploading from my desktop. Select the button “Upload Photos” in the middle of your screen. > Select your photo > Choose destination on the left hand side. You can also select to upload more than one photo at a time. Select Upload, then Select Done.

You should see your newly uploaded photo(s). Select the photo by clicking on it. This will engage the navigation bar along the bottom of the window.

Once you select Edit from this menu, a new page will display. Take a look around the page as there are several important links. The options to cancel, reset, save a copy, or finish can been seen in the bottom right corner of the page. This may come in handy as you play around with the editing tools.

Basic edits
The top left corner navigation has several tools to make basic edits. Select “Resize”. Note that you can reset or cancel in the bottom right corner.

Underneath the photo on the left side you will notice that there are 5 recommended size options for each type of media/purpose. Select each one to see how it affects the image size. Note that these sizes are just an estimate of what might be a good choice for your purposes. It helps to know the size you need the finished image to be for your email. If you select “Email,” note that the image will size to 640px by 480px automatically. We do not recommend using this size of an image – even for your header. Instead, I would opt to select “custom” and change the size manually. Since the right column of my email is 250px wide, I will change the width to match. Since it’s constrained, the height will change proportionally. (Tip: If you are unhappy with your edits, there are undo [red] and redo [green] buttons/arrows underneath the bottom navigation). Now that the image has been sized to the specific width requirement, click Finish, or Save Copy.

Now you’re ready to save your photo. Select Save from the bottom navigation or hover over your photo until you see the option to click on a drop down menu. Hit Save and select your file name and location. Once you have your properly-sized image, you are free to use it in your emails.

Photoshop Express is a cost effective and easy-to-use program that puts some image editing tools at your fingertips. Use it for your next email design project when you don't have access to a more robust program.

Email Design Tip of the Week: View as a Webpage Language

Wednesday, April 1, 2009 by Justine Jordan

Written by Kristina Schott, Email Marketing Designer

One element of email design that has been receiving increased industry buzz lately is the preheader. The term preheader is used to refer to the area above the graphic header in an email. It may contain prompts to view the email “as a webpage,” add the from address to an address book, or provide a line of “teaser” text about the content of the message.

One element of the preheader that is often overlooked is the language used for the “view as a webpage” link. The use of this link is fairly universal by now, but do your subscribers know what "view as a webpage" means?

We partnered with Florida Power & Light to conduct a multi-variant test on their preheader strategy. We tested two preheaders with their monthly email newsletter subscribers.

Their original preheader:
Having trouble viewing this e-mail? Click here.

This is the preheader that Florida Power & Light had been using previously; keeping the language general covered not only image-blocking, but survey-blocking, and a limited view within an email client's preview pane.

The challenger:
View this e-mail with images.

It was our hope that by explicitly mentioning that there are supposed to be images in the email, subscribers viewing in an image-blocking inbox might realize that they're not seeing the email as intended.

The results:
The “view this email with images” language outperformed “Click here if you have trouble viewing this email” by 33%.

Our Conclusion:
Consumers can quickly understand the “view with images” benefit, while language such as “view in a web browser,” “view online,” and “having trouble” don’t provide that immediate understandable benefit.

As always, make sure to test this with your subscriber base before switching your preheader language. Your audience might respond to a different call-to-action.

Stay tuned for part two... we also tested “teaser” text in the preheader.

Email Design Tip of the Week: Create Brand Synergy with Styled "Alt" Tags!

Monday, March 2, 2009 by Justine Jordan

Written by Anna Meier, Email Marketing Designer

When viewing emails, we are all accustomed to most email clients blocking images by default. That is the main reason to include "alt" tags in our images. This HTML attribute is added to the <img> tag, and will display in some cases when images are blocked or cannot be rendered. But did you know you can add style to those "alt" tags?

CSS styling for "alt" tags is supported in many email clients including Yahoo Mail, Thunderbird, AOL, Gmail and Entourage. Font-family, font-size, and color are supported when viewing in Firefox, while Internet Explorer is limited to the color property.

Below is an example of an email with images blocked. The top represents an "alt" tag without any styling, while the bottom uses CSS styling to specify the font, size, and color of the "alt" tag, along with a background color.

Big difference, you say? I couldn't agree more!

"Alt" tag without CSS styling
<td width="400"><img alt="Northern Trail Outfitters" src="image.jpg" width="400" height="150" border="0" style="display: block;"></td>

"Alt" tag with CSS styling
<td width="400" bgcolor="#586976"><img alt="Northern Trail Outfitters" src="image.jpg" width="400" height="150" border="0" style="font-family: Arial; color: #ffffff; font-size: 36px; display: block;"></td>

After specifying the font, size and color of the "alt" tag, our email is on brand even when images are off. By adding this small detail you can make a big difference in your subscribers' email experience. While this technique may not be visible to all subscriber views, there is no adverse effect in those clients or browsers that do not support styled "alt" tags. Even better, the subscriber experience and your preview pane "punch" is maximized for those subscribers viewing in a supported environment.

(Findings based on testing in Firefox 3.0.x, IE6, IE7)

For more Email Design tips and tricks, check out our Email Design Whitepaper.

Email Design Tip of the Week: Make Your Welcome Email Design Inviting!

Tuesday, February 24, 2009 by Tim Siukola

Welcome emails play a vital role in the success of your email program. Since they are the first communication your subscribers receive you want to ensure that your design makes a positive first impression. Our very own Brett Brewer recently shared some guidelines on how to maximize your welcome stream in his Strategy Tip of the Week. I'd like to share with you some specific design tips to help further the impact of your welcome communications. This ULTA welcome email provides examples of a number of these suggestions.

Pack the preview pane: As with any email design it is important to include as much information in the preview pane as possible. This is the ideal location for a bulleted list highlighting the benefits of your program. This allows subscribers to easily identify this info and provides you with the opportunity to set expectations about the content of your emails as well as their frequency.
Get your name in their address book: There has been recent debate about the merits of taking up valuable screen real estate with a plea to get added to your subscriber's address book or safe sender's list. While you may want to reserve this space for other pre-header content in your regular emails the welcome email is the ideal communication to include it since they tend to be the most opened and read emails. The benefits are twofold. First, being in their address book helps keep your email in their inbox and out of the spam folder. Second, in the case of Yahoo and Hotmail, the blocking of images is bypassed ensuring an automatic open when they view the email in their preview pane or click to view the full message.
Include an offer to jump-start their interaction: Including a special promotion in a welcome email can generate high click-through and engagement rates. This will incentivize your subscribers to deepen their relationship with your brand and shows that you appreciate their email subscription. These promotions may include special offers, such as coupons or insider information about a current sale.
Provide additional options for subscribers to engage: Since you have their undivided attention, this a good opportunity to provide other engagement links to helpful areas on your website as well as promote your loyalty program. The ULTA email includes links to their store locator, current ad, brand specific page, and special offers page. They have also included an opportunity for subscriber to provide additional profile information that can help them deliver relevant content in future emails.
Use web safe fonts: In order to combat image-blocking make sure you include as much HTML text in web safe fonts as possible. In the ULTA email, web safe fonts were used for the majority of the text content so that even with the images off, the subscriber can easily see the important information.

In the same way a properly designed wedding invitation can build excitement for the event, an optimized welcome email will encourage your subscribers to "RSVP" with opens and clicks for the future emails to come.

Special thanks to Tana Babcock, Email Marketing Designer, for her contributions to this post.

Design Tip of the Week: Refresh Your Navigation

Tuesday, February 17, 2009 by Justine Jordan

Written by Andrea Smith, Email Marketing Designer

It is well known by now that your brand's email is not simply a copy of your website. One of the most important things on a website is its navigation - ease of use, organization, and placement - all key to getting repeat visitors that successfully navigate what you're offering.

Email however, is a little different. You want subscribers to engage with the information presented, move through the topics relevant to them, and act upon it - all before hitting spam, deleting, or losing interest. As it takes up valuable real estate in an email, consider carefully what navigation you do or do not include. Large navigation bars in an email prompt clicking directly back into your brand's website often before any of the content is digested. Is this your goal? While some links are helpful and even necessary, carefully ponder your call to action and how you can successfully leverage your navigation - whether displayed prominently but selectively at the top, or discreetly at the bottom.

Advance Auto Parts Website

Advance Auto Parts Email Header

When we redesigned Advance Auto Part's email program, we kept parts of the navigation that would be relevant and necessary in an email, without taking up too much valuable space in the preview pane. The look and feel of the brand was maintained, but also designed appropriately for the medium.

Consider this a lesson well learned for email: less is often more!

Every email marketer looks better in tights

Tuesday, January 27, 2009 by Nicole Ross

Does it ever feel like you're the odd man out? Marching to the beat of your own drum? Poorly dressed for the occasion?

Well, so has our little tutu-clad friend below. In a genius stroke of creativity and dare I say grace, this online job site created a direct mail piece that

said everything they had to say -- in just 5 words.

"Stuck in the wrong job?"

Aside from being completely comical, this package of army men +1 does a great job demonstrating the value proposition of their business. Helping people find the perfect career for them. Admit it, this piece is brilliant.

How well are you demonstrating the value proposition of your email marketing program to subscribers? Can they look at your opt-in page and instantly know WHY they should sign up for your email marketing program?

Not to brag, but I think Megan's done a great job displaying the value proposition for ExactTarget's InSight eNewsletter on our opt-in page. She's got a quick-hit bulleted list of exactly why readers should sign up (some pretty good reasons, too), links to preview sample newsletters, and a subscription center that lets readers select the topics they want to hear about most. Email marketing design? Got it. Deliverability and CAN-SPAM compliance? That too. Even email marketing best practices. It's all there.

Moral of the story? Your value proposition is critical to creating one of hte best email marketing programs around. How clear is yours?

Nicole
Marketing Communications Associate

Video in Email - My Two Cents: Entry 1

Monday, January 26, 2009 by Chip House

I was reflecting on the advice of some of my esteemed colleagues who are both experts in their own right in email marketing. First is Ryan Warren who leads our solutions consulting team and knows quite a bit about email marketing, design, advertising and database marketing. Ryan posted a blog last week titled: “Forget Using Video in Email.”

Right after the blog was first posted on 1/16/09 it quickly yielded a few comments – all of them disagreeing with Ryan’s premise. Ryan went on to clarify his position, which is essentially that video and email aren’t a good fit due to file size, software protection interruptions, and lack of ability to measure “engagement” when someone is just viewing a video in an email. Ryan’s point (which I mostly buy into) is that it is better to “link” to a video in a landing page that is armed with web analytics than to run the video in the email body. His reasoning is that a click to a video would indicate a higher level of customer engagement in your campaign, whereas you wouldn’t know how much of a video (if any of it) had been watched while the email was open.

Personally, however, I can think of a number of reasons why you’d like to get the video rolling when an email is opened. The video can drive engagement, not just be the recipient of it. In fact, we already know it works as an engagement device since we have a number of users that get more clicks from web pages with videos than they do for static text or HTML pages.

Yet, Ryan makes a compelling case. And he is likely very right in some cases, for some set of brands or consumers. But, he could be wrong for yours, which is all that is relevant to you. Ultimately email (direct marketing in general) is about testing.

See Morgan Stewart’s post if you want to get a perspective on the concept of “Best Practices.” From this post:
“I like the definition on Wikipedia that basically says a "best practice" is a technique, method or process which is:
1)    more effective, more efficient, or both
2)    than any other technique, method, process, etc.
3)    based on repeatable procedures over time for large numbers of people”

However, above and beyond any argument we have on the effectiveness of video in email, actually running a video in email has had its set of technical challenges in the past. As I learned from our partner Goodmail Systems, this could all be changing. They plan to introduce a Certified Video product this year that leverages their agreements with ISPs to run video right in the body of the email.

Stay tuned for some head to head tests.

The ExactTarget Blog

Follow Us On...

Recent Entries

Authors

Categories