Los correos electrónicos son una de las principales herramientas de comunicación que se han constituido desde la popularización del Internet.
Gracias a ellos, se ha fomentado el establecimiento de relaciones entre personas y el intercambio de información en la red, dejando de lado medios que anteriormente predominaban.
Sobre la práctica, un correo electrónico es un medio increíble, te permite garantizar una entrega casi inmediata y personal de información; ya que con sólo dar un clic sobre el botón de enviar, nuestro contenido se deposita en la bandeja de entrada del cliente, sin líos, sin más pasos ni fases extras. Es muy útil para la creación de boletines electrónicos.
Con el notable crecimiento del uso de smartphones, cada vez es más común que los usuarios lean sus correos desde uno de éstos, pero lamentablemente los equipos de marketing dedicados al desarrollo de correos parecen omitirlo y terminan perdiendo una gran oportunidad de llegar a un gran mercado.
Una de las formas de poder hacer llegar nuestro mensaje de forma correcta, es la elaboración de código HTML el cual se integre a nuestro correo para que el contenido sea desplegado de manera correcta y agradable.
Estandarización en los clientes de correo electrónico
Si con anterioridad has intentado diseñar y estructurar correos electrónicos con HTML sabrás que puede resultar ser más complejo de lo que parece.
Una de las principales causas de esto, es la falta de estandarización que existe en el mundo de los administradores y editores de correos electrónicos.
Lo cierto es que son tantos los dispositivos y clientes que existen, que es demasiado difícil poder establecer un estándar. Si bien es cierto que la experiencia de leer correos mediante una página de Internet en un ordenador puede resultar bastante similar.
Cuando se trata de probar un producto para clientes de correo, tenemos que ser conscientes de que esto abarca un mundo de programas, tanto nuevos como viejos.
Un rango muy amplio que va desde el cliente más moderno desarrollado para Android o iOs, hasta alguna versión sin soporte de Outlook incluida como parte del paquete office, pasando por el infame conocido Lotus Notes para Office 2007 que reusa a interpretar tu código HTML por razones de “seguridad”.
Gracias a esto, existen muchas combinaciones posibles para poder mostrar un correo electrónico ante el cliente, por lo que si anteriormente ya has trabajado con diseño y desarrollo web.
El mejor consejo que te podemos dar es que te olvides por un tiempo de eso y empieza a tratar al diseño de correos como algo totalmente diferente.
Enfoque para construir un correo con HTML
Un enfoque adecuado es lo primero que debemos de obtener para poder desarrollar un correo mediante HTML. Existen algunas sugerencias de flujo de trabajo que permiten encontrar este enfoque y a partir de ahí estructura el email.
Lo primero que se recomienda hacer es trabajar de manera estructurada, esto permitirá evitar muchos errores y problemas que se puedan presentar más adelante en el desarrollo.
No es recomendable realizar todo el trabajo y luego probar si funciona, esto puede repercutir bastante en nuestros tiempos de trabajo y a la larga traer muchos errores que resolver en poco tiempo, con la posibilidad de que incluso algunos de ellos estén provocando otros.
Pruebas en diferentes clientes de email
Trata de probar constantemente tu plantilla, de esa manera te asegurarás de que hasta cierto punto se encontraba libre de errores.
Para poder estructurar esto, se puede optar por el uso de milestones, una vez que se ha concluido esa fase se puede probar y pasar a la siguiente. Por ejemplo, el primer milestone del proyecto puede ser realizar la estructura básica de la plantilla.
Existen aplicaciones y páginas que te permiten hacer esta clase de pruebas, entre las mejores encontramos a Email on Acid y Litmus.
Éstas dan la facultad de previsualizar el correo, realizar un análisis de código y rastrear spam.
Sin embargo ambas opciones son de pago, por lo que si hace falta dinero se puede optar por una alternativa gratuita como Browsershots. Eso sí, es más lenta de manejar.
Otro consejo que te puede ayudar bastante al probar tu plantilla, es el dejar el borde a tus tablas, como quizás ya sepas las estructuras de las plantillas de correo sólo interpretan tablas correctamente, por lo que es común hacer uso de ellas para ordenar.
Mientras estás realizando tus pruebas, puedes dejar un borde visible para que de esa manera puedas ir observando como se acomodan y despliegan en el editor.
Flujo de trabajo en la creación de emails
La manera en que se trabaja al desarrollar varia de un diseñador a otro, ya sea en base a la experiencia o a gustos propios, se opta por tomar un camino en especifico.
Como en este artículo estamos tratando de ofrecer consejos para el desarrollo de plantillas de correos, te ofrecemos como sugerencia tomar un camino donde el primer paso sea crear el esqueleto de la plantilla, probar, después añadir contenido, probar otra vez, agregar las fuentes, colores y estilos, probar una vez más y finalmente remover los bordes para pasar a la prueba final.
Herramientas para el desarrollo del HTML de un email
Para poder llevar a cabo el desarrollo de plantillas y estructuras HTML para correos, es recomendable que cuentes con un editor de texto que te proporcione las propiedades que más se adapten a tu forma de programar.
En mi caso, normalmente hago uso de Netbeans porque la mayoría de los proyectos en los que trabajo están relacionados con PHP y Java, y este editor da un gran soporte para ambos lenguajes, pero como los desarrollos relacionados a correos no son tan demandantes, se puede hacer uso de un editor más ligero como Sublime, TextMate o Notepad++.
Además de un editor, es recomendable contar con una cuenta de prueba en Litmus o en Email on Acid, esto permitirá ir probando los cambios que realizamos a los correos electrónicos. Tener una cuenta de prueba ilimitada con cualquiera de estos sitios te hará la vida mucho más fácil.
Plantillas para crear emails con HTML
En mi opinión no hay nada mejor que empezar con una estructura limpia, sólida y elaborada por ti.
Existen frameworks como HTML Email Boilerplate, los cuales te permiten elaborar y organizar código de manera más adecuada, además de que nos proporcionan fragmentos de código y atajos que se pueden ir implementando pieza por pieza.
Si tu plan es desarrollar una estructura no muy ostentosa, quizás el uso de este framework sale sobrando, ya que puede contener una gran cantidad de elementos que terminarás por no utilizar. Esto a menudo puede hacer que sea más difícil solucionar cualquier problema.
De ser posible, evita utilizar editores WYSIWYG para elaborar la estructura base de tu correo. Si lo haces, el resultado puede ser muy precario y esto terminará por complicarte más las cosas cuando deseemos continuar con el proyecto o dar mantenimiento.
!DOCTYPE
El primer aspecto técnico del que debemos hacer uso dentro de nuestro template en blanco, es el elemento Doctype. Un Doctype es básicamente una línea de código que informa al programa que lee el código, que clase de etiquetas HTML esperar y qué conjunto de normas aplicar.
Muchos clientes de correo electrónico omiten el uso de esta etiqueta removiéndola del código, algunos incluso aplican su propio Doctype.
Sin embargo, el uso de éste facilita el procedimiento de desarrollo, reduciendo la posibilidad de peculiaridades y contradicciones entre documentos, todo esto al agregar un estándar para el resto de los clientes y navegadores que lo identifican.
Es recomendable utilizar un doctype de tipo XHTML 1.0 Transitional, ya que declara un tipo de documento confiable, sin ser demasiado estricto en las reglas y sin omitir aspectos relevantes. Dicha sentencia se colocará en la parte superior de nuestro documento.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Al igual que el Doctype, es recomendable añadir dos etiquetas de tipo meta a nuestro código.
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
El tag Content-Type meta es para decirle al motor de renderizado como procesar los textos y caracteres especiales. Mientras que la etiqueta viewport está indicando al dispositivo el área de visualización que se debe fijar, estableciendo la escala inicial a 1.
Si no se especifica esto, muchos teléfonos inteligentes pueden escalar su contenido, reduciendo el tamaño de la plantilla para que el contenido se ajuste al área visible del teléfono. Esto puede dar como resultado un correo con texto e imágenes empalmadas, agrupadas y alineadas totalmente a la derecha de la pantalla.
Uso de tablas
Si bien el uso de tablas para alinear y organizar elementos ha sido satanizado por muchos diseñadores a lo largo de los años, en el caso de las plantillas de correos no existen muchas opciones a las cuales podamos recurrir.
Debido a la falta de soporte de estándares en el correo electrónico, no es posible utilizar divs, secciones o etiquetas de artículos, en vez de eso tenemos que recurrir al uso de tablas, y es por eso que el desarrollo de templates para correos electrónicos se reduce al uso de tablas anidadas.
La anidación constante es necesaria ya que atributos como colspan y rowspan no son interpretados adecuadamente.
Por esto mismo, en vez de hacer uso de párrafos para mostrar nuestro texto, debemos recurrir a las celdas.
No es recomendable utilizar etiquetas estándar como h1, h2, h3 o p, ya que el resultado puede ser realmente inconsistente en los clientes de correo electrónico, causando bastantes dolores de cabeza.
La mejor opción es colocar todos los bloques de texto en celdas y aplicarle estilos.
Aplicar estilo CSS a tus emails
Al aplicar el estilo a la plantilla debes recordar que no se puede aplicar múltiples clases a los elementos en el correo electrónico HTML, ya que no es soportado. Cada elemento puede tener como máximo una clase.
Además de esto, no se pueden utilizar abreviaturas en las propiedades CSS, si por ejemplo quisieras aplicar un tamaño de fuente y escoger el tipo de fuente a usar, tendrás que aplicarlo en las 2 propiedades por separado.
modificado el 3 junio, 2018 15:51
Ver comentarios (1)
Muy buena info