Usually, the thought of a designer to have to address the creation of a newsletter is:
“I have to design it the same way that a Web site “
And although partly” something “of why it is so, the design of a newsletter is VERY special ‘To’ and we must take it with tweezers. Consider that the design will go through several processes, from entering our inbox (or your worst case as spam) e-mail will be by default with the images hidden (and its content also, in some cases), also pass through stringent analysis to see if an e-mail is spam or not, it will be seen by the system by anti-virus if it has any malicious code, and finally will be rendered in various ways depending on the support of styles which each webmail / client mail. That’s why you should keep in mind some tips :
When the HTML coding, many WYSIWYG editors (such as Dreamweaver) can incorporate ‘waste’ in the final work which can bring a bad rendering in email clients and webmails. It is preferable to do the coding manually with a program for editing plain text / HTML or in failing to identify the ‘waste’ and remove .
Most of the labels webmails removed DOCTYPE and
, showing only the contents within the body of the message .
Performing maquetaciones simple, one or two columns, using tables (do not hate me, but the layout by using CSS properties that not all programs / webmails manage to endure, so there is a danger of viewing a newsletter desmaquetado ).
The design must not exceed the 500-600px wide .
By default, all programs / webmails block images of an e-mail.
- It is advisable not to incorporate important text (headlines, ads, etc.) in images.
- It is advisable to use the ALT property in the images and perform a brief description of the image that comes.
- It is good practice to conduct the verification as is the design with images turned off.
- should call the images with your absolute path to where the file is stored on the server.
- Do not call the images via its IP address.
Avoid content in white or light colors (to be blocked images, the text will look with white background and if this has a light color will be imperceptible)
Declaring the width and length of each image incorporated into the design
Several anti-spam systems take into account that there is a balance between content and image content of text
Incorporate the attribute “_blank” so that the links to open in a new window .
- The CSS styles should be incorporated in a ‘inline’. You should not incorporate :
Calling external styles
- Testing in different email clients and webmails
Just as each browser has a different behavior before a design, email clients and webmails have a similar attitude, because not all bear the same number of properties HTML / CSS. By ideal, designs must be tested under different circumstances (software, operating systems) to achieve maximum compatibility. One way to cover the vast majority of circumstances is doing the testing in programs and services most popular :
Web – Hotmail, Yahoo! And Gmail
PC – Outlook, Windows Mail and Thunderbird
Mac – Mac Mail and Entourage
- Links to take into account
Guide CSS support in webmail and email client, version 2008 : A Comprehensive Review, available in PDF and XLS
- Email Standards Project : A project that aims at all webmails and mail programs properly meet the design standards. For that we have an armed
- acid test ‘to’ and tested its performance, results es’na in sight.
- : An analyzer that gives us a check as a result of the styles that we have incorporated into its cradle and webmails / programs.
: Giant archive of newsletters, for inspiration when designing.