Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Maquetación con HTML+CSS de newsletters y mensajes de correo: Maquetación

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>

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks

Datos del artículo:

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Código HTML y CSS”

stanley dice:

Fecha de comentario: 2011/12/05 07:03

para poner mas columnas en una fila no es necesario poner otra tabla anidada solamente se ocupa

2 es la cantidad de columnas q abarcara

Hacer un comentario

Información del sitio