Html Email - Algunas cosas que considerar

25 %
75 %
Information about Html Email - Algunas cosas que considerar
Technology

Published on March 7, 2014

Author: akobashikawa

Source: slideshare.net

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.

HTML Email algunas cosas que considerar

Hello @ Un HTML Email es una página web que se envía por email

<img> <h1>Hello</h1> HTML Content-Type: text/html @ Puede ser únicamente el código HTML

HTML <img> <h1>Hello</h1> Multipart/Alternative MIME Hello TXT @ O puede incluir también texto plano alternativo

ENVIAR TXT <?php $txt = file_get_contents("message.txt"); $from = "admin@host.dev"; $to = "akobashikawa@gmail.com"; $subject = "Text Email Test "; $headers = "From: $fromrnReply-To: $from"; if ( mail( $to, $subject, $txt, $headers ) ) { echo "OK"; } else { echo "KO"; } Ejemplo de código para enviar un email normal

ENVIAR HTML <?php $html = file_get_contents("message.html"); $from = "admin@host.dev"; $to = "akobashikawa@gmail.com"; $subject = "HTML Email Test "; $headers = "From: $fromrnReply-To: $from"."rn"; $headers .= "MIME-Version: 1.0"."rn"; //$headers .= "Content-Type: text/html; charset=ISO-8859-1rn"; $headers .= "Content-Type: text/html; charset=UTF-8rn"; if ( mail( $to, $subject, $html, $headers ) ) { echo "OK"; } else { echo "KO"; } Ejemplo de código para enviar HTML Email

<HTML> De modo similar a como el mismo HTML se renderiza diferente en diferentes navegadores

<HTML> Outlook Lotus Notes El mismo HTML se renderiza diferente en diferentes clientes email

NO ● ● ● ● ● ● SÍ <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) Además, hay varias limitaciones en el HTML que se puede usar

HTML como en 1996 Es decir

Tablas y gif para diagramación <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 eiusmod tempor 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.

Más tips ● <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

img/ <img src="img/smile. png"> <h1>Hello</h1> Una página web tiene normalmente referencias a recursos externos, como las imágenes, que pueden ser relativas

http://mydomain. com/img/ <img src="http://mydomain. com/img/smile.png"> <h1>Hello</h1> En un HTML Email, esas referencias tienen que ser absolutas

<img src="ci:smileimg"> <h1>Hello</h1> Usando Multipart/Alternative MIME se puede incrustar la imagen en el mismo email y enlazarla mediante el id asignado

GMail GDocs PASTE COPY Internamente, se copia el HTML y todas las referencias son absolutas Una forma práctica de crear un HTML Email es usando Google Docs y GMail

Enlaces ● http://htmlemailboilerplate.com/ Plantilla que incluye varias cosas descubiertas por expertos a lo largo de varios años.

Referencias ● http://kb.mailchimp.com/article/how-to-code-htmlemails ● http://css-tricks.com/sending-nice-html-email-withphp/ ● http://www.campaignmonitor. com/blog/post/2695/lotus-notes-doesnt-support-pngimages/

Gracias akobashikawa@rcp.pe

Add a comment

Related presentations

Related pages

¿Pensando en comprar un vehículo? Aquí hay algunas cosas ...

Aquí hay algunas cosas que debe considerar antes de hacerlo! ... puede que desee considerar ver, ... Email This BlogThis!
Read more

cosas para que digas - Documents - docslide.us

Html Email - Algunas cosas que considerar ... sobre algunas cosas que cualquier humano más o menos normal puede aprender sobre Innovación, ...
Read more

10 cosas que debes considerar cuando vas a emprender

10 cosas que debes considerar cuando ... de riqueza para ti y para muchos más que trabajen contigo. Algunas cosas que debes tomar en ... Email * Website ...
Read more

Manejo del dolor durante el parto - kidshealth.org

Cosas que se deben considerar. A continuación se enumeran algunas cosas en las que se debe pensar al ... Create an account to receive email ...
Read more

Gráficos de control - II | Algunas cosas de Gestion de Calidad

Algunas cosas de Gestion de Calidad. ... tenemos que considerar que nuestro proceso no está bajo control. ... Enter your email address:
Read more

Algunas cosas que considerar antes de viajar a Cancún ...

Algunas cosas que considerar antes de viajar a Cancún México. ... Your email address will not be published. You may use these HTML tags and attributes: ...
Read more

ALGUNAS PELÍCULAS--1 - Documents

ALGUNAS PELÍCULAS--1. by mustafa-al-kassim. on Apr 28, 2015. Report Category: Documents. Download: 0 Comment: 0. 79. views. Comments. Description.
Read more

Tu huerto urbano - Antes de empezar - La Cocina de Tía Clara

En esta segunda entrega de la serie me gustaría hablar sobre algunas cosas que debes considerar antes de embarcarte en esta ... Your email address will ...
Read more