Un buen Newsletter garantiza a las empresas una comunicaci\u00f3n fluida con sus clientes.\u00a0Una buena estrategia de comunicaci\u00f3n 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.<\/p>\n
Sin embargo, maquetar un Newsletter en html no siempre es f\u00e1cil. Debemos pensar que los clientes mail (ya sean clientes web como gmail, yahoo… o programas como Outlook Express, Thunderbird…) interpretan el c\u00f3digo html de una forma un tanto peculiar… \u00a1Y no hablemos del css! Por ello hoy daremos unos consejos para poder implementar nuestros dise\u00f1os y que \u00e9stos se visualicen correctamente en todos los navegadores y clientes de e-mail.<\/p>\n
Lo primero que debemos tener en cuenta es que los clientes mail no\u00a0se llevan bien con HTML5 y CSS3. Se han quedado algo atr\u00e1s en lo que se refiera a incorporar nuevas tecnolog\u00edas. Por ese motivo, debemos \u00abponernos a su nivel\u00bb y maquetar de una forma m\u00e1s cl\u00e1sica utilizando tablas y css en l\u00ednea.<\/p>\n
La etiqueta <div> no est\u00e1 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\u00ed pues, deber\u00edamos utilizar la etiqueta <table> para crear nuestras estructuras y poder crear diferentes columnas con informaci\u00f3n. Es importante que en nuestras tablas se especifique el atributo border=\u00bb0″ con tal de crear cajas invisibles a modo de divs.<\/em><\/p>\n De la misma manera, si utilizamos css externo, o css en la etiqueta <style> dentro del head<\/em> del documento, no se leer\u00e1 correctamente. Debemos colocar nuestro css mediante el atributo \u00abstyle\u00bb en aquellas etiquetas que lo necesiten. Ejemplo:\u00a0<table style=\u00bbpadding: 20px;\u00bb>. De este modo nos aseguramos de que nuestros estilos se visualicen correctamente.<\/p>\n No podemos utilizar la propiedad float<\/em> para colocar un bloque al lado de otro<\/strong>. Si queremos crear columnas tendremos que echar mano de\u00a0tablas anidadas. Es decir, abriremos la etiqueta <table> dentro de una celda <td>. Si quisieramos hacer tres columnas, por ejemplo, podr\u00edamos crear tres tablas con un ancho de 200px (suponiendo que no contamos con borders<\/em> o paddings<\/em> para que nos quepan a una resoluci\u00f3n de 600px).<\/p>\n La ventaja de este m\u00e9todo es que ser\u00e1 responsive<\/em>. Las tablas se adaptar\u00e1n horizontal o verticalmente en caso de que puedan caber<\/p>\n Uno de los quebraderos de cabeza m\u00e1s 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\u00e1s usados a nivel profesional es Outlook Express. Digo desgraciadamente porque justamente Outlook es el que m\u00e1s problemas da a la hora de leer css. Es imprescindible, pues, utilizar c\u00f3digo pensado exclusivamente para Outlook mediante etiquetas condicionales. Un ejemplo:<\/p>\n Lo que hacemos con este c\u00f3digo es muy sencillo. Estamos creando una tabla espec\u00edfica 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\u00e1 la tabla principal en cuanto se tope con una etiqueta <table>, imposibilitando el uso de columnas y echando a perder nuestro estilo css.<\/p>\n Normalmente, los correos que recibimos en plataformas como gmail o yahoo no se abren a pantalla completa, sino que se previsualizan en una resoluci\u00f3n de unos 600px de ancho. Debemos tener esto en cuenta para nuestra maquetaci\u00f3n, de lo contrario el dise\u00f1o de nuestro newsletter quedar\u00e1 cortado o no se ver\u00e1 correctamente.<\/p>\n Hay varios puntos a tener en cuenta con nuestras im\u00e1genes.<\/p>\n Si las im\u00e1genes est\u00e1n en l\u00ednea, dejaran un peque\u00f1o margen en la parte inferior. Podemos evitar esto transform\u00e1ndolas a elementos de tipo bloque. Ejemplo: <img src=\u00bbmiimagen.jpg\u00bb alt=\u00bbimagen\u00bbstyle=\u00bbdisplay:block;\u00bb\/>.<\/p>\n Hay que vigilar que las im\u00e1genes tengan un tama\u00f1o adecuado. Para ello podemos indicar el tama\u00f1o que queremos que ocupe mediante los atributos \u00abwidth\u00bb y \u00abheight\u00bb.<\/p>\n2- \u00a0Usa tablas anidadas<\/strong><\/h3>\n
3- Utiliza c\u00f3digo condicional para Outlook<\/strong><\/h3>\n
<!--[if (gte mso 9)|(IE)]><\/code>
\n <table width=\"200\" align=\"left\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><\/code>
\n\u00a0 \u00a0<tr><\/code>
\n\u00a0 \u00a0 \u00a0 <td><\/code>
\n\u00a0 \u00a0 \u00a0 <![endif]--><\/code><\/p>\n\u00a0 \u00a0 \u00a0 - - Aqu\u00ed ir\u00eda nuestra tabla --\u00a0<\/code><\/p>\n\u00a0 \u00a0 \u00a0 <!--[if (gte mso 9)|(IE)]><\/code>
\n\u00a0 \u00a0 \u00a0 <\/td><\/code>
\n\u00a0 \u00a0<\/tr><\/code>
\n<\/table><\/code>
\n<![endif]--><\/code><\/p>\n4- Utiliza un ancho m\u00e1ximo de 600px<\/strong><\/h3>\n
5-\u00a0Cuidado con las im\u00e1genes<\/strong><\/h3>\n
6- \u00a0El dise\u00f1o cuanto m\u00e1s sencillo mejor<\/strong><\/h3>\n