Alejandra Vasquez Mendez
En esta sección, partimos de la base que cuentas con conocimientos técnicos y prácticos de HTML y CSS.
Al crear creatividades desde HTML se tiene que tener en cuenta que un HTML para correo electrónico es un poco diferente a hacer un HTML para una página web y esto se debe a que el HTML para email tiene ciertos requisitos técnicos, uno de los principales problemas que se tiene con los HTML para email es que no existen reglas universales sobre cómo los clientes de correo electrónico interpretan el código, desde MDirector podemos darte algunas pautas para evitar errores y buscar la correcta visualización ya que el nivel de compatibilidad con los estándares HTML y CSS varía mucho entre los servidores y clientes de correo electrónico.
Tamaño Estándar
Aunque no existe un ancho estándar estipulado, desde MDirector enviamos con un max-width de 600px, la media de ancho de plantillas está entre 550px y 650px. Aunque este ancho lleva mucho tiempo en el email marketing, y si bien es cierto ha habido muchos cambios en los tamaños de pantallas y dispositivos, el tamaño ideal sigue siendo 600px ya que es el que mejor se adapta a la mayoría de los servidores de correo.
<!DOCTYPE>
En primer lugar, todos los documentos HTML deben comenzar con una declaración <!DOCTYPE>.
La declaración no es una etiqueta HTML. Es una «información» para el navegador sobre qué tipo de documento esperar.
Si no añades el tipo de documento, no hay garantía de que el servidor de correo o navegador no lo interprete y no se visualice correctamente, el envío como tal puede ser entregado y puede llegar al contacto pero es posible que no aparezca como deseas, especialmente en varios clientes de correo electrónico con motor de renderizado antiguos como algunas versiones de Outlook.
Las líneas de <!DOCTYPE> que utilizamos en MDirector son las siguientes:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<HEAD>
En segundo lugar, se deben añadir las etiquetas <meta> dentro del elemento <head> estas etiquetas aportan la información de un documento HTML, normalmente se utilizan para especificar el juego de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica.
Tanto el tipo de documento como los metadatos no se mostrarán en el diseño de la plantilla de email, no obstante, son analizables por servidores/clientes de correo, motores de búsqueda y otros servicios web.
Metas
Los metadatos que se deben utilizar en MDirector son los siguientes:
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″><meta name=»viewport» content=»width=device-width» />
Codificación UTF-8
El formato de codificación de caracteres que se debe utilizar en los HTML que se añadan a MDirector debe ser la UTF-8.
Estructura y organización
Existen muchos tipos de codificación y estructuras HTML, pero las plantillas HTML para emailing se caracterizan por su estructura más sencilla, marcada por tablas:
<table>
<tbody>
<tr>
<td> …
Con sus respectivas especificaciones W3C, cualquier otra estructura sin elementos y atributos de este tipo (tablas para estructurar el diseño de la plantilla: para centrar elementos, estilizar el texto, establecer rellenos y márgenes, establecer fondos, dividir el contenido en columnas, etc.) no se puede asegurar la correcta visualización en los diferentes clientes de correo.
CSS Inline
Las hojas de estilo (CSS) se utilizan para formatear el diseño de una página web o plantilla de email, sin embargo, a la hora de añadir CSS en un HTML para email se tiene que tener en cuenta que la mayoría de los clientes de correo electrónico no admiten archivos CSS separados, de modo que el CSS debe estar añadido en línea, a través de etiquetas <style> y de ser posible, dentro de cada elemento.
Responsiveness
El proceso de hacer que un correo electrónico HTML sea responsive es un poco diferente a hacer que una página web sea responsive.
Esto se debe a que el nivel de compatibilidad con los estándares HTML y CSS varía mucho entre los servidores y/o las aplicaciones de correo electrónico, así como el tipo de dispositivo. Una de las grandes diferencias es que si bien podemos añadir media query de flexbox, grid en la web, estas no siempre serán compatibles con el correo electrónico HTML, así mismo JavaScript que es de uso común en el diseño web nunca se puede utilizar para el diseño HTML en emails, porque representa un riesgo de seguridad y como tal cualquier plantilla de email que contenga jvs siempre será descartada por los servidores de correo.
Botones
En el correo electrónico HTML, los botones no siempre se visualizan igual en todos los clientes de correo, ya sea por el tipo de renderización o bien por el tipo de botón que utilizamos, por esto sitios como Litmus han creado guías especificas para crear botones “a prueba de balas” y que puedan ser interpretados correctamente por la mayoría de clientes de correo:
- No usar imágenes como botones
- Utilizar condicionales <!–[if mso]> específicos para Outlook
- Añadir el estilo CSS in-line
Para más información sobre como crear botones funcionales:
Fuentes y Fondos
Cuando hablamos de fuentes, la mayoría de los clientes de correo electrónico no tienen un soporte de fuentes como las páginas web. Por lo que recomendamos ceñirse a las fuentes web segura, este tipo de fuentes están preinstaladas en el directorio de fuentes locales de la mayoría de los sistemas operativos, esto incluye clientes de correo electrónico y web. Algunas de estas fuentes son: Arial, Helvetica, Verdana, Georgia y Times New Roman.
Si bien es cierto es posible añadir Fuentes Web como las de Google Fonts, estas fuentes solo funcionan en algunos clientes de correo electrónico:
Fuente: Litmus
Videos
No recomendamos incrustar videos en códigos HTML para email, tal y como pasa con las fuentes web son más los proveedores de correo que no admiten vídeos integrados que los que si.
Fuente: Litmus
Como alternativa te recomendamos usar GIF animados o imágenes que aludan al video, con un enlace directo al video:
Formularios
Sabemos que los formularios de recopilación de datos son una estrategia de mucha importancia en email marketing, y aunque en paginas web se diseñen desde los mismos elementos básicos como campos de texto e inputs, para crear muchos de estos formularios es necesario el uso de JavaScript y como mencionamos anteriormente, no se puede utilizar jvs en HTMLs de email porque la mayoría de los clientes de correo bloquearan estos envíos por riesgos de seguridad.
Una opción más segura es el uso de Landing Optimizer de MDirector para general formularios web totalmente funcionales, puedes añadir un enlace del formulario a un CTA dentro de tu newsletter.
| NOTATrabajamos constantemente para hacer que sea más fácil de usar nuestra plataforma y que puedas sacarle todo el partido posible. Si ya has agotado nuestra ayuda y los recursos de vídeo que te ofrecemos y necesitas más ayuda, ponte en contacto con nuestro equipo de asistencia, estaremos encantados de atenderte soporte@mdirector.com |