Email 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”.

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.

Email Design Tip of the Week: 3-2-1, Wait! A Checklist Before Hitting Send

Wednesday, October 14, 2009 by Andrea Smith

written by David Hoang

Question: When do email marketing professionals usually take a break or step out?

Answer: When he or she just hit the “send” button for a mass email.

There is nothing more nerve wracking than hitting the button with no return. Unlike web publishing, there is no turning back with email. So what’s the solution? You can say, “don’t make any mistakes” – but it’s inevitable. What you can do, however, is strategically make a checklist of what to do before hitting the send button to make sure mistakes are avoided.

Here are some quick tips on what you should run through your mind; so you don’t have to leave the building after delivering an email:

Is it legit? After every round of revisions, always validate the message; the simplest way to see if you have everything to get it out the door: physical address, unsubscribe link, etc.
Do an email test. It's practically unheard of wherein you send out a mass email campaign without testing; so don’t do it. Set up a few test email accounts (Outlook, Gmail, Hotmail, Yahoo!, AOL, etc.) and spend some time to see how it looks in each email client.
Spell check. Repeat. Your email delivery is intended for 1-to-1 marketing, so write like you’re taking quality time to communicate with your subscribers. Run spell check, manually look for spelling errors and yes, read the message out loud. If this seems like too much work, make someone else do it!

As much as email marketing is mass-produced, the one-to-one messaging is its key to effectiveness. Therefore taking time to communicate a message and doing it correctly, with no spelling and grammatical errors, should be top priority. Not only will avoiding these common pitfalls save you face, it will also make your recipients feel like you have taken that extra step to make sure it's perfect.

Check the details. Take a look at every aspect of your message to make sure something is not missing. Do you have a subject line? Is it the correct one? Do all of the links in the email go to the proper pages?
Do a final once-over. Think of this as when you were taught crossing the street. Look left, look right, then look left again. Test your email to make sure that there are no mistakes, especially if revisions were made. Scan with the mindset that you are looking for mistakes. If you don’t find them, hit the send button.

Ultimately, you want to come up with a method that's most comfortable to you. Make an actual checklist and cross off the steps as you prepare the send. With a routine checklist in mind, you can hopefully sit back and relax (a little bit more) after delivery.

Email Design Tip of the Week: Designer’s Top Ten Countdown to Connections

Wednesday, October 7, 2009 by Kristina Schott

Connections is less than a week away, and the Design Solutions team is anxiously awaiting the fanfare, fun, and finale. Here's how to make the most of ten designerly highlights of Connections from the Design Solutions team.

10. Grab some Design Solutions Schwag at the Design Solutions booth in the Expo Hall. No boring pens or notepads here; we're outfitted with fun, unique, pilfer-worthy schwag and design resources.

9. Mingle in the Expo Hall: Dig up plenty of those business cards, pop a tic tac, and practice being a social butterfly in the Expo Hall. You have something in common with everyone here, so introduce yourself to a lonely stranger and start dropping some one-to-one marketing buzzwords.
8. Check out the evening Reception at The IMA: the galleries, sprawling gardens and grounds, set the stage for artful fun. Bring your camera for a photo op at the iconic LOVE sculpture.

7. See Kelly Mooney, keynote speaker; your brand will benefit from the insights of her book, "The Open Brand: When Push Comes to Pull in a Web-Made World."

6. Rock out with They Might be Giants at the historic Murat Centre. Don't forget to pack your dancing shoes for this one; do a little studying beforehand by listening to the 30-second previews on iTunes. You'll end up buying it.

5. Attend the Designed by Success panel; we can't wait to see all the examples that Email Data Source has pulled together. Get a seat in the front row to absorb as much design karma from Lisa Harmon as possible.

4. Video in email is a favorite topic of conversation lately; whether you love it, hate it, or just want to know the emerging best practices for video in email, come sit in on the Video in Email Panel, featuring a talented member of the Design Solutions team.

3. Get some expert advice from a Design Consultant at the Design Solutions Booth in the Expo Hall. The team is offering free Email Critiques. We can't wait to see what you're creating!

2. Malcolm Gladwell

1. Extreme Makeover, the Email Design Competition; see three incredible teams' redesigns for three clients, vote for your favorite, and watch the dramatic reveal!

Designer's Top Ten Countdown to Connections

Email Design Tip of the Week: Extreme Makeover, The Email Design Competition

Thursday, September 17, 2009 by Andrea Smith

We’ve blogged about it before, but we’re so excited we just have to share it again. The Design Solutions team is currently knee-deep working on one of ExactTarget’s premier main-stage events at Connections 2009. Still don’t know what I’m talking about? It’s simple – you can’t afford to miss:

Extreme Makeover: The Email Design Competition.
Connections 2009, Indianapolis, IN • Thursday, Oct. 15th, 10:00 – 11:00am

The specifics
Three design teams compete. Only one can win! Design teams from ExactTarget, Mighty Interactive, and Smith-Harmon have redesigned and will soon deploy their take on emails for three different ExactTarget clients. First join each team as they present their hard work, vote for your favorite via text, and then watch in anticipation as MarketingExperiments reveals both the fan favorites and the results of each battle as measured by clicks and conversions.

COMPETITORS: ExactTarget, Mighty Interactive, Smith-Harmon 
CLIENT PARTICIPANTS: MarketingExperiments, AAA, Pier 1
 JUDGE: MarketingExperiments

This is an amazing opportunity to see not only how important it is to have good design in email, but also how strategy, content hierarchy, and the unique email landscape come together for performance-driven success. Be sure to join us!

Design Solutions
In addition to the Extreme Makeover Competition, don't miss the ExactTarget Design Solutions team at our booth in the expo hall. Bring all your burning questions, sneak a quick critique and talk to the experts!

What do you mean my tracking is phishing?

Monday, September 14, 2009 by Karen Balle

Click tracking. We all do it. It's a best email practice. We all want to see who is following our links, what draws our subscribers in. Was this targeted email marketing campaign effective? What was the most interesting part of the email? Where are my readers engaged? Was this email campaign better targeted than last week's?

But how you do it makes a huge difference with spam and virus filters. What do I mean? I'll tell you a secret. Phishers and spammers like to use IP addresses and URIs of popular websites in the text of their emails and then put in HTML that makes it look like the recipient is clicking on http://www.bank.com. But you don't do that, right? What you might do is use http://www.partnercompany.com or even http://www.yourbusinesssite.com in the email that you're sending out through your favorite ESP, ExactTarget.

That's a no-no. Definitely not an email deliverability best practice. Why not? Because you want us to track email clicks in those targeted emails. You have a domain set aside just for us and that's the domain that we use for your email campaigns. Your subscribers see http://www.yourbusinesssite.com, but they click on a link to http://email-yourbusinesssite.com.

And that, my friends, looks like you're trying to be tricksy.
"So what do we do, email guru?" you cry in despair. Let me give you a little email design tip that will make a huge difference with filters like Postini and MessageLabs (both of which are used frequently in B2B email), or email providers like Gmail and Hotmail.

Use your words. Wow your targeted opt-in audience with your awesome descriptive powers.

What's more appealing to you anyway? I know which one I'd click on.

Look how we've grown! or http://www.exacttarget.co.uk/
Come party with us! or http://www.connections09.com

Design Tip of the Week: Don’t miss out on Connections '09

Thursday, September 10, 2009 by Tana Babcock

Time is closing in for the Connections 2009 registration – it’s a little over a month away! If you haven’t registered yet, you should, as this is the largest one-to-one marketing conference in the world. With this year’s theme being “Success By Design” it’s no wonder the Design Solutions team will be fully involved. Several email design experts will be available for quick email critiques and questions regarding your email program. Stop by our booth in the Expo Hall, say hello, find out our exciting news and pick up some Design Solutions schwag too!

Still want more from the design team? Take a closer look at this intense breakout session agenda bringing you insight from some of the sharpest marketers in the industry! Let me just point out a few places you’re likely to run into a designer…

On Wednesday October 14th, join two of our top designers for the Designed By Success panel (noted in the Content Track) as they discuss the current landscape of email creative.

Better still, check out the Email + Video: Take 2 panel (noted in the Optimization Track) for a solid perspective on how video can work for your program, tips on usage, and other insights.

FINALLY, please make sure that you check out Extreme Makeover: The Email Design Competition! Thursday morning starts off with a bang with a design face-off between Mighty Interactive, Smith-Harmon, and yours truly, ExactTarget. Two months have been devoted to building the best email designs for MarketingExperiments, AAA, and Pier 1. The results of the competition, based on actual success metrics, will be revealed for the first time in this session. Be sure to join us for the unveiling and get your chance to vote for which email design you like best.

Check out our Flickr account for a great visual representation of the fun we had last year. And don’t forget to check out this star-studded list of events for further entertainment!

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: JavaScript in Email?

Thursday, September 3, 2009 by Andrea Smith

written by Michael Moriarty

Currently, Javascript paired with HTML is more or less the norm on the web as a large percentage of websites use it for high-level functionality. Why then aren’t we seeing more Javascript-infused email campaigns? Is it even possible? Including Javascript in email is possible, but that doesn’t mean it should be included. Let’s examine why.

JavaScript is stripped out of HTML email by default in all major email clients. JavaScript is a powerful vector for executing malicious code on a user’s computer — let’s compare a user’s experience browsing the web against a user browsing their email inbox. A user browsing the web has more control to avoid dangerous websites. If a website looks sketchy, it’s common sense to not click anything except the ‘back’ button. With web, there’s an opportunity to visually inspect a link’s destination or surroundings before clicking anything. Modern browsers also help protect users against phishing and virus-laden websites by letting the user know that they are about to stumble into a dangerous area.

Email, however, puts the control in the hands of the sender. This is one reason why so many malicious emails exist, as opposed to websites. The recipient only has the from name and the subject line to judge whether or not to open an email, both of which can be manipulated by spammers. Spam filters are in place to help mitigate this problem, and while they do a pretty good job, some spam may eventually make it through. JavaScript can be used to perform malicious activities upon email open, so if the from name and subject line are crafted properly, it can be very difficult to avoid being compromised by an email containing malicious JavaScript. As a result, all major email clients strip JavaScript out of emails by default. You can include JavaScript in your email to your hearts content, but doing so could harm your deliverability and cause your email to end up in the junk or spam folder.

Thankfully, JavaScript isn’t necessary to craft a successful email campaign. Consult our design best practices whitepaper if you are having trouble getting the results you expect, or if you DO want to use JavaScript, include it in a landing page — check out our landing page field guide.

return 0;
Mike

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.

Let’s Get Personal

Wednesday, August 19, 2009 by Beth Leleck

This year in Insight, we’ve brought you our One-to-One marketing Field Guide Set, 2009 Email List Growth Study, Email Design Checklist and much, much more. But is it what you really want?

I’m a one-to-one marketer just like you. With every email send, I’m glued to the results to see how many opens I’m getting, and what links receive the highest clicks. When open rates on a new subject line top the charts, I get excited thinking about what I can come up with to beat those results the next time around. I learn a lot from testing elements of our communications and analyzing the results. As smart marketers, we all know the value in the numbers, and proving the execution of our strategies back to a strong ROI. I could go on and on about what our newsletter metrics have told me, but I want to go beyond the numbers. That’s right…it’s time to get personal.

After all, InSight is about you! Does this communication give you everything you need to be a successful one-to-one marketer? Does it answer your questions about deliverability and design, while keeping you up-to-date on the latest features in your account? While the numbers can tell me what’s working from what’s already included in InSight, I’m looking for your input on what’s NOT there. Please take a moment to complete the survey in this month’s newsletter and give me some InSight about you! Still have more to say? Share your feedback with me on 3sixty.

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

Top 5 One To One Email Marketing Blog Posts of the Week

Monday, August 17, 2009 by Kevin Nuest

In case you missed it, here is the Top 5 round-up of ExactTarget's best blog posts from last week:

1. How Can Creative Approaches Be Applied to Lead Acquisition and Engagement Techniques to Garner Prospect Attention?
by: Angela Khan

2. Driving Customer Engagement: Email + Web Analytics
by: Colby Cavanaugh

3. Email Design Tip of the Week: 5 Stages of Viewing
by: Kristina Schott

4. How Can ExactTarget Help Me Capture Leads More Easily?
by: Dawn DeVirgilio

5. Where To Find New One-to-One Marketing Software
by: Jeff Cunning

Email Design Tip of the Week: 5 Stages of Viewing

Wednesday, August 12, 2009 by Kristina Schott

A subscriber’s inbox is a noisy place, filled with the clutter of messages, folders and other distractions.

Due to the unique landscape of email, subscribers open and engage in five separate stages, judging each one individually before deciding to move on. The design, therefore, is a building view – not a static page view. Considering the following stages when approaching your next email design will not only be helpful in formulating a strategic email-building thought process for your brand, but also in delivering relevant content to your subscribers.

1. From Name
Deliver trust with recognizable name; 73% of subscribers click “Report Spam” or “Report Junk” based on this field. More on the “from name” with Al Iverson.

Email Subject line and From Name in Preview Pane

2. Subject Line (also above)
Next, the email is judged by the relevance and interest in the subject line – 69% of subscribers click “Report Spam” or “Report Junk” based on this line. Affirm the value of your brand by creating an engaging subject line. Listen to subject line wisdom from Nate Romance.

Preview pane of an email marketing strategy in the inbox

3. Preview Pane (above)
Is the key message visible, relevant and enticing in this space? Are you communicating key information that is visible even when images are turned off? Take a deep dive into the Preview Pane with Justine Jordan.

Full email with images on in the preview pane

4. Opened Email (Pre-Scroll, above)
Congratulations! Your subscriber has double-clicked on your email to open it, but does it entice them to scroll for more? Check out image-based email insight by Melinda Baxter.

5. Full Email
Depending on the length of the email, it’s usually impossible to view the whole email at once. Subscribers spend seconds viewing an entire email; only 11% of those who open will scroll below the fold! Let subscribers rule your design and content.

Top 5 One To One Email Marketing Blog Posts of the Week

Monday, August 10, 2009 by Kevin Nuest

In case you missed it, here is the Top 5 round-up of ExactTarget's best blog posts from last week:

1.Email Design Tip of the Week: The Back of the Napkin
by: Anna Meier

2.Email Use Continues to Dominate Online Activity. More Evidence of Why Email Marketing is the Backbone of One-to-One Marketing
by: Joel Book

3.7 Awesome Ways to Wow Your Customers Using Voice on Your eCommerce Site
by: Bob Ullery

4.Retailers: Don’t Miss a Marketing Opportunity with Transactional Messages
by: Kevin Nuest

5.Reporter Butchers Social Media Usage Statistics
by: Morgan Stewart

Email Design Tip of the Week: The Back of the Napkin

Wednesday, August 5, 2009 by Anna Meier

To add to the previous blog, Ideas from the Global Sales Meeting, Dan Roam also gave an inspiring presentation on Visual Thinking. The Design Team was privileged to hear Dan preach that “we can solve our problems with pictures”, a philosophy we were interested to hear.

Author of The Back of the Napkin: Solving Problems and Selling Ideas with Pictures, Dan spoke about breaking down our problems into simple steps and questions. By answering direct questions and then drawing them with basic shapes and stick figures (on the back of a napkin), we can come to a better understanding of the problem and steps needed to come to a resolution.

In terms of email design, Dan’s philosophy reinforced the value of wireframing in our design process. Before ever creating content in ExactTarget, it is crucial to map your email in a wireframe, labeling each piece as it relates to the whole. This will allow you to analyze the visual hierarchy and make sure it makes sense and will allow you to meet your business goals. After completing this stage in your process, you’ll be ready to begin designing with a clear and purposeful content strategy. For more information on constructing your content strategy and wireframe, read the recent blog "Many Subscriber Preferences to Respect" by Melinda Baxter.

Thanks again, Dan, for driving home this important stage of email design and problem solving!

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

Many Subscriber Preferences to Respect

Wednesday, July 22, 2009 by Melinda Baxter

The toughest part of translating diverse subscriber preferences into one email seems to be at the “getting started” stage. It’s really an exercise in visual organization with some puzzle-building skills.

Here are the steps I recommend to tackle the process of building a communication that drives performance based on individual preferences:

1. Construct a content strategy grid that captures:
     a. Primary business action desired from the communication (brand engagement, sales conversion, event sign-up, etc.).
     b. Drivers that will influence that action (imagery, testimonials, price incentives, valuable industry information, product benefits, etc.).
     c. Secondary business actions that can eventually path the subscriber to the primary action (links to product videos, cost comparison calculators, recorded webinars, purchase of lower cost-entry products, etc.).

2. Build a wireframe (puzzle-building skills):
     a. Create 3 sections: preview pane, opened email (above the fold), below the fold (subscriber needs to scroll to view).
     b. In the preview pane space (approximately 380 pixels deep), include a content area for customizable key messages based on subscriber preference – primary action desired. This zone will have images blocked in most subscriber views, so keep the message in HTML text.
     c. In the opened email view (approximately 600 pixels deep), build content areas for the engagement drivers that will drive a response.
     d. In the scrolled view (below 600 pixels deep), include content areas for the highly engaged subscribers that scroll to find continued relevance, and ensure it can be teased/linked from the top of the email.

3. Create content modules for each subscriber segment that are styled to seamlessly flow into the overall email design. Build relevant “default” content for those without declared preferences. Test a sample of each segment to make sure the result appears seamless, not patched to the subscriber.

4. Leverage your subscriber preference data and ‘content rules” to deliver customized content into the email at time of send.

It does take more upfront planning to address subscriber preference diversity in design, but the added effort can significantly impact performance.

Email Design Tip of the Week: Make Your Life Easier with Productivity Software

Wednesday, July 22, 2009 by Christopher Studabaker

We all work on computers. We use a lot of programs. We use a lot of websites. Heck, we use websites that are programs. In the midst of managing workflows, applications, and the latest versions of those workflows and applications (Do you have the ’03 version? The ’05 update? Wait, which version of that update?) it can be easy to forget that your computer is a tool to help you work! Start taking charge of your experience with the free productivity software suggestions below and remind your computer—and yourself—who’s boss.

1) Text Substitution – Text Expansion/Auto-typing

Text substitution is a simple concept: eliminate time spent typing the same text over and over. A text substitution application allows you to assign a key command or word trigger that automatically inserts a larger block of text. For example, rather than typing “Chris Studabaker”, I can create a snippet and trigger so that every time I type the word “name” and press the ‘tab’ button, the text “name” is substituted with “Chris Studabaker”. A slightly more advanced setup can include variables, so typing “date” will insert the current date in a pre-defined format. Have a certain email you’re always re-typing, or one you constantly dig up from the last time you sent it? A block of code you’re constantly re-typing? You need a text sub app.

Text Expander (OSX)
Texter (Windows)

2) Name Mangler/ReNamer – Batch renaming

Do you have a recurring communication with multiple images and assigned dates? Worked on a large project with sequential numbered documents—numbers that later changed after you spent all that time manually numbering them? Batch renaming—that is, editing a large number of filenames at once by renaming, sequentially numbering, adding a prefix/suffix, and so forth—will immediately save you time and frustration.

We recently blogged about organizing your ExactTarget portfolio and mentioned a couple of my favorite file renaming apps – Name Mangler (OSX) and ReNamer (Windows). These apps make batch renaming easy and painless. Removing that ill-placed “_final_final2” from 50 files has never been so easy.

3) Photoshop Actions – Automate routine and batch commands

Okay, okay, so this one’s free once you’ve purchased PhotoShop! It’s a huge, powerful program, though, and finding the right way to work in PhotoShop may require some thought. Photoshop’s built-in “Actions” palette will help, and can be incredibly powerful when utilized correctly. Actions are a set of recorded commands that can be performed again with a single click. Any repetitive task is a fantastic candidate for an Action – file resizing or simple color balancing, for example. Want more? See point 5 below – you can create custom hotkeys for actions, removing the need to open the Actions palette!

Actions 1

The “Batch” command (File -> Automate -> Batch) is an extended application of an Action, allowing you to perform the Action on a specified directory. It’s especially useful in situations when performing the action on individual files would be time consuming or counter-intuitive, such as a large group of files or a set of extremely large files. Create the action, start the automated batch, and spend less quality time with the “Opening File” and “Saving” progress bars.

Actions 2

4) Dropbox – File syncing & sharing

Dropbox is an online (cloud)-based file storage and syncing application. In addition to a free 2 GB and a user-friendly interface, Dropbox offers an excellent desktop client that functions perfectly in a cross-platform environment. The desktop application treats your online account like a local folder, automatically syncing all activity across the computers linked to the account. In addition to excellent multi-computer syncing, Dropbox allows folder sharing to other Dropbox users. Dropbox removes the frustration and guesswork from keeping files current across multiple computers.

5) Hotkeys – Put your keyboard to work

You know what Cntl/Apl+S does. (Save!) You probably know Cntl/Apl+N. (New document) What about Cntl/Apl+W? (Close current window) Cntl/Apl+`? (Switch windows within an application) Alt/Apl+Tab? (Switch applications)

Your keyboard should be used for more than just entering letters, and hotkeys help you work faster and better. In fact, most applications will let you create custom hotkeys for nearly any command. I typically create a set of hotkeys for at least my most commonly used commands, and try to keep all custom commands localized to the home position for my left hand. Help yourself out by matching hotkeys to similar tasks across programs. For example, keep Cntl/Apl+S tied to ‘Save’ across all your applications to keep those hotkeys easy to remember!

The ExactTarget Blog

Follow Us On...

Recent Entries

Authors

Categories

Email Design

Design Tip of the Week: Email Rendering in Gmail

Design Tip of the Week: Email Rendering in Outlook 2007

Email Design Tip of the Week: 3-2-1, Wait! A Checklist Before Hitting Send

Email Design Tip of the Week: Designer’s Top Ten Countdown to Connections

Email Design Tip of the Week: Extreme Makeover, The Email Design Competition

What do you mean my tracking is phishing?

Design Tip of the Week: Don’t miss out on Connections '09

Utilize Video to Bring Emails to Life

Email Design Tip of the Week: JavaScript in Email?

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

Top 5 One-to-One Email Marketing Blog Posts for the Week of 8/24/09

Let’s Get Personal

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

Top 5 One To One Email Marketing Blog Posts of the Week

Email Design Tip of the Week: 5 Stages of Viewing

Top 5 One To One Email Marketing Blog Posts of the Week

Email Design Tip of the Week: The Back of the Napkin

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

Many Subscriber Preferences to Respect

Email Design Tip of the Week: Make Your Life Easier with Productivity Software

Subscribe via RSS