Maquetar emails presenta desafíos únicos debido a las limitaciones de los clientes de correo y dispositivos de visualización. Se recomienda utilizar plantillas o frameworks como Foundation para emails que simplifican el proceso y facilitan pruebas en múltiples clientes. Es importante testear los diseños en diferentes dispositivos y programas de correo para asegurar la compatibilidad antes del envío masivo.
4. Maquetar emails siempre ha sido como
crear páginas web en los primeros tiempos de internet:
● Maquetación con tablas
● Estilos inline
● Resolución máxima de 600-800 px
● No se puede usar Javascript
● más limitaciones
● y más limitaciones...
5. ● Muchísimas líneas,
● Poco legible
● Difícilmente mantenible
El código HTML final resulta bastante sucio:
6. ¿Por qué tanto problema con la maquetación de emails?
Gran cantidad dispositivos y programas para revisar el correo:
aplicaciones nativas para móviles, aplicaciones para desktop, aplicaciones web.
fuente: webdesign.tutsplus.com
7. La mayoría de la gente revisa su correo en el móvil:
fuente: litmus.com
8. Muchos clientes de correo no soportan media-queries:
fuente: mailchimp.com
9. Regla de oro para evitar la frustración:
fuente: foundation.zurb.com
11. Consejos para no volverse loco en el intento:
● No empezar a maquetar desde cero
● Utilizar alguna plantilla:
○ Mailchimp
○ Sendwithus
○ Themeforest
● O mejor aún, el framework para emails de Foundation
● Testear, testear, testear...
12. Herramientas para testear:
● Litmus (de pago)
Herramienta específica para testear emails.
● Putsmail (gratuita)
Para hacer pruebas sencillas y rápidas.
● Mailchimp (gratuita hasta cierto límite)
Herramienta para hacer envío de emails. Permite
descargar plantillas, subir las propias y hacer pruebas
de envío (limitadas por día).
13. Foundation al rescate:
El paquete facilita mucho el trabajo, ya que incluye:
● Gulp
● Inky HTML para no tener que maquetar en tablas
(aunque el HTML final son tablas)
● Sass
● Inliner
● BrowserSync
● Image Compression
14. Empezando con Foundation:
Instalamos la línea de comandos de Foundation:
npm install --global foundation-cli
Instalamos el framework:
foundation new --framework emails
Dentro de la carpeta del proyecto arrancamos el servidor:
npm start
16. Inky breakpoints:
@media only screen and (max-width: #{$global-breakpoint}) {}
Un solo breakpoint los 596px o más pequeño.
Para usar este breakpoint desde nuestro archivo sass:
17. ¡Manos a la obra! Ahora solo queda empezar a maquetar :-)
