Follow Us On...

Authors

Email Campaign Templates

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 EmailEmail Marketing Design
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:
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
Comments (0)

Email Design Tip of the Week: Forwarding Emails

Wednesday, July 1, 2009 by Andrea Smith
This week, we’re going to tackle a commonly asked question:

Why does my email look broken when forwarded?

If you forward an HTML email using the forward button in your email program, it will often break the code, making the design display incorrectly for the recipient of the forward. Instead, use the “forward to a friend” link built into the email, if one is available. Using this link will send a clean email out of ExactTarget, and give you the option to type a personal message above the email. This link is either a button or text link marketers commonly place either in the top or bottom of the email.

How do I add a “Forward to a Friend” link to my email?

If you don’t have a “forward to a friend” link in your email, you can add it several ways. Either link the desired text or image in ExactTarget using the link choice “Forward to a Friend”, or use the substitution string “%%ftaf_url%%” as a link in an HTML paste email.

Example: <a href=”%%ftaf_url%%”>Forward to a Friend</a>

If you choose to have our Design Solutions team build a custom template for you, there’s a good chance we’ve permanently built in this link for your ease of use.

What if I don’t like the term “Forward to a Friend”?

Try something else! I like to recommend “Forward to a Colleague” for B2B clients, and “Send to a Friend” is becoming more prevalent, especially in retail email. As long as it’s appropriate to your subscribers, there are no hard and fast rules – have fun with it!

Comments (0)

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.

Comments (0)

When The Absence of Design Makes for a Great Email

Thursday, March 13, 2008 by Jeffrey Rohrs

Let’s be frank…designers are great.  They wear the coolest clothes, carry the coolest gadgets, and fill their next generation iPods with only the coolest of tunes.  Granted, their spelling could use some work – but I’m willing to forgive that as long as they keep me on the invitation list to their exclusive parties.

That said, when dealing with designers on certain email projects, I have been reminded of the old saying:
 
To a man with a hammer, everything looks like a nail.

Or, to put it in design terms:

To a designer with Photoshop, everything looks like a canvas to be filled.

The truth with email design, however, is that less is often more.  Consider  an email alert.  Email alerts are sent for a variety of reasons, including:

  • An emergency requiring immediate action or response
  • A timely correction to information contained in a previous email or other communication
  • A notice to subscribers of a service issue or disruption
  • A breaking news story

In each of these situations, there is a single, primary purpose for the message — to communicate a time-sensitive piece of information quickly and clearly to subscribers.  In situations like this, the best designs are those that are nearly invisible to the recipient.  There’s a logo to confirm the message source, and a font selection that ensures maximum legibility — there might even be an executive signature to punctuate the message with a sense of its importance.

If you’re blessed with an intuitive designer, they may instinctively understand the difference in design needs between an email alert and a promotional email.  If not, it would be wise to work with your design team to develop a simple email template to have on hand in case you’re faced with a situation warranting an email alert.  Less can be more—but only if you’re as conscious in the design or your email alerts as you are with your email promotions.
 
As the late, great designer Charles Earns said, “Recognizing the need is the primary condition for design.”  Whether you’re an email designer, developer or consultant, the more you can help define the need to be served, the better your design (or lack thereof) will ultimately be.

Comments (0)