| In This Article…If you're considering implementing an | | | | The size of every image needs to be defined. This |
| email marketing program but don't know where to | | | | means that in the html code, the image reference |
| start with your html email template design, or if | | | | needs to say what the width and height of the |
| you're currently emailing but feel you're not getting | | | | image is. Otherwise, you could see your layout break. |
| the results you want, this article explains five key | | | | And as we discussed in the article about images, |
| points for optimizing the design of your html email | | | | make sure you're using Alt and Title tags. |
| template. | | | | Also, links need to be "absolute" rather than "relative". |
| Email Template Design: Not as Simple as it | | | | Chances are that on your website, you use relative |
| SoundsThere's a lot of misinformation out in the | | | | links. This means that you don't always have the full |
| world about the best way to design an email | | | | url of the link in the html code. But in an html email |
| template. If you're using a third-party email service | | | | template, you'll need to use the full url. |
| that provides templates, that's a great starting point. | | | | 4. We Know It Sounds like a Broken Record, But |
| However, for reasons of both branding and for those | | | | Limit Your Use of ImagesThis one is so important |
| of you not sending your html email through a | | | | that we wrote an entire article about it! So we won't |
| third-party provider, designing an html email template | | | | go into it in great detail here, but it is one of the |
| can come with some unique challenges. While we | | | | most important things that you need to remember |
| can't guide you step by step through every inch of | | | | when designing an email template. Keep the use of |
| your template, we can give you a list of five key | | | | images to a minimum and use html and formatted |
| things to make sure are happening in your html email | | | | text to convey your message. |
| template. | | | | Images look great, it's true, but they can cause |
| 1. Design for a Horizontal Preview PaneThe reality is | | | | many problems with your email marketing campaign's |
| that most people are going to view your email in a | | | | performance. |
| horizontal preview pane, either in Outlook, Hotmail or | | | | 5. Keep Things Short and SimpleIt doesn't matter |
| Yahoo! According to a study by MicroMass | | | | how great your content is, people are not going to |
| Communications, the average size of that horizontal | | | | read your email! They're going to scan it, and they're |
| preview pane will be 638x86 pixels. | | | | going to scan it in under a minute. Instead of |
| Yes, you read that correctly. Most people won't even | | | | providing them with large chunks of content, design |
| see the first 100 pixels of your email. | | | | your email template to include large headlines and |
| What this means is that your template should not be | | | | then shorter sections of content that link to your |
| more than 638 pixels wide (we usually recommend | | | | website or destination page. |
| that you stick to 600 pixels) and that you need to | | | | Using bulleted lists can also help you with this. The |
| make sure that you've got value propositions and | | | | key is to not overwhelm people with too much text |
| calls to action within the first 100 pixels. This means | | | | or to create an email template where people are |
| that you may want to revisit that nice header | | | | required to read in large chunks in order to get the |
| graphic. It also means that, if you're using that header | | | | point that you're conveying. |
| graphic, you'd better make sure it has effective Alt | | | | There's value in your content, it's true. But an email is |
| and Title text layered behind it. | | | | not a web page, and how people behave in their |
| You may actually want to take a screen shot of | | | | inbox is different than how they behave, say, on a |
| your Outlook inbox and layer your email in on top of | | | | blog. Keep your content short, sweet, to the point |
| it in Photoshop to see how it presents! But any way | | | | and use it to drive clicks rather than provide |
| you break it down, you need to assume that you | | | | information. |
| have 600x100 pixels or less to convince a user to | | | | Bonus! HTML Tips!Also remember that email clients |
| keep reading your email. | | | | are picky about how they read html. Here are some |
| 2. Maximize with Two ColumnsIt's unlikely that, in the | | | | tips for coding your html email template in a way |
| average of 54 seconds somebody is taking to look | | | | that will resolve well in most email clients. |
| at your email, they will scroll very far down. One way | | | | - Use HTML tables to control the design layout. Do |
| to maximize the amount of information (and links) | | | | NOT use pure CSS layouts: that just hold up in an |
| that they see is to use a two column format. We | | | | email environment. |
| recommend a 200 pixel side column and a 400 pixel | | | | - Use inline CSS to control other presentation |
| main column. The side column will allow you to | | | | elements |
| provide smaller segments of information and | | | | - CSS style declarations must appear below the body |
| navigational links. The larger column will be where the | | | | tag |
| main content of your email lives. | | | | - Do NOT use CSS shorthand: instead of using the |
| There's some debate about where the side column | | | | abbreviated style rule font: 12px/16px Arial, |
| should live in terms of the right or left side of the | | | | Helvetica, break this shorthand into its individual |
| email template. We think that the left side is a better | | | | properties: font-family, font-size, and line-height. |
| optimization, because no matter how narrow the | | | | - Use spans and divs VERY sparingly to achieve |
| preview pane your user is using (unless they are | | | | specific effects, use HTML tables do the bulk of the |
| viewing in a very small, vertical preview pane, which | | | | layout work. |
| is unlikely), with a left side 200 pixel column and the | | | | Designing an html email template can be a challenge, |
| larger 400 pixel column on the right side, they will be | | | | but the good news is that once you have one that |
| exposed to the content in both columns. | | | | you like and that delivers consistently to the inbox, |
| However, if your table building and html is not | | | | you can reuse it over and over again. Take the time |
| extremely clean, the left hand column can create | | | | to design an appropriate template the first time, and |
| viewing problems and push the right hand column out | | | | you'll experience the benefits with all future sends! |
| of the screen. Placing the smaller column on the right | | | | The first step to getting started with email |
| ensures that your main column and content will | | | | marketing, whether you're designing an email |
| always be seen. | | | | template for the first time or working to optimize an |
| Try both, and test them into various email clients to | | | | existing one, is to select a quality email sending |
| see! | | | | partner. Comm100, who provided you with this |
| 3. Define Images and Links!Another thing that you'll | | | | complimentary summary, offers a completely free, |
| need to remember is that email clients are far less | | | | hosted email and newsletter solution. It's both a great |
| forgiving than a web browser with html. Therefore, | | | | long-term and short-term solution to getting your |
| you need to be extra careful with how your | | | | email marketing off of the ground to just about any |
| developer or coder makes your html email template. | | | | type of customer or client email list! |