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