Primeros pasos con el correo electrónico

HTML y texto sin formato

El correo electrónico HTML es el uso de un subconjunto de HTML y CSS para formatear un mensaje de correo electrónico como una página web usando colores, gráficos, columnas de tablas y enlaces.

Cuando envía 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 sin formato basada en su versión HTML, y también hay [herramientas de terceros] (https://templates.mailchimp.com/resources/html-to-text/).

Ejemplo de un correo electrónico de solo 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

ingrese la descripción de la imagen aquí

Tenga en cuenta que con el reciente lanzamiento de Apple Watch, ha aparecido una nueva parte MIME: text/watch-html. Este contenido solo se mostrará en Apple Watch (y 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 procesamiento para procesar correos electrónicos HTML:

  • Apple Mail, Outlook para Mac, Android Mail y iOS Mail usan WebKit
  • Outlook 2000/02/03 usa Internet Explorer 6
  • Outlook 2007/10/13 usa Microsoft Word
  • Los clientes web usan el motor respectivo de su navegador (por ejemplo, Safari usa WebKit, Chrome usa Blink)

Algunos clientes también agregarán sus propios estilos además del suyo, p. Gmail establece todas las fuentes <td> en font-family: arial,sans-serif;, lo que podría afectar la forma en que se representa un correo electrónico.

Antes de 2016, todos los productos de Gmail eliminaban las etiquetas <enlace>, cualquier CSS dentro de las etiquetas <estilo> y cualquier otro CSS que no estuviera integrado. A fines 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 del 23 de noviembre de 2016] (https://litmus.com/blog/gmail-to-support-responsive-email-design?utm_campaign=podcast_40&utm_source=litmusblog&utm_medium=blog):

ingrese la descripción de la imagen aquí

Los conceptos básicos (tablas y CSS en línea)


Tablas para Diseño

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 floats y flexbox, o lo manipulan de diferentes maneras. <div>s también tienen problemas de posicionamiento y modelo de caja en diferentes clientes, particularmente en Outlook. Hay unas pocas [técnicas](https: //medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e#.wvj401pe5) para codificar un correo electrónico usando solo <div>s, pero es más seguro ceñirse a 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 clientes de correo web) y también evita los clientes de correo electrónico que eliminan CSS del encabezado o archivos CSS externos. CSS en línea es la mejor manera de garantizar una visualización uniforme en todos los clientes 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>

Tiene un par de opciones para insertar CSS:

  • Escriba CSS en línea sobre la marcha
  • Use [fragmentos] locales (http://www.hongkiat.com/blog/sublime-code-snippets/) en su editor
  • Use un inserto CSS basado en la web [como este] (https://inliner.cm/)
  • Use un inserto CSS programático [como este] (https://github.com/premailer/premailer)
  • Use un proceso de compilación [como este] (https://github.com/leemunroe/grunt-email-workflow) o un lenguaje de plantillas
  • Deje que su proveedor de servicios de correo electrónico maneje la línea por usted (si lo admite)

Codificación de correos electrónicos para todos los clientes de correo electrónico

Método de codificación utilizado: híbrido/esponjoso

Siempre ha sido un mito que los div no se pueden usar en los correos electrónicos. Hay clientes de correo electrónico (a diferencia de Outlook) que pueden representar correctamente los div. El siguiente ejemplo ilustrará cómo se puede codificar un correo electrónico que funcionará en la aplicación Gmail (con actualizaciones aún no implementadas), dispositivos Samsung y otros clientes de correo electrónico que no leen consultas de medios.

Presentamos declaraciones condicionales de Outlook

Las declaraciones condicionales de Outlook son muy útiles cuando se trata de procesar correos electrónicos o mostrar algo específico, como respaldos para Outlook.

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

El código anterior dice 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.

Inicio de una plantilla de correo electrónico híbrida

Cada paso ha sido explicado de una manera que debería ser fácil de entender para cualquier persona con conocimientos básicos de HTML.

Primero, comenzamos con una tabla contenedora 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 orientará a todas las pantallas y mostrará el contenedor con un ancho de 700 píxeles.

@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) en 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 debería contener su plantilla en perspectiva a 700 px de ancho.

Ahora para las columnas. El siguiente código 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 realizan los diseños, es importante participar en la etapa de elaboración de cables para que no haya sorpresas una vez que el diseño está en la etapa de codificación.

Nota:

  • Las imágenes Retina necesitarán imágenes configuradas a nivel de elemento, no en su estilo <img src="" width="" …
  • Todavía puede elegir hacer CSS en línea o puede elegir CSS en la cabeza solo si todos sus clientes admiten CSS en la cabeza.