Screen-Shot-2015-06-05-at-4.20.07-PM

Se dice que para aprender realmente un idioma, lo mejor es la inmersión en la propia cultura. Si esto es cierto para los idiomas, es aún más cierto para aprender HTML, ¿verdad? Para mí, como vendedor, HTML es tan extraño como un idioma.

En Mailjet utilizamos nuestro práctico editor de plantillas WYSIWYG para hacer emails, pero insertamos fragmentos de HTML para resaltar ciertas partes. Los últimos meses, me di cuenta de que estábamos enviando a nuestro diseñador pequeñas tareas (crear tablas anidadas, redimensionar imágenes, crear banners para los emails), lo que consume tiempo a los proyectos de producto más importantes. ¿Qué pasaría si, como vendedor por correo electrónico, fuera capaz de trabajar cómodamente con el editor WYSIWYG y con HTML por mi mismo?

Este fue el principio de una completa sesión de dos semanas de aprendizaje sobre cómo codificar un email partiendo de cero. Aquí está lo que he aprendido:

Las primeras cosas primero:

Screen-Shot-2015-06-05-at-4.21.22-PM

Lo primero, puedes empezar con un documento HTML de formato plano (un texto guardado con una extensión ‘.html’) o simplemente trabajar directamente con tu proveedor de servicios de email. Yo trabajé directamente con el editor avanzado de HTML de Mailjet. Comenzaremos con el encabezado, utilizando un formato estándar como el de abajo. El encabezado dice al navegador cómo leer nuestro documento, especificando el lenguaje en el que está y la versión en la que está escrito.

Screen-Shot-2015-06-05-at-4.24.57-PM

Codificar en HTML tiene mucho que ver con preparar un modelo para un post de un blog: tienes que identificar la presentación (o encabezado), el cuerpo (el marco) y la conclusión (el pie de página).
A los navegadores les gusta que estas partes estén claramente identificadas, porque así son capaces de saber cómo reconstruirlo, formando un diseño de email coherente.

Construir el cuerpo: es todo una cuadrícula

Ya estamos preparados para empezar nuestra cuadrícula. Como en todo buen diseño, trabajar sobre una cuadrícula ayuda a crear un balance estético, a organizar tu contenido y a que, en la mayor parte de los casos, el resultado provoque una reacción. Un diseño de cuadrícula de un email puede transformarse fácilmente en un diseño de columna única en pantallas más pequeñas.

Para hacer el diseño de mi cuadrícula, tengo que aprender cómo codificar tablas. Esto fue lo más difícil para mí: ¡es difícil imaginar cómo transformar algo visual como una tabla en texto!

Empezar con un boceto

El primer error que cometí fue lanzarme de cabeza a la codificación sin haber realizado primero un boceto. Las tablas pueden ser difíciles de visualizar una vez que empiezas a codificar, por lo que es de gran ayuda tener una idea de cuánto contenido querrás incluir y cómo te gustaría organizarlo. Cada pieza separada de contenido, sea imagen o texto, necesitará generalmente ser codificada como su propia celda en la tabla.

Codificar la tabla

Ahora, el código <tr> representa la “fila de la tabla” y <td> representa los “datos de la tabla” o columna. Utiliza <tr> para crear una fila nueva, seguido de <td> y el texto que te gustaría añadir a la celda.

Screen-Shot-2015-06-05-at-4.25.41-PM

Aquí está el cuerpo principal que sustentará el resto del contenido del email.

Screen-Shot-2015-06-05-at-4.25.47-PM

Para añadir más secciones al marco, simplemente sigue el formato que utilizamos para crear la tabla inicial de arriba. Copio y pego dos filas adicionales. Así, ahora, tenemos un marco mayor y una configuración interna de tres filas.

Screen-Shot-2015-06-05-at-4.25.53-PM

Añadir los detalles

Añadiendo otro lenguaje…

El cuerpo del mensaje que acabamos de ver estaba en HTML, pero para el estilo, tenemos que cambiar a otro lenguaje, CSS (Hojas de Estilo en Cascada). Los dos se suelen utilizar juntos para la realización de webs y de emails, pues el HTML crea la estructura, mientras que el CSS describe los detalles visuales como el color y el tipo de letra.

Para complicar más las cosas, la mayor parte de los emails de los clientes no leen bien el CSS. Hay inconsistencias en la forma en la que tratan el CSS. Por ejemplo, Gmail quita alguno de los códigos CSS incluidos en el encabezado o en el email, pero Outlook acepta etiquetas de <style> (estilo) en el <head> (encabezado) y <body> (cuerpo). ¡Esto también me confundió! A los emails de los clientes no les gusta el CSS, pero ¿tenemos que utilizarlo de todas formas para el estilo?

Resulta que hay varios tipos de CSS, pero para nuestra intención y propósitos, introduje simplemente el CSS-embebido. Ya que el CSS-embebido se aplica a cada etiqueta HTML individual y resulta correcto.

Si te ocurre que ya tienes todos los estilos codificados en tu encabezado, hay múltiples herramientas útiles que pueden “introducir” el código por ti. Usa Inky’sInliner, por ejemplo.

Añadir al encabezado imagen y color

Debajo, he añadido la imagen del encabezado al email con la etiqueta <imgsrc= “link”>.

Además, he ajustado el color de fondo de las filas 2 y 3 con Mailjet oro <bgcolor=”#ffbf40”> y gris <bgcolor=“#989dac”>. En solo un momento, hice estas dos filas para crear el cuerpo de mi email.

Screen-Shot-2015-06-05-at-4.25.59-PM

Relleno

Para complementar el resto del cuerpo del email, necesitaremos añadir algún relleno. Por ejemplo, style=”padding: 40px 30px 40px 30px;”> indica cuánto queremos que sea el espacio superior, derecho, inferior e izquierdo respectivamente del email del cliente.

Screen-Shot-2015-06-05-at-4.26.04-PM

Enlaces con redes sociales

Para acabar el cuerpo del email, añadí una fila extra en la parte inferior para incluir enlaces a redes sociales. Siempre incluyo enlaces a redes sociales: lleva solo unos segundos asignarlos y no solo ayuda a tener tráfico adicional en tus otras redes sociales, sino que extiende el alcance del contenido de tu email.

Screen-Shot-2015-06-05-at-4.26.10-PM

Screen-Shot-2015-06-05-at-4.26.16-PM

Enlace para darse de baja

Por último, pero no por ello menos importante, ¡no olvides incluir un enlace para anular la suscripción en la parte inferior de cada email! Mailjet te recuerda cómodamente que no te olvides de añadir uno antes de pasar a la siguiente etapa:

Screen-Shot-2015-06-05-at-4.26.22-PM

Screen-Shot-2015-06-05-at-4.26.27-PM

Al utilizar el enlace de anulación de suscripción indicado arriba, añado un atributo href que indica al email del cliente qué enlace añadir al texto.

Prueba y error

Sobre todo sé paciente cuando estés empezando. A veces perderás una etiqueta de cierre o añadirás un carácter de más que rompe el diseño. Pista: ¡elige colores poco frecuentes para destacar la sintaxis!

El generador de HTML de Mailjet te permite hacer una previsualización del aspecto de tu campaña en varios tamaños de pantalla. También puedo enviarme un email de prueba a mi mismo. Comprobé mi código en cada etapa para asegurarme de que el diseño tomaba el aspecto que quería. Si algo estaba desalineado o roto en la previsualización, podía inmediatamente volver atrás y arreglarlo.

Screen-Shot-2015-06-05-at-4.26.33-PM

Para acabar

Y aquí lo tenemos, el producto terminado. En definitiva, ¡me llevó tres horas completar este simple diseño de arriba! A menos que estés buscando algo muy personalizado, comenzar con el editor WYSIWYG editor e inyectar HTML cuando se necesite puede ser un proceso más eficiente.

¿Con qué frecuencia su equipo codifica emails partiendo de cero?

Screen-Shot-2015-06-05-at-4.26.39-PM