Upload
antonio-rulo-kobashikawa
View
161
Download
4
Embed Size (px)
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.
Citation preview
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
Gracias