html email - algunas cosas que considerar
DESCRIPTION
Hay algunas limitaciones en el HTML que podemos usar en un HTML email. El 99% del CSS no funcionará, y hay que usar tablas para la diagramación... como en los '90.TRANSCRIPT
HTML Emailalgunas cosas que considerar
Un HTML Email es una página web que se envía por email
Hello
@
Puede ser únicamente el código HTML
<img><h1>Hello</h1>
@
Content-Type: text/htmlHTML
O puede incluir también texto plano alternativo
<img><h1>Hello</h1>
Hello
@
Multipart/Alternative MIME
HTML
TXT
Ejemplo de código para enviar un email normal
<?php$txt = file_get_contents("message.txt");$from = "[email protected]";$to = "[email protected]";$subject = "Text Email Test ";$headers = "From: $from\r\nReply-To: $from";if ( mail( $to, $subject, $txt, $headers ) ) { echo "OK";} else { echo "KO";}
ENVIAR TXT
Ejemplo de código para enviar HTML Email
<?php$html = file_get_contents("message.html");$from = "[email protected]";$to = "[email protected]";$subject = "HTML Email Test ";$headers = "From: $from\r\nReply-To: $from"."\r\n";$headers .= "MIME-Version: 1.0"."\r\n";//$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";$headers .= "Content-Type: text/html; charset=UTF-8\r\n";if ( mail( $to, $subject, $html, $headers ) ) { echo "OK";} else { echo "KO";}
ENVIAR HTML
De modo similar a como el mismo HTML se renderiza diferente en diferentes navegadores
<HTML>
El mismo HTML se renderiza diferente en diferentes clientes email
<HTML>
Lotus Notes
Outlook
Además, hay varias limitaciones en el HTML que se puede usar
● <doctype>,<head>, <body> suelen ser borrados
● 99% del CSS no funciona● UTF-8 no siempre es reconocido● URL relativos no funcionan● Algunas versiones de Lotus
Notes (6 y 7) no soportan PNG● No se puede usar imágenes
como background
● Inline styles● Tablas y gif para espaciado● <font> para fuentes● ISO-8859-1 y &xxxx;● URL absolutos● Usar JPG, GIF● Usar texto gráfico cuando se
requiera (no importa el SEO)
NO SÍ
Es decir
HTML como en
1996
<table border="1" cellspacing="0" cellpadding="0" style="width:100%;" align="center" bgcolor="#888"> <tr><td> <table border="1" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#fff"> <tr><td><img style="display:block;" src="spacer.gif" width="10" height="10"></td> <td><img style="display:block;" src="spacer.gif" width="40" height="10"></td> <td><img style="display:block;" src="spacer.gif" width="540" height="10"></td> <td><img style="display:block;" src="spacer.gif" width="10" height="10"></td></tr> <tr><td></td> <td valign="top"><font size="7" face="Times" color="#088">L</font></td> <td align="justify">orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore <b>magna aliqua</b>. Ut enim ad minim veniam. </td> <td></td></tr> <tr><td><img style="display:block;" src="spacer.gif" width="10" height="30"></td> <td></td> <td></td> <td></td></tr> <tr><td></td> <td colspan="2" align="justify"><i>Quis nostrud exercitation ullamco laboris</i> nisi ut . . . </table> </td></tr></table>
Tablas y gif para diagramación
● <table align="center">para centrar una tabla
● <table cellpadding="0" border="0" cellspacing="0" style="border-collapse:collapse;">previene el espaciado por default que se suele aplicar a las tablas.
● <td><img style="display:block;"></td>previene el gap que puede aparecer debajo de las imágenes.
● <td align="justify">para justificar texto en la celda
● El ancho de los img de la primera fila pueden servir para fijar los anchos de sus respectivas columnas.
● La altura de los img de la primera columna pueden servir para fijar las alturas de sus respectivas filas.
● Controlar los márgenes con columnas o filas extra.● Una herramienta visual, como Dreamweaver o Fireworks, facilita este tipo de
diagramación.
Tablas y gif para diagramación
● <font size="n">para el tamaño del texto (1: 9px, 7: 48px)
● <font color="#123456">para el color del texto
● <b> para negritas● <i> para itálicas● <a style="color:#333333;text-decoration:none;">
para ocultar el color y subrayado de un link
Más tips
Una página web tiene normalmente referencias a recursos externos, como las imágenes, que pueden ser relativas
<img src="img/smile.png">
<h1>Hello</h1>
img/
En un HTML Email, esas referencias tienen que ser absolutas
<img src="http://mydomain.com/img/smile.png">
<h1>Hello</h1>
http://mydomain.com/img/
Usando Multipart/Alternative MIME se puede incrustar la imagen en el mismo email y enlazarla mediante el id asignado
<img src="ci:smileimg"><h1>Hello</h1>
Una forma práctica de crear un HTML Email es usando Google Docs y GMail
GMail GDocs
COPYPASTE
Internamente, se copia el HTML y todas las referencias son absolutas
● http://htmlemailboilerplate.com/ Plantilla que incluye varias cosas descubiertas por expertos a lo largo de varios años.
Enlaces
● http://kb.mailchimp.com/article/how-to-code-html-emails
● http://css-tricks.com/sending-nice-html-email-with-php/
● http://www.campaignmonitor.com/blog/post/2695/lotus-notes-doesnt-support-png-images/
Referencias
