Cómo crear una plantilla con diseño de email marketing responsive desde cero
Marta, del equipo de MailerLite
Hoy en día, es raro encontrarse con un correo electrónico que no esté optimizado para móviles y otros dispositivos. Así que cuando lo hacemos, ¡es una experiencia un poco chocante! Desplazamiento lateral, enlaces diminutos y texto ilegible: no es magia lo que impide que ocurran estas cosas, es el diseño responsive del correo electrónico.
Cada año aumenta el número de usuarios de teléfonos inteligentes y el tiempo que pasamos en nuestros dispositivos móviles, según Backlinko, la media será de 4 horas y 2 minutos al día en 2025 (disponible en inglés).
Pasamos más tiempo comprando, navegando y consultando nuestra bandeja de entrada desde la palma de la mano que en cualquier otro sitio. El instinto puede ser diseñar newsletters para pantallas más grandes, pero dar prioridad a las plantillas de correo electrónico que respondan a los dispositivos móviles es una necesidad.
En esta guía, te explicaremos qué significa que un correo electrónico sea “responsive”, por qué es importante, y los pasos y las mejores prácticas que puedes seguir para lograr un diseño de email marketing responsive que funcione en todos los dispositivos.
¿Qué es una plantilla de correo electrónico HTML responsive?
Una plantilla de correo electrónico HTML “responsive” es una plantilla de correo electrónico cuyo contenido se adapta tanto a los móviles como a los otros dispositivos.
¿Cómo lo hace?
Con unos pequeños fragmentos de código mágicos que hacen que tu plantilla, literalmente, responda al tamaño de pantalla en el que se muestra. Ajustan el diseño y los elementos para que el email se vea bien ya sea en un móvil, una tablet, un portátil o un monitor de 32 pulgadas.
Por qué “necesitas” optimizar tus correos electrónicos para móviles
La razón por la que necesitas lograr un diseño de email marketing responsive es la siguiente:
Los dispositivos móviles se están imponiendo: Una investigación de Adestra (disponible en inglés) descubrió que el 81% de los correos electrónicos se leen ahora en dispositivos móviles. Así que, si tus emails no están adaptados a estos tamaños de pantalla, probablemente estés alejando a una buena parte de tus suscriptores.
Los emails no responsive generan menos interacción: No es de sorprender que Adestra también haya descubierto que el 52 % de las personas tienen menos probabilidades de interactuar con un email si la experiencia en móvil es mala.
Los emails no responsive se eliminan en segundos: Adestra también reveló que, cuando alguien abre un email en su smartphone y no se muestra correctamente, sólo tarda 3 segundos en decidir eliminarlo. Básicamente, lo que dura un parpadeo… Y si esto ocurre con frecuencia, es muy probable que también se den de baja.
Tus CTA y esfuerzos de conversión se perderán: Al diseñar una plantilla de email, optimizas el diseño, el contenido y los llamados a la acción para guiar a tus suscriptores hacia una acción. Pero todo ese trabajo no servirá de mucho si el diseño de email marketing se ve desordenado o tus botones no se pueden leer ni pulsar.
Guía paso a paso para diseñar una plantilla de correo electrónico HTML responsive
He trabajado con el desarrollador y diseñador web de MailerLite, Šarūnas, para elaborar estos consejos junto con un enfoque recomendado para crear una plantilla de newsletter responsive que se muestre correctamente en todos los dispositivos. Vayamos al grano.
Paso 1: Configura la estructura HTML básica
Al igual que con cualquier proyecto de desarrollo web, empezar con una estructura básica te dará una base sólida sobre la que trabajar.
1.1 Añade el esqueleto HTML y el DOCTYPE
Añade las etiquetas <html>, <head> y <body> estándar que utilizarías para cualquier archivo HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Email Title</title>
</head>
<body>
<!-- Your email content will go here -->
</body>
</html>La mayoría de los clientes de correo electrónico eliminan ciertos elementos de la sección <head>, lo que significa que las metaetiquetas a menudo no son compatibles. A veces son respetados por determinados clientes de correo electrónico, como Apple Mail, y son inofensivos, así que puedes seguir adelante y añadirlos. Simplemente no incluyas ningún estilo en la sección <head> en el que confíe tu plantilla sin incluir también un fallback.
1.2 Crea un diseño basado en tablas
Los métodos modernos de diseño CSS, como flexbox y grid, no son muy compatibles con los clientes de correo electrónico. Por tanto, para garantizar la mejor compatibilidad entre la mayoría de los clientes, es mejor utilizar tablas para estructurar tus plantillas de correo electrónico.
<table role="presentation" cellpadding="0" cellspacing="0" width="600" align="center" style="border-collapse: collapse; max-width: 600px; width: 100%;">
<tr>
<td align="center" style="padding: 20px;">
<!-- Email content goes here -->
</td>
</tr>
</table>
role="presentation" indica a los lectores de pantalla que la tabla se utiliza con fines de presentación, y no para mostrar datos
El margen no es fiable en los clientes de correo electrónico, así que establece el relleno dentro de las celdas en su lugar
border-collapse: collapse da a tus plantillas de correo electrónico un diseño más limpio y ajustado al colapsar los bordes de las celdas de la tabla en un único borde
Lo normal es una anchura de 600-640px
Paso 2: Crea las secciones de tu plantilla de correo electrónico
Antes de empezar con los elementos de diseño, piensa en las secciones que quieres que tenga tu plantilla. Una plantilla de correo electrónico HTML básica constará de una sección de cabecera, el cuerpo principal del contenido y un pie de página, y cada uno de ellos puede contener varias columnas. Añadámoslos.
<table role="presentation" cellpadding="0" cellspacing="0" width="600" align="center" style="border-collapse: collapse; max-width: 600px; width: 100%;">
<tr>
<td align="center" style="padding: 20px;">
<!-- Main Container -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff; margin: 0 auto; border-collapse: collapse;">
<!-- Header: Small Banner -->
<tr>
<td style="background-color:#222222; padding:10px; text-align:center; color:#ffffff; font-size:12px;">This is a small banner text</td>
</tr>
<!-- Header: Main Header Content -->
<tr>
<td style="padding:20px; text-align:center; font-family:sans-serif; font-size:24px; font-weight:bold; color:#333333;"> Welcome to Our Newsletter </td>
</tr>
<!-- Main Body Section -->
<tr>
<td style="padding:20px; font-family:sans-serif; color:#333333;">
<h1 style="margin:0; font-size:20px;">Main Heading</h1>
<img src="https://via.placeholder.com/560x200" width="100%" style="max-width:560px; height:auto; margin:20px 0;" alt="Main image">
<h2 style="font-size:16px; margin:0 0 10px 0;">Subheading goes here</h2>
<p style="font-size:14px; line-height:1.5; margin-bottom:20px;">This is some engaging copy that tells the reader what this section is about. Keep it short and sweet!</p>
<table cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto;">
<tr>
<td align="center" bgcolor="#007BFF" style="border-radius:4px;">
<a href="#" style="display:inline-block; padding:10px 20px; font-family:sans-serif; font-size:14px; color:#ffffff; text-decoration:none;">Call to Action</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Additional Content Section -->
<tr>
<td style="padding:20px; font-family:sans-serif; color:#333333;">
<h2 style="font-size:18px; margin-bottom:10px;">More to Explore</h2>
<ul style="padding-left:20px; font-size:14px;">
<li>
<a href="#" style="color:#007BFF; text-decoration:none;">Link 1</a>
</li>
<li>
<a href="#" style="color:#007BFF; text-decoration:none;">Link 2</a>
</li>
<li>
<a href="#" style="color:#007BFF; text-decoration:none;">Link 3</a>
</li>
</ul>
<img src="https://via.placeholder.com/560x150" width="100%" style="max-width:560px; height:auto; margin:20px 0;" alt="Additional image">
<p style="font-size:14px; line-height:1.5;">Here's some additional information or content that could be helpful or promotional.</p>
</td>
</tr>
<!-- Footer Section -->
<tr>
<td style="padding:20px; background-color:#f0f0f0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<!-- Social Icons -->
<td align="left" style="font-family:sans-serif; font-size:12px;">
<a href="#">
<img src="https://via.placeholder.com/24" alt="FB" style="margin-right:10px;">
</a>
<a href="#">
<img src="https://via.placeholder.com/24" alt="TW" style="margin-right:10px;">
</a>
<a href="#">
<img src="https://via.placeholder.com/24" alt="IG">
</a>
</td>
<!-- Unsubscribe -->
<td align="right" style="font-family:sans-serif; font-size:12px;">
<a href="#" style="color:#999999; text-decoration:underline;">Unsubscribe</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Main Container -->
</td>
</tr>
</table>Hemos añadido más tablas, filas y celdas para formar la estructura de cada sección de elementos. Hay una sección de cabecera con dos filas: una para un pequeño banner en la parte superior del correo electrónico y otra para el logotipo; una sección de cuerpo principal para nuestro contenido principal y el CTA; una sección de contenido adicional; y una sección de pie de página con enlaces sociales y un enlace para darse de baja.
También hemos añadido algunos estilos básicos en línea y contenido para que sea más fácil ver las distintas secciones en este punto. Esto es lo que tenemos:
Paso 3: Es hora de dar estilo a la plantilla de correo electrónico
Probablemente te habrás dado cuenta de que, cuando se trata del diseño de plantillas de correo electrónico, tienes que tirar por la ventana algunas de las mejores prácticas típicas del diseño web. Cómo utilizar el CSS es uno de ellos.
Como los clientes de correo electrónico bloquean las hojas de estilo externas, tienes que utilizar una combinación de CSS incrustado y CSS en línea para dar estilo a tus elementos.
El CSS en línea es el más fiable y funciona incluso con los clientes de correo electrónico más quisquillosos. CSS incrustado: no tanto. Pero aquí es donde podemos aplicar las consultas de medios que harán que nuestra plantilla HTML sea responsive, ya que no se pueden añadir en línea.
Así que vamos a añadir algunos estilos en línea para que nuestra plantilla sea un poco más atractiva.
El HTML de MailerLite hace que añadir estilos en línea sea más fácil, ya que los añade automáticamente.
En nuestro <body>, añadiremos el color de fondo y definiremos los márgenes y el relleno como 0 para que se extiendan hasta el borde de la pantalla.
<body style="margin: 0 !important; padding: 0 !important; background-color:#DFB8B8;">También hemos añadido un <div> como contenedor de nuestra tabla y hemos establecido el color de fondo, la altura de línea y el tamaño de fuente.
<div style="background-color:#DFB8B8; line-height: 100%; font-size:medium; font-size:max(16px, 1rem);">Y hemos añadido estilos en toda nuestra tabla para establecer la anchura, la fuente, los colores, el posicionamiento y otros estilos. He aquí un ejemplo.
<td style="padding: 0 50px;">
<h2 style="font-family: 'Playfair Display', serif; color: #385A4F; font-size: 42px; line-height: 125%; font-weight: normal; font-style: normal; text-decoration: none; margin-bottom: 0;">See what else we've got...</h2>
</td>
Hemos dado estilo a toda nuestra plantilla de correo electrónico HTML con CSS en línea y hemos añadido algo de contenido e imágenes. El diseño se basa en una de las plantillas que puedes encontrar en MailerLite. Este es el resultado:
¡Tiene muy buena pinta! Pero esto es lo que ocurre cuando lo redimensionas.
-(3).gif)
La anchura de todo el contenido se ajusta (hasta un punto), pero esto sólo redimensiona todos los elementos, haciéndolos más pequeños para que quepan. Esto no funciona en pantallas pequeñas, como las de los smartphones, porque el texto y los botones son demasiado pequeños para leerlos o interactuar con ellos. Así que ¡hagamos que funcione!
Paso 4: Haz que tu plantilla de correo electrónico sea responsive
Para que el diseño de nuestro email marketing HTML sea responsive, vamos a añadir algunos estilos incrustados, consultas de medios y metaetiquetas adicionales. Empecemos por arriba: las metaetiquetas adicionales.
Meta tags
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="x-apple-disable-message-reformatting"><meta http-equiv="X-UA-Compatible" content="IE=edge">: Garantiza que el diseño y los estilos del correo electrónico se muestren correctamente en las versiones anteriores de Internet Explorer y Outlook.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">: Controla cómo se escala el diseño en los dispositivos móviles. Hemos añadido user-scalable=yes para que los usuarios puedan pellizcar el zoom
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">: Ayuda a mantener la coherencia de tu diseño en los clientes de correo electrónico para móviles (especialmente en el correo de iOS) indicándoles que no auto vinculen números de teléfono, fechas, direcciones, correos electrónicos y URLs
<meta name="x-apple-disable-message-reformatting">: Conserva el formato original impidiendo que Apple Mail ajuste automáticamente el diseño
Comentarios condicionales
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<!--[if mso]>
<style>
* { font-family: sans-serif !important; }
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->Puesto que Microsoft Outlook es el cliente que con más frecuencia causa problemas de renderización, puedes utilizar comentarios condicionales para dirigirte a él o excluirlo y solucionar posibles problemas. Aquí tienes un desglose de lo que hacemos aquí:
<!--[if !mso]> <meta http-equiv="X-UA-Compatible" content="IE=edge">: Configura Internet Explorer para que utilice el motor de renderizado más reciente en clientes que no sean Outlook.
<!--[si mso]> <style> * { font-family: sans-serif !important; } </style>: Obliga a Microsoft Outlook a utilizar la familia de fuentes especificada (Outlook tiene problemas con las fuentes personalizadas)
<noscript> <xml> <o:OfficeDocumentSettings> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript>: Establece un bloque XML específico de Office para garantizar que Outlook renderiza a los 96 píxeles por pulgada (PPI) estándar. Sin esto, podría renderizarse a 120 PPI, lo que puede distorsionar el diseño.
CSS incrustado
¿Recuerdas cuando dijimos que debías utilizar CSS en línea en tus correos electrónicos? Bueno, eso era más o menos cierto.
Tener los principales elementos de diseño visual definidos en línea garantizará un aspecto coherente en todos los clientes de correo electrónico, incluso cuando eliminen el CSS incrustado. Pero sigue siendo una buena idea incluir CSS incrustado porque algunos clientes lo admiten (como Apple Mail, Gmail para web y Outlook para Mac).
Esencialmente, ¡ayuda a garantizar que tu plantilla de correo electrónico esté optimizada independientemente del cliente en el que se muestre!
<style type="text/css">
/* RESET STYLES */
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img {
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
table {
border-collapse: collapse;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
p {
margin: 0;
word-break: break-word;
}En este fragmento de nuestro CSS incrustado, estamos estableciendo los estilos para las etiquetas html, body, img, table, td, heading y p, utilizando !important; donde sea necesario para anular cualquier regla conflictiva. También hemos incluido algunas reglas adicionales para ayudar a que nuestro correo electrónico responda en todos los dispositivos y clientes.
-webkit-font-smoothing: antialiased;: Hace que las fuentes se vean más finas, suaves y definidas en navegadores WebKit usando suavizado de bordes en escala de grises.
-moz-osx-font-smoothing: grayscale;: Hace lo mismo, pero para Firefox en macOS.
text-rendering: optimizeLegibility;: Mejora la legibilidad al indicar al navegador que use funciones tipográficas avanzadas.
-ms-interpolation-mode: bicubic;: Mejora la calidad de las imágenes redimensionadas en Internet Explorer al indicarle que use interpolación bicúbica.
mso-table-lspace: 0pt; y mso-table-rspace: 0pt;: Propiedades de Microsoft Office que controlan cómo se renderizan las tablas en Outlook eliminando el espacio predeterminado a la izquierda y a la derecha.
-webkit-text-size-adjust: 100%;: Controla cómo se escala el texto en móviles con navegadores WebKit evitando que se redimensione automáticamente.
-ms-text-size-adjust: 100%;: Hace lo mismo, pero para Internet Explorer y navegadores antiguos de Windows Phone.
word-break: break-word;: Obliga a que cadenas largas sin espacios se dividan y pasen a la siguiente línea para evitar que el diseño se rompa.
Normas específicas del dispositivo
También puedes añadir algunas correcciones específicas de correo electrónico para iOS Mail y Gmail en Android:
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}iOS BLUE LINKS: Al igual que la etiqueta meta <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"> que agregamos antes, esto evita que iOS Mail aplique estilos automáticamente a ciertos tipos de datos, como números de teléfono y direcciones. En lugar de convertirlos automáticamente en enlaces azules, x-apple-data-detectors obliga a que respeten los estilos que tú hayas definido.
ANDROID CENTER FIX: Sobrescribe un margen predeterminado que Gmail agrega en vistas móviles para mantener la coherencia en el diseño y la alineación centrada.
Consultas a los medios
Las consultas de medios son el método principal para hacer que las plantillas de correo electrónico sean responsive. Al igual que en otros proyectos web, vamos a utilizarlos para ajustar el diseño y el estilo en función del tamaño de la pantalla.
/* MEDIA QUERIES */
@media all and (max-width:639px) {
.wrapper {
width: 100% !important;
}
.container {
width: 100% !important;
min-width: 100% !important;
padding: 0 !important;
}
.row {
padding-left: 20px !important;
padding-right: 20px !important;
}
.col-mobile {
width: 20px !important;
}
.table-between-col-mobile {
width: 100% !important;
}
.col {
display: block !important;
width: 100% !important;
}
.col-feature {
display: block !important;
width: 100% !important;
}
.mobile-center {
text-align: center !important;
float: none !important;
}
.mobile-mx-auto {
margin: 0 auto !important;
float: none !important;
}
.mobile-left {
text-align: center !important;
float: left !important;
}
.mobile-hide {
display: none !important;
}
.img {
width: 100% !important;
height: auto !important;
}
*[class="mobileOff"] {
width: 0px !important;
display: none !important;
}
*[class*="mobileOn"] {
display: block !important;
max-height: none !important;
}
@media screen and (max-width: 600px) {
.col-feature {
margin-bottom: 30px;
}
}
/* TARGET OUTLOOK.COM */
[class="x_non-webkit"] {
display: block !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
[class="x_webkit"] {
display: none !important;
}
}
</style>
<style type="text/css">
@import url("https://assets.mlcdn.com/fonts-v2.css?version=1745332");
</style>
<style type="text/css">
@media screen {
body {
font-family: 'Inter', sans-serif;
}
}
</style>@media all y (max-width:639px) y @media screen y (max-width: 600px): Se aplica a pantallas con una anchura de 639px o menos y de 600px o menos. Dentro de ellas, hemos definido las clases y reglas que deben aplicarse para estos tamaños de pantalla
anchura: 100% !important;: Garantiza que la anchura del contenido o contenedor ocupe toda la anchura del dispositivo móvil, en lugar de utilizar la anchura de 640px definida en el HTML para pantallas más grandes.
Utilizar porcentajes en lugar de anchuras fijas te permite crear un diseño fluido. Es una forma más eficaz de hacer que las plantillas de correo electrónico sean responsive, que requiere el uso de menos media queries para montones de tamaños de dispositivos.
.mobile-hide {display: none !important;}: Oculta los elementos pertenecientes a esta clase en los dispositivos móviles. Esto se puede utilizar para eliminar elementos no esenciales para que no ocupen espacio
[class="mobileOff"] and [class*="mobileOn"]: Oculta o fuerza la visibilidad de los elementos en el móvil. Puedes utilizarlo para mostrar contenido específico en móviles y contenido alternativo en pantallas más grandes, por ejemplo, imágenes optimizadas.
[class="x_non-webkit"] {display: block !important;}”: Obliga a los elementos con la clase x_non-webkit a mostrarse como elementos de bloque en clientes no WebKit como Outlook
@media pantalla y (-webkit-min-device-pixel-ratio: 0) {[class="x_webkit"] { display: none !important; }}: Oculta los elementos con la clase x_webkit en clientes WebKit, como Apple Mail. Puedes utilizarlos juntos para mostrar y ocultar contenido alternativo a diferentes clientes de correo electrónico
@media screen {body {font-family: 'Inter', sans-serif;}}: Importamos las fuentes desde una URL, pero como algunos clientes de correo electrónico pueden no admitir fuentes personalizadas, también hemos establecido una opción alternativa para los dispositivos de pantalla que también establece la fuente
Aquí tienes un antes y un después de nuestra plantilla de correo electrónico:
Y aquí tienes el ejemplo de código completo:
<!doctype html>
<html lang dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<!--[if mso]>
<style>
* { font-family: sans-serif !important; }
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type="text/css">
/* Outlines the grids, remove when sending */
/*table td { border: 1px solid cyan; }*/
/* RESET STYLES */
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.document {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
table {
border-collapse: collapse;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
p {
margin: 0;
word-break: break-word;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
/* MEDIA QUERIES */
@media all and (max-width:639px) {
.wrapper {
width: 100% !important;
}
.container {
width: 100% !important;
min-width: 100% !important;
padding: 0 !important;
}
.row {
padding-left: 20px !important;
padding-right: 20px !important;
}
.col-mobile {
width: 20px !important;
}
.table-between-col-mobile {
width: 100% !important;
}
.col {
display: block !important;
width: 100% !important;
}
.col-feature {
display: block !important;
width: 100% !important;
}
.mobile-center {
text-align: center !important;
float: none !important;
}
.mobile-mx-auto {
margin: 0 auto !important;
float: none !important;
}
.mobile-left {
text-align: center !important;
float: left !important;
}
.mobile-hide {
display: none !important;
}
.img {
width: 100% !important;
height: auto !important;
}
.ml-btn {
width: 100% !important;
max-width: 100% !important;
}
.ml-btn-container {
width: 100% !important;
max-width: 100% !important;
}
*[class="mobileOff"] {
width: 0px !important;
display: none !important;
}
*[class*="mobileOn"] {
display: block !important;
max-height: none !important;
}
.mlContentTable {
width: 100% !important;
min-width: 10% !important;
margin: 0 !important;
float: none !important;
}
.mlContentButton a {
display: block !important;
width: auto !important;
}
.mlContentOuter {
padding-bottom: 0px !important;
padding-left: 15px !important;
padding-right: 15px !important;
padding-top: 0px !important;
}
.mlContentSurvey {
float: none !important;
margin-bottom: 10px !important;
width: 100% !important;
}
.multiple-choice-item-table {
width: 100% !important;
min-width: 10% !important;
float: none !important;
}
.ml-default,
.ml-card,
.ml-fullwidth {
width: 100%;
min-width: 100%;
}
}
@media screen and (max-width: 600px) {
.col-feature {
margin-bottom: 30px;
}
}
/* Carousel style */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.webkit {
display: block !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.non-webkit {
display: none !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* TARGET OUTLOOK.COM */
[class="x_non-webkit"] {
display: block !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
[class="x_webkit"] {
display: none !important;
}
}
</style>
<style type="text/css">
@import url("https://assets.mlcdn.com/fonts-v2.css?version=1745332");
</style>
<style type="text/css">
@media screen {
body {
font-family: 'Inter', sans-serif;
}
}
</style>
<meta name="robots" content="noindex, nofollow">
<title>test</title>
<meta name="image" content="https://storage.mlcdn.com/account_image/189/lwW94yzkabrt23BSl99bQDfL6uEJiLpJFikf2ZJD.png" property="og:image">
</head>
<body style="margin: 0 !important; padding: 0 !important; background-color:#DFB8B8;">
<div class="document" role="article" aria-roledescription="email" aria-label lang dir="ltr" style="background-color:#DFB8B8; line-height: 100%; font-size:medium; font-size:max(16px, 1rem);">
<!--[if gte mso 9]>
<v:background
xmlns:v="urn:schemas-microsoft-com:vml" fill="t" if="variable.bodyBackgroundImage.value">
<v:fill type="tile" src="" color="#DFB8B8"/>
</v:background>
<![endif]-->
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class background bgcolor="#DFB8B8" align="center" valign="top" style="padding: 0 8px;">
<table class="container" align="center" width="640" cellpadding="0" cellspacing="0" border="0" style="max-width: 640px;">
<tr>
<td align="center">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2" height="20" style="line-height: 20px"></td>
</tr>
<tr>
<td style="font-family: 'Playfair Display', serif; font-size:0px;color:#DFB8B8;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
<div style="display:none;font-size:0px;color:#DFB8B8;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> test </div>
</td>
<td align="right" style="font-family: 'Playfair Display', serif; color: #111111; font-size: 12px; line-height: 18px;">
<a style="color: #111111; font-weight: normal; font-style: normal; text-decoration: underline;" href>View in browser</a>
</td>
</tr>
<tr>
<td colspan="2" height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="640" class="wrapper" align="center" border="0" cellpadding="0" cellspacing="0" style="
max-width: 640px;
border-radius:2px; border-collapse: separate!important; overflow: hidden;
">
<tr>
<td align="center">
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-4 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="color: #FFEBEB; width: 640px; min-width: 640px;">
<tr>
<td class="ml-default-border container" height="40" style="line-height: 40px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row" style="padding: 0 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: separate!important; border-radius: 2px;">
<tr>
<td class="row" valign="middle" bgcolor="#385A4F" style="padding: 10px 30px; border: 0px solid #dceded; border-radius: 2px;">
<p style="font-family: 'Manrope', sans-serif; color: #FFEBEB; font-size: 16px; line-height: 165%; margin-top: 0; margin-bottom: 0; text-align: center;">
<strong>P.S.</strong> Lorem ipsum, dolor sit amet consectetur adipisicing elit!
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-6 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="30" style="line-height: 30px; min-width: 640px;"></td>
</tr>
<tr>
<td>
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row" align="left" style="padding: 0 50px;">
<img src="https://storage.mlcdn.com/account_image/189/lwW94yzkabrt23BSl99bQDfL6uEJiLpJFikf2ZJD.png" border="0" alt width="119.60000000000001" class="logo" style="max-width: 119.60000000000001px; display: inline-block;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" style="line-height: 30px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-8 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="20" style="line-height: 20px; min-width: 640px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row" style="padding: 0 50px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td style="border-top: 2px dotted #385A4F;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-10 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="color: #000000; width: 640px; min-width: 640px;">
<tr>
<td class="ml-default-border container" height="20" style="line-height: 20px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row" style="padding: 0 50px;">
<h1 style="font-family: 'Playfair Display', serif; color: #385A4F; font-size: 48px; line-height: 125%; font-weight: normal; font-style: normal; text-decoration: none; ;margin-bottom: 10px; margin-bottom: 0;">Lorem ipsum dolor sit amet!</h1>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-12 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="20" style="line-height: 20px; min-width: 640px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row" align="center" valign="top" style="padding: 0 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="col" align="center" valign="top" style="line-height: 0;" width="270">
<a href target="_self" style="text-decoration: none;">
<img src="https://placeholder.pics/svg/270" class="img" width="270" style="display: block;" border="0">
</a>
</td>
<td class="col" width="0" height="0" style="line-height: 0px;"></td>
<td class="col" align="center" valign="top" style="line-height: 0;" width="270">
<a href target="_self" style="text-decoration: none;">
<img src="https://placeholder.pics/svg/270" class="img" width="270" style="display: block;" border="0">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-14 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row" align="center" valign="top" style="padding: 0 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="col" align="center" valign="top" style="line-height: 0;" width="270">
<a href target="_self" style="text-decoration: none;">
<img src="https://placeholder.pics/svg/270" class="img" width="270" style="display: block;" border="0">
</a>
</td>
<td class="col" width="0" height="0" style="line-height: 0px;"></td>
<td class="col" align="center" valign="top" style="line-height: 0;" width="270">
<a href target="_self" style="text-decoration: none;">
<img src="https://placeholder.pics/svg/270" class="img" width="270" style="display: block;" border="0">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height: 40px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-16 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="color: #000000; width: 640px; min-width: 640px;">
<tr>
<td class="row" style="padding: 0 50px;">
<h3 style="font-family: 'Playfair Display', serif; color: #385A4F; font-size: 24px; line-height: 165%; font-weight: bold; font-style: normal; text-decoration: none; ;margin-bottom: 8px;">Nihil culpa error ipsam! <br>
</h3>
<p style="font-family: 'Manrope', sans-serif; color: #000000; font-size: 16px; line-height: 165%; margin-top: 0; margin-bottom: 10px;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. A ratione exercitationem dolor magnam, id nulla aliquid ipsam minima harum, veritatis blanditiis illo temporibus impedit? Animi quaerat minus cum sapiente eligendi.</p>
<p style="font-family: 'Manrope', sans-serif; color: #000000; font-size: 16px; line-height: 165%; margin-top: 0; margin-bottom: 0;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum eaque nemo, omnis repellendus quae, soluta sunt, molestiae distinctio facere eveniet necessitatibus neque cum! Cupiditate rem magni hic rerum esse nobis.</p>
</td>
</tr>
<tr>
<td height="10" style="line-height: 10px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-18 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="20" style="line-height: 20px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row" style="padding: 0 50px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="col" width="250" valign="top">
<div class="ml-19" style="text-align:full;"></div>
</td>
<td class="col" width="40" height="20" style="line-height: 20px;"></td>
<td class="col" width="250" valign="top">
<div class="ml-20" style="text-align:full;"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-22 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="40" style="line-height: 40px; min-width: 640px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row" style="padding: 0 50px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td style="border-top: 2px dotted #385A4F;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height: 40px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-24 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="color: #000000; width: 640px; min-width: 640px;">
<tr>
<td class="ml-default-border container" height="10" style="line-height: 10px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row" style="padding: 0 50px;">
<h2 style="font-family: 'Playfair Display', serif; color: #385A4F; font-size: 42px; line-height: 125%; font-weight: normal; font-style: normal; text-decoration: none; ;margin-bottom: 10px; margin-bottom: 0;">See what else we got...</h2>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-26 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="30" style="line-height: 30px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row" style="padding: 0 50px;">
<table width="100%" role="presentation" cellpadding="0" cellspacing="0" border="0" class="ml-link-26">
<tr>
<td align="left">
<a href target="blank" style="display: block; font-family: Helvetica, sans-serif; font-size: 16px; line-height: 125%; color: #385A4F; text-align: left; font-weight: normal; font-style: normal; text-decoration: underline;">
<span style="color: #385A4F;">BOOK A WORKSHOP</span>
</a>
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%" if="!$last">
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
<tr>
<td height="20" style="line-height: 20px; border-top: 2px solid #385A4F;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left">
<a href target="blank" style="display: block; font-family: Helvetica, sans-serif; font-size: 16px; line-height: 125%; color: #385A4F; text-align: left; font-weight: normal; font-style: normal; text-decoration: underline;">
<span style="color: #385A4F;">PLANT TIPS</span>
</a>
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%" if="!$last">
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
<tr>
<td height="20" style="line-height: 20px; border-top: 2px solid #385A4F;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left">
<a href target="blank" style="display: block; font-family: Helvetica, sans-serif; font-size: 16px; line-height: 125%; color: #385A4F; text-align: left; font-weight: normal; font-style: normal; text-decoration: underline;">
<span style="color: #385A4F;">SHOP PLANTS</span>
</a>
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%" if="!$last">
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
<tr>
<td height="20" style="line-height: 20px; border-top: 2px solid #385A4F;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left">
<a href target="blank" style="display: block; font-family: Helvetica, sans-serif; font-size: 16px; line-height: 125%; color: #385A4F; text-align: left; font-weight: normal; font-style: normal; text-decoration: underline;">
<span style="color: #385A4F;">STORE LOCATIONS</span>
</a>
<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%" if="!$last">
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
<tr>
<td height="20" style="line-height: 20px; border-top: 2px solid #385A4F;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height: 40px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-32 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="20" style="line-height: 20px; min-width: 640px;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="row" style="padding: 0 50px; line-height: 1;" align="center">
<img src="https://placeholder.pics/svg/540" border="0" alt width="540" class="img" style="display: block;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-34 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="color: #000000; width: 640px; min-width: 640px;">
<tr>
<td class="ml-default-border container" height="20" style="line-height: 20px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row mobile-center" align="left" style="padding: 0 50px;">
<table class="ml-34 wrapper" width="100%" border="0" cellspacing="0" cellpadding="0" style="color: #000000; text-align: left;">
<tr>
<td class="mobile-center">
<p style="font-family: 'Manrope', sans-serif; color: #000000; font-size: 16px; line-height: 165%; margin-top: 0; margin-bottom: 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ducimus necessitatibus consectetur libero. Officia voluptates ipsam harum minus. Rerum, dolorem impedit minima mollitia quos praesentium autem quo rem quasi possimus! </p>
<p style="font-family: 'Manrope', sans-serif; color: #000000; font-size: 16px; line-height: 165%; margin-top: 0; margin-bottom: 10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam saepe obcaecati quam deleniti quia! Illo deserunt dolorum voluptates eligendi. Eaque assumenda enim nobis quia illum nostrum nisi doloribus magnam ex.</p>
<p style="font-family: 'Manrope', sans-serif; color: #000000; font-size: 16px; line-height: 165%; margin-top: 0; margin-bottom: 0;"> Founder, <br>
<strong>Emily Davis</strong>
</p>
</td>
</tr>
<tr>
<td height="10" style="line-height: 10px;"></td>
</tr>
<tr>
<td class="mobile-center" style="line-height: 0;">
<img src="https://storage.mlcdn.com/account_image/511131/90XGQFvpV05j7sVX_signature.png" ng-src="https://storage.mlcdn.com/account_image/511131/90XGQFvpV05j7sVX_signature.png" border="0" alt width="110" class="signature" style="display: inline-block; max-width: 110px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height: 40px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-36 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="10" style="line-height: 10px; min-width: 640px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row" style="padding: 0 50px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td style="border-top: 2px dotted #385A4F;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="line-height: 20px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
<!-- -->
<table class="ml-default" width="100%" bgcolor border="0" cellspacing="0" cellpadding="0">
<tr>
<td style>
<table class="container ml-38 ml-default-border" width="640" bgcolor="#FFEBEB" align="center" border="0" cellspacing="0" cellpadding="0" style="
width: 640px; min-width: 640px;
;
">
<tr>
<td class="ml-default-border container" height="30" style="line-height: 30px; min-width: 640px;"></td>
</tr>
<tr>
<td class="row" style="padding: 0 50px;">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="col" align="left" width="250" valign="top" style="text-align: left!important;">
<h5 style="font-family: 'Playfair Display', serif; color: #000000; font-size: 15px; line-height: 125%; font-weight: bold; font-style: normal; text-decoration: none; margin-bottom: 6px;">Verde & Gardens</h5>
<p style="font-family: 'Playfair Display', serif; color: #515856; font-size: 14px; line-height: 150%; margin-bottom: 6px;">Company address</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="16" style="line-height: 16px;"></td>
</tr>
<tr>
<td>
<table class="**$class**" role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle" width="18" ng-show="slink.link != ''" style="padding: 0 5px 0 0;">
<a href="https://" target="blank" style="text-decoration: none;">
<img src="https://assets.mlcdn.com/ml/images/icons/default/rounded_corners/black/facebook.png" width="18" alt="facebook">
</a>
</td>
<td align="center" valign="middle" width="18" ng-show="slink.link != ''" style="padding: 0 5px;">
<a href="https://" target="blank" style="text-decoration: none;">
<img src="https://assets.mlcdn.com/ml/images/icons/default/rounded_corners/black/x.png" width="18" alt="x">
</a>
</td>
<td align="center" valign="middle" width="18" ng-show="slink.link != ''" style="padding: 0 0 0 5px;">
<a href="https://" target="blank" style="text-decoration: none;">
<img src="https://assets.mlcdn.com/ml/images/icons/default/rounded_corners/black/instagram.png" width="18" alt="instagram">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col" width="40" height="30" style="line-height: 30px;"></td>
<td class="col" align="left" width="250" valign="top" style="text-align: left!important;">
<p style="font-family: 'Playfair Display', serif; color: #515856; font-size: 14px; line-height: 150%; margin-bottom: 6px;">You received this email because you signed up on our website or made a purchase from us.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="8" style="line-height: 8px;"></td>
</tr>
<tr>
<td align="left">
<p style="font-family: 'Playfair Display', serif; color: #515856; font-size: 14px; line-height: 150%; margin-bottom: 0;">
<a href style="color: #515856; font-weight: normal; font-style: normal; text-decoration: underline;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height: 40px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- -->
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="640" style="max-width: 640px; width: 100%;"></table>
</td>
</tr>
</table>
</div>
</body>
</html>Consejos y técnicas adicionales para el diseño de email marketing para móviles
A veces, por muy responsive que sean tus plantillas de correo electrónico, hay mucho contenido para una pantalla pequeña o quizá un elemento visual, como una imagen, no funciona bien. Aquí tienes algunos consejos de Šarūnas que pueden ayudarte.
1. Acorta el contenido y hazlo ampliable
Algo así como en una página de preguntas frecuentes, donde haces clic en una pregunta frecuente para ampliar el contenido y ver la respuesta. Puedes utilizar la misma técnica en los correos electrónicos, y se llama divulgación progresiva.
Para una plantilla de correo electrónico HTML responsive, podemos hacer que el contenido sea totalmente visible en pantallas grandes, pero mostrar un fragmento acortado con el que los lectores puedan interactuar haciendo clic en él para ver el resto. Consiste en ocultar y mostrar contenidos en distintos tipos de dispositivos; ya lo hemos utilizado ligeramente en nuestro ejemplo anterior. Puedes utilizar esta plantilla en Github para implementar la divulgación progresiva.
¿Sabías que el editor de arrastrar y soltar de MailerLite tiene un bloque de acordeón preconstruido que te permite implementar rápida y fácilmente la divulgación progresiva en tus correos electrónicos sin necesidad de codificación?
2. Optimiza tus imágenes para móviles
Asegurarte de que tus imágenes están optimizadas para la experiencia móvil puede ayudar a evitar problemas con el tiempo de carga, la compatibilidad e incluso la entregabilidad.
Utiliza consultas de medios para mostrar imágenes sólo para móviles
Las imágenes muy detalladas (como las fotos panorámicas) pueden verse de maravilla en pantallas más grandes. Pero cuando se adaptan a tamaños de pantalla más pequeños, puede resultar difícil ver los detalles que los hacen tan atractivos, y pueden parecer extraños y fuera de lugar.
En su lugar, podrías mostrar una imagen totalmente diferente para los dispositivos móviles que se vea mejor para el tamaño de pantalla más pequeño.
Para ello, puedes establecer una consulta de medios que oculte la imagen de cabecera principal en móviles y muestre en su lugar una alternativa optimizada para la pantalla más pequeña.
<style type="text/css">
/* Hide the main header image on mobile */
@media only screen and (max-width: 639px) {
.main-header-image {
display: none !important;
}
.mobile-header-image {
display: block !important;
}
}
/* Hide mobile image on larger screens */
@media only screen and (min-width: 640px) {
.mobile-header-image {
display: none !important;
}
.main-header-image {
display: block !important;
}
}
</style>
<!-- Main header image (visible on desktop) -->
<img src="main-header-image.jpg" class="main-header-image" alt="Main Header Image" style="width: 100%;">
<!-- Alternative mobile header image (visible on mobile) -->
<img src="mobile-header-image.jpg" class="mobile-header-image" alt="Mobile Header Image" style="width: 100%; display: none;">Este ejemplo incluye ambas imágenes en el HTML, pero también puedes establecer la alternativa como imagen de fondo en CSS.
Utiliza imágenes de fondo y texto vivo
En lugar de cargar 2 imágenes en tu HTML, una forma más eficiente de mostrar una imagen diferente en el móvil es establecer la imagen de fondo en CSS. Otra ventaja de utilizar imágenes de fondo es que puedes colocar texto en directo sobre ellas.
Esto no sólo hace que tus plantillas sean más accesibles (la tecnología de asistencia no puede leer el texto de las imágenes), sino que también es más flexible y puede adaptarse a diferentes tamaños de pantalla, ayudando a la capacidad de respuesta de tus plantillas.
<head>
<style type="text/css">
/* Default (desktop) header image */
@media only screen and (max-width: 639px) {
/* Mobile view: set mobile header image */
.mobile-header {
background-image: url('mobile-header-image.jpg') !important;
}
}
</style>
</head>
<body>
<!-- Table structure for header with background image -->
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background-image: url('main-header-image.jpg'); background-size: cover; background-position: center; height: 300px; text-align: center;">
<tr>
<td class="mobile-header" style="background-image: url('main-header-image.jpg'); background-size: cover; background-position: center; height: 300px; text-align: center;">
<h1 style="color: white; font-size: 36px; margin: 0; padding: 0;">Hey, {$name}!</h1>
</td>
</tr>
</table>
</body>Por si aún no lo has adivinado, Microsoft Outlook desgraciadamente no reconoce las imágenes de fondo configuradas de esta forma. Pero podemos hacer algunos ajustes para que así sea.
Imágenes de fondo en Outlook
Para que Outlook permita imágenes de fondo, necesitamos utilizar VML (Vector Markup Language). Podemos añadir estas declaraciones a nuestra etiqueta HTML:
<html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">Y luego podemos establecer la imagen de fondo utilizando un comentario condicional y VML:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="frame" src="https://example.com/background.jpg" color="#cccccc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="background-image: url('https://example.com/background.jpg'); background-size: cover; background-position: center; width: 100%; max-width: 600px; height: 300px;">
<table width="100%" height="300" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="middle">
<h1 style="color: white; font-size: 36px; margin: 0;">Hey, Jane!</h1>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>Con esto añadido, las imágenes de fondo deberían funcionar en la mayoría de los clientes.
Utiliza imágenes de alta resolución para Retina displays
Muchos teléfonos inteligentes y tabletas modernos tienen pantallas con mayor densidad de píxeles (Retina display), por lo que utilizar imágenes de alta resolución es importante si quieres que tus imágenes tengan un aspecto nítido y profesional. Puedes hacerlo creando imágenes a 2 veces la resolución que necesitas y luego simplemente reduciéndolas en tu CSS.
Pero como las imágenes de gran tamaño pueden causar problemas de carga en los correos electrónicos, asegúrate de que estén comprimidas y optimizadas para que el tamaño del archivo sea el menor posible. El objetivo es mantener el tamaño de cada imagen por debajo de 200 KB.
Prueba tus plantillas de correo electrónico responsive
Chrome DevTools
DevTools es una forma fácil y gratuita de simular varios tamaños de pantalla para que puedas ver cómo responde tu plantilla de correo electrónico. Es la herramienta que utilicé para probar la capacidad de respuesta de nuestra plantilla de ejemplo (mostrada en el GIF de arriba).
Para utilizarlo, abre tu plantilla en Chrome, haz clic con el botón derecho en cualquier lugar y selecciona Inspeccionar. Después, activa la barra de herramientas del dispositivo.
En la parte superior, podrás elegir entre varias opciones de dispositivo preestablecidas, o elegir responsive y ajustar manualmente el tamaño. Si prefieres Firefox, puedes utilizar Firefox Responsive Design.
PutsMail
El comprobador de correo electrónico gratuito de Litmus te permite enviar correos electrónicos HTML y ver cómo se visualizan en bandejas de entrada reales.
Mailosaur
Esta solución de pruebas de pago te permite enviar y probar correos electrónicos a través de múltiples clientes y dispositivos.
Y por supuesto, puedes enviar tus propios correos de prueba. La mayoría de los clientes de correo más populares se pueden descargar fácilmente, así que crea tus propias cuentas y úsalas para hacer pruebas. Para afinar aún más, intenta obtener datos sobre los clientes de correo que usan tus suscriptores, así sabrás en cuáles enfocarte más.
Más de 90 plantillas de correo electrónico responsive para comenzar
Crear una plantilla de correo electrónico HTML con capacidad de respuesta que tenga un aspecto estupendo y se visualice correctamente en todos los dispositivos y clientes es todo un reto. Y si buscas una forma más fácil de diseñar plantillas de aspecto impresionante y adaptables, MailerLite tiene justo lo que necesitas.
Nuestra galería de plantillas prediseñadas cuenta con más de 90 plantillas responsive de diseño profesional entre las que puedes elegir. Y no tienes que preocuparte por añadir tu propio toque creativo: cada plantilla es totalmente personalizable, para que puedas hacerla tuya.
Cómo crear correos electrónicos responsive en MailerLite
Si vas a iniciar una nueva campaña, primero dirígete a tu panel de control y haz clic en Crear campaña.
Luego elige una plantilla de newsletter de la galería o empieza a crearla desde cero. Cada bloque de diseño que arrastres y sueltes en tu plantilla de correo electrónico será automáticamente adaptable, no media queries, inline CSS o reglas de Outlook a la vista.
Puedes personalizar los colores, las fuentes, las imágenes y mucho más para que la plantilla se adapte perfectamente al diseño de tu marca.
Una vez que tengas todo listo, haz clic en el botón Previsualizar y el botón de prueba en la parte superior derecha para ver cómo se verá tu newsletter cuando se muestre en pantallas más pequeñas en un cliente móvil.
P.D. También puedes crear ventanas pop-up para móviles con MailerLite para adaptarlas a tamaños de pantalla más pequeños.
Mejores prácticas de diseño de correo electrónico responsive
1. Utiliza un diseño de correo electrónico de una sola columna
Varias columnas pueden ser estéticamente agradables, pero es mejor simplificar el estilo de los correos electrónicos pensando en los usuarios móviles. Un diseño de una sola columna es fácil de digerir, ya que cada columna está dedicada a un tema. Cuando estas columnas están apiladas una debajo de otra, es fácil leer el contenido.
Empieza por el contenido más importante y ve bajando. En los correos electrónicos para móviles, lo que cuenta es la jerarquía. Si tu correo electrónico se alarga demasiado, elimina las columnas que no sean realmente necesarias.
2. Ten en cuenta el tamaño de la tipografía
Antes de enviar tu campaña de correo electrónico a tus suscriptores, asegúrate de enviarte un correo de prueba para ver cómo se ven las fuentes en el móvil. Por ejemplo, podría parecerte que el tipo de letra es pequeño y difícil de leer.
Para asegurarte de que estás cubierto, utiliza fuentes seguras para la web y fallbacks para los casos en que un cliente de correo electrónico no reproduzca correctamente una fuente.
Opta por un tipo de letra fácil de leer y disponible en todos los dispositivos, como Arial, Times New Roman, Georgia o Verdana. Recomendamos un mínimo de 14 píxeles para el tamaño de texto normal y de 20 píxeles para los encabezados. Para el móvil, 16 píxeles es el mejor tamaño mínimo de fuente para el texto normal.
3. Utiliza imágenes optimizadas para diferentes tamaños de pantalla
Cuando se trata de utilizar imágenes en newsletters por correo electrónico asegúrate de que muestran lo que quieres transmitir en todos los tamaños de pantalla. Por ejemplo, si vendes bolsos, comprueba si los detalles del bolso son claramente visibles también en el móvil.
Una imagen que se ve muy bien y muestra lo que quieres que muestre en una pantalla grande puede no tener el mismo impacto en una pantalla más pequeña. Algunos primeros planos o ángulos diferentes podrían funcionar mejor, y puedes mostrarlos para móviles utilizando media queries.
4. Establece correctamente tus anchos
Establecer una anchura máxima de 600-640px garantizará que el contenido de tu correo electrónico se adapte perfectamente. Pero recuerda, para que los diseños de tus correos electrónicos sean fluidos, establecer el ancho al 100% para los contenedores y otros elementos como las imágenes hará que tus plantillas sean responsivas y se adapten fácilmente a todos los tamaños de pantalla.
5. Utiliza inline CSS
No es la forma más limpia de construir algo, pero si utilizas inline CSS para dar estilo a tu plantilla, te asegurarás de que quede bien aunque el cliente de correo electrónico elimine todas tus etiquetas de estilo. El editor de email HTML de MailerLite facilita la creación de plantillas HTML desde cero con fragmentos de código que puedes insertar en tu código y un inliner de CSS automático que hace el trabajo por ti.
6. Estructura tu correo electrónico con tablas
Por ahora, las tablas siguen siendo la forma más fiable de construir un diseño y una estructura para las plantillas de correo electrónico. Aunque pueda parecer restrictivo, puedes anidar tablas para crear diseños muy complejos y utilizar filas y celdas para controlar el espaciado.
Eso es todo, por ahora
Enhorabuena, ¡ahora eres un/a diseñador/a de correo electrónico responsive! Tus correos electrónicos serán legibles en todos los dispositivos, proporcionando a tus lectores una experiencia de usuario agradable.
Crear plantillas de correo electrónico HTML responsive desde cero puede ser... mucho, pero una vez que te familiarices estarás creando plantillas en un abrir y cerrar de ojos.
Y si prefieres una forma más rápida y sencilla de crear correos electrónicos realmente responsive, ¡siempre puedes utilizar MailerLite!
¿Todo listo para probarlo?
MailerLite te permite crear campañas profesionales en minutos, y las adapta automáticamente a distintos tamaños de pantalla.
Nota del editor: Este artículo se publicó originalmente en septiembre de 2020. Ahora ha sido actualizado con nuevos insights y ejemplos.
