Friday, 8 July 2011
Best practices for designing emails newsletters
Labels:
Basics
,
Best Practice
,
Email Design
,
Email Tips
,
Help
These are our most important recommendations that you should have in mind when you design your emails / newsletters. Remember that the world of email has its special features and, although very similar, is not the same as designing a website.
1. Create a simple design. An email should be as clear and simple to read and navigate as possible. It should never be considered to contain a toolbar full of submenus, thousands of links, special styles & css, scripts, etc... It is very important to bear in mind that when the recipient sees your email, they will decide within 3 seconds if they shall read it or not. So simplicity and clarity are the most important factors when designing an email.
2. Use tables. Email programs such as Outlook, Lotus, Thunderbird, Apple Mail, Gmail, Hotmail, Yahoo, etc... use a particular rendering technology and are able to perfectly interpret tables. In this format when you create a template using tables, columns and rows and define both its width and height, the risk of seeing your email incorrectly is very low. For example using the following structure works really well:
<table>
<tr>
<TD>Header< /td>
</tr>
<tr>
<TD>Text content< /td>
</tr>
<tr>
<TD>Foot< /td>
</tr>
</table>
3. Test with both browsers and mail programs: It is essential that you test to see how your recipients may potentially view your emails. To assist with this task, GraphicMail has its "inbox Preview" service that allows you to test each mailing across the majority of email clients and channels, web-based (GMAIL, HOTMAIL ETC) desktop based (Outlook, Thunderbird) and smart phone (iphone). Allowing you to check in a few minutes that everything looks and works exactly as you want it.
4. inLine styles: if you come from the world of web design, you'll know what classes and CSS styles are. However, you will need to forget about this and if something needs a defined style, use it inline. This is an example of how to do it in an email:
<font style="font-size: 13px;" color="#666666" face="Verdana, Arial, Helvetica, sans-serif">text here</font>
5. Image ALT: Always fill the ALT of images that when a recipient does not have the images activated by default in your mail program, you will see the text that you've put in the ALT.
6. 600 pixels wide: mail programs almost always have a display/preview panel to see the emails. The ideal width that fits most mail programs is undoubtedly 600 pixels. If it NEEDS to be wider do not let it exceed 800 pixels
7. Avoid the use of background images: Background images, or images with text overwritten are not supported by most email programs.
8. Avoid the edges: the characteristic border is not supported by most email programs. To avoid this there is a pretty good trick:
<TD width="1">< /td>
<TD width="498">text here< /td>
<TD width="1">< /td>
9 Avoid the white lines between pictures: When you create an email with sliced images or slices, Hotmail shows a sort of whitespace between them. To avoid this white space use the following code that can quickly be added into the code of each image:
<IMG src="image.jpg" style="display:block;">
10. Encode special characters correctly: Each language uses its own character encoding, so get ikn the habit of properly encoding the email: ISO-8859-1 or UTF-8. For example:
& quot; This summer & # 45; special offer & quot;
11. Do not use script: If you use < script > it will either be ripped out, ignored or if it, very rarely, remains intact it will definately end up in the Junk folder!
12. Add "view in your browser" link: many subscribers appreciate that you add a small line of text at the top of the emails: "If you can't see this email, click here to view the article in your browser"
13. Add the option to unsubscribe: How do I remove myself from your mailing? It is a question which you must respond to your subscribers in a very clear way. Don't try to hide the unsubscribe button, don't try to make it difficult. If they don't want to be on your list why would you want them on it? You will just be wasting money targetting them and potentially aggravating a potential repeat customer, if they don't want the mailing let them go, they may well come back later!
14. Don't have the newsletter scroll on down for an eternity. The best way to add lots of information is to have 'read more' links after a paragraph or so of the article's content, then if it is of interest they can click to read the full article and then return to your email, this will also provide you with a click through report which will help you build up a visual of which items were of most interest and which were not. The smaller articles cells will also allow readers who do not want more information on that particular article to quickly skip over it and move onto one they may have an interest in.
15. Do forget to test: before sending your campaign out to your live audience, you have to test, test, test! A small mistake you can lead to the failure of your campaign. Also don't forget to perform A/B testing and discover what works best. Try our inbox preview tool to test across multiple email clients in one go.
Read More
1. Create a simple design. An email should be as clear and simple to read and navigate as possible. It should never be considered to contain a toolbar full of submenus, thousands of links, special styles & css, scripts, etc... It is very important to bear in mind that when the recipient sees your email, they will decide within 3 seconds if they shall read it or not. So simplicity and clarity are the most important factors when designing an email.
2. Use tables. Email programs such as Outlook, Lotus, Thunderbird, Apple Mail, Gmail, Hotmail, Yahoo, etc... use a particular rendering technology and are able to perfectly interpret tables. In this format when you create a template using tables, columns and rows and define both its width and height, the risk of seeing your email incorrectly is very low. For example using the following structure works really well:
<table>
<tr>
<TD>Header< /td>
</tr>
<tr>
<TD>Text content< /td>
</tr>
<tr>
<TD>Foot< /td>
</tr>
</table>
3. Test with both browsers and mail programs: It is essential that you test to see how your recipients may potentially view your emails. To assist with this task, GraphicMail has its "inbox Preview" service that allows you to test each mailing across the majority of email clients and channels, web-based (GMAIL, HOTMAIL ETC) desktop based (Outlook, Thunderbird) and smart phone (iphone). Allowing you to check in a few minutes that everything looks and works exactly as you want it.
4. inLine styles: if you come from the world of web design, you'll know what classes and CSS styles are. However, you will need to forget about this and if something needs a defined style, use it inline. This is an example of how to do it in an email:
<font style="font-size: 13px;" color="#666666" face="Verdana, Arial, Helvetica, sans-serif">text here</font>
5. Image ALT: Always fill the ALT of images that when a recipient does not have the images activated by default in your mail program, you will see the text that you've put in the ALT.
6. 600 pixels wide: mail programs almost always have a display/preview panel to see the emails. The ideal width that fits most mail programs is undoubtedly 600 pixels. If it NEEDS to be wider do not let it exceed 800 pixels
7. Avoid the use of background images: Background images, or images with text overwritten are not supported by most email programs.
8. Avoid the edges: the characteristic border is not supported by most email programs. To avoid this there is a pretty good trick:
<TD width="1">< /td>
<TD width="498">text here< /td>
<TD width="1">< /td>
9 Avoid the white lines between pictures: When you create an email with sliced images or slices, Hotmail shows a sort of whitespace between them. To avoid this white space use the following code that can quickly be added into the code of each image:
<IMG src="image.jpg" style="display:block;">
10. Encode special characters correctly: Each language uses its own character encoding, so get ikn the habit of properly encoding the email: ISO-8859-1 or UTF-8. For example:
& quot; This summer & # 45; special offer & quot;
11. Do not use script: If you use < script > it will either be ripped out, ignored or if it, very rarely, remains intact it will definately end up in the Junk folder!
12. Add "view in your browser" link: many subscribers appreciate that you add a small line of text at the top of the emails: "If you can't see this email, click here to view the article in your browser"
13. Add the option to unsubscribe: How do I remove myself from your mailing? It is a question which you must respond to your subscribers in a very clear way. Don't try to hide the unsubscribe button, don't try to make it difficult. If they don't want to be on your list why would you want them on it? You will just be wasting money targetting them and potentially aggravating a potential repeat customer, if they don't want the mailing let them go, they may well come back later!
14. Don't have the newsletter scroll on down for an eternity. The best way to add lots of information is to have 'read more' links after a paragraph or so of the article's content, then if it is of interest they can click to read the full article and then return to your email, this will also provide you with a click through report which will help you build up a visual of which items were of most interest and which were not. The smaller articles cells will also allow readers who do not want more information on that particular article to quickly skip over it and move onto one they may have an interest in.
15. Do forget to test: before sending your campaign out to your live audience, you have to test, test, test! A small mistake you can lead to the failure of your campaign. Also don't forget to perform A/B testing and discover what works best. Try our inbox preview tool to test across multiple email clients in one go.
Subscribe to:
Posts
(
Atom
)
Follow Us
Popular Posts
-
Have you noticed our new dashboard yet? If not then just log into your account and click on the " Home " tab. Alternatively if you... -
Take an exclusive peek at our New Mobile Editor which you will have access to very shortly! Soon you will be able to create a free mobile ... -
GraphicMail is currently in the last phase of completing the integration of a new email newsletter editor that will let you easily create ...