Aunque los mensajes de correo electrónico y las páginas web se crean tanto en HTML como en CSS, la codificación del correo electrónico es diferente de la codificación de las páginas web. Esto se debe a que las aplicaciones de correo electrónico cumplen estándares diferentes a los de los navegadores web.
Cada aplicación de correo electrónico tiene su propio motor de representación que admite diferentes marcas HTML y propiedades CSS y, por lo tanto, determina cómo se muestra el correo electrónico. Microsoft Outlook, por ejemplo, utiliza Microsoft Word como motor de representación que no admite las propiedades de finalización de CSS, entre otras cosas. Por otro lado, Gmail sí.
Dado que las aplicaciones de correo electrónico procesan el correo electrónico de diferentes maneras, los especialistas en marketing por correo electrónico no pueden seguir el mismo enfoque de codificación que los diseñadores o programadores web. En su lugar, tienen que usar un elemento de tabla HTML para redactar el correo electrónico y el CSS incorporado para diseñarlos. Veamos el proceso a continuación.
Plantilla de tabla de correo electrónico HTML
El mensaje de correo electrónico HTML consta de muchos elementos de tabla. Cada elemento de la tabla representa una sección diferente del correo electrónico, incluido el encabezado, el cuerpo y el pie de página.
A continuación se muestra una plantilla de tabla de correo electrónico HTML muy simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title></title>
<style></style>
</head><body>
<div id="email" style="width:600px;">
<!-- Header -->
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
<!-- Body -->
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
<!-- Footer -->
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
Fíjate que hay división con el nombre del identificador «email». Este elemento div contiene tres tablas: cada una representa un encabezado, cuerpo y pie de página de correo electrónico. Estos son los componentes básicos del correo electrónico HTML.
Al usar esta plantilla, puede crear un correo electrónico más complejo como el que se muestra a continuación.
ver la pluma Plantilla de tabla de correo electrónico HTML de Christina Perricone (@hubspot) en CódigoPen.
Echemos un vistazo más de cerca a los atributos que puede definir para agregar borde, color de fondo y otros estilos a su correo electrónico HTML.
Atributos de la tabla de correo electrónico HTML
En HTML, los atributos proporcionan información adicional sobre los elementos HTML. Esta información puede ser relevante o irrelevante y afectar la apariencia, el posicionamiento o la funcionalidad del elemento HTML.
Los atributos siempre están en la etiqueta de apertura de un elemento HTML y tienen la sintaxis: nombre = «valor». Los atributos se pueden escribir en cualquier orden dentro de la etiqueta de apertura.
Se pueden aplicar múltiples atributos a múltiples elementos. Por ejemplo, se puede establecer un atributo de ancho en una imagen o elemento de tabla. Sin embargo, algunos atributos son exclusivos de algunos elementos HTML. Las tablas tienen su propio conjunto de atributos, que incluyen:
- Role: El atributo de rol debe establecerse en «presentación». El rol de presentación se utiliza para eliminar el significado semántico de un elemento y sus hijos. Esto es necesario para los elementos de la tabla en el correo electrónico HTML, ya que solo se utilizan con fines de diseño.
- Alinear: El atributo align especifica la alineación de la tabla de acuerdo con el texto circundante. Puede configurar este atributo a la izquierda, a la derecha o al centro.
- Espaciado de celdas: El atributo cellpacing especifica el espacio entre celdas. Debe establecerse en un número en píxeles.
- Células de relleno: El atributo cellpadding especifica el espacio entre la pared de la celda y el contenido de la celda. Debe establecerse en un número en píxeles. Tiene dos opciones para configurar el relleno de celdas. El atributo cellpadding se puede configurar una vez para cada elemento de la tabla. También puede usar el CSS incorporado para configurar el relleno en celdas individuales. Dado que es probable que mezclar los dos métodos cause problemas en sus aplicaciones de correo electrónico, es mejor evitarlo.
Ahora echemos un vistazo más de cerca a algunos otros atributos a continuación.
Borde de la tabla de correo electrónico HTML
Para determinar si una tabla tiene un borde negro simple en un mensaje de correo electrónico HTML, puede agregar el atributo de borde y establecerlo en «1». Para especificar que no hay borde, establezca el atributo en «0».
Observe en la plantilla de correo electrónico anterior que cada elemento de la tabla tiene un atributo de límite establecido en «0». He aquí un vistazo más de cerca a la sintaxis de la primera tabla:
<table role="presentation" border="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>Veamos cómo cambia un correo electrónico cuando el atributo de límite de cada tabla se establece en «1».
ver la pluma Borde de la tabla de correo electrónico HTML de Christina Perricone (@hubspot) en CódigoPen.
Fondo de la tabla de correo electrónico HTML
Para determinar si una tabla tiene un color de fondo en un correo electrónico HTML, puede agregar el atributo bgcolor y configurarlo con un nombre de color, un código de color hexadecimal o algún otro sistema de color en CSS.
Tenga en cuenta que en la plantilla de correo electrónico anterior, el color de fondo del encabezado está configurado en un tono azul. Para hacer lo mismo en correos electrónicos HTML, el proceso es simple. Simplemente cree un elemento de la tabla y establezca su función, borde y atributos entre las celdas. A continuación, cree una fila de tabla que contenga la celda de datos de la tabla. Coloque el atributo bgcolor en la etiqueta de apertura del elemento
Aquí está el código básico:
<table role="presentation" border="0" cellspacing="0">
<tr>
<td bgcolor="#00A4BD”></td>
</tr>
</table>Tabla de correo electrónico HTML sensible
Si bien redactar un correo electrónico HTML con elementos de tabla puede ser difícil de aprender, hacer que este correo electrónico responda es fácil. Puede hacer que el correo electrónico HTML responda configurando el contenedor div en un ancho fijo y configurando el ancho de las tablas anidadas en 100%.
Aquí hay una mirada más cercana a la sintaxis de un contenedor div con solo una tabla.
<div id="email" style="width:600px;"><table role="presentation" border="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</div>
Redactar un correo electrónico HTML receptivo se considera una buena práctica. Para obtener más información sobre las mejores prácticas para el manejo de correo electrónico HTML, consulte Una guía simple para redactar un correo electrónico HTML [+ Free Templates].
Redactar un correo electrónico utilizando un elemento de tabla HTML
La codificación de mensajes de correo electrónico con un elemento de tabla HTML ayudará a garantizar que sus mensajes se muestren según lo previsto, independientemente de la aplicación de correo electrónico que utilicen sus suscriptores. Solo necesita saber un poco de HTML y CSS para codificar correos electrónicos receptivos con marcos, fondos y otros estilos.
Después de desarrollar su base de código de correo electrónico, puede comenzar a transformar los mejores y más repetitivos correos electrónicos en plantillas usando Creador gratuito de plantillas de correo electrónico de HubSpot.
