Recomendaciones para un email HTML sin problemas

Existen varias herramientas de marketing que sirven para publicitar o promocionar productos y servicios, así como para dar a conocer información relevante de un negocio o empresa; estas herramientas se utilizan de acuerdo a la necesidad que se tenga y el objetivo que se quiere cumplir. Actualmente la evolución de nuevas tecnologías como la web 2.0 y los dispositivos móviles, ha traído consigo un cambio en las estrategias de mercado y la manera de ejecutarlas, dando origen al llamado Marketing Digital.

Hoy por hoy no basta con utilizar medios de comunicación tradicionales para transmitir nuestros mensajes; la generación de contenido para redes sociales, el desarrollo de aplicaciones móviles o la creación de sitios web interactivos, cada vez ganan más terreno sobre medios como la prensa, radio y televisión.

Uno de los medios más utilizados dentro de las estrategias de Marketing Digital es la creación y envío de emails HTML. Estos emails proveen información al usuario de manera más personalizada y atractiva que un email con texto plano, el cual podría pasar desapercibido a diferencia de lo que es posible generar con un diseño y estilo que solo se consigue utilizando HTML, sin embargo para realizarlos hay que tener ciertas atenciones que nos aseguren que el resultado que verá el usuario será tal cual como se prevé esto es, sin errores.

Siendo que ya existen varios tutoriales para la realización paso a paso de un email HTML, en lo que nos enfocaremos principalmente será en pequeños tips o recomendaciones, con los cuales conseguiremos un diseño y código perfectamente visible en los clientes de email. Se utilizará como ejemplo un mailing ya desarrollado utilizando Sublime Text para el código y Adobe Photoshop para la maquetación.

Diseñar el mail previamente en un editor de imágenes 

Ya sea que se haga un boceto en una hoja de papel o se genere el mail completo con imágenes, colores y fuentes, en Photoshop; es importante comenzar con este paso ya que hará más sencilla la codificación, siendo que tendremos especificadas la distribución de los elementos y así sabremos en qué momento se utilizará cada tag.

Tipo de documento

La mayoría de los clientes de correo electrónico son capaces de soportar HTML, pero no en todas sus versiones; por lo tanto al comenzar a definir nuestras primeras tags es importante saber que el único tipo que no nos traerá problemas será el XHTML 1.0, el cual conserva las mismas funciones del HTML pero de manera más estricta.

Sustituir <div> por <table>

Como ya se mencionó anteriormente, al utilizar XHTML podríamos sentirnos limitados en un principio o desacostumbrados, ya que este lenguaje es más restrictivo y básicamente hay que programar de acuerdo a los lineamientos más básicos de HTML, lo cual se debe principalmente a la compatibilidad con los clientes de correo electrónico. Así pues, aunque al utilizar la etiqueta <div> en conjunto con varios atributos de estilo podamos conseguir el resultado ya definido en nuestra maqueta; éste posiblemente no se vea de la misma forma en Outlook por ejemplo, así que se recomienda sustituir definitivamente su uso por el de <table> que, aunque podría resultar un poco más confuso, es más flexible y compatible.

Otro punto al tomar en cuenta al utilizar tablas, es que éstas generan espacios vacíos por default; por lo cual siempre hay que definir el ancho exacto con el atributo width (no mayor de 700px para sea visible en todas las pantallas)  así como establecer los atributos border, cellpadding y cellspacing en “0”.

Si un atributo existe en HTML, utilízalo en vez de CSS

Continuando con las restricciones de compatibilidad en los clientes de correo, otra problemática recae en el uso mínimo de CSS (Hojas de estilo en cascada) para dar estilo al email esto es; definir colores de fondo, alineación de texto, largo, ancho, entre otros.

No es que se suprima definitivamente el uso del tag <style> pero si se utiliza se recomienda la consulta de la siguiente guía para conocer si el atributo que se quiere usar es compatible.


Utilizar imágenes

Si se va a insertar una imagen; ya sea un encabezado, una imagen de apoyo o botones para redes sociales, habrá que subirlas antes a un host externo accesible (en este caso se utilizó imgur); además éstas tendrán que contar con su largo y ancho especificados, sin omitirse el atributo alt), agregárseles el atributo display: block , así como definir el borde en 0. Otra consideración fundamental es la de evitar la utilización de imágenes como fondo, ya que no son compatibles con el tipo de documento.

Utiliza fuentes accesibles

Para evitar que el texto aparezca en un tipo de letra diferente al definido, lo mejor es utilizar fuentes seguras para web o fuentes del sistema; éstas se mostrarán sin problema en cualquier email ya que se encuentran pre-instaladas en la mayoría de los equipos, por ejemplo: Verdana, Arial, Georgia, Times New Roman, Tahoma o Trebuchet.

Revisar la sintaxis

Es posible que al pre-visualizar utilizando un navegador, el mail se muestre como lo teníamos planeado y de esa manera no notar algunos errores simples de sintaxis, los cuales harían estragos una vez compilados en el correo electrónico; lo más común es olvidar cerrar un tag o cerrarlo erróneamente, por lo cual hay que revisar minuciosamente cada línea, abriendo y cerrando cada tag de acuerdo a los lineamientos de XHTML.

Verificar y hacer pruebas

Una vez que tengamos nuestro código completo, no hay que omitir la revisión de éste; si bien al hacerlo por nosotros mismo pudiera resultar complejo, existen herramientas en línea en la que podemos apoyarnos, la más utilizada es W3C Markup Validator Service. Este recurso funciona cuando al subir el archivo o introduciendo directamente el código, hace el análisis y provee un resultado en el que se muestran errores y advertencias (si las hay) para que sea más fácil corregirlas. Esta validación también es indispensable complementarla enviando el email a varias cuentas de correo, de diferentes clientes como; Outlook, Gmail, Hotmail, Yahoo Mail, Apple Mail, etc. 

Finalmente, siguiendo los tips anteriores conseguiremos un email HTML funcional en el aspecto técnico; ahora lo importante será definir el mensaje a comunicar y el diseño para conseguirlo, para ello es recomendable echar un vistazo a los siguientes sitios HTML email gallery y Beautiful email newsletters en los cuales podrás inspirarte para crear tus propios diseños y comenzar a desarrollarlos.

Acerca del autor

Karla Aldáz es una diseñadora recién egresada de la carrera de Diseño para la Comunicación Gráfica de la Universidad de Guadalajara. Actualmente aplica sus conocimientos de diseño en el área comercial de Dawcons. 

Contáctala en el correo blog@dawcons.com.