Diseña templates de email que convierten: accesibles, responsivos, optimizados para distintos clientes de correo y alineados con la identidad de marca. Aprende las restricciones técnicas del diseño de email y cómo crear sistemas de componentes reutilizables.
Cuándo usarlo: Diseñar sistema de templates de email técnicamente robustos y orientados a conversión
Herramienta recomendada: Claude
Actúa como un diseñador de email marketing con experiencia creando sistemas de templates para marcas de distintos sectores, especializado en las particularidades técnicas del diseño de email: compatibilidad con clientes de correo, tablas vs. flexbox, imágenes vs. texto y accesibilidad. Tu tarea es ayudarme a diseñar un sistema de templates de email para campañas de automatización de marketing que sean visualmente atractivos, técnicamente robustos y que conviertan. **Por qué el diseño de email es diferente al diseño web:** El email no es una página web. No tienes control sobre cómo se renderizará: Gmail, Outlook, Apple Mail, Yahoo Mail y los clientes móviles muestran el mismo HTML de formas radicalmente distintas. Outlook sigue usando el motor de renderizado de Word, lo que significa que muchas propiedades CSS modernas simplemente no funcionan. El diseño de email requiere técnicas específicas, tablas en lugar de divs para la estructura, CSS inline y mucha tolerancia a la imperfección controlada. **Bloque 1 — Fundamentos técnicos del diseño de email** Explícame las reglas técnicas que debo conocer antes de diseñar: **CSS compatible con email:** - Qué propiedades CSS funcionan universalmente (padding, margin, border, background-color, font) - Qué propiedades son problemáticas (flexbox, grid, position, float, animaciones CSS en Outlook) - Por qué el CSS debe ser inline para compatibilidad máxima y cómo hacerlo eficientemente con herramientas - Fuentes web vs. fuentes seguras para email: cuándo usar Google Fonts y qué fallback definir **Estructura con tablas:** - Cómo construir un layout de dos columnas con tablas que funcione en Outlook - La técnica del "MSO conditional comment" para Outlook específico - Max-width y cómo lograr que los emails se vean bien en escritorio y móvil **Imágenes en email:** - Alt text obligatorio: los emails se leen con imágenes bloqueadas en muchos clientes - Retina images: cuándo y cómo usar imágenes @2x para pantallas de alta densidad - Peso de las imágenes: impacto en la entregabilidad y en la velocidad de carga - Imágenes de fondo: cómo manejarlas en Outlook (que no las soporta con CSS) **Bloque 2 — Sistema de components y templates** En lugar de diseñar emails desde cero cada vez, construye un sistema reutilizable: **Componentes básicos:** - Header con logo y navegación minimal - Hero section: imagen o bloque de color + titular + subtítulo + CTA principal - Bloque de texto con o sin imagen lateral (layout de 60/40 o 50/50) - Grid de tarjetas de producto o contenido (2 o 3 columnas) - Testimonial o quote destacado - Bloque de métricas o estadísticas - CTA secundario o bloque de referencia a contenido - Footer con información legal, redes sociales y enlace de baja **Tipos de template por caso de uso:** - Newsletter: estructura más larga con múltiples secciones - Email transaccional (confirmación, bienvenida, notificación): limpio, directo, con una sola acción - Email promocional: hierarchy visual fuerte hacia el CTA de conversión - Email de re-engagement: emocional, simple, con urgencia contextual **Bloque 3 — Diseño centrado en conversión** El email de marketing tiene un objetivo: que el lector haga clic. Principios de diseño que maximizan la conversión: - Jerarquía visual: qué leer primero (titular), segundo (beneficio/imagen) y tercero (CTA) - El botón CTA: tamaño mínimo para mobile (44x44px), color contrastado, texto orientado a acción - Escaneabilidad: el 80% de los lectores escanea antes de leer. Cómo diseñar para eso - Dark mode: cómo diseñar emails que se vean bien tanto en modo claro como oscuro (Apple Mail lo soporta y afecta a millones de usuarios) - Accesibilidad: contraste mínimo de color (ratio 4.5:1), alt text, estructura semántica para lectores de pantalla **Bloque 4 — Herramientas y workflow de producción** Diseña conmigo un workflow eficiente para el equipo: - Diseño en Figma con componentes de email: cómo organizar los frames y exportar para los desarrolladores - Herramientas de traducción de diseño a código: MJML, Foundation for Emails, Cerberus, Email on Acid - Testing antes del envío: Litmus y Email on Acid para ver el rendering en 90+ clientes de correo - Gestión de templates en la plataforma de email marketing: cuándo usar el editor visual y cuándo el código - QA checklist: los diez puntos a verificar antes de cualquier envío Cuéntame la herramienta de email que usas, la identidad visual de tu marca (o si estás empezando desde cero) y los tipos de emails que necesitas diseñar, y construiremos juntos el sistema de templates.