How to Create a HTML Email Template (Newsletter)
Email marketing is now within everyone’s reach, as well as the access to both the problems less and less popular on issues of bandwidth and heaviness are felt less. This advantageous situation makes that the html emails begin to spread more and more. It is not at all uncommon to receive an email formatted instead of a plain text email. no?
But there is a problem: how to create a html email template?
To create a template for certain email is forcing us to go back a bit behind the design techniques. It is not wrong to say that you back a little to the nineties as structural style.
This is because many webmail providers like Libero, Gmail, Yahoo, Hotmail and company, for security issues ignore the information sent through the header of pages <head>.
This is not the case for the vast majority of email clients like thunderbird, Apple Mail, Windows Mail etc..
The point is that 90% of people as a matter of mobility using their email services online. So how to solve this problem?
After a full-bodied experience on the subject, here is what I believe the guidelines, still working on the vast majority of webmail services, you need to take to create an email template in html.
1. Created an account for all the most popular webmail services
The first step to do before thinking about creating an email template is just that.
Subscribe to all popular webmail services. I’ll list a few:
- Gmail
- Yahoo email
- Hotmail
- Free, Tiscali and Virgil, Fastwebmail
Created multiple installations of the email client (if you use virtual machines to simulate operating systems)
- Outlook
- Outlook Express
- Windows Mail
- Thunderbird
This toolkit starting guarantees you an enviable asset testing.
Why are we doing this? Why do some of these services listed above display the html and css in a different way.
2. From today to 90 years is …. but one step at a time
We see several precautions for use:
- Never rely on the images to communicate important information.
I’m not crazy. Above all, do not rely on the images if they are big.
The vast majority of email clients have images turned off by default. If the user does not take the initiative by clicking on images shows the image will not see it.
Now even email client software such as Windows have these settings. - Do not entrust the contrast of the image.
Use more often than black text on a light background. Make sure that your text has enough contrast with or without images enabled. Outlook 2007, for example, will not display background images in table cells, even if the images are on. - [Optional] Provide a link to see the e-mail as a web page somewhere.
Ok, this is not absolutely necessary, and in fact I tagged com efacoltativo, only serves to give vtuoi members and subscribers the ability to view the message in your browser (especially if it is an HTML design particularly heavy). - Always use ALT tags on images intelligently IMPORTANT (not at all).
With images turned off by default, descriptive ALT tags are the last, best chance to convince a user to enable images.
If your visitor does not see the images because it has enabled you will find an ugly empty space.
3. Use – unfortunately – the tables and inline css
You know that beautiful technique that makes you abandon the tables to format a website and that instead of the tables makes you use the div? Well, you do not need.
“But how, many years studying web design and css and then do not have to use the div?”
Well yes, but not all support this good design and then we are forced, as a matter of safety and nothing else, at least for now, to use the tables.
I was a little shocked when I found out the technicalities obsolete in the email design.
I have tried several times to create a template and write the inline css inside the div but not all services appear well and so I came to this conclusion.
- Make sure you set all the attributes of the table available where possible. This includes cell padding, cell spacing, border, v-align, width and height.
- Although it would always be better to avoid them, nested tables can be of help. Make sure to use the correct indentation for a cleaning and ease of reading the code.
- Use the background attribute of a cell to set background images.
This is the easiest way to obtain backgrounds in Gmail. Note: The background image will tile, so be careful in how you create. - Use only absolute addresses. Host your pictures somewhere on your domain and make them point right there.
- The background images applied to div or tables are not supported by Outlook 2007, in fact, the only way to use a background image in Outlook 2007 is to apply them to the body, to <body> for instance, an e- mail, which of course is not supported by other email clients like Gmail, Yahoo or Windows Live Hotmail.
Create an email template html, however, is a necessary effort.
They have demonstrated their ability to sell well, then the game is worth a candle.