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

Creando Tu Startup: Perfeccionando las Plantillas de Email

by
Read Time:10 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Open-Source Foundation Behind Meeting Planner
Building Your Startup: Responsive Email for Gmail

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Este tutorial es parte de la serie Construyendo Tu Startup Con PHP de Envato Tuts+. En estas series, te guío a través del proceso de lanzamiento de una startup, desde el concepto hasta la realidad empleando mi app Meeting Planner como ejemplo de la vida real. En cada paso del camino, proporcionaré el código de Meeting Planner en forma de código abierto a modo de ejemplos de los que puedas aprender. También abordaré conforme surjan problemas relacionados con los negocios de startups.

En este tutorial, refinaré las plantillas HTML de email responsivo que Meeting Planner usa para enviar invitaciones, notificaciones, recordatorios y mensajes relacionados con las cuentas.

Durante la fase inicial del desarrollo de Meeting Planner, me he concentrado principalmente en la funcionalidad y no me he ocupado demasiado en el diseño o en contratar a un diseñador. El objetivo de hoy es limpiar el aspecto de las plantillas HTML de forma que los emails básicos sean más legibles y útiles para la gente.

Es muy probable que la primera experiencia con Meeting Planner sea vía un email de Solicitud de Meeting.

Si todavía no has probado Meeting Planner, hazlo ya y programa tu primer meeting. Contribuiré en los comentarios que me enviéis más abajo, ¡así que decidme qué os parece! También puedes encontrarme en Twitter @reifman. Me gustaría saber en especial si tienes sugerencias sobre nuevas funcionalidades o tópicos para nuevos tutoriales.

Como recordatorio, todo el código de Meeting Planner está escrito con el Framework Yii2 para PHP. Si te apetece aprender más sobre Yii2, consulta nuestra serie paralela Programando Con Yii2

Mensajes y Plantillas

Las Primeras Plantillas

Inicialmente, para crear los primeros emails de Meeting Planner usé frameworks básicos que encontré en la web. Funcionaban de forma aceptable para la fase inicial de desarrollo.

Aquí hay un ejemplo de nuestros emails en HTML; son funcionales pero no muy atractivos. Pero sobre todo, decidí que la gente no necesitaba tantas opciones y enlaces dentro de sus invitaciones. Era el momento de reducir la plétora de opciones en pos de una experiencia más simple.

Meeting Planner Templates - Original HTML Invitation TemplateMeeting Planner Templates - Original HTML Invitation TemplateMeeting Planner Templates - Original HTML Invitation Template

Incluso con las plantillas que usaba, las tablas de los emails aparecían con frecuencia corrompidas sin aparente explicación.

Meeting Planner Templates - Example of Corrupted View of Invitation in GmailMeeting Planner Templates - Example of Corrupted View of Invitation in GmailMeeting Planner Templates - Example of Corrupted View of Invitation in Gmail

Me estaba preparando para migrar a unas plantillas más profesionales de email, pero esto supondría definitivamente un retraso.

La Variedad de Mensajes

Aquí tenemos un sumario de los mensajes que Meeting Planner envía regularmente en la actualidad:

  • solicitudes meeting (p. ej. invitaciones)
  • actualizaciones sobre cambios en meeting (también conocidas como notificaciones)
  • confirmaciones de meeting con archivo de calendario adjunto
  • recordatorios de meeting
  • solicitudes de información de contacto para un próximo encuentro
  • solicitudes de cambio de contraseña

Para las pruebas alfa, espero poder alcanzar un nivel estético base aplicando plantillas de código abierto escogidas en la web. Un tiempo después, contrataremos un diseñador para dar vigor a las plantillas, el tema y la imagen de marca.

Comencé a barrer la web para encontrar las mejores plantillas de correo electrónico.

Recursos para las Plantillas de Código Abierto

Existen una serie de útiles guías como estas:

Y muchos proveedores ofrecen plantillas de código abierto propias:

Inicialmente, me sumergí en las plantillas de Mailgun porque pensé que estaban exhaustivamente comprobadas y que podía construir a partir de ellas, pero al final, opté por la plantilla de correo Oxygen de Senwithus. Sendwithus es una plataforma de marketing sinérgico para Mailgun (o potencialmente para otros proveedores de correo electrónico), pero no tengo experiencia con el conjunto de sus servicios.

Oxygen ofrecía una familia completa de plantillas para útiles escenarios. Parecía sencillo, organizado y fácilmente extensible. 

Meeting Planner Templates - The Send With Us Oxygen TemplatesMeeting Planner Templates - The Send With Us Oxygen TemplatesMeeting Planner Templates - The Send With Us Oxygen Templates

Es de agradecer que ofrezcan el código de sus plantillas de correo electrónico como open-source sin requerir que seas un usuario de pago. ¡Pásate al código abierto!

ntegración de Nuevas Plantillas

Como framework MVC, Yii separa los diseños del contenido del cuerpo (body). Así que necesitaba descomponer las plantillas y comprobar las diferencias entre las variaciones dentro de un grupo.

Puedes descargar la familia de plantillas de Oxygen desde el GitHub de Sendwithus, aunque no han dividido claramente el estilo estándar de los elementos comunes en cada plantilla, así que tendrás que hacerlo por tu cuenta.

Me llevó un tiempo elegir qué plantillas prefería, qué elementos me gustaban de cada una, y que CSS debía integrar en el diseño.

Separar el Diseño

Finalmente, aquí está el nuevo diseño HTML (aquí he truncado los estilos para favorecer la legibilidad): 

Sustituir los Elementos Comunes

Dentro de las plantillas, tuve que sustituir algunos elementos:

  • Logo
  • Imágenes secundarias
  • Enlaces

Cree un archivo para el logo que funcionase por el momento, y lo alojé estáticamente junto con las imágenes secundarias, p. ej. Twitter, en el servidor de Meeting Planner.

Meeting Planner Templates - LogoMeeting Planner Templates - LogoMeeting Planner Templates - Logo

También sustituí los enlaces predeterminados dentro del correo con código relativo nuestro sitio.

Construir la Sección del Pie

Para simplificar la reutilización a través de la plataforma, separé el código del pie:

Actualizando las Plantillas Existentes

Para integrar las plantillas, quise empezar por la más sencilla.  Moverse entre código complejo, CSS desconocido y HTML nunca es sencillo.

Comencé con la plantilla de email para el Cambio de Contraseña.

Cambio de Contraseña

Elegí la plantilla de Bienvenida (Welcome) que ves aquí abajo:

Meeting Planner Templates - Oxygen Welcome TemplateMeeting Planner Templates - Oxygen Welcome TemplateMeeting Planner Templates - Oxygen Welcome Template

Cada plantilla individual de SendwithUs puede ser previsualizada y comprobada en su cuenta de Litmus.

Ahora aquí tenemos nuestro correo electrónico para el cambio de contraseña en un iPhone, mucho más estético y confortable.

Meeting Planner Templates - Reset Your PasswordMeeting Planner Templates - Reset Your PasswordMeeting Planner Templates - Reset Your Password

Estaba un poco confuso cuando los recibí las primeras pruebas en Gmail, me parecieron mal formadas.

Meeting Planner Templates - Reset Your Password in GmailMeeting Planner Templates - Reset Your Password in GmailMeeting Planner Templates - Reset Your Password in Gmail

Pero revisar las previsualizaciones de Litmus me demostró que ese era el aspecto que tendrían en Gmail.

Meeting Planner Templates - Oxygen Welcome in GmailMeeting Planner Templates - Oxygen Welcome in GmailMeeting Planner Templates - Oxygen Welcome in Gmail

Más tarde aprendí que Gmail requiere mucho más CSS en línea que otros servicios. Te guiaré para que repares esto en un tutorial futuro.

Aquí tienes el código passwordRequestToken.php que ayudó a generarar lo anterior:

La Solicitud de Reunión

La invitación que la gente recibía como solicitud de encuentro es nuestra plantilla más compleja. Comparte una breve introducción, lugares posibles, horarios posibles y en ocasiones una nota.

Para esto, utilicé la plantilla de Confirmación de Oxygen:

Meeting Planner Templates - Oxygen Confirm TemplateMeeting Planner Templates - Oxygen Confirm TemplateMeeting Planner Templates - Oxygen Confirm Template

Pensé que los cajetines para la dirección y fecha del envío se podrían usar para compartir las opciones de Lugar y la Fecha y Hora, y funcionó realmente bien.

Aquí tienes el aspecto de la invitación en este punto:

Meeting Planner Templates - Meeting Request TemplateMeeting Planner Templates - Meeting Request TemplateMeeting Planner Templates - Meeting Request Template

Ciertamente, la estética básica es mucho mejor. En el futuro, trabajaré un poco para equilibrar las alturas verticales las cajas para el lugar y la fecha.

Este es el código del cuerpo (body) del archivo invitation-html.php que me ayudó a generar lo anterior:

¿Qué Viene Ahora?

Ahora que las plantillas básicas han sido actualizadas, empezaré a trabajar para arreglar la apariencia de los correos en Gmail. Y pronto, implementaremos las notificaciones y recordatorios haciendo uso de los mismos.

Mientras esperas los episodios sobre estas funciones, pon fecha a tu primer meeting y prueba las nuevas plantillas.  Además, apreciaría que compartieses tu experiencia más abajo en los comentarios, y recuerda que estoy siempre interesado en tus sugerencias. También puedes encontrarme directamente en Twitter @reifman.

También estoy empezando a experimentar con WeFunder basado en la implementación de las nuevas reglas del cowdfunding de SEC.  Por favor considera seguir nuestro perfil. Probablemente escriba más sobre lo tratado aquí como parte de nuestra serie.

Espera nuestros tutoriales siguientes de la serie Construyendo Tu Startup con PHP. Están por venir algunas grandes funciones.

Enlaces Relacionados

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.