email Tutorial
Empezando con el correo electrónico
Buscar..
Observaciones
El correo electrónico HTML es el uso de un subconjunto de HTML y CSS para dar formato a un mensaje de correo electrónico como una página web que utiliza colores, gráficos, columnas de tablas y enlaces.
Enlaces útiles:
HTML y texto sin formato
El correo electrónico HTML es el uso de un subconjunto de HTML y CSS para dar formato a un mensaje de correo electrónico como una página web que utiliza colores, gráficos, columnas de tablas y enlaces.
Cuando envíe un correo electrónico, es importante enviar tanto texto sin formato como HTML. Para ello, envíe su correo electrónico como MIME de varias partes. La mayoría de los proveedores de servicios de correo electrónico tienen herramientas para construir automáticamente el MIME para usted. Algunos generarán una versión de texto simple basada en su versión HTML, y también existen herramientas de terceros .
Ejemplo de un correo electrónico de sólo texto:
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Tenga en cuenta que con el reciente lanzamiento de Apple Watch, surgió una nueva parte de MIME: text/watch-html . Este contenido solo se mostrará en el Apple Watch (y en cualquier otro cliente que admita este tipo MIME).
Clientes de correo electrónico y motores de renderizado
Los clientes de correo electrónico utilizan diferentes motores de representación para representar correos electrónicos HTML:
- Apple Mail, Outlook para Mac, Android Mail y iOS Mail utilizan WebKit
- Outlook 2000/02/03 utiliza Internet Explorer 6
- Outlook 2007/10/13 usa Microsoft Word
- Los clientes web utilizan el motor respectivo de su navegador (por ejemplo, Safari usa WebKit, Chrome usa Blink)
Algunos clientes también agregarán sus propios estilos encima del tuyo, por ejemplo, Gmail establece todas las fuentes <td> en font-family: arial,sans-serif; , lo que podría impactar en cómo se rinde un correo electrónico.
Antes de 2016, todos los productos de Gmail eliminaban las etiquetas <link> , cualquier CSS dentro de las etiquetas <style> y cualquier otro CSS que no estuviera en línea. A finales de 2016, Gmail comenzó a admitir la etiqueta <style> y las consultas de medios en la mayoría de sus productos. Aquí hay una actualización desde el 23 de noviembre de 2016 :
Los fundamentos (tablas y CSS en línea)
Tablas para Layout
La estructura de un archivo de correo electrónico HTML es similar a la de una página web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Sin embargo, un diseño CSS basado en <div> no funciona en el correo electrónico como lo hace en la web. Los principales clientes de correo electrónico no ofrecen soporte para cosas como flotadores y flexbox, o pueden manipularlo de diferentes maneras. <div> s también tienen problemas de posicionamiento y modelo de caja en diferentes clientes, particularmente Outlook. Existen algunas técnicas para codificar un correo electrónico utilizando solo <div> s, pero es más seguro seguir con las tablas para el diseño.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
CSS en línea
La aplicación de un estilo en línea le da prioridad sobre los estilos más alejados (como los estilos de cliente de correo web), y también funciona en torno a los clientes de correo electrónico que eliminan CSS de la cabeza o archivos CSS externos. El CSS en línea es la mejor manera de asegurar una visualización consistente en cada cliente de correo electrónico.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Tienes un par de opciones para insertar CSS:
- Escribe CSS en línea a medida que avanzas
- Usa fragmentos locales en tu editor
- Use un inliner CSS basado en web como este
- Usa un inliner CSS programático como este
- Utilice un proceso de construcción como este o un lenguaje de plantillas
- Deje que su proveedor de servicios de correo electrónico se encargue de usted por usted (si es que lo admiten)
Codificación de correos electrónicos para todos los clientes de correo electrónico
Método de codificación utilizado: Hybrid / Spongy
Siempre ha sido un mito que div no puede ser usado en correos electrónicos. Hay clientes de correo electrónico (a diferencia de Outlook) que pueden representar div correctamente. El siguiente ejemplo ilustrará cómo se puede codificar un correo electrónico que funcione en la aplicación Gmail (con actualizaciones aún no implementadas), dispositivos de Samsung y otros clientes de correo electrónico que no leen las consultas de los medios.
Introducción a las declaraciones condicionales de Outlook
Las declaraciones condicionales de Outlook son muy útiles cuando se trata de enviar correos electrónicos o mostrar algo específico como, por ejemplo, retroceder para Outlook.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
El código anterior lee si es mayor que Microsoft Outlook 9 o IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Versiones para sentencias condicionales enumeradas.
Comenzando una plantilla de email híbrida
Cada paso se ha explicado de forma que sea fácil de entender para cualquier persona con conocimientos básicos de HTML.
Primero, comenzamos con una tabla de envoltura que se extenderá por toda la pantalla y con una clase de contenedor.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Después de eso, agregamos una consulta de medios para clientes de correo electrónico que no leen el ancho máximo, pero leen el CSS en el encabezado. La consulta de medios se dirigirá a todas las pantallas y mostrará el contenedor a 700 píxeles de ancho.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
A continuación, agregamos una declaración condicional de Outlook que mantiene la tabla (con el contenedor de clase) para que tenga un ancho de 700 píxeles.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
El código anterior ahora debe mantener su plantilla en Outlook a 700px de ancho.
Ahora para las columnas. El código siguiente creará dos columnas iguales en la plantilla, ambas con un ancho de 350 px.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Después de esto el límite es solo tu imaginación o el diseñador. Cuando se hacen los diseños, es importante involucrarse en la etapa de armado de alambre para que no haya sorpresas una vez que el diseño esté en la etapa de codificación.
Nota:
- Las imágenes de retina necesitarán imágenes configuradas en el nivel de elemento, no en su estilo <img src = "" width = "" ...
- Aún puede elegir hacer CSS en línea o puede elegir CSS en la cabecera solo si todos sus clientes admiten CSS en la cabecera.
