Claves para la maquetación de Newsletter

Claves para la maquetación de Newsletter

Un buen Newsletter garantiza a las empresas una comunicación fluida con sus clientes. Una buena estrategia de comunicación nos puede asegurar que nuestras ofertas llegan a los potenciales compradores. Por lo tanto el Newsletter es una gran herramienta para animar las ventas, o simplemente, dar una buena imagen de marca.

Sin embargo, maquetar un Newsletter en html no siempre es fácil. Debemos pensar que los clientes mail (ya sean clientes web como gmail, yahoo… o programas como Outlook Express, Thunderbird…) interpretan el código html de una forma un tanto peculiar… ¡Y no hablemos del css! Por ello hoy daremos unos consejos para poder implementar nuestros diseños y que éstos se visualicen correctamente en todos los navegadores y clientes de e-mail.

Claves para maquetar correctamente un Newsletter

1- Utiliza tablas y css en línea

Lo primero que debemos tener en cuenta es que los clientes mail no se llevan bien con HTML5 y CSS3. Se han quedado algo atrás en lo que se refiera a incorporar nuevas tecnologías. Por ese motivo, debemos «ponernos a su nivel» y maquetar de una forma más clásica utilizando tablas y css en línea.

La etiqueta <div> no está soportada en muchos clientes mail. Sobre todo en algunos como Outlook Express, que leen html como si fuese una hoja de un procesador de textos al estilo Word. Así pues, deberíamos utilizar la etiqueta <table> para crear nuestras estructuras y poder crear diferentes columnas con información. Es importante que en nuestras tablas se especifique el atributo border=»0″ con tal de crear cajas invisibles a modo de divs.

De la misma manera, si utilizamos css externo, o css en la etiqueta <style> dentro del head del documento, no se leerá correctamente. Debemos colocar nuestro css mediante el atributo «style» en aquellas etiquetas que lo necesiten. Ejemplo: <table style=»padding: 20px;»>. De este modo nos aseguramos de que nuestros estilos se visualicen correctamente.

2-  Usa tablas anidadas

No podemos utilizar la propiedad float para colocar un bloque al lado de otro. Si queremos crear columnas tendremos que echar mano de tablas anidadas. Es decir, abriremos la etiqueta <table> dentro de una celda <td>. Si quisieramos hacer tres columnas, por ejemplo, podríamos crear tres tablas con un ancho de 200px (suponiendo que no contamos con borders o paddings para que nos quepan a una resolución de 600px).

La ventaja de este método es que será responsive. Las tablas se adaptarán horizontal o verticalmente en caso de que puedan caber

3- Utiliza código condicional para Outlook

Uno de los quebraderos de cabeza más habituales a la hora de crear nuestro newsletter es que se vea correctamente en todos los clientes mail que existen. Desgraciadamente, uno de los más usados a nivel profesional es Outlook Express. Digo desgraciadamente porque justamente Outlook es el que más problemas da a la hora de leer css. Es imprescindible, pues, utilizar código pensado exclusivamente para Outlook mediante etiquetas condicionales. Un ejemplo:

<!--[if (gte mso 9)|(IE)]>
<table width="200" align="left" cellpadding="0" cellspacing="0" border="0">
   <tr>
      <td>
      <![endif]-->

      - - Aquí iría nuestra tabla -- 

      <!--[if (gte mso 9)|(IE)]>
      </td>
   </tr>
</table>
<![endif]-->

Lo que hacemos con este código es muy sencillo. Estamos creando una tabla específica para que se visualice en Outlook. Gracias a esto podemos forzar que Outlook nos reconozca los estilos de nuestras tablas anidadas. De lo contrario, este popular software de emails nos cerrará la tabla principal en cuanto se tope con una etiqueta <table>, imposibilitando el uso de columnas y echando a perder nuestro estilo css.

4- Utiliza un ancho máximo de 600px

Normalmente, los correos que recibimos en plataformas como gmail o yahoo no se abren a pantalla completa, sino que se previsualizan en una resolución de unos 600px de ancho. Debemos tener esto en cuenta para nuestra maquetación, de lo contrario el diseño de nuestro newsletter quedará cortado o no se verá correctamente.

5- Cuidado con las imágenes

Hay varios puntos a tener en cuenta con nuestras imágenes.

Si las imágenes están en línea, dejaran un pequeño margen en la parte inferior. Podemos evitar esto transformándolas a elementos de tipo bloque. Ejemplo: <img src=»miimagen.jpg» alt=»imagen»style=»display:block;»/>.

Hay que vigilar que las imágenes tengan un tamaño adecuado. Para ello podemos indicar el tamaño que queremos que ocupe mediante los atributos «width» y «height».

6-  El diseño cuanto más sencillo mejor

Si bien es cierto que podemos crear una estructura de varias columnas gracias a las tablas anidadas, lo más recomendable es no abusar de las columnas e intentar ordenar la información priorizando la verticalidad. Esto nos ayudará a hacer que nuestros e-mails sean responsive.

Así mismo vamos a evitar en la medida de los posible utilizar imágenes de fondo (no pueden ser interpretadas por Outlook) y ¡ni hablar de colocar elementos en posición absoluta!

7- Piensa en las pantallas pequeñas

Llegados a este punto, te estarás preguntando ¿qué pasa con el diseño responsive? Bien, el caso es que podemos usar media queries y la mayoría de clientes mail como gmail lo leerán perfectamente. El problema viene nuevamente de la mano de Outlook, que obviamente no lo interpreta. Por ello, debemos maquetar pensando en resoluciones pequeñas, priorizando la verticalidad. De esta manera no necesitaremos hacer grandes cambios entre una vista u otra.

8-Paciencia y testeo

Por último, es muy importante que podáis testear en todas las plataformas cómo se vería finalmente vuestro diseño. Soluciones de mailing profesional como Mailchimp nos permiten previsualizar nuestra campaña antes de ser enviada a nuestros clientes. Aunque sea una herramienta de pago, es muy buena opción si queréis saber cómo se verá vuestro diseño en todas las plataformas de e-mail que hay en el mercado.

La clave principal es armarse de paciencia e ir testeando. Con la práctica llegaréis a dominar a la perfección la maquetación de Newsletters.

 

Escribe un comentario