Diseño y Maquetación para Emails 📬

Ejercicio de Platzi

Este template de correo esta hecho de modo RESPONSIVE.

Las características del diseño o maquetación de un email responsive, a grandes rasgos, son:

Utiliza media queries para cambiar el contenido entre desktop y mobile. Cambian los tamaños de texto, botones e imágenes.
Está formado por varias columnas en desktop, pero cambia a una sola en mobile.
La versión mobile se esconde en los dispositivos desktop y viceversa.
No funciona en todos los entornos (Outlook).
Requiere dos diseños (por ejemplo, hacer las imágenes del email por duplicado en dos tamaños).
La programación es algo compleja.
Funcionaba mejor cuando había menos tamaños de dispositivos.

Un email responsive consistía, originalmente, en dos versiones del mismo email: una para desktop y otra para mobile.

A través de la maquetación de un template responsive, se detectaba el ancho de la pantalla del usuario y, automáticamente, se mostraba uno de los dos diseños basados en ese ancho. Cada versión tiene marcada la medida del ancho de pantalla a partir de la que tiene que hacer el cambio de escritorio a móvil.

Un tipo de email responsive funcionaba bien cuando no había muchos tamaños de pantalla, pero ahora no es la opción más adecuada por la multiplicidad de formatos. Solo el dispositivo iPhone ya tiene cuatro anchos de pantalla diferentes. Aunque el resultado del diseño y la vista de estos emails en el móvil es aceptable, no es la ideal.

Fuente aquí

Ir al curso de diseño email

Demo

Ver la plantilla en https://vidaldev.github.io/template_responsive/