Successfully reported this slideshow.
Your SlideShare is downloading. ×

Maquetación email

Ad

<Maquetación
de emails />
y cómo no morir en el intento...

Ad

Viajemos
en el tiempo…

Ad

Vayamos a los
inicios del
internet

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
0102 paginaen html5
0102 paginaen html5
Loading in …3
×

Check these out next

1 of 18 Ad
1 of 18 Ad
Advertisement

More Related Content

Advertisement

Maquetación email

  1. 1. <Maquetación de emails /> y cómo no morir en el intento...
  2. 2. Viajemos en el tiempo…
  3. 3. Vayamos a los inicios del internet
  4. 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. 5. ● Muchísimas líneas, ● Poco legible ● Difícilmente mantenible El código HTML final resulta bastante sucio:
  6. 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. 7. La mayoría de la gente revisa su correo en el móvil: fuente: litmus.com
  8. 8. Muchos clientes de correo no soportan media-queries: fuente: mailchimp.com
  9. 9. Regla de oro para evitar la frustración: fuente: foundation.zurb.com
  10. 10. Algunas pautas a seguir: fuente: mailchimp.com
  11. 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. 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. 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. 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
  15. 15. Escribiendo Inky HTML: -Inky- -HTML- Etiquetas disponibles:
  16. 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. 17. ¡Manos a la obra! Ahora solo queda empezar a maquetar :-)
  18. 18. <Maquetación de emails /> Fernanda Walker Diseñadora UX/UI & Front-end fernandawalker.com

×