Cómo crear un email HTML con y sin código
Paul Newham 
Los emails son una forma estupenda de comunicarte con cualquier público. Pero las bandejas de entrada se llenan muy rápido. Si quieres que tus emails no pasen desapercibidos, deben destacar de entre los demás. Necesitan tener un diseño atractivo y ser fáciles de leer.
¿Cómo se consigue eso? Diseñándolos con código HTML. De la misma forma en que se diseña y crea una página web.
Eso es genial si tienes los conocimientos de programación necesarios para codificar un email HTML. Pero aquí vienen las buenas noticias: también puedes crear un email HTML desde cero sin necesidad de utilizar código.
En este artículo te explicaré ambos métodos. Cómo crear emails HTML con código y sin código.
¿Qué es un email HTML?
Un email HTML es un email creado con código de programación. Al igual que las páginas web, los emails HTML se crean utilizando los llamados lenguajes de «marcado» HTML, CSS y XML. HTML son las siglas de «lenguaje de marcado de hipertexto». Y permite crear la estructura de una página web o un email.
CSS son las siglas de «hojas de estilo en cascada». Este lenguaje determina el aspecto de los elementos en la pantalla. XML es la abreviatura de «lenguaje de marcado extensible». Y ayuda a diferentes plataformas informáticas a leer los mismos datos.
En términos más sencillos, un email HTML es un email con un diseño visual claro. Ve a tu bandeja de entrada y abre un email estándar de un amigo o compañero de trabajo. ¿Qué ves? En su mayor parte, solo texto. Esto se denomina email de texto sin formato.
Un email HTML es diferente porque no solo contiene texto. Vuelve a buscar en tu bandeja de entrada un email de una empresa. Algo como un boletín informativo o un email promocional. ¿Es diferente? No solo tiene texto sin formato, ¿verdad?
Un email HTML está diseñado para verse bien y llamar la atención. Tiene colores. Tiene imágenes y gráficos. Tiene un formato y un estilo agradables a la vista. Las empresas suelen usar los emails HTML en sus campañas de marketing. Los emails son fundamentales para la gestión de las relaciones con los clientes de muchas empresas. Pero para que funcionen, tienen que llamar la atención. Y precisamente por eso las empresas utilizan los emails HTML: para que destaquen y llamar la atención.
Las empresas necesitan emails de marketing para provocar una respuesta. Por eso, los emails HTML suelen incluir «llamadas a la acción» o CTA. No basta con que los destinatarios abran y lean el email. Las empresas necesitan que los suscriptores actúen. Hacer clic para ver una oferta especial. O registrarse en un servicio nuevo.
Un email HTML es un vehículo para estas CTA. Crea un email bonito. Capta la atención. Haz que tu público actúe. Veamos cómo se hace.
Cómo crear un email HTML sin código
¿Puede usar HTML sin programar? ¿No es una contradicción? No, si tienes un editor de arrastrar y soltar.
Las plataformas web como Wix y Squarespace han utilizado estos editores desde hace años. Supusieron un auténtico punto de inflexión en el diseño web. Con un editor de arrastrar y soltar, cualquiera puede crear sitios web atractivos y funcionales. No es necesario tener conocimientos de programación.
Lo mismo ha ocurrido con los emails. Si utilizas un servicio de email marketing, es probable que tenga un creador de emails de arrastrar y soltar. Así es como se acelera la creación de emails. Al igual que sus primos, los editores web, son muy fáciles de usar. Solo necesitas conocimientos básicos de informática.
Para este artículo, he decidido utilizar Stripo. Es uno de los mejores creadores de plantillas de email. No solo puedes crear emails atractivos y responsive de forma rápida y sencilla. Además, es gratuito. ¿He mencionado lo fácil que es?
Stripo te permite guardar algunos elementos del diseño para volver a utilizarlos en futuros proyectos. Si formas parte de un equipo, puedes añadir comentarios para tus compañeros y colaborar en tiempo real. Y obtienes asistencia por email gratuita. Veamos cómo funciona.
1. Selecciona una plantilla o empieza desde cero
Stripo tiene más de 1600 plantillas de email HTML gratuitas. ¡Es una barbaridad! Sea cual sea tu tipo de negocio, seguro que encuentras una plantilla de email HTML que se adapte a lo que haces.
Para ayudarte a encontrar la más adecuada, las plantillas están agrupadas por tipo, sector, temporada, funciones e integraciones. Las categorías de tipo y sector son las que me parecen más útiles. Aquí puedes acceder a 406 plantillas de email promocionales diferentes. O a 275 plantillas para promocionar un evento. También hay algunas categorías de nichos muy interesantes. ¿Quieres intrigar a tus contactos con un email HTML que les haga adivinar qué vendrá después? ¡Elige una de las 16 plantillas teaser!
Las plantillas de temporada también son útiles para vincular una promoción a la época del año. Stripo tiene más de 800 plantillas con una temática festiva. La categoría de funciones incluye plantillas de email con gráficos en 3D, elementos AMP, animaciones CSS, carruseles y vídeos.
Y no tienes que elegir una plantilla de email HTML si no quieres. Si prefieres hacerlo por tu cuenta, solo tienes que seleccionar la opción «Empezar desde cero». Eso es lo que hice para crear la plantilla de email que se muestra a continuación. Y te explicaré exactamente cómo lo hice.
Explora más de 1600 plantillas de email HTML
2. Personaliza tu email
Tanto si eliges una plantilla HTML prediseñada como una en blanco, el proceso es el mismo. El editor de Stripo te permite personalizar los diseños, el texto, las imágenes y las combinaciones de colores. Y puedes utilizar las mismas herramientas para crear diseños desde cero.
Crear el diseño
Así es como se ve el editor con una plantilla en blanco. Podría haber empezado a arrastrar bloques de contenido desde la izquierda directamente. Pero en lugar de ello, eliminé los contenedores vacíos y abrí Estructuras y módulos para encontrar algunas estructuras predefinidas y ahorrar tiempo. Decidí arrastrar tres bloques predefinidos y mi plantilla ya empezó a tomar forma.
Ahora tengo una plantilla de email HTML con un logotipo, navegación y dos tarjetas en el encabezado.
¿Y si quiero que los colores coincidan con los de mi marca? Para configurar una combinación de colores para todo el email, ve a Stripes y allí podrás elegir los colores de fondo para las rayas y los bloques de contenido. Ya estoy contento con los colores, así que los dejé tal cual.
Añadir imágenes
Decidí que también quería añadir una imagen principal a la tarjeta del encabezado de la derecha. Así que eliminé el encabezado, el texto y el botón para dejar espacio para una imagen.
Stripo hace que añadir imágenes a tu email HTML sea fácil. Cuando añades un bloque de imagen, verás la «Galería de imágenes» a la derecha.
Puedes añadir tus propias imágenes subiéndolas desde tu ordenador. O pegar las URL de las imágenes para añadir imágenes de la web.
La biblioteca de imágenes gratuitas de Stripo se llama Photostock. Es un recurso fantástico. Hay más de 500 000 imágenes disponibles a través de Pexels y Pixabay.
Stripo también tiene una función integrada para generar imágenes. Puedes generar imágenes con DALL-E, Gemini y Stability en tres formatos de aspecto diferente. Y las enormes galerías de iconos y GIF integradas facilitan mucho la adición de cualquier tipo de elemento visual.
También puedes encontrar gráficos de temporada para Navidad, Black Friday, Cyber Monday, Pascua, Halloween, Año Nuevo y todas las fiestas internacionales importantes. Las decoraciones incluyen globos, marcos de banners, marcas de verificación, descuentos, cargadores y regalos. Algunos de los gráficos están un poco desactualizados.
Todas las imágenes se guardan en tu propio administrador de archivos. Una vez añadidas, verás todos tus archivos de imagen cada vez que hagas clic en el botón de exploración del bloque de imágenes. Solo tienes que hacer clic en Insertar para añadir una imagen a tu email.
De vuelta en el editor, haz clic en el bloque de imagen para editarlo. Yo quería cambiar el tamaño de mi imagen. Y redondear las esquinas para que encajara en la tarjeta de la izquierda. Ambas opciones eran visibles y de fácil acceso en el panel derecho de la interfaz.
Stripo también tiene un editor de imágenes integrado. Para editar tu imagen, haz clic en el icono del marco. Aquí encontrarás más opciones para cambiar el tamaño y el diseño de tu imagen. También puedes aplicar filtros y añadir texto a tu imagen.
Empieza a usar Stripo gratis aquí
Añadir texto
A continuación, es el momento de añadir nuestro texto. Los emails HTML pueden contener tanto texto como quieras. Todo depende de lo que quieras conseguir. Pero yo creo que es una buena idea llamar la atención primero. Céntrate en tener un diseño llamativo y mensajes breves y claros. Siempre puedes añadir más detalles más abajo en el email.
Añadir o editar texto en Stripo es muy fácil. Solo tienes que hacer clic en un bloque de texto y escribir.
Yo empecé por el encabezado. Al hacer clic en un bloque de texto, aparece el menú de formato a la derecha. Puedes cambiar el estilo del párrafo, el estilo del texto, la alineación, el tamaño y el color. También tiene opciones adicionales, como añadir caracteres especiales y emoticonos, o hipervínculos.
Stripo incluye fuentes seguras para el email e incluso algunas fuentes de Google, como Arvo, Lato, Lora, Merriweather, Open Sans y Roboto. Y puedes incluso añadir fuentes personalizadas a Stripo.
Incluir tu CTA
Pasemos ahora a la última pieza del diseño, el botón CTA. Para personalizar tu botón CTA, haz clic en el bloque en la vista previa del editor. Verás todas las opciones de edición a la derecha. Aquí es donde puedes añadir el enlace, editar el texto del botón y dar formato al propio botón.
Después de escribir mi CTA y añadir mi enlace, quise cambiar el color del botón. Abrí «Estilos» y copié y pegué el código de color de un bloque más abajo para obtener un color más contrastado que se ajustara a mi paleta de colores.
3. Exporta tu email HTML
Tu email HTML sin código ya está listo. Ahora viene la parte importante. ¡Enviarlo!
Stripo no es un Proveedor de Servicios de Email (ESP) ni una plataforma de email marketing. Por lo tanto, no puedes enviarlo directamente desde Stripo. Pero es muy fácil exportar tu diseño a las mejores plataformas de email marketing.
Cuando tu diseño esté listo, haz clic en Exportar. Aparecerá un menú emergente con tres opciones:
Archivo: descarga tu plantilla de email en formatos AMPHTML, HTML, Image o PDF. El formato HTML funciona con la mayoría de los ESP y es gratuito. Comprueba si tu ESP tiene una opción de importación de HTML. Si es así, genial. Puedes subir el archivo ZIP y enviar campañas con tu plantilla personalizada.
Aplicación: incluye integraciones con Gmail, Make, n8n, Outlook, Webhook y Zapier.
Proveedor de email: es la opción más sencilla. Utiliza integraciones para exportar tu email HTML directamente a tu ESP. Está disponible para más de 75 plataformas, como ActiveCampaign, Brevo, Hubspot, MailerLite, Moosend y GetResponse.
Cómo codificar un email HTML
Pasemos al segundo método para crear un email HTML: escribir el código HTML. Para ello, necesitas saber HTML y CSS.
¿Por qué hacerlo si los editores modernos sin código son tan fáciles de usar? Los programadores HTML argumentan que la codificación les da más libertad y control. Los editores de arrastrar y soltar son fáciles de usar. Pero siempre estás utilizando plantillas y bloques de contenido prediseñados. Sí, puedes personalizarlo todo. Pero hay límites en lo que puedes hacer.
Si creas un email HTML utilizando tus conocimientos de programación, eliminas esos límites. Creas las plantillas, los bloques de contenido y los diseños generales completamente desde cero.
Entonces, ¿cómo se hace? No necesitas un software especial para codificar un email en HTML. Puedes utilizar un sencillo editor de texto plano como el Bloc de notas. Una vez que hayas escrito tu script, súbelo a tu plataforma de email.
Pero es una buena idea utilizar un editor HTML. Estos incluyen muchas funciones útiles, como resaltar los errores en el código. Algunos incluso muestran el diseño que el código está creando mientras lo escribes. La mayoría de los programadores web profesionales utilizan editores HTML hoy en día. Hay muchas opciones disponibles. Lee nuestra guía de los mejores editores HTML para que puedas elegir el que mejor se adapte a tus necesidades.
Para este proyecto, me decidí por CoffeeCup. Es un editor HTML WYSIWYG, que significa «lo que ves es lo que obtienes». Eso significa que ves el código tal y como lo escribes. También tiene funciones útiles, como plantillas de código HTML que puedes utilizar. Es una buena opción intermedia. Te ofrece más control que un editor de arrastrar y soltar, pero te ayuda si no eres un experto en programación.
1: Doctype
La primera etapa en la codificación de un email HTML es configurar un Doctype. Esto le indica al software que lee el código que se trata de HTML. Y también qué versión de HTML estás utilizando. Esto es importante para que los clientes de email sepan qué etiquetas esperar e interpretarlas correctamente.
Cada fragmento de código HTML debe comenzar con la etiqueta <!DOCTYPE html>.
Durante mucho tiempo, la versión recomendada de HTML para codificar emails fue XHTML 1.0 Traditional. Se trata de un lenguaje híbrido que abarca tanto la sintaxis HTML como la XML. XML facilita que diferentes servicios interpreten los datos de forma coherente. Esto es importante si quieres que tus emails se vean bien en muchos clientes de email diferentes.
Hoy en día, lo mejor es utilizar HTML 5 para codificar los emails. HTML 5 es la última versión de HTML y también cubre la sintaxis XML. Esto te facilita la vida, ya que solo tienes que utilizar la etiqueta <!DOCTYPE html>. El software asume que te refieres a HTML 5 por defecto. Si deseas utilizar otra versión de HTML, debes especificarlo.
En CoffeeCup, puedes configurar el tipo de documento utilizando la opción Inicio rápido. Esto te ofrece una selección de versiones HTML en un menú desplegable. HTML 5 es la opción predeterminada.
La etiqueta <!DOCTYPE html> por sí sola no es suficiente para empezar a codificar. También necesitas un par de etiquetas de apertura <html> y cierre </html>. Todo el código que escribas para tu email debe estar dentro de estas etiquetas.
También debes utilizar la etiqueta <html> para establecer el idioma de tu email. La etiqueta para el inglés, por ejemplo, es <html lang=”en”>.
Una vez más, la opción Inicio rápido de CoffeeCup te permite configurarlo automáticamente.
2: Cómo preparar tu plantilla HTML <Head>
Hay mucho trabajo de preparación cuando se codifica HTML. Dedicas tanto tiempo a configurar el documento como a diseñar y añadir contenido. Las etiquetas Doctype y <html> son solo el principio. Después, es el momento de añadir toda una sección de código dedicada a la configuración. La sección <head>.
No la confundas con el encabezado de tu email HTML. El encabezado es la sección superior del contenido de tu email. La sección <head> del código no se ve en el diseño. Establece los metadatos para el resto del documento. Al igual que la etiqueta Doctype, los metadatos proporcionan información importante al cliente de email. Esto incluye más información sobre cómo debe leerse el código. Pero también es donde se establecen las reglas específicas de estilo y formato del documento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<title>Plantilla de email de ejemplo</title>
Todos los metadatos deben ir entre las etiquetas <head> y </head>. Aquí tienes dos metaetiquetas comunes que puedes utilizar:
- Viewport: Todos los encabezados de email deben contener esta etiqueta: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. Esto fija el área visible de tu email al ancho de la pantalla del dispositivo.
- Charset: El software informático no puede leer los caracteres de texto directamente. Necesita códigos para interpretarlos. El juego de caracteres le indica al software qué biblioteca de códigos debe utilizar. UTF-8 es el más común.
También puedes darle un nombre a tu plantilla de email HTML. Escribe el nombre entre las etiquetas <title></title>. Si alguien abre tu email en un navegador web, el título se mostrará en la pestaña.
3: Cómo personalizar el estilo de tu email HTML
La sección <head> también es importante para personalizar el estilo de tu email HTML. Es donde se crean las reglas de estilo para todo el email.
El estilo para el HTML se trabaja utilizando un lenguaje de programación diferente llamado CSS. El CSS se utiliza para establecer los colores, los tipos de fuente, los tamaños y los diseños.
<style>
body {
color:#000000;
background-color:#FFFFFF;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
p1 {font-family: Arial, sans-serif;}
</style>
Las reglas de estilo CSS se pueden añadir a cualquier parte del código HTML. Pero hay una razón muy importante para añadir el CSS a la sección <head> de un email HTML. Gmail ignora el CSS en el contenido del cuerpo. Es muy probable que algunos de tus suscriptores utilicen Gmail. Es el proveedor de servicios de email más popular del mundo. Si no creas reglas CSS en la sección <head>, tu email no se verá correctamente en su bandeja de entrada.
Todas las instrucciones de estilo van dentro de las etiquetas <style></style>. En el código anterior, he establecido las siguientes reglas de estilo.
En primer lugar, he establecido el color predeterminado de la fuente («color») en negro (#000000). Y el color de fondo en blanco (#FFFFFF). También he creado un espacio para añadir una imagen de fondo desde una URL web. La instrucción «no repeat» significa que cualquier imagen de fondo solo aparecerá una vez.
Debajo, las etiquetas «a» establecen los colores del texto para los enlaces abiertos y sin abrir. A continuación, la etiqueta <p1> establece el tipo de fuente predeterminado para los párrafos. Puedes establecer diferentes fuentes para diferentes secciones utilizando <p2>, <p3>. Y puedes hacer lo mismo con los encabezados utilizando <h1>, <h2>, <h3>, etc.
Consultas de medios: codificación de una plantilla de email responsive
Debes pensar en cómo se verá el diseño de tu email en diferentes dispositivos y en diferentes clientes de email.
Los diferentes tamaños de pantalla y los diferentes programas cambian el aspecto del mismo email. El objetivo es que tu diseño único se vea lo mejor posible en todas las plataformas. Esto se denomina diseño responsive.
HTML y CSS te ofrecen otras herramientas para hacerlo. Ya hemos visto la metaetiqueta viewport. Un buen comienzo es asegurarte de que el área visible de tu email cambia con los diferentes tamaños de pantalla. Pero hay otras diferencias que debes tener en cuenta. Como la resolución de la pantalla y las dimensiones de la ventana del navegador, etc.
Las consultas de medios CSS indican a los diferentes clientes de email y dispositivos cómo mostrar tu email. Aquí tienes un ejemplo:
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
div.example {
font-size: 30px;
}
}
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
{
div.example {
font-size: 80px;
}
}
</style>
Este código cambia el diseño en función del tamaño de la pantalla. La regla «max-width: 600px» se aplica a pantallas más pequeñas de 600 píxeles de ancho. Por ejemplo, los dispositivos móviles. En estas pantallas, mi email se mostrará con una sola columna y un tamaño de fuente predeterminado de 30 píxeles. En pantallas de hasta 900 píxeles, tendrá dos columnas y un texto más grande.
4: Ejemplo de código <head> final del email
Con esto ya hemos terminado el código <head>. Así es como ha quedado el mío:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<title>Plantilla de email de ejemplo</title>
<style>
body {
color:#000000;
background-color:#FFFFFF;
background-image:url('Background Image');
background-repeat:no-repeat;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
p1 {font-family: Arial, sans-serif;}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
div.example {
font-size: 30px;
}
}
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
{
div.example {
font-size: 80px;
}
}
</style><!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Debo destacar que esta es una versión simplificada. Una sección <head> real para un email HTML puede ser mucho más larga. Parece mucho solo para configurar tu plantilla de email HTML. Pero esta etapa es esencial. Garantiza que las diferentes plataformas muestren tu email de la forma que deseas. Y también te otorga un control total sobre el estilo.
5: Cómo crear el <body> de tu email
Ahora vamos a crear el contenido del email HTML. Todo lo que quieras que sea visible en tu email debe ir entre las etiquetas <body></body>.
Si tienes experiencia en la programación de sitios web, hay un par de cosas que sabrás. A estas alturas, es posible que esperes haber establecido las reglas de estilo para toda la página en la sección <head>. Pero no funciona así cuando creas un email HTML. Y es que también personalizas el estilo en el cuerpo.
¿Por qué? Muchos ESP son muy malos leyendo las reglas de diseño CSS. Para solucionar esto, es más seguro crear diseños de email HTML utilizando tablas. Pero seguirás teniendo problemas si el ESP elimina las reglas de estilo de tus tablas en la sección <head>. Por lo tanto, es más seguro aplicar el estilo a las tablas «en línea» a medida que las creas.
Aquí tienes un ejemplo:
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff"></table>
<table align="center" style="width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:0;">Email Vendor Selection</td>
</tr>
</table>
</body>
Esto crea una «tabla anidada». O una tabla dentro de otra tabla. La primera es la tabla principal. Se convierte en el fondo para el resto de mi diseño. He fijado el ancho en 100 %, para que ocupe toda la pantalla en cualquier dispositivo. Y he establecido un color de fondo, porque esta tabla ahora se superpondrá al fondo del cuerpo. El código role=»presentation» indica al cliente que la tabla es para su visualización. No son datos.
La segunda tabla es ahora mi área de contenido. La etiqueta <tr> crea una fila. La etiqueta <td> crea una celda. Por ahora, solo mostrará el texto «Email Vendor Selection».
Fíjate en que esta vez he fijado el ancho de la tabla en 600 píxeles. Este sigue siendo el ancho estándar para los elementos de contenido en los emails HTML. Se basa en cómo la mayoría de los clientes de email de ordenador muestran los emails, por lo que está un poco desfasado. Pero si configuras correctamente las consultas de medios CSS, se renderizará fácilmente en dispositivos móviles.
Fíjate también en que los valores de margen, relleno y espaciado del borde están fijados en cero. Esto se debe a que muchos motores de email añaden sus propios márgenes a las tablas. Por lo tanto, podrías terminar con mucho espacio en blanco que no habías previsto. Es más seguro que no añadas ninguno.
Hasta ahora he codificado una sección de mi plantilla. Esta se situará en la parte superior de mi página, así que la llamaremos encabezado. Para añadir más secciones, solo tengo que repetir el código de la tabla anidada. Al repetir la tabla dos veces más, ahora tengo una estructura de tres partes: encabezado, cuerpo principal y pie de página. Una plantilla de email HTML sencilla.
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff"></table>
<table align="center" style="width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:0;">Email Vendor Selection</td>
</tr>
</table>
<table align="center" style="width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:0;">Logo</td>
</tr>
<tr>
<td align="center" style="padding:0;">Header 1 Text</td>
</tr>
<tr>
<td align="center" style="padding:0;">Header 2 Text</td>
</tr>
<tr>
<td align="center" style="padding:0;">Image</td>
</tr>
<tr>
<td align="center" style="padding:0;">CTA</td>
</tr>
</table>
<table align="center" style="width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:0;">Footer</td>
</tr>
</table>
</body>
A continuación, añadí más filas y celdas a la tabla central o cuerpo principal. Creé marcadores de posición para el texto y las imágenes. Así es como se ve mi email hasta ahora:
Sencillo, sí. Pero ahora que tengo una estructura, puedo empezar a añadir contenido. Puedo formatear cada fila y celda como elementos diferentes. Puedo establecer diferentes alturas y anchuras para darles forma. Puedo formatear los colores, los tipos de texto y los tamaños. A partir de este diseño básico, ahora tengo un control total sobre mi diseño.
Es necesario mucho código para convertir este sencillo esquema en un email completo. Esto es lo que hice a continuación en la sección del encabezado:
<body style="margin:0;padding:0;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;"></table>
<table align="center" style="width:600px;background:#000000;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:center;">
<tr>
<td align="center;">
<h1 style="font-size:18px;margin:10px 0 10px 0;font-family:Arial,sans-serif;color:#ffffff;">Email Vendor Selection</h1>
</td>
</tr>
</table>
He utilizado la etiqueta <background> para hacer que la tabla sea negra. Como estoy utilizando tablas anidadas para estructurar mi email, tendré que hacer esto con todas las tablas. A continuación, he cambiado el color del texto de la etiqueta <h1> a blanco. Establecer el color de cada elemento de texto por separado te ofrece más flexibilidad.
Fíjate en que también he establecido márgenes para la etiqueta <h1> en lugar de para la tabla. Esto evita que los clientes de email apliquen márgenes predeterminados alrededor del texto. Si lo hacen, tu email se verá diferente en cada cliente. El tamaño de la fuente y los márgenes también controlan la altura de la fila.
6: Pie de página del email HTML
Podrías pensar que la sección inferior de tu email no es muy importante. ¿Alguien llega a leer hasta aquí? Sin embargo, es importante prestar atención al pie de página de tu newsletter.
Es donde incluyes la información de contacto y suscripción. Debe incluir detalles sobre cómo se suscribió el destinatario a tu newsletter. Y cómo puede darse de baja. Actualmente, esto es una norma legal en la mayoría de los países.
Algunas cosas que debes incluir en el pie de página de tu plantilla de email son:
- Datos de la empresa.
- Una dirección de email para enviar consultas.
- Iconos de redes sociales. Ofrece a los suscriptores la oportunidad de seguirte en otros sitios.
- Un recordatorio de cómo se registró la persona para recibir tus emails.
- Un enlace para darse de baja.
- Detalles de los derechos de autor.
En cuanto a la creación del pie de página, la forma más fácil es volver a anidar tablas. Esta vez he añadido una nueva tabla dentro de la celda «pie de página» existente. Esto me ha permitido crear dos nuevas celdas para hacer columnas. Al establecer el ancho de la celda en 50 %, se obtienen automáticamente dos columnas.
<table align="center" style="width:600px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
<tr>
<td align="center" style="padding:0;">
<table role="presentation" style="width:300px;border-collapse:collapse;border:0;border-spacing:0;">
<tr>
<td style="padding:0;width:50%;" align="left">
<p style="font-size:8px;margin:5px 0 0 0;font-family:Arial,sans-serif;">© Email Vendor Selection 2026</p>
</td>
<td style="padding:0;width:50%;" align="right">
<a href="url" style="font-size:8px;font-family:Arial,sans-serif;">Unsubscribe from this newsletter</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
A continuación, establezco las reglas de estilo como antes. La etiqueta <a href> crea un hipervínculo para mi opción de cancelar la suscripción. Debes crear una página dedicada a la cancelación de la suscripción en tu sitio web. Pega la URL junto a la etiqueta href. De este modo, los usuarios podrán utilizar este enlace para darse de baja de tus emails. Incluso puedes configurarlo para que la baja se realice con un solo clic.
Encabezado para darse de baja de la lista
El pie de página de tu email no es el único lugar donde debes incluir una opción para darse de baja. Es recomendable incluir un enlace en el encabezado del cliente de email. Aquí es donde se muestran el asunto y el remitente del email cuando alguien abre un email.
Es posible que necesites ayuda para configurar un encabezado de cancelación de suscripción a la lista. Si envías emails a través de un servicio de email marketing, no deberías tener problemas. La mayoría tienen la opción de cancelar la suscripción a la lista. Algunos la tienen por defecto.
Pero si envías emails a través de clientes de email normales, tendrás que ponerte en contacto con el administrador. Y tendrán que habilitar la cancelación de la suscripción a la lista en tus emails.
Puedes utilizar una URL con una página de destino como se ha explicado anteriormente. Esto se denomina encabezado HTTP list-unsubscribe. Otra opción es proporcionar a tu ESP una dirección de email. Esto se denomina encabezado mailto unsubscribe. Cuando alguien haga clic en el enlace, se enviará un email a la dirección que hayas proporcionado. A continuación, tendrás que darles de baja manualmente.
7: Prueba el código de tu plantilla de email
Dejo las pruebas para el final, pero tú no deberías hacerlo. Es importante que pruebes los emails HTML durante todo el proceso de desarrollo. Debes saber inmediatamente si algo no funciona correctamente. Si lo dejas para después de terminar de programar todo, podrías tener mucho trabajo para arreglarlo.
Una de las razones por las que utilizo CoffeeCup es que puedes previsualizar tu código con un solo clic. Esto es ideal para comprobar que tu email HTML se ve como quieres mientras trabajas. Pero no te dice cómo se verán tus emails en diferentes clientes de email o navegadores. Ni cómo se renderizarán en dispositivos móviles.
Para ello, necesitas una herramienta de prueba de emails específica. Algunas opciones populares son HTML Email Check, Litmus o Email on Acid.
Usa el código de tu plantilla de email HTML en tu ESP
Ya has probado tu código y se ve muy bien en todas las plataformas. Ahora viene la parte importante: enviarlo.
La forma de añadir código HTML a un email depende del ESP. En Gmail, hay un truco sencillo. No es necesario añadir el código HTML al email. En su lugar, guarda el código como un archivo .html. A continuación, ábrelo con tu navegador. Deberías ver el diseño completo de tu email. Copia y pega esto en la ventana de redacción de Gmail y pulsa enviar.
En Outlook, tienes que cambiar el formato del mensaje a HTML. En Configuración, habrá una opción llamada «Redactar mensaje en formato». Haz clic en ella y selecciona HTML. Ahora puedes pegar tu código en la ventana de redacción. Outlook lo convertirá cuando lo envíe.
La mayoría de los proveedores de servicios de email y herramientas de CRM con email marketing te permiten importar código HTML para crear una nueva plantilla. Y luego puedes utilizarla para enviar una campaña. La forma de añadir HTML será diferente en cada plataforma.
Conclusión: cómo crear un email HTML
¿Codificar o no codificar? Esa es la gran pregunta cuando se crea un email HTML. En este artículo, he repasado ambas opciones. Pero, ¿cuál es la adecuada para ti?
No hay duda de que utilizar un editor de arrastrar y soltar sin código es la forma más fácil de crear un email HTML. Si no tienes conocimientos de programación en HTML, esta es la opción ideal para ti. O incluso si sabes utilizar el HTML, un editor sin código sigue siendo más rápido. Puedes ahorrar mucho tiempo.
Con una herramienta como Stripo, puedes crear plantillas de email HTML con un aspecto fantástico en cuestión de minutos. Son responsive por defecto. Y puedes usarlas gratis. Si quieres encontrar alternativas a Stripo, lee nuestra reseña de los 12 mejores editores de email HTML gratuitos.
Así que, ¿caso cerrado? ¿Nada de codificar un email HTML? No, no podemos descartar por completo utilizar HTML para los emails.
Recordemos por qué queremos crear plantillas HTML en primer lugar. Para obtener diseños únicos que reflejen nuestra marca. Utilizar código desde cero te da mayor libertad y control sobre el diseño. Así que, si tienes los conocimientos y quieres algo muy personalizado, programar sigue teniendo sentido. Tan solo recuerda que es un proceso técnico.
Crea tu propia plantilla de email con Stripo aquí