Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML
Code

Construyendo Tu Startup: Email Responsivo para Gmail

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Refining Email Templates
Building Your Startup: Responsive Email for Gmail

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Premailer

Este tutorial es parte de la serie Construyendo Tu Startup Con PHP en Envato Tuts+. En esta serie, te estaré guiando a través de lanzar una staruo desde concepto hasta realidad usando mi aplicación Planificador de Reuniones como un ejemplo de la vida real. Cada paso a lo largo del camino, estaré liberando el código de Planificador de Reuniones como ejemplos de código abierto de los que puedes aprender. También abordaré asuntos de negocios relacionados con startups mientas surjan.

En nuestro episodio anterior, Entregando Invitaciones, introduje platillas responsivas HTML las cuáles construimos sobre algunas platillas MailChimp de código abierto. Después, en nuestro episodio previo, Refinando Plantillas de Email, migramos a las platillas Sendwithus Oxygen. Las nuevas plantillas se veían genial:

Meeting Planner Inlining - Working Email Template

Pero hubo grandes problemas con las plantillas en Gmail. Aquí está la plantilla Oxygen de referencia en Gmail:

Meeting Planner Inlining - Broken Gmail Template

En este tutorial, contaré la historia de cómo limpié la apariencia de las nuevas plantillas HTML dentro de Gmail. Tiene que ver con alinear el CSS porque los genios en Google no dan soporte a definiciones de estilo como todos los demás.

Ya probablemente la primera experiencia de la mitad de la gente con Planificador de Reuniones será a través de un correo de Solicitud de Reunión y probablemente de 10 a 25 por ciento de esas será con Gmail, esto era un arreglo importante.

Si no has probado Planificador de Reuniones aún, ve y programa tu primera reunión. Participo en las discusiones de abajo, ¡así que dime qué piensas! También puedes contactarme en Twitter @reifman. Estoy especialmente interesado si quieres sugerir nuevas características o temas para futuros tutoriales.

Como recordatorio, todo el código de Planificador de Reuniones está escrito en el Framework Yii2 para PHP. Si quisieras aprender más de Yii2, revisa nuestra serie paralela  Programando Con Yii2.

Un Repaso Rápido

Para plantillas de email, decidó usar las plantillas de email de Sendwithus's Oxygen. Oxygen ofreció una completa familia de plantillas para escenarios útiles. Parecía simple, organizado y fácilmente extensible.

Meeting Planner Templates - The Send With Us Oxygen Templates

Cada una de las plantillas individuales de Sendwithus puede ser previsualizada y probada en su cuenta Litmus.

Aquí está nuestro correo de re-establecer contraseña ahora en iPhone, mucho más estéticamente cómodo que antes.

Meeting Planner Templates - Reset Your Password

Estaba un poco confundido cuando los primeros intentos de de Gmail que recibí se veían deformes para mí.

Meeting Planner Templates - Reset Your Password in Gmail

Pero revisando las previsualizaciones de Litmus (las cuáles han actualizado y reparado desde entonces), ví que es cómo se mostraban en Gmail:

Meeting Planner Templates - Oxygen Welcome in Gmail

Después aprendí que Gmail requiere más alineación de CSS que otros servicios. Mi tarea fue resolver este problema para los usuarios de Planificador de Reuniones.

Resolviendo el Problema de Representación de Gmail

Inicialmente, pensé que necesitaríamos administrar la alineación de CSS por nosotros mismos. Había dos caminos que tomar, ninguno de los dos fácil.

Ya sea a) Podría haber procesado cada mensaje saliente a través de un premailer Python auto-alojado después de ser completamente construido, o , b) Podría haber aplicado alineación a las plantillas dentro del árbol fuente.

Para simplicidad, escogí aplicar alineación a las plantillas manualmente, pensando que podría optar por alineación en el momento para el futuro. No estoy tan familiarizado con ejecutar tareas de Python desde PHP y monitorear su desempeño sobre una característica crítica tal como invitaciones de reunión enviadas por email, así que decidí no ir por esta ruta inicialmente. De manera similar, si necesito enviar un email a todos los 10,000 usuarios, eso son 10,000 eventos de alineación, lo cuál alentaría al servidor.

Aún así, la aproximación que elegí no era fácil y se volvió un poco una pesadilla procedimental. No hubo una forma sencilla de generar HTML programáticamente que pudiera ser fácilmente procesada y después regresada a PHP para generación dinámica de email.

El Premailer de Peter Bengtsson alínea CSS por ti vía Python. El también útilmente me encaminó a Premailer.io, lo cuál hizo las cosas más sencillas.

Básicamente, copias y pegas tu plantilla de email en la pestaña de Área de Texto y das clic en el botón Convertir (no mostrado):

Meeting Planner Inlining - Premailerio Web Interface

Después puedes copiar y pegar la plantilla de email resultante con el CSS alineado:

Meeting Planner Inlining - Premailer Results

Aquí hay una mejor vista del HTML con el CSS alineado--nota estilos embebidos con cada etiqueta HTML, la forma que le gusta a los ingenieros de Gmail:

Puedes ver incluso el resultado en la pestaña de Preview--solo había procesado el diseño de encabezado en estas capturas:

Meeting Planner Inlining - Premailer Preview

También, de alguna manera tenía que hacerse todo junto. Pude haber creado un diseño antiguo y uno nuevo y modificado el código de la plantilla uno por uno, pero eso habría creado más áreas de cambios. Por último, tenía cerca de siete plantillas y sus piezas de componentes compartidos para procesar.

Procesando las Plantillas

Ya que Planificador de Reuniones está construido con arquitectura MVC de Yii2, los emails tienen una plantilla de diseño exterior y uno interior con mucho PHP entrelazado para generación de datos. También tenía sub-plantillas para elementos comunes re-utilizables tales como notas de reuniones y pies de página.

Simplemente no puedes procesar código PHP de vista. Tienes que quitar elementos PHP, ejecutar la plantilla a través de Premailer y después reintegrar el código PHP. Soy afortunado de que la mayoría de mi código PHP no usa mucho los estilos y fue mucho más simple cortar y luego reintegrar.

Todo junto, esto hizo el proceso de generar plantillas alineadas bastante difícil y tardado. También consideré retadora la idea de mantener y construir nuevas plantillas.

Básicamente, tuve que crear archivos temporales con el bloque de estilo entero arriba y el HTML que quería alinear abajo, remover el PHP, procesar la plantilla y después reintegrar el PHP.

Procesé el diseño de Correo HTML primero. Después, procesé cada sub-plantilla y plantilla individual.

Pero funcionó; aquí está una captura de la plantilla Re-establece tu Contraseña en Gmail basado en web.

Meeting Planner Inlining - Completed Reset Your Password Email

Otra Solución Más Prometedora

En algún punto cerca del final de todo este trabajo y la creciente realización de qué tan difícil sería mantener mis plantillas en el futuro cercano, me pregunté si Mailgun proveía alineación de CSS y comencé a buscar en línea.

Mailgun no lo hacía, pero SwiftMailer, el cuál Yii usa para entrega de correo SMTP, sí. Tomó otra media hora para limpiar mi trabajo anterior (a.k.a. desastre) y acomodar todo, instalando el complemento de alineación CSS para SwiftMailer.

Usé el complemento Open Buildings CSS Inliner basado en PHP el cuál agregué a composer.json:

Aquí están los resultados de actualización de composer:

También necesité personalizar la configuración del mailer para usar el complemento dentro de /common/config/main-local.php (en local y producción):

Las cosas comenzaron a trabajar bastante rápido, aunque aún había un defecto visual mayor en Gmail:

Meeting Planner Inlining - Gmail Email Template with Visual Defect

El Open Building's CSS inliner escrito en PHP no se había desempeñado tan exitosamente como el Premailer basado en Python, al menos de inicio con los ajustes por defecto.

En vez de pasar tiempo depurando el inliner basado en PHP y las plantillas ahora mismo, decidí cambiar de vuelta a las plantillas pre-procesadas por Premailer. Funciona bien por ahora.

En algún punto, necesitaré re-visitar ya sea que haya maneras más simples para arreglar esto o configurar el complemento de alineación basado en PHP. De manera alternativa, puede que necesite cambiar al inliner de Python.

Cuando se construye una startup, tienes que elegir tus batallas y priorizar todo. De momento, esta es una prioridad más baja y bastante fácil de trabajar alrededor.

En el árbol de código, encontrarás /common/mail/inlining con un árbol de varias carpetas y un archivo mail-readme.txt para explicar que hay ahí. Básicamente, hay copias de las plantillas Oxygen, las versiones funcionando de PHP, el código editado pre-procesado y el código procesado final.

¿Qué Sigue?

Actualmente, estoy trabajando para preparar Planificador de Reuniones para liberación alfa. Estoy enfocado primariamente en mejoras y características para hacer que la liberación alfa no tenga contratiempos. Estoy siguiendo todo en Asana ahora, del cuál escribiré en un tutorial futuro. También hay algunas interesantes nuevas características aún en camino.

Finalmente, estoy comenzando a experimentar con WeFunder basado en la implementación de las nuevas reglas crowdfunding de SEC. Por favor considera seguir nuestro perfil. También escribiré más acerca de esto en un tutorial futuro.

Mientras esperas más episodios, programa tu primera reunión y prueba las plantillas con tu amigos con Gmail mailboxes. También, apreciaría si compartes tu experiencia abajo en los comentarios y siempre estoy interesado en tus sugerencias. También puedes contactarme en Twitter @reifman directamente.

Está al pendiente de nuestros siguientes tutoriales en la serie Construyendo Tu Startup Con PHP.

Enlaces Relacionados

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.