Si usa su propio código HTML, en lugar de una plantilla de Emarsys, para diseñar sus emails, los ajustes de campaña, preferencias de email y utilidades de muestra son las mismas, pero el editor de contenidos es diferente.
Aquí describimos las funciones principales del editor HTML y ofrecemos algunas directrices de buenas prácticas para crear emails HTML.
Índice:
El editor HTML
El editor de HTML de Emarsys es un editor estándar con varias opciones de formato disponibles en la barra de herramientas.
Editar el texto
Puede alternar entre el editor WYSIWYG y el código fuente HTML haciendo clic en .
También puede cambiar entre las versiones HTML y Texto del email a través de las pestañas correspondientes.
Para introducir un enlace en la versión de texto, continue igual que para la versión HTML. Después de haber insertado una URL, no olvide añadir una descripción encima de la URL insertada. Esto también se aplica a enlaces que dirigen a formularios de registro y páginas de funciones adicionales.
Vincular texto
Para insertar una palabra o frase subyacente a un enlace, seleccione el string de texto y haga clic en Insertar enlace. Esto le lleva a la ventana Insertar enlace, donde puede definir las opciones de enlaces:
- Introducir una descripción interna del enlace
- Añadir el enlace a una categoría de enlaces (para análisis y segmentación)
- Decidir qué tipo de enlace se precisa. Para Enlaces rastreables, introduzca la URL en el campo correspondiente. Desde el menú desplegable, puede seleccionar http o https (una SSL, Secure Socket Layer).
Nota: Todos los enlaces añadidos de esta manera son rastreables, p.e., cada clic en el enlace se cuenta y muestra en el análisis de emails. Puede añadi tantos enlaces rastreables como desee a su email.
Para vincular un texto con una URL anteriormente introducida, marque Usar enlace existente y seleccione la URL del menú desplegable. El nombre interno del enlace sigue siendo el mismo que cuando usó ese enlace (es, después de todo, la misma URL). Si quiere usar el mismo enlace, pero con una descripción diferente, repita los pasos dados anteriormente.
Si quiere usar una página de Aterrizaje, marque Página de aterrizaje y seleccione una o cree una nueva. Para insertar un enlace a un formulario de registro o contacto, marque Formularios y seleccione uno del menú desplegable. Lo mismo resulta de aplicación si desea añadir la función Contar a un amigo o Baja en su email. Tenga en cuenta que la función Contar a un amigo reenvía todo el email (no únicamente una sección concreta).
Todos los emails tienen un enlace denominado de navegación en la parte superior. Garantiza que los contactos con clientes de email que no pueden mostrar HTML puedan ver sus emails en su navegador. Ven un breve texto seguido del enlace a la versión online del email. Cuando se hace clic en este enlace (o se copia y pega en el navegador), este lleva al contacto a su email. Si quiere añadir este texto y el enlace (además del existente en la parte superior de su email) a una de las secciones, debe seleccionar Versión online en el menú desplegabble Funciones adicionales.
Si quiere añadir un enlace que no sea rastreable, marque Enlace sencillo e introduzca la URL en el campo Insertar URL y haga clic en Insertar.
Cuando introduzca una dirección de email, seleccione mailto en el menú desplegable e introduzca la dirección de email en el campo de entrada de texto y después haga clic en Insertar.
Enlaces auto-rastreables
La función Rastreo automático busca los hiperenlaces añadidos manualmente y los transforma en enlaces rastreables. Haga clic en Rastrear automáticamente HTML para abrir una ventana en la que se enumeran los enlaces sin rastrear.
Todos los enlaces sin rastrear que se encuentran en la versión HTML se enumeran en la parte superior de la ventana. A la izquierda, puede decidir qué enlaces se tienen que convertir en rastreables. Puede convertirlos todos marcando Seleccionar todos.
Nota: Sólo los hiperenlaces completos (que incluyen el prefijo http://) se enumeran.
Todos los hiperenlaces sin rastrear que se encuentran en la versión de texto se enumeran en la parte inferior de la ventana. Haga clic en Rastrear para iniciar la conversión. Cuando use la función Rastreo Automático con frecuencia, los enlaces que rastreó anteriormente no se enumerarán de nuevo. Si no está seguro de un enlace, haga clic en Visualizar colocación de enlace. Esto abre una vista previa de la sección actual en la que se subraya cada enlace enumerado y se identifica con un número junto a él (los mismos números que e la ventana Rastreo Automático).
Marque Comprobar los enlaces rastreables al guardar, si quiere que el sistema busque automáticamente enlaces que aún no se han rastreado cada vez que guarde.
Usar emojis
Los Emojis están disponibles en la línea de asunto de las campañas HTML personalizadas redactadas en el editor antiguo únicamente. Puede acceder al editor antiguo aquí, en la pestaña Creación de contenidos:
Directrices para emails HTML
Aquí ofrecemos algunas buenas prácticas para el diseño y codificacióin de contenidos para emails en HTML. Muchas de estas normas son simplemente cuestión de adherirse a las especificaciones HTML 3.2. Hemos redactado estas normas para su conveniencia y posterior referencia, de manera que la creación de sus campañas por email se realice lo más suavemente posible desde el punto de vista de la producción.
El desarrollo de HTML para el email requiere más precisión y adherencia a las directrices que el desarrollo de contenidos para sitios web, pues el código puede renderizarse de manera diferente por distintos clientes de email y en diferentes navegadores web. Para asegurarse de que usa un código que no depende de etiquetas específicas para navegadores, compruebe su plantilla en las últimas versiones de Microsoft Internet Explorer, Firefox, Chrome y Safari.
También, si su empresa usa un cliente de email no estándar, compruebe el código HTML en esa plataforma también. Emarsys puede también proporcionar una gama de servicios de prueba de plataformas; póngase en contacto con el Soporte de Emarsys para más información.
Distribución
Píxeles contra Puntos
Cuando diseñe emails, recomendamos siempre usar px para definir las alturas y anchuras, más que pt o em o, incluso rem.
Ancho máximo para contenidos de email
Algunos clientes de email y / o configuraciones de hardware únicamente pueden mostrar 600 píxeles de anchura a la vez. Un email HTML sin ningún ajuste de anchura puede tener buen aspecto en Outlook Express en un monitor de alta resolución, pero los usuarios de bajo nivel no serán capaces de ver todo el ancho del email. El ancho máximo recomendado de todos los emails es de 600 píxeles.
Buen ejemplo:
<table width="600" align="left"> <tr> <td>[ contents of email ]</td> </tr> </table>Mal ejemplo:
[ contents of email ] or <table align="left"> <tr> <td>[ contents of email ]</td> </tr> </table>CSS
Además, varios puntos se aplican cuando se usa CSS para versiones de email de escritorio (los navegadores web son diferentes debido a su soporte CSS más avanzado).
- Se soporta CSS inline, pero se limita al uso de estilos y tamaño de fuentes y debería incluirse como HTML, en caso de que el cliente lo ignore.
- CSS no debería usarse para el posicionamiento.
- El uso de hojas de estilo externas no está soportado.
- El uso de CSS para refernciar imágenes de fondo no se soporta:
- Ejemplo:
background:#e76f00 url(im/btn_orange.gif) repeat-x center center
Trucos rápidos
- La mayoría de clientes no leerá las etiquetas
<head>,<meta>o<title>. No obstante, estas pueden ser útiles si ofrece una versión online del email. - No use etiquetas
<div>,<tbody>o<p>. - No use etiquetas
<embed>. - No incluya atributos con etiquetas.
- Use
<b>y<i>en lugar de<strong>y<em>. - Cierre siempre las etiquetas.
- JavaScript tiende a salir con rayas o a ser ignorado en la mayoría de navegadores de email.
- No use etiquetas
GENERATORen elHEADdel mensaje como etiquetasMETA.
Buen ejemplo:
<tr> <td align="left"> <font face="verdana, arial, sans-serif">Text goes here.</font> </td> </tr>Mal ejemplo:
<div align="left" style="font-family: verdana;">Text goes here.</div>La etiqueta < Body >
Algunos clientes de email pueden modificar la etiqueta body en emails, lo que da lugar a problemas de formato. No debería incluir ningún atributo en la etiqueta body que no le importe que no se muestre, pues puede que no se rendericen. Por ejemplo, si usa texto claro sobre un fondo oscuro, asegúrese de configurar valores tales como el color del fondo en el atributo bgcolor de la etiqueta table.
Buen ejemplo:
<table bgcolor="#ffffff" width="600"> <tr> <td align="left">[ contents of email ]</td> </tr> </table>Mal ejemplo:
<body bgcolor="#ffffff"> [ contents of email ]Editores WYSIWYG
Los editores WYSIWYG (What You See Is What You Get, Lo que ve es lo que obtiene) suelen crear automáticamente código específico para navegadores o HTML no estándar de otro tipo. Si usa un editor WYSIWYG, elimine la codificación específica para navegadores u otro HTML no estándar y revise el código en un programa como Notepad o Dreamweaver para asegurarse de que cumple nuestras directrices.
Buen ejemplo:
<center><br> <table bordercolor="#333366" cellspacing="0" cellpadding="0" width="730" align="center" bgcolor="#ffffff" border="8"> <tr> Mal ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>HTML Codes - Table of ascii characters and symbols</title> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META http-equiv=PICS-Label content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.ascii.cl" r (n 0 s 0 v 0 l 0))'><link href="HTML Codes - Table of ascii characters and symbols_files/ascii.css" type=text/css rel=stylesheet> <META content=all name=robots> <META content=Global name=distribution> <META http-equiv=Content-Script-Type content=text/javascript> <META http-equiv=reply-to content=webmaster@10sites.com> <META content="MSHTML 6.00.2600.0" name=GENERATOR> <body text=#333366 vLink=#3300ccaLink=#cc0033 link=#cc0033 bgColor=#ffffff> <center><br> <table bordercolor=#333366 cellspacing=0 cellpadding=10 width=730 align=center bgcolor=#ffffff border=8> <tbody> <tr> Sintaxis
Todos los valores de atributo deben definirse con dobles comillas y usar la sintaxis adecuada, como "#" antes de los atributos de color y ";" después de los elementos de estilo.
Buen ejemplo:
<td align="center" bgcolor="#000000" valign="middle">Mal ejemplo:
<td align=center bgcolor=000000 valign=middle>Caracteres especiales
Muchos clientes de email no pueden renderizar correctamente caracteres raw de 8 bits. Por consiguiente, debe codificarlos con sus entidades numéricas correspondientes (Códigos de caracteres ASCII o códigos HTML). Por ejemplo, el símbolo de copyright debería escribirse © o ©.
Buen ejemplo:
Copyright © 2014 Emarsys.Mal ejemplo:
Copyright 2014 Emarsys.Mapas de imágenes
El Mapeo de Imágenes es cuando usted redefine el área vinculada a una imagen. Esto se hace con la etiqueta HTML <map>. Cuando use Mapas de Imagen, asegúrese de que cada mapa independiente se incluye dentro de su propio <td>, pues múltiples mapas en el mismo <td> pueden ocasionar problemas en algunas plataformas (actualmente, Apple Mail y Outlook 2007). Los Mapas de Imágenes son una excelente técnica de diseño para conseguir un mensaje de marketing visualmente agradable, pero únicamente cuando se usan correctamente. Tenga también en cuenta que los mapas de imágenes incluyen mucho código y, por tanto, tienen un impacto en el tamaño de su mensaje.
Codificación
La codificación óptima para el email en la mayoría de idiomas es UTF-8. UTF-8 está ampliamente soportado y, a excepción de algunos idiomas de bytes múltiples, esta debería ser la codificación por defecto para activos creativos.
Soporte de mesa
General
Algunos navegadores y programas de email pueden tener problemas con contenidos que existen fuera de etiquetas <td>. Asegúrese de que todos los contenidos para el email encajen dentro de las etiquetas de celda de tabla (<td>s). Asegúrese de que todas las <td>tengan un ancho asignado y que este no sea "0".
Buen ejemplo:
<table bgcolor="#ffffff" width="250"> <tr> <td width="200"> Here is some text.<br /> <img src="images/spacer.gif" width="200" height="12" vspace= 0 hspace= 0 border="0" style="display:block;"><br /> Here is some more text. </td> </tr> </table>Mal ejemplo:
<table bgcolor="#ffffff" width="250"> Here is some text.<br /> <tr> <td width="200"> <img src="images/spacer.gif" width="200" height="12" border="0"><br /> Here is some more text.<br /> </td> </tr> </table>ANCHO DE FILA y ANCHO DE COLUMNA
Mantenga el uso del ancho de fila y del ancho de columna al mínimo, pues esto limita la flexibilidad de la plantilla. Además, algunos clientes no los interpretan correctamente, lo que ocasiona diferencias de las líneas y bordes entre
s y . En algunos casos, opciones como el anidado de una celda de <table> dentro de otra celda de <table> ofrecen una mejor solución.
Buen ejemplo:
<table border="0" cellpadding="0" cellspacing="0" width="130"> <tr> <td width="130"> <img height="20" width="130" vspace= 0 hspace= 0 src="magnolia.gif" border="0" style="display:block;"> </td> </tr> <tr> <td width="130"> <table border="0" cellpadding="0" cellspacing="0" width="130"> <tr> <td width="60"> <img height="1" width="60" src="magnolia.gif" border="0"> </td> <td width="70"> <img height="1" width="70" src="magnolia.gif" border="0"> </td> </tr> <tr> <td width="60" valign="top">text goes here</td> <td width="70"> <table border="0" cellpadding="0" cellspacing="0" width="23"> <tr> <td width="70" valign="top"> Text goes here</td> </tr> <tr> <td width="70" valign="top"> Text goes here</td> </tr> </table> </td> </tr> </table> </td> </tr> </table>Mal ejemplo:
<table border="0" cellpadding="0" cellspacing="0" width="130"> <tr> <td colspan="2"> <img height="20" width="130" src="magnolia.gif" border="0"> </td> </tr> <tr> <td width="60" rowspan="2" valign="top">Text goes here</td> <td width="70">Text goes here</td> </tr> <tr> <td width="70">Text goes here</td> </tr> </table>Anchuras y alturas
La configuración de un ancho exacto en todos los elementos de las tablas añade estabilidad a su diseño y tendrá mayores posibilidades de renderizarse consistentemente en los clientes de email y puede hacer que este se renderice más rápido. Es importante configurar todo el ancho de la tabla al 100% para las plantillas de móvil y así garantizar que la tabla use la visualización de pantalla completa. Asegúrese de que todas las columnas tengan un ancho asignado y que este no sea "0". El hecho de asegurarse de que las columnas tengan un ancho establecido de píxeles ayuda a garantizar la estructura de la tabla. Además, no mezcle anchos en porcentajes con anchos en píxeles cuando defina los anchos de columna.
Buen ejemplo:
<td width="250" height="100"> <img src="logo.gif" width="250" height="100" vspace= 0 hspace= 0 alt="Company Name" border="0" style="display:block;"/> </td>Mal ejemplo:
<td width="100%"> <img src="logo.gif"/> </td>Celdas de tabla vacías
Los navegadores más antiguos tienen problemas con las celdas de tablas vacías (<td>s). Asegúrese de poner algo en cada celda de tabla. La introducción de la imagen transparente A 1 1 en una celda de tabla vacía resuelve este problema. No use como rellenador. Otras etiquetas vacías pueden ser también un problema. Una vez que un diseño está completo, siempre es buena idea revisar y limpiar el código para evitar problemas en la línea.
Buen ejemplo:
<td width="200"> <img src="images/spacer.gif" width="200" height="1" vspace= 0 hspace= 0 border="0" style="display:block;"/> </td>Mal ejemplo:
<td width="200"> </td> - <td width="200"></td>Espaciado vertical del texto
Las etiquetas <p> se renderizan de manera inconsistente en los emails y suelen añadir más o menos espacio del deseado. La configuración de la cantidad de espacio en blanco con una imagen "spacer.gif" fijará el espaciado a un valor exacto y alcanza una experiencia de usuaio final más consistente. Para grandes cantidades de texto, use las etiquetas <br /> para conseguir el espaciado entre bloques de texto.
Buen ejemplo:
<tr> <td width="200">Here is some text.<br> <img src="images/spacer.gif" width="200" height="12" vspace= 0 hspace= 0 border="0" style="display:block;"><br /> Here is some more text. </td> </tr>Mal ejemplo:
<p>Here is some text.<p/> <p>Here is some more text.</p>Espaciado entre elementos
Para conseguir el espaciado entre elementos, evite usar cellpadding, cellspacing o margin padding, pues no están universalmente soportados. En su lugar, use gifs transparentes dentro de una estructura de tabla para mayor precisión.
Buen ejemplo:
<tr> <td width="200" height="10"> <img src="images/spacer.gif" width="10" height="10" vspace= 0 hspace= 0 border="0" style="display:block;"> </td> </tr> <tr> <td width="200">Here is some text. </td> </tr>Mal ejemplo:
<tr> <td width="200" style="margin-top: 10px;">Here is some text.</td> </tr> - or - <table width="640" cellspacing="10" cellpadding="2">Definir colores
Al definir colores, el color hexadecimal de seis dígitos debería referenciarse.
Buen ejemplo:
<font color="#7bc618">email</font>Mal ejemplo:
<font color="green">email</font>Color de fondo
Algunos paquetes de software de email tachan valores que aparecen en la etiqueta del cuerpo; configurar el color en la tabla garantiza que los ajustes de color aparezcan de manera consistente.
Buen ejemplo:
<td bgcolor="#9c7bbd">Mal ejemplo:
<body bgcolor="#9c7bbd">Alineación
La configuración del valor de alineación en los elementos de la tabla añade estabilidad, pues los valores por defecto pueden no renderizarse correctamente en todos los clientes de email.
Buen ejemplo:
<table width="600" align="center"> <tr> <td align="left" valign="top" width="600">Text goes here</td> </tr> </table>Mal ejemplo:
<table> <tr> <td>Text goes here</td> </tr> </table>Formato de etiquetas
Mayúsculas o minúsculas en etiquetas
Todos los atributos debeen ser en mayúsculas o en minúsculas. No mezcle ambas posibilidades.
Buen ejemplo:
<b>say something bold</b>Mal ejemplo:
<b>say something bold</B>Anidado de etiquetas
Asegúrese de que todas las etiquetas se aniden adecuadamente (p.e., si se usan etiquetas múltiples, tendrán que cerrarse en el orden correcto).
Buen ejemplo:
<i> <b>say something bold and exciting</b> </i>Mal ejemplo:
<i> <b>say something bold and exciting </i> </b>Indicar valores
Todos los valores de atributo deben definirse con comillas dobles.
Buen ejemplo:
<td align="center" bgcolor="#000000" valign="middle">Mal ejemplo:
</td> <td> <td align=center bgcolor=#000000 valign=middle>Frente y tamaño de fuente
No todos los usuarios tienen todas las fuentes en su sistema; la especificación de múltiples fuentes le permite elegir las fuentes que prefiere que vea el usuario. Si las fuentes especificadas o tipos de fuente no se encuentran, el texto se renderizará en la fuente por defeecto del usuario. Los tamaños estándar de fuente (1, 2, 3 ) tendrán un aspecto algo diferente en los distintos navgadores y plataformas de email. Emarsys sugiere una alternativa usando una etiqueta de estilo inline también, con un tamaño definido en píxeles para un aspecto más consistente. style="font-size:12px;"
Buen ejemplo:
<font face="arial, helvetica, sans-serif" style="font-size:12px;" size="2">email</font>Mal ejemplo:
<font face="arial" size="2">email</font>Imágenes
Tamaño
La mejor práctica es mantener un tamaño de email por debajo de un total de 49KB o se experimentarán tiempos de descarga más largos y los mensajes tendrá tasas de respuesta más bajas. El contenido de los emails y las imágenes deberían optimizarse al tamaño de archivo mínimo. El tamaño combinado de los archivos de imágenes referenciados no debería superar los 500KB.
Borde
Las imágenes vinculadas y que no tienen el atributo de borde configurado en cero mostrarán una línea azul marcada alrededor de los extremos, que no tiene muy buen aspecto con algunas plantillas y puede destruir la estructura de la tabla. Asegúrese de configurar border="0" para todas las imágenes y evitar así esto.
Buen ejemplo:
<img src="image.gif" width="1" height="1" vspace= 0 hspace= 0 alt="Descriptive text here" border="0" style="display:block;">Mal ejemplo:
<img src="image.gif" width="1" height="1" alt="Text here">Altura y anchura
Incluya siempre los atributos de altura y anchura para todas las imágenes. La designación de los atributos de tamaño para una imagen afectará al tiempo que le cuesta a un email descargarse. Si no se configuran los atributos de altura o anchura para una imagen, esta debe descargarse completamente antes de que el intérprete HTML del cliente de email pueda renderizar el resto de la página. Para una velocidad óptima de descarga, configure los atributos de altura y anchura para todas las imágenes en valores absolutos para versiones de escritorio (se deberían seguir usando porcentajes para versiones móviles). Se deberían usar las imágenes a su tamaño real. El ajuste de tamaño de una imagen usando propiedades HTML se ignorará en clientes de email como Outlook 2007 y es probable que cause errores en la estructura de la tabla.
Buen ejemplo:
<img src="image.gif" width="10" height="10" vspace= 0 hspace= 0 alt="text here" border="0" style="display:block;">Mal ejemplo:
<img src="image.gif" alt="Text here" border="0"> - or - <img src="image.gif" width="50%" height="50%" alt="Text here" border="0">Texto alternativo
Cuando visualicen emails HTML cuando se encuentren sin conexión, los usuarios verán una imagen rota o un marcador de imagen en lugar de la imagen pretendida en la visualización online. Para facilitar la visualización del email, asegúrese de introducir una descripción de la imagen en la etiqueta alt. Haga que la descripción de la etiqueta alt resulte comprensible para el destinatario (p.e., "Flowers only 9.99" en lugar de "flower image 22"). Tenga en cuenta que no todos los clientes muestran el texto alternativo y, en su lugar, puede que muestren sus propios mensajes de error (p.e, Outlook).
Buen ejemplo:
<img src= headline1.gif width= 1 height= 1 vspace= 0 hspace= 0 alt= Save today on Airline tickets! border= 0 style= display:block; >Mal ejemplo:
<img src= image.gif width= 1 height= 1 border= 0 >Denominación de imágenes
Siempre es buena idea tener imágenes que se nombran intuitivamente, si son solo para su propia gestión de medios. Recomendamos usar nombre con una palabra en minúscula y sin guiones bajos para todas las imágenes.
Buen ejemplo:
<img src= magnolia.gif width= 50 height= 50 vspace= 0 hspace= 0 alt= Magnolia Bouquet border= 0 style= display:block; >Mal ejemplo:
<img src="image.gif width="50" height= 50 border= 0 >Bloqueo por defecto de imágenes por distintos ISPs
Para la mayor parte, no hay mucho que hacer en cuanto a la codificación para combatir el problema de los ISPs que bloquean imágenes por defecto. Recomendamos incorporar las siguientes buenas prácticas: Proporcione etiquetas alt informativas para imágenes, de manera que estas puedan mostrarse, si las imágenes están bloqueadas.
- Utilice una distribución / plantilla limpia para una degradación efectiva del email.
- Ponga la mención "Añadir a libreta de direcciones" en la parte superior de los eails para los mensajes de Bienvenida o el enlace "¿Problemas para visualizar este email" en otros emails.
GIFs animados
Muchos de nuestros clientes usan GIFs animados. Sin embargo, debe prestarse especial atención al tamaño del archivo, pues los GIFs animados pueden convertirse en archivos pesados que afecten al tiempo de descarga. También, algunos navegadores, como Outlook 2007, no los renderizan adecuadamente y únicamente mostrarán el primer marco del GIF. Por tanto, este debería ser lo suficientemente relevante para funcionar en el mensaje.
Imágenes de fondo
Las imágenes de fondo no se soportan universalmente en todos los clientes de email, como Outlook 2007. Se recomienda que las imágenes de fondo no se usen en absoluto para los emails en HTML, pero, si se incluyen dentro de un diseño, deberían usarse de tal manera que, si no aparecen, esto no afecte mucho al diseño ni entorpezca la intención del mensaje mostrado. Si se muestra texto en la parte superior de una imagen de fondo, es una buena práctica rellenar también la celda con un color de fondo que se mostrará cuando la imagen no lo haga. Otra alternativa consiste en simplemente crear una imagen que incluya el fondo y el texto y colocarla dentro de la celda de la tabla.
Buen ejemplo:
<td background= images/red_pattern.gif bgcolor= #ff0000 > Hurry! Sale Ends Saturday!</td> - or - <td width="100" height="50"> <img src="sale.gif" width="100" height="50" vspace= 0 hspace= 0 alt="Hurry! Sale ends Saturday!" border="0" style="display:block;"/> </td>Mal ejemplo:
<td background="images/red_pattern.gif"> Here is some text.</td>HTML personalizado optimizado para móviles
Esta sección describe cómo adaptar el código HTML de un email para que se comporte de la misma manera que las plantillas preparadas para móviles creadas por Emarsys.
Enfoque técnico
Si quiere enviar un email preparado para móviles a sus clientes, la forma más sencilla es diseñar una única distribución en columnas y usar una hoja de estilos para realizar cambios específicos para dispositivos móviles. Esto permite que los contenidos se muestren selectivamente en función de cómo el cliente accede al contenido. Esto puede hacerse colocando una sección de preguntas de medios dentro del elemento <style> de su código HTML:
@media (max-device-width:400px) and (-webkit-min-device-pixel-ratio:1.1) { /* MOBILE CSS GOES HERE */ }Todo lo que ponga entre las llaves únicamente será visible en dispositivos móviles. Aquí puede:
- Defina el ancho del email para que se ajuste a dispositivos móviles (aunque recomendamos usar el
ancho:100%, más que un valor fijo en píxeles, debido a la amplia variedad de tamaños de pantalla disponible en la actualidad. - Oculte o muestre selectivamente secciones del email.
- Agrande el tamaño de la fuente por defecto, los botones y los enlaces.
- Ajuste el ancho de las imágenes para que se adapte a la pantalla.
- Reemplace imágenes por otras específicamente para mostrarse en móviles.
A continuación encontrará un ejemplo de algunos códigos HTML que contienen una pregunta de medios y un CSS para móviles, con comentarios en el código.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <title></title> <meta name="viewport" content="initial-scale=1, user-scalable=yes"> <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]--> <style type="text/css"> /* Media Query - Breaking point: 400px CSS width - for more details please have a look at the device list on http://mydevice.io/devices/ - To force iPhone 6(S) Plus / 7 Plus to show the mobile version, this value needs to be changed to 414px */ @media only screen and (max-width:400px) { /* Stretches the container that contains the content to 100% */ .fw { width:100% !important; min-width:0 !important; } /* Hide content in mobile version */ .mh { display:none !important; } /* Class that's needed if a desktop image gets replaced by an alternative image in mobile version */ .mhi { display:none !important; max-height:0; } /* Stretch image to full available width */ .image { width:100% !important; height:auto !important; } /* Center align text - Applied on td tags (Caution: this is not working with tables or images! - For this case please use class .comt) */ .com { text-align:center !important; } /* Left align text - Applied on td tags (Caution: this is not working with tables or images! - For this case please use class .lomt) */ .lom { text-align:left !important; } /* Center align block elements - Examples: table, img */ .comt { margin:0 auto !important; } /* Left align block elements - Examples: table, img */ .lomt { margin:0 auto 0 0 !important; } /* Default font size on mobile (Caution: this is just applied on font tags!) */ font { font-size:17px !important; } /* Other font sizes that can be used in mail (headlines, etc. for example - either in td or in font tag) */ .h1 { font-size:24px !important; } .h2 { font-size:20px !important; } .small { font-size:15px !important; } .xsmall { font-size:13px !important; } } <!-- /* Color values of the following CSS can be changed */ body { margin:0; padding:0; width:100%; background:#cccccc; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } a, a:active, a:visited, .yshortcuts, .yshortcuts a span { color:#000000; text-decoration:none; font-weight:normal; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .ReadMsgBody { width:100%; } .ExternalClass *, .b-message-body { line-height:100%; } .ExternalClass { width:100%; } table th { padding:0; Margin:0; border:0; font-weight:normal; vertical-align:top; } --> </style> <!--[if gte mso 9]> <style type="text/css"> /* Styles needed for Outlook 2007 to 2016; the additional XML code can improve the display of the mails when using 120dpi display mode */ table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0; } table td, table th { border-collapse:collapse; font-size:1px; line-height:1px; } .lh { line-height:normal !important; } <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </style> <![endif]--> </head> <body> <!-- Main background color (bgcolor attribute of the following <table>-tag can be changed) --> <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%" bgcolor="#cccccc"> <tr> <td width="100%" align="center" valign="top"> <!-- Width of content (variable) --> <table cellspacing="0" cellpadding="0" border="0" width="600" style="width:600px; min-width:600px;" bgcolor="#ffffff" class="fw"> <tr> <td align="center" class="h1"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">CONTENT</font></td> </tr> <!-- For hiding elements in mobile version please use class "mh" --> <tr class="mh"> <td align="center"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text won't be displayed in mobile version</font></td> </tr> </table> </td> </tr> <!-- This <div> is needed for Gmail app to avoid the display of a shrunk pseudo mobile version --> <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div> </table> </body> </html>
Ajuste del ancho del email
Si usa el código básico proporcioinado en esta página, ya hay un ancho de 600px para el conjunto de contenidos. Este valor puede cambiarse, pero recomendamos conservar el ancho entre 550px y 650px (este valor es para la versión de escritorio únicamente).
<table cellspacing="0" cellpadding="0" border="0" width="600" style="width:600px; min-width:600px;" bgcolor="#ffffff" class="fw">Para versiones móviles, la clase definida "fw" estrecha el contenido al 100% del área de pantalla disponible. Esta clase ya se definió en el Media Query en el bloque CSS, si usa nuestro código básico:
.fw { width:100% !important; min-width:0 !important; }Mostrar y ocultar secciones
Puede añadir un CSS de clase "mh" (oculto para móviles) para aplicar a los elementos que quiera ocultar para usuarios de móviles (esta clase ya está definida en el código básico anterior):
.mh { display:none !important; }EJEMPLOS
<tr class="mh"> <td align="center"><font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text won't be displayed in mobile version</font></td> </tr> <font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="mh">This text won't be displayed in mobile version</font> <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" border="0" style="display:block;" class="mh">Formato para móviles
Puede anular la apariencia del escritorio del mensaje añadiendo una regla a la sección CSS para móviles. En general, puede anular cualquier estilo ahí. Recomendamos usar la etiqueta <font> para dar forma a los elementos de texto (el tamaño de fuente por defecto y las clases para la versión móvil ya están definidos en el código básico en esta página).
Código CSS para móviles:
font { font-size:17px !important; } .h1, .h1 font { font-size:24px !important; } .h2, .h2 font { font-size:20px !important; } .small, .small font { font-size:15px !important; } .xsmall, .xsmall font { font-size:13px !important; }EJEMPLOS
<font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;">This text has a font size of 14px in desktop and 17px in mobile version.</font> <font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="h1">This text has a font size of 14px in desktop and 24px in mobile version.</font> <font face="Arial, Helvetica, sans-serif" style="font-size:14px; color:#000000;" class="small">This text has a font size of 1Tamaño y formato de fuente
div[class="yfix"] p { font-size: 14px; /* Bigger text */ color: blue; /* Changing color / text-align: left; /* Always align paragraph to left */ line-height: 20px; /* Define the height of the lines */ }
Enlaces
div[class="yfix"] a { border: 1px solid blue; background: silver; color: #fff; font-size: 16px; text-decoration: none; }
Ajustar el tamaño de imágenes
Añada class="image" a la etiqueta <img> referenciada para aplicar los cambios. La clase "image" ya está disponible en el código básico:
.image { width:100% !important; height:auto !important; } <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" border="0" style="display:block;" class="image">Reemplazar imágenes
Para reemplazar una imagen en la versión móvil, hay una clase CSS adicional necesaria en Media Query.
Nota: Esta técnica se ha probado en muchos clientes de email y funciona correctamete en la mayoría de ellos. Pero, dado que los proveedores de correo web como Gmail, Yahoo, Outlook.com, etc. cambian el procesamiento del código HTML constantemente, no podemos garantizar que esto funcione siempre.
.mhi { display:none !important; max-height:0; }La primera etiqueta <img> inserta la imagen de escritorio. Si el email se muestra en un dispositivo móvil, la imagen de escritorio se oculta y la imagen de móvil (definida en la segunda etiqueta <img>) aparecerá en su lugar. La etiqueta de enlace alrededor de la imagen es opcional.
<tr> <td align="center"> <a href="http://www.emarsys.com/" target="_blank"> <img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/desktop.png" width="580" border="0" style="display:block;" class="mhi"> <!--[if !mso 9]><!--><img src="http://suite11.emarsys.net/custloads/555020521/Ulli/custom_html/mobile.png" style="mso-hide:all; width:0; height:0; display:block;" border="0" class="image"><!--<![endif]--> </a> </td> </tr>