Código HTML y CSS

El código debe ser lo más limpio posible, que los medios de visualización no tengan que filtrar ningún fragmento del mismo, de modo que no aparezcan fallos inesperados al ser interpretados el HTML y los estilos, y que el mensaje no sea bloqueado por filtros anti-spam.

A continuación se exponen algunas pistas acerca de cómo resolver algunas situaciones al maquetar newsletter.

Dimensiones

Deben ir siempre en píxeles.

En las tablas habrá que definir todas las medidas que resulte posible en atributos ‘width’ (y ‘height’ si resulta necesario), situándolos siempre tanto en los elementos de celda ‘TD’ como en el de tabla:

<table cellspacing="0" cellpadding="0" border="0" width="500">

  <tr>

    <td width="500&quot;>

      <table>

        <tr>

          <td width="350"></td>

          <td width="150"></td>



        </tr>

      </table>

    </td>

  </tr>

  <tr>

    <td width="500"></td>

  </tr>

</table>

Filas y columnas

En el ejemplo anterior debe notarse que en la tabla inicial cada fila (‘TR’) tiene sólo una celda (‘TD’). Para generar filas con dos o más columnas es recomendable emplear tablas anidadas en las celdas de la tabla inicial:

Esquema de filas y columnas de tabla

Estilos CSS

Todos aquellos estilos que no se puedan insertar mediante atributos HTML se añadirán por CSS en atributos ‘style’:

<td width="150" style="color:#585858; font-family:verdana,arial,sans-serif; padding:10px;">

  Lorem ipsum [...]<br><a href="#" style="color:#66f;">Saber más</a>

</td>

Tipografías

Sólo se deben utilizar tipografías de sistema. Los textos con tipografías poco habituales deberán ir como imagen (no se puede hacer uso de ‘font-face’).

Deben definirse en cada elemento TD el tamaño y la tipografía para que los textos aparezcan correctamente en Outlook (parece que estos estilos no se heredan correctamente desde elementos superiores).

Listados

Al no poder utilizar elementos ‘LI’ ni imágenes de fondo para los bullets, el listado se podría hacer del siguiente modo:

<table width="200">

  <tr>

    <td width="20"><img src="bullet.png" alt="" width="20" height="10"></td>

    <td width="180">Texto del elemento de lista</td>

  </tr>

  <tr>

    <td width="20"><img src="bullet.png" alt="" width="20" height="10"></td>

    <td width="180">Texto del elemento de lista</td>

  </tr>

</table>
Estructura de listado

Se ha utilizado una tabla de dos columnas, con una columna para la imagen que hace bullet y otra para el texto. Al hacerlo de ese modo se evita que el texto, al irse a más de una línea quede por debajo del bullet. Si ese detalle carece de importancia se puede hacer un poco más simple:

<td width="200" style="font-family:arial,sans-serif; font-size:11px;">

  <span style="display:block; padding-bottom:3px;"><img src="bullet.png" alt="" width="20" height="10" style="display:inline;"> Texto del elemento de lista</span>

  <span style="display:block; padding-bottom:3px;"><img src="bullet.png" alt="" width="20" height="10" style="display:inline;"> Texto del elemento de lista</span>

</td>

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.