- Ruby 2.3.0
- Middleman 4
La instalación es como cualquier otro proyecto de Ruby / Rails. Tener instalado el Ruby correspondiente y ejecutar 💻 bundle install en la carpeta de proyecto.
Para arrancar el server de Middleman:
💻 middleman server
Normalmente podrás ver la app en:
http://127.0.0.1:4567
Si lo has hecho todo correctamente deberías ver una página con el listado de los bloques:
Este proyecto aspira a ser un conjunto de bloques bien probados que permitan construir emails / newsletters en HTML que se vean lo mejor posible en el mayor número de lectores de correo. Esta titánica tarea se llevó a cabo en 2016 durante una semana y este es el mejor resultado que pudimos conseguir.
Este proyecto te permite usar CSS normal con clases... etc y bloques. Funciona como un repo de middleman normal y corriente. Puedes crear vistas y en ellas importar los diferentes partials de cada tipo de bloque. Los bloques puedes encontrarlos en la carpeta: source/email/blocks
La magia que proporciona este proyecto es que cuando haces un build del email la gema middleman-roadie se encarga de hacer el inline de todo en CSS en todos los sitios necesarios y te permite hacer ajustes más sencillos (esta gema es un wrapper para roadie).
Para hacer el build del email
En la carpeta raiz ejecuta em la terminal: 💻 middleman build
El email HTML resultante se generará en la carpeta /build.
Puede ser también útil que eches un ojo al layout base que se usa para general los emails:
source/layouts/email.html.erb
Y sl resto es bastante sencillo, emplea los bloques de ejemplo en source/email/blocks como base para tus propios bloques y estila normalmente.
- Los lectores de correo cambian constántemente muchas veces sin avisar ni explicar en ningún sitio que transformaciones aplican en los emails antes de mostrárselos a los usuario. Si, has leido bien, algunos lectores de correo reemplazan el HTML de los emails por su cuenta y no dicen cómo o porqué.
- Con algunos lectores fuimos incapaces de conseguir resultados decentes. El peor caso es el lector de correo de Lotus Notes. En estos momentos (2017) hay tres versiones en uso de Lotus Notes cada una de ellas con su propio motor de HTML diferente 😢
- Si podemos darte un consejo: Evita dar soporte a Lotus Notes en la medida de lo posible. Es un pozo de tiempo, no hay ningún tipo de documentación y algunas features son incompatibles entre si. La única solución es poner un enlace para ver el email / newsletter en el navegador.
Inicialmente los lectores de correo soportaban mediaqueries (que permitían hacer ajustes responsive), pero progresivamente han ido dejando de dar soporte a esta caracterísica (¿qué clientes de correo dan soporte actalmente?). Ahora los lectores generan su propio responsive en muchos casos sin que se pueda controlar completamente la visualización final, es decir, el letor de correo hace cambios en el HTML para que el correo sea responsive, pero a su puta bola.
Así que ya que el responsive es muy incontrolable es importante hacer emails sencillos, nuestra recomendación es que sean de una sola columna, con botones sencillos (formas cuadradas) o directamente que los botones sean tambien imágenes (¡si amigos, vuelta a 1999!)
Por favor, si conoces más herramientas útiles que puedan simplificar este tema, por favor añádelas en esta sección.
- Emailonacid, para testear los correos en varios lectores
- Litmus.com Otra herramienta para testear correos. Tienen una sección de documentación muy completa.
- Propiedades de CSS soportadas por cada lector de correo. No pierdas tiempo y consulta esto antes de usar cualquier propiedad.
- Porcentaje de uso de cada lecto de correo. Para justificar a que clientes dar soporte o no.
- Clientes de correo que dan soporte a mediaqueries. Es decir los que soportan un responsive real que se puede controlar. El resto son hacks, por lo tanto incontrolables.
- Midddleman-roadie la gema que hace la magia del inline de los estilos.
- Roadie la gema original de roadie.
El que te escribe (@carloscabo) desea que:
- Los emails en HTML terminen desapareciendo
- En su defecto sean lo más sencillos posible (una columna y pocos elementos)
- O volver a una imagen metida en el correo y dejar de complicarnos
- O que un meteorito del tamaño de Texas impacte contra la tierra y tras la extinción masiva (ELE) la civilización que surja (probablemente de insectos) haga las cosas mejor y nunca llegue a crear los emails en HTML.