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

Ejemplo de newsletter

A continuación se expone un ejemplo de maquetación de una newsletter.

Captura del ejemplo de newsletter

Estructura inicial

Inicialmente se crea el elemento de tabla contenedora, compuesta por filas de una sola celda. En el elemento de tabla se define el ancho (atributo ‘width’), se eliminan espacios entre celdas (atributos ‘cellspacing’ y ‘cellpadding’) y se define en el atributo ‘style’ el color y tamaño predeterminado del texto.

<table width="600" border="0" cellspacing="0" cellpadding="0" style="color:#404040; font-size:11px;">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  [...]
</table>

Cabecera

Captura de la cabecera de la newsletter de ejemplo

Notar que se ha hecho uso de una fila que contenía una sola celda en los tres casos.

Área de título

Tenemos el título en una tipografía que no es de sistema. Habrá que introducirlo como imagen. Al tratarse de un elemento que no cambiará en las sucesivas entregas de la newsletter no hay inconveniente en hacerlo de ese modo.

Notar:

Texto alternativo en la imagen.
Dimensiones de la imagen definidas en los atributos ‘width’ y ‘height’ (veremos el hueco de la imagen cuando ésta sea bloqueada en el cliente de correo)

<tr>
  <td style="border-bottom:3px solid #404040; font-family:arial,sans-serif;"><img src="ficheros/MAIL_titulo.png" width="600" height="60" alt="Newsletter" /></td>
</tr>

Fecha

<tr>
  <td style="font-family:arial,sans-serif; padding:8px 0">10 de octubre de 2011</td>
</tr>

Otros datos

El texto de registro y la advertencia de que se trata de un mensaje publicitario:

<tr>
  <td style="padding:0 0 8px 0;">
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="font-family:arial,sans-serif;">Regístrese en <a href="#" style="color:#06c;">sitio.es</a> para recibir éste boletín</td>
        <td align="right" style="font-family:arial,sans-serif; text-transform:uppercase;">Publicidad</td>
      </tr>
    </table>
  </td>
</tr>

Se ha añadido una tabla para generar las columnas.

Añadir esa tabla extra puede hacer que el código parezca más complejo, pero permite que en otras filas se puedan meter columnas de distintos anchos.

Cuerpo

Destacado grande

Captura del destacado grande en el ejemplo de newsletter

En este caso se utiliza una tabla dentro de una de las filas de la estructura inicial. Dicha tabla está conformada por otras dos filas, una para el título y otra para la imagen del destacado:

<tr>
  <td style="border-bottom:2px solid #404040; padding-bottom:16px;">
  <table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="font-family:arial,sans-serif; font-size:20px; padding-bottom:4px;"><strong>Titular 1</strong></td>
    </tr>
    <tr>
      <td><a href="#"><img src="ficheros/MAIL_destacado_01.png" width="600" height="200" alt="Texto de titular 1" border="0" /></a></td>
    </tr>
  </table>
  </td>
</tr>

Destacados medianos

Captura de los destacados medianos en el ejemplo de newsletter

En este caso se inserta una tabla con una fila de tres columnas.

En el interior de las celdas primera y tercera celda se inserta una tabla de tres filas y una columna.

La segunda celda queda como separación de las otras dos, con una imagen dentro (con dimensiones asignadas en atributos ‘width’ y ‘height’) que garantice que el espacio se mantenga.

Estructura que contiene los destacados:

Estructura de código contenedor de los destacados

Estructura de la tabla de destacado:

Estructura de código de la tabla de destacado

Código HTML:

<tr>
  <td style="border-bottom:2px solid #404040; padding:16px 0 8px 0;"><table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="292">
        <table width="292" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="font-family:arial,sans-serif; font-size:16px; padding-bottom:4px;"><strong><a href="#" style="color:#06c;">Titular 2</a></strong></td>
          </tr>
          <tr>
            <td style="padding-bottom:8px"><a href="#"><img src="ficheros/MAIL_destacado_02.png" alt="Ver más sobre Titular 2" width="292" height="128" border="0" /></a></td>
          </tr>
          <tr>
            <td style="font-family:arial,sans-serif;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam turpis odio, interdum in, viverra a, semper nec, lectus. Quisque diam libero, rhoncus a, malesuada semper, sollicitudin lobortis, nisl. Etiam ac nisl vitae nunc dignissim fermentum. </td>
          </tr>
        </table>
      </td>
      
      <td width="16"><img src="ficheros/MAIL_blanco.gif" width="16" height="16" /></td>
      
      <td width="292">
        <table width="292" border="0" cellspacing="0" cellpadding="0">
          [...]
        </table>
      </td>
    </tr>
  </table></td>
</tr>

Compartir este artículo:

Datos del artículo:

Publicado el sábado 5 de noviembre de 2011 a las 21:34
Seguimiento de comentarios (RSS 2.0).

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.

Todavía no hay comentarios.

Outbook