```
### Buenas prácticas de hero image
Las hero images marcan el tono visual de todo tu email:
**Especificaciones:**
- Ancho: 600 px (reduce para móvil)
- Alto: 200-400 px
- Tamaño de archivo: por debajo de 200 KB
- Texto superpuesto: evita texto crítico dentro de imágenes
**Plantilla de hero image:**
```
┌─────────────────────────────────┐
│ │
│ HERO IMAGE │
│ (Foto lifestyle/producto) │
│ │
│ Texto superpuesto en HTML, │
│ no incrustado en la imagen │
│ │
└─────────────────────────────────┘
```
### Imágenes de fondo
Las imágenes de fondo añaden interés visual pero tienen soporte limitado:
**Matriz de soporte:**
| Cliente | Soporte de imagen de fondo |
| --- | --- |
| Apple Mail | Total |
| iOS Mail | Total |
| Gmail | Total |
| Outlook (Windows) | Ninguno |
| Yahoo Mail | Total |
**Siempre incluye un color sólido de fallback** para los usuarios de Outlook.
### Pautas de imagen de producto
Para emails de ecommerce con productos:
- Dimensiones consistentes en todos los productos
- Fondos blancos o neutros
- Varios ángulos cuando sea posible
- Mínimo 300 px de ancho para imágenes de producto
- Enlaza directamente a las páginas de producto
## Parte 4: diseño de email para móvil
Con más del 60 % de los emails abiertos en dispositivos móviles, el diseño mobile-first es esencial.
### Principios de diseño móvil
**El enfoque mobile-first:**
1. Diseña primero para la pantalla más pequeña
2. Apila el contenido verticalmente
3. Agranda los tap targets
4. Simplifica la navegación
5. Testea en dispositivos reales
### Técnicas de diseño responsive
**Media queries para móvil:**
```css
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}
```
### Diseño táctil amigable
**Tamaños mínimos de tap target:**
| Elemento | Tamaño mínimo |
| --- | --- |
| Botones | 44 x 44 píxeles |
| Enlaces | 44 px de alto |
| Separación entre enlaces | 10 px entre ellos |
**Plantilla de botón CTA:**
```
┌──────────────────────────────┐
│ │
│ COMPRAR AHORA │
│ │
└──────────────────────────────┘
44 px de altura mínima
```
### Tipografía móvil
**Ajustes de fuente en móvil:**
- Texto del cuerpo: mínimo 16 px (evita el zoom en iOS)
- Titulares: 24-28 px
- Interlineado: aumenta un 10 % para móvil
- Espaciado entre párrafos: aumenta para el scroll con el pulgar
### Consideraciones de imagen en móvil
- Usa anchuras fluidas (max-width: 100 %)
- Reduce el número de imágenes en móvil
- Considera ocultar imágenes decorativas
- Carga versiones más pequeñas de imagen cuando sea posible
### Checklist de test móvil
- Testear en iOS Mail
- Testear en la app de Gmail (iOS y Android)
- Testear en la app de Outlook
- Verificar que las imágenes cargan con datos móviles
- Comprobar tiempo de carga por debajo de 3 segundos
- Verificar que los tap targets son suficientemente grandes
- Testear renderizado en modo oscuro
## Parte 5: el color en el diseño de email
El color comunica emoción, guía la atención y refuerza la identidad de marca. Un uso estratégico del color mejora el rendimiento del email.
### Psicología del color en email
| Color | Asociación | Mejor uso |
| --- | --- | --- |
| Azul | Confianza, calma | B2B, finanzas, tech |
| Verde | Crecimiento, salud | Eco, wellness, éxito |
| Rojo | Urgencia, energía | Rebajas, CTAs, alertas |
| Naranja | Amigable, acción | CTAs, destacados |
| Morado | Premium, creativo | Lujo, belleza |
| Amarillo | Optimismo, atención | Avisos, destacados |
### Requisitos de contraste de color
**Estándares WCAG 2.1 AA:**
- Texto normal: ratio de contraste mínimo 4,5:1
- Texto grande (18 px+): ratio de contraste mínimo 3:1
- Componentes UI: ratio de contraste mínimo 3:1
**Usa verificadores de contraste** para verificar la accesibilidad:
| Combinación | Ratio de contraste | Pasa/Falla |
| --- | --- | --- |
| Negro sobre blanco | 21:1 | Pasa |
| Blanco sobre azul (#0066CC) | 4,8:1 | Pasa |
| Gris (#777) sobre blanco | 4,48:1 | Límite |
| Gris claro (#AAA) sobre blanco | 2,32:1 | Falla |
### Consideraciones del modo oscuro
Más del 80 % de los usuarios tienen el modo oscuro activado. Diseña para ambos modos:
**Estrategias de modo oscuro:**
1. **Imágenes transparentes:** usa PNG con fondos transparentes
2. **Inversión de colores:** testea cómo se ven los colores invertidos
3. **Versiones de logo:** proporciona variantes de logo para claro y oscuro
4. **Definición de bordes:** añade bordes sutiles para evitar que se fundan
**Meta tag para modo oscuro:**
```html
```
### Colores de botón CTA
Los CTAs deben destacar del contenido circundante:
**Colores de CTA que convierten:**
- Color principal de marca (construye reconocimiento)
- Color de acento en contraste (atrae atención)
- Naranja/rojo (crea urgencia)
- Verde (asociación de acción positiva)
**Especificaciones de diseño de botón:**
```
┌──────────────────────────────┐
│ │
│ TEXTO DEL BOTÓN (MAYÚS.) │ Fondo: color de marca
│ │ Texto: blanco o contraste oscuro
└──────────────────────────────┘
Padding: 15 px 30 px
Radio de borde: 4-8 px
```
## Parte 6: accesibilidad en el diseño de email
Un diseño de email accesible asegura que todos puedan interactuar con tu contenido, independientemente de su capacidad. Es tanto ético como práctico, los emails accesibles funcionan mejor para todos los usuarios.
### Fundamentos de accesibilidad
**Principios básicos (WCAG 2.1):**
1. **Perceptible** - el contenido puede ser percibido por todos los usuarios
2. **Operable** - la interfaz es navegable y usable
3. **Comprensible** - el contenido y la operación son claros
4. **Robusto** - el contenido funciona en todas las tecnologías de asistencia
### Compatibilidad con lectores de pantalla
Los lectores de pantalla interpretan tu email para usuarios con discapacidad visual:
**Buenas prácticas:**
- Usa HTML semántico (h1, h2, p, ul)
- Añade role=“presentation” a las tablas de layout
- Incluye el atributo lang en la etiqueta HTML
- Proporciona texto de enlace significativo (no “haz clic aquí”)
- Usa aria-label para elementos complejos
**Ejemplo:**
```html
Rebajas de veranoCompra nuestros mayores descuentos de la temporada. Ir a las rebajas |