Cómo Lo Hicimos: Construyendo las Nuevas Plantillas de Email de Tuts+

() translation by (you can also view the original English article)

Los mensajes de correo electrónico Tuts+ (boletines, digestades, etc.) se sometieron recientemente a una revisión completa, incluyendo nuevos diseños y una nueva plataforma. Este estudio de caso explicará cómo los construí en HTML y CSS, basado en los diseños de la primera parte de esta serie.

El inicio

Cuando llegó el momento de empezar a construir las nuevas y brillantes plantillas de correo electrónico de Tuts+, tuve la suerte de estar bastante familiarizado con los diseños. Durante la fase de diseño, Ian me explico las decisiones importantes y me hizo un montón de preguntas para asegurarse de evitar cualquier clásicas sorpresas de correo electrónico. Este proceso fue una excelente base para mí y yo estaba listo para comenzar cuando los diseños fueran terminados.

Ian me envió los diseños, una visión general de los diseños, una guía para el diseño de la cuadrícula y una guía de estilo con todos los tamaños y colores de fuente necesarios. Yo estaba listo para empezar.

Creando un plan

Mi primer paso es siempre esbozar. El objetivo de esto es identificar todos los módulos distintos, ignorando las diferencias cosméticas menores. Este proceso me da un conjunto final de módulos clave para construir que puedo trabajar uno a uno para construir la estructura primaria.

Habiendo identificado estos, en muchos casos los construiría todos en una sola página antes de separarlos en una etapa posterior, pero los diseños son bastante difíciles de revisar en ese estado. En su lugar, desarrollé cada diseño según los diseños para que pudieran revisarse y aprobarse más fácilmente.

Haciendo referencia a mi boseto resumido de los módulos, pude tener en cuenta cuando un módulo necesitaba ser reutilizable en varias plantillas y construirlo en consecuencia. Posteriormente establecería clases en el cuerpo de cada variante, como var-admin y var-digest, permitiéndome crear estilos específicos para cada diseño en particular.

Comenzando a codificar

Comencé por establecer algunas variables LESS para los elementos que sabía que iba a utilizar una y otra vez, como los colores y las mediciones.

Una guía para la mayoría de los estilos tipográficos

Algunas de mis variables (en sintaxis LESS) se muestran a continuación.

// Variables
@bg-body: #f2f2f2;
@palette-text: #58595a;
@palette-navy: #212a34;
@palette-design: #c94e4b;
@palette-code: #4cc1be;
@palette-web: #49b293;
@palette-photography: #8360a8;
@palette-game: #72BF40;
@palette-computer: #5d7dba;
@palette-business: #f38844;
@palette-3d: #f95858;
@palette-music: #56a4ca;
@palette-footer: #5a6e7a;
@palette-address: #999999;

@divider-color: #EAEAEA;
@link-color: #136fd2;
@alt-color: @palette-text;

@width: 640px;
@outer-gutter: 53px; 
@content-width: @width - (@outer-gutter * 2);
@grid-unit: 16px;

.rounded(@radius: 1px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

Siempre adjunto mis colores con paleta para mantenerlos juntos. Esto hace que sea más fácil para mí elegir un color de la sugerencia desplegable que aparece en Sublime Text:

Configurando las Webfonts

El siguiente paso importante fue configurar las webfonts utilizadas en los diseños. La tipografía es Roboto disponible de Google Fonts, por lo que he añadido esta etiqueta a la <head> de la plantilla:

1	<link href='https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />

Esto es generado por fuentes de Google y enlaces a su CSS para los cuatro pesos diferentes de Roboto que estamos usando.

Apliqué la fuente a la etiqueta body y a mi tabla principal de envoltura para aquellos clientes que ignoran la etiqueta body o quitan su formato.

1	body,
2	.wrapper {
3	font-family: 'Roboto', sans-serif;
4	}

A continuación, para evitar que Outlook 2007-2016 en Windows muestre Times New Roman—como tiende a hacer cuando se enfrentan a una fuente cara desconocida—configuro algún código condicional de solo Outlook en el <head> de la plantilla:

<!--[if mso]>
<style type="text/css">
 table, div {font-family: sans-serif !important;}
</style>
<![endif]-->

Esto asegura que cada instancia de la fuente web se reemplaza en Outlook con un sans-serif. Lo aplico a tablas y divs, los únicos dos elementos que se utilizan para contener contenido en la plantilla. No es necesario ir a un nivel inferior a este, ya que todas las demás etiquetas heredarán esto en Outlook.

Conseguir diseños de buen aspecto

A continuación fue sobre la codificación estructural. Comencé con el primer módulo que había esbozado: el masthead. Un desafío aquí era el logotipo, porque para algunas de las plantillas se ve un poco diferente en el móvil:

Para lograr esto, en móvil oculté el logotipo principal y el texto en la parte superior. También oculté el logo y añadí la hoja diminuta como imagen de fondo al masthead.

.logo img {
  display: none !important;
}
.logo {
  background-image: url(images/leaf@2x.png);
  height: 17px;
  background-position: center center;
  background-size: 15px 17px;
  background-repeat: no-repeat;
}

Elementos cambiantes

La siguiente sección que abordé fue el artículo "héroe" en los correos electrónicos de resumen; La primera parte complicada aquí es las etiquetas. En los diseños aparecen junto al texto del encabezado en el escritorio, pero por encima del texto en el móvil. Para lograr esto en código, podemos usar algunas propiedades de visualización para hacerlas cambiar de lugar.

En primer lugar, he creado la etiqueta de encabezado con el contenido dentro dividido en dos tramos, uno para el texto y otro para la etiqueta.

1	<h2><span class="text">Using Curves in Adobe Photoshop</span> <span class="label">FEATURED COURSE</span></h2>

En cuanto al estilo, la extensión .text hereda el estilo h2 y, a continuación, la extensión .label se diseña por separado para hacerla más pequeña y darle un fondo de color:

.label {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 8px;
  vertical-align: 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #ffffff;
  font-size: 8px;
  line-height: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
}

A continuación, mediante consultas @media, intercambiamos los elementos en torno a las ventanas de visualización más pequeñas:

@media screen and (max-width: 700px) {
  h2 {
    display: table !important;
  }
  h2 .text {
    display: table-footer-group !important;
  }
  h2 .label {
    margin-bottom: 12px !important;
  }
}

El h2 es nuestro contenedor y lo configuramos para que se muestre como una tabla, de modo que podamos decir al intervalo .text que actúe como el grupo de pie de página de esa tabla y se mueva hasta el fondo del diseño. El etiqueta span .label entonces se muestra en la parte superior, y añadimos un margen debajo para darle algo de espacio para respirar.

No es sorprendente que Outlook en Windows (2007-2016) no quiera mostrar correctamente las etiquetas, ya que no respeta el radio de la esquina, ni tampoco añade el relleno a los elementos en línea. Los resultados realmente no eran buenos, así que configuré un estilo alternativo para Outlook que coloqué en código condicional en la plantilla:

<!--[if mso]>
<style type="text/css">
 /* Outlook fix for featured course labels */
 .label {background-color: #ffffff !important; vertical-align: 2px !important; color: #c94e4b !important;}
</style>
<![endif]-->

Esto significaba que en Outlook aparecerían como texto de color simple:

Imágenes de fondo

La plantilla Promocional tiene una característica muy distintiva: un héroe de borde a borde con una imagen de fondo.

Crédito a Marco Goran Romano por la brillante imagen utilizada como marcador de posición

Las imágenes de fondo en el correo electrónico no se admiten en todas partes. Los dos principales clientes de correo electrónico que plantean problemas son Outlook 2007-2016 (Windows) y Gmail.

Outlook no muestra fondos regulares en absoluto, requiriendo un lenguaje de marcado vectorial especial para que funcionen. (Stig en el backgrounds.cm de la Campaign Monitor es una gran herramienta para generar este código). El problema con él, sin embargo, es que terminas con dos bloques de código: uno en HTML y otro en VML. Esto es arriesgado cuando se sabe que otros necesitan poder actualizar fácilmente la imagen de fondo: si alguien intenta hacer esto sin leer correctamente las instrucciones, es probable que se equivoquen.

Gmail muestra imágenes de fondo, sin embargo, no respeta las propiedades background-size o background-position, lo que puede hacer que su diseño sea muy difícil.

Miramos los números de suscriptores y pudimos hacer la llamada en Outlook: estaría bien si los usuarios de Outlook vieran un color de fallback sólido en lugar de la imagen.

Para los usuarios de Gmail, tendríamos que configurar algunas directrices sobre las imágenes aceptables cuando se usan las plantillas. El fondo debe ser un fondo de repetición sin fisuras, o configurar de modo que siempre se ve bien en el 100%, fijado a la esquina superior izquierda.

Curiosamente, Gmail admite las propiedades background-position en el lado izquierdo: top left, bottom left y center left. Desafortunadamente no se puede posicionar horizontalmente, lo que normalmente es lo que se desea hacer haciendo que se muestre center center.

En algunos de los bloques de anuncios, pudimos tener imágenes de fondo en Gmail, porque están fijadas en la parte inferior izquierda. Estos bloques también se volvieron a un color de fondo sólido en Outlook.

Márgenes negativos en Navegación

Jugué con dos maneras de conseguir el margen superior negativo en el masthead para que funcione, donde la caja blanca del contenido aparece superpuesta en el mismo masthead.

En el desarrollo web, se agrega un margen negativo margin-top a la caja de contenido, y continue con su día.

En el desarrollo de correo electrónico, sin embargo, esto no es posible. Los márgenes negativos sólo son compatibles con un puñado de clientes de correo electrónico, dejando muchos de los comunes no soportandolos (como Gmail, Yahoo y Outlook.com).

Sin embargo, esa fue nuestra primera opción: utilizar un top-margin negativo como mejora progresiva, que se mostraría con un margen de 0 en todos los clientes no soportados (visto a la izquierda). La desventaja es que bastantes clientes verían esta versión sin margen y la disposición ciertamente perdió algo sin ella.

La otra alternativa era falsificar el margen negativo creando una tabla blanca en blanco a la altura y ancho correctas. La desventaja de este enfoque es que la aplicación de Gmail a menudo muestra minúsculas líneas cuando se reduce el contenido en el móvil donde hay un contenido más ligero sobre un fondo oscuro o viceversa. Estos no son en realidad líneas reales o fronteras, sólo pequeñas fallas que no se pueden corregir con el código. Decidimos ir con este escenario, porque beneficiaba a la mayor cantidad de lectores, y eran generalmente imperceptibles. También decidimos mantener seguir el tema y volver a revisarlo si no estábamos contentos con los resultados. (Desafortunadamente, estas plantillas no se pudieron crear utilizando el método fluido híbrido porque tanto MailChimp como Campaign Monitor plantean grandes problemas al hacerlo).

Superposición, con la minúscula línea de Gmail entre secciones

Preparación para diferentes plataformas

Sabía que estaría entregando las plantillas a Ian para su integración con múltiples plataformas de envío de correo electrónico: MailChimp y Campaign Monitor. Dado que mi código tenía que funcionar bien con ambos lenguajes de plantilla, seguí algunos consejos para hacer este proceso lo más fácil posible.

Nota del editor: desde la fase de diseño y desarrollo, nos hemos mudado desde MailChimp, y en su lugar usar sólo Campaign Monitor. Dicho esto, !los siguientes consejos son muy útiles!

Estilo al más alto nivel posible

Por ejemplo, con el estilo del texto, lo apliqué todo a la <table>, no a ninguno de sus hijos, de modo que si las celdas o los párrafos se convirtieran en áreas editables, no había riesgo de perder ningún estilo en ninguna parte. El contenido de la tabla hereda el estilo de texto del padre en todos los clientes de correo electrónico. La única excepción es el correo AOL, que a menudo no puede heredar la propiedad de color a menos que coloque eso en la celda individual.

Usar párrafos para el texto

Las plantillas de Monitor de campaña requieren un elemento multiline que se definirá cuando se desee un bloque de texto editable que permita el salto de línea, negrita / cursiva / subrayado, texto seleccionado vinculado, etc. También envuelve automáticamente todo el texto dentro de la multiline con una etiqueta p, que realmente puede romper su diseño si no ha permitido párrafos. Cuando utiliza un salto de línea en Campaign Monitor, finalizará el párrafo actual e iniciará uno nuevo. MailChimp no hace esto, y cuando crea un salto de línea simplemente agrega una etiqueta <br />. Pero no tiene ningún problema con los párrafos y respetará cualquier estilo de párrafo que haya configurado, por lo que es seguro usarlos para el motivo de Campaign Monitor, sin efectos secundarios desagradables de MailChimp.

Hacer variantes seleccionables por el usuario

Una de las plantillas necesarias para tener un conjunto de los diferentes títulos de colores para cada tema que se podría elegir cuando se crea un boletín de noticias en MailChimp. He creado un lote de estilos de título que se podrían seleccionar de una lista desplegable en MailChimp, usando la sintaxis correcta para la definición de sus bloques @style:

/**
* @style topic-design
*/
.topic-design {
  color: #c94e4b;
}
.topic-design a {
  color: #c94e4b;
}
/**
* @style topic-code
*/
.topic-code {
  color: #4cc1be;
}
.topic-code a {
  color: #4cc1be;
}
/**
* @style topic-web
*/
.topic-web {
  color: #49b293;
}
.topic-web a {
  color: #49b293;
}
/**
* @style topic-photography
*/
.topic-photography {
  color: #8360a8;
}
.topic-photography a {
  color: #8360a8;
}
/**
* @style topic-game
*/
.topic-game {
  color: #72BF40;
}
.topic-game a {
  color: #72BF40;
}
/**
* @style topic-computer
*/
.topic-computer {
  color: #5d7dba;
}
.topic-computer a {
  color: #5d7dba;
}
/**
* @style topic-business
*/
.topic-business {
  color: #f38844;
}
.topic-business a {
  color: #f38844;
}
/**
* @style topic-3d
*/
.topic-3d {
  color: #f95858;
}
.topic-3d a {
  color: #f95858;
}
/**
* @style topic-music
*/
.topic-music {
  color: #56a4ca;
}
.topic-music a {
  color: #56a4ca;
}

Pero... le entregué esto a Ian que descubrió que no funcionaba en absoluto; Ninguno de estos estilos de encabezado apareció en el menú desplegable cuando editó el texto. Él jugueteó con él y descubrió que MailChimp realmente no muestra estas opciones como estilos de encabezados seleccionables a menos que tengan algún tipo de propiedad relacionada con fuentes como font-family o font-weight.

También no funcionó porque lo proporcioné por separado, y cualquier código de plantilla MailChimp especial para áreas editables o estilos personalizados debe aparecer en el <head> de su plantilla; No puede ser un archivo externo. Por lo tanto, hemos añadido una declaración font-weight: bold a nuestros estilos de encabezado, apareció el CSS en la cabeza, y lo consiguió todo funcionando.

Prueba final y finalizacion

Ahora que todos nuestros diseños habían sido vistos y aprobados, los problemas ordenados y los compromisos decididos, era el momento de terminar las pruebas y preparar todos los archivos para el despliegue.

Me puse a hacer un montón de extenuantes pruebas finales en Litmus y correo electrónico en Acid. Utilizo Trello para realizar un seguimiento de los requisitos, las tareas y los errores para cada proyecto en el que estoy trabajando. Trabajé a través de mis listas de errores y tareas hasta que no quedaba nada y los archivos estaban listos para desplegar.

Tengo que amar a Trello para la gestión de tareas

Configuración de un kit de plantillas

El equipo Envato quería ser capaz de sumergirse en el código para mezclar y combinar diferentes diseños, por lo que necesitaba proporcionar comentarios claros en HTML y CSS, así como asegurar que la transferencia de módulos entre plantillas no causaría una catástrofe mayor.

He configurado cada plantilla con su propia clase de body :

1	<body class="var-admin">
2	<body class="var-digest">
3	<body class="var-newsletter">
4	<body class="var-promotional">

Y luego configurar una clase que se podría agregar para cambiar fácilmente entre un fondo blanco y gris:

1	<body class="var-admin grey-background">

También separé los estilos específicos de diseño (tanto móviles como de escritorio) en hojas de estilos individuales para guardar en tamaño de archivo:

1	<link rel="stylesheet" type="text/css" href="css/var-admin.css" />
2	<link rel="stylesheet" type="text/css" href="css/var-digest.css" />
3	<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" />
4	<link rel="stylesheet" type="text/css" href="css/var-promotional.css" />

Di instrucciones para agregar un enlace a cada hoja de estilo donde se estaban utilizando elementos de ese diseño. Por ejemplo, si un módulo de resumen se está portando a la plantilla Boletín, el vínculo CSS de resumen debe agregarse al head de la plantilla Boletín antes de copiar sobre el módulo HTML.

Para los elementos comunes, como la barra de anuncios y los bloques de anuncios, me aseguré de que el estilo fuera completamente independiente del diseño, de modo que pudieran moverse libremente.

Incluí todas estas instrucciones en un archivo README y lo comprimí con todo el código HTML e imágenes que se enviarían.

deliverables — Entregas por correo electrónico

Envíos

¡Y ya hemos terminado! Le envié todo a Ian que se encargó del resto de la integración. Es un para Morderse las uñas entregar los archivos de plantilla sin la capacidad de obsesivamente probar y volver a probar durante la integración, pero yo tenía la mayor fe en Ian, ¡por supuesto!

Una vez que su trabajo estaba terminado y ya era hora de empezar a enviar, Ian envió copias de prueba a mi Litmus y correo electrónico en las cuentas Acid para que yo pudiera pasar por las previsualizaciones de procesamiento y señalar cualquier problema. Un par de imágenes de fondo cayeron aquí y allá, que arreglamos antes de que las plantillas estuvieran listas para ser enviadas.

En la siguiente y última parte de esta serie, llevaremos nuestras plantillas estáticas al siguiente nivel, mostrando cómo las integramos en Campaign Monitor.

Enlaces relacionados

Si necesita más inspiración de correo electrónico HTML, una de nuestras plantillas de correo electrónico de adaptables puede ser justo lo que necesita.
Crear un Correo Electrónico Responsivo Perdurable sin Media Queries