Diseño de Email Responsivo: Una Guía Técnica
Crea emails que se adapten elegantemente de escritorio a móvil.
Más del 60% de los emails se abren en dispositivos móviles. El diseño responsivo no es opcional. Pero el email responsivo es más difícil que el web responsivo. El soporte para consultas de medios varía. Flexbox no funciona. Estás atado a las tablas.
Esta guía cubre técnicas que realmente funcionan en todos los clientes de email. Si quieres evitar la complejidad, herramientas como Sequenzy manejan el comportamiento responsivo automáticamente en su constructor visual.
La Realidad del Email Móvil
Los clientes de email en móvil manejan el diseño responsivo de manera diferente:
- Apple Mail (iOS): Soporte completo para consultas de medios, funciona como un navegador
- Gmail App: Soporta consultas de medios desde 2016, pero con peculiaridades
- Outlook App: Soporte limitado para consultas de medios
- Samsung Mail: Generalmente buen soporte
El desafío es diseñar para todos ellos. Algunos soportan consultas de medios, otros no. Tu diseño necesita fallbacks.
Diseños Fluidos: La Base
Comienza con anchos fluidos. En lugar de anchos fijos en píxeles, usa porcentajes con restricciones de max-width:
<table role="presentation" width="100%" style="max-width: 600px;">
<tr>
<td style="padding: 20px;">
Content flows to fill available width
</td>
</tr>
</table>Esto funciona en todas partes. En escritorio, el email tiene 600px de ancho. En móvil, se reduce para ajustarse a la pantalla. No se requieren consultas de medios.
Consultas de Medios para Mejoras
Las consultas de medios te permiten personalizar la experiencia móvil en clientes compatibles:
<style>
@media screen and (max-width: 600px) {
.column {
width: 100% !important;
display: block !important;
}
.stack-on-mobile {
display: block !important;
width: 100% !important;
}
.hide-on-mobile {
display: none !important;
}
.mobile-padding {
padding: 10px !important;
}
}
</style>Técnicas clave:
- Apilar columnas: Convierte columnas lado a lado en bloques apilados
- Ajustar padding: Reduce el padding en pantallas más pequeñas
- Ocultar elementos: Elimina contenido secundario en móvil
- Redimensionar imágenes: Haz las imágenes de ancho completo
Las declaraciones !important son necesarias porque los estilos inline tienen alta especificidad.
El Método Híbrido/Esponjoso
Esta técnica usa comentarios condicionales y CSS para crear diseños responsivos sin consultas de medios:
<!--[if mso]>
<table role="presentation" width="600">
<tr>
<td width="300">
<![endif]-->
<div style="display: inline-block; width: 100%; max-width: 300px;">
Column 1 content
</div>
<!--[if mso]>
</td>
<td width="300">
<![endif]-->
<div style="display: inline-block; width: 100%; max-width: 300px;">
Column 2 content
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->Esto crea columnas lado a lado en Outlook (que lee los comentarios condicionales) y columnas apiladas en todas partes (que usa los elementos div). No se necesitan consultas de medios.
Imágenes Responsivas
Las imágenes deben escalar con sus contenedores:
<img src="image.jpg"
width="600"
style="display: block; max-width: 100%; height: auto;"
alt="Description">El atributo width establece el tamaño previsto. max-width: 100% evita desbordes. height: auto mantiene la proporción de aspecto.
Botones Amigables para Táctiles
Los usuarios móviles tocan, no hacen clic. Los botones necesitan un tamaño adecuado:
<table role="presentation">
<tr>
<td style="background-color: #007bff; border-radius: 4px; padding: 12px 24px;">
<a href="https://example.com"
style="color: #ffffff; text-decoration: none; font-weight: bold; display: block;">
Click Here
</a>
</td>
</tr>
</table>Tamaño mínimo de objetivo táctil: 44x44 píxeles (guía de Apple). Más padding es mejor que menos.
Probando el Comportamiento Responsivo
Prueba en dispositivos reales cuando sea posible. Los emuladores y vistas previas no detectan todo:
- Envía emails de prueba a tus propios dispositivos
- Usa Litmus o Email on Acid para vistas previas automatizadas
- Prueba tanto en orientación vertical como horizontal
- Verifica con imágenes desactivadas
Usando Frameworks para Responsivo
Frameworks como MJML manejan el diseño responsivo automáticamente:
<mj-section>
<mj-column>
<mj-text>Column 1</mj-text>
</mj-column>
<mj-column>
<mj-text>Column 2</mj-text>
</mj-column>
</mj-section>Este MJML compila a HTML responsivo. Las columnas se apilan en móvil automáticamente. Sin consultas de medios manuales.
Constructores visuales como Sequenzy funcionan de manera similar. Los bloques están preconfigurados para comportamiento responsivo. Arrastra componentes, personaliza contenido, el manejo responsivo está integrado.
Patrones Responsivos Comunes
Una Columna (Mobile-First)
Comienza con un diseño de una sola columna. Funciona en todas partes y requiere ajustes responsivos mínimos.
De Dos Columnas a Apiladas
Lado a lado en escritorio, apiladas en móvil. El patrón responsivo más común. Usa el método híbrido o consultas de medios.
Imagen Hero con CTA
Imagen de ancho completo seguida de texto centrado y botón. Funciona bien en cualquier tamaño. La imagen escala, el texto sigue siendo legible.
La Conclusión
El email responsivo es alcanzable pero requiere entender las restricciones. Comienza con diseños fluidos, mejora con consultas de medios donde se soporten y prueba exhaustivamente.
Si la complejidad técnica es abrumadora, frameworks como MJML o plataformas como Sequenzy lo manejan por ti. La salida está probada en clientes y el comportamiento responsivo está integrado en los componentes.