Cómo estructurar un email para mobile y desktop (sin código complicado)
La simplicidad es tu mejor aliada
No necesitas ser un experto en HTML ni luchar con tablas anidadas para lograr un email que funcione bien. El secreto no está en el código complejo, sino en una estructura inteligente.
Aquí tienes los principios fundamentales para que tus emails se vean bien tanto en un iPhone 15 como en Outlook para escritorio.
1. La Regla de Oro: Una Sola Columna
El error más común es intentar replicar el diseño de una página web con múltiples columnas (barra lateral, contenido principal, etc.). En mobile, esto es un desastre.
La solución: Diseña siempre en una sola columna.
- El contenido fluye naturalmente de arriba a abajo.
- En escritorio se verá limpio y centrado.
- En móvil ocupará el ancho disponible sin romper nada.
2. Jerarquía Visual (La Pirámide Invertida)
Guía el ojo del lector. No los hagas pensar.
- Cabecera/Logo: Identidad inmediata.
- Imagen Principal o Titular: Captura la atención.
- Texto de Apoyo: Explica el valor de forma concisa.
- Llamada a la Acción (CTA): El botón final.
3. Botones “Thumb-friendly”
En el escritorio usamos un cursor preciso de 1px. En el móvil usamos nuestros pulgares, que son imprecisos.
- Asegúrate de que tus botones tengan al menos 44px de alto.
- Dales espacio. No pongas un enlace de “darse de baja” pegado al botón de “comprar”.
4. Texto Legible
Olvídate de las letras pequeñas.
- Cuerpo del texto: Mínimo 16px. Menos que eso obliga a hacer zoom o cansa la vista.
- Títulos: Mínimo 22-24px para contrastar claramente.
- Alineación: Izquierda (o justificado a la izquierda) es más fácil de leer que el texto centrado, especialmente en párrafos largos.
5. Imágenes Responsivas
Asegúrate de que tus imágenes tengan siempre un ancho del 100% del contenedor. En escritorio, puedes limitar el ancho máximo del email (lo estándar es 600px) para que las líneas de texto no sean eternas, pero la imagen siempre debe adaptarse al ancho disponible en pantallas pequeñas.
Conclusión
Un email “responsive” no tiene por qué ser técnicamente difícil. Si te apegas a una estructura de una columna, textos grandes y botones claros, cubrirás el 90% de los problemas de compatibilidad sin tocar una sola línea de código CSS avanzado.