> Manuales > Manual de creación y envío de boletines de novedades

Las ventajas de la maquetación CSS, con respecto a la maquetación tradicional por tablas, se pueden aplicar también a envíos de boletines en formato HTML.

La maquetación con CSS ofrece muchas ventajas para la accesibilidad de la página, carga en bytes y claridad del código. En este artículo vamos a contar cómo podemos aprovecharnos de esas ventajas también en los boletines de novedades enviados en formato HTML.

Para maquetar con CSS se utiliza una hoja de estilo en cascada, donde se especifica cualquier atributo de aspecto de la página, separando por completo el contenido y presentación. El contenido se define en el código HTML de la página y cualquier especificación del aspecto se incluye en un archivo externo CSS.

Referencia: Para saber más de CSS podemos consultar la sección CSS a fondo. También podemos consultar acerca de la maquetación CSS.

Un newsletter, como se ha comentado en nuestro manual de boletines de novedades, se puede enviar en formato HTML para dar vistosidad al correo. En esos casos, a la hora de crear el boletín se debe hacer una página web normal y luego se enviará como cuerpo del mensaje.

Como cualquier otra página web, la que creamos para hacer el boletín, puede realizarse utilizando CSS, lo que redundará en ventajas para el creador del boletín y suscriptor.
Como todo en esta vida, maquetar un boletín con CSS, también tiene algunas desventajas. Ejemplo de boletín en formato HTML con CSS

Nosotros llevamos tiempo enviando en nuestra web MercadoProfesional.com un boletín semanal en formato HTML, que está maquetado por completo con CSS. Vamos a mostrar aquí su código HTML y el código CSS que utilizamos para definir los estilos.

Sería bueno ver el boletín en una página aparte, para hacernos una idea previa del contenido y estilo creados.

Código HTML

Podemos ver a continuación el código HTML de uno de nuestros boletines de novedades.

<html>
<head>
    <title>Boletín de novedades 25 .:MercadoProfesional.com:.</title>
   <link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>

<body>
<div id="container">
   <div id="cabecera">
    <div id = "titulo">
    <h1>Boletín de novedades<BR> MercadoProfesional.com</h1>
    </div>
    <div id="logo">
      <a href="http://www.mercadoprofesional.com/"><img src="http://www.mercadoprofesional.com/mail_boletin_novedades/imgs/logo.gif" width = "155px" height = "78px" border="0px" valign="top"></a>
     </div>
    </div>
    <div id="topCuerpo"></div>
    <div id="cuerpo">

      <div id="numBoletin"> Boletín de Novedades 25 # 18/05/2005 # </div>
    <div id="cuerpo1">
    <p>Saludos cordiales,
   </p>
   <p>

Te llega este correo por ser uno de los profesionales registrados en MercadoProfesional.com
Te informamos de las nuevas solicitudes que han llegado, para que no dejes pasar la oportunidad de enviar tus presupuestos. </p>

</div>
    <div id="cuerpoNov"><h2 class="icoTit"> Nuevos Proyectos: </h2>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/364.php"> Tienda Online</a></h3>
    <p class="par">Tienda online, muy bien definida, para venta de servicios de revelado online</p>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/366.php"> Desarrollo de portal inmobiliario</a></h3>
    <p class="par">Como su nombre indica, un portal inmobiliario, hacen especial hincapié en la funcionalidad.</p>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/368.php"> Desarrollo de portal</a></h3>
    <p class="par">Desarrollo y promoción de un portal, exactamente, no sabemos que temática quieren utilizar.</p>
    <h3 class="icoNovedad"> <a href="http://www.mercadoprofesional.com/profesionales/solicitudes/369.php"> Formulario de flash y PHP</a></h3>
    <p class="par">Breve desarrollo en php para una aplicación en flash, con opciones de seguir colaborando en el futuro.</p>
   </div>
   <p>Esta semana tenemos 4 proyectos nuevos.</p>
   <p>Simplemente despedirnos de todos vosotros y desearos suerte con los presupuestos.</p>
   <p>© Guiarte Multimedia S.L. - +34 915440837 - <a href ="mailto:info@mercadoprofesional.com">info@mercadoprofesional.com</a> -</p>
</div> <div id="pieCuerpo"></div>
</body>
</html>

Como este código no tiene ningún estilo definido a través de HTML, resulta bastante sencillo de interpretar.

Código CSS

Ahora podemos ver el código del archivo CSS que estamos utilizando para definir los estilos del documento. Seguramente alguno de los estilos definidos no lo estaremos utilizando en esta edición del boletín de novedades. No os estrañaros por eso. En general, no extrañarse si no está totalmente optimizada la declaración de estilos.

BODY {
    margin : 0 0 0 0px;
   background-color: #CCCCCC;
   font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align : center;
}

#cabecera {
    background-image: url(imgs/fondo_cab.gif);
    background-repeat : no-repeat;
    margin : 0 0 0 0px;
    background-position : right;
    padding : 0 0 0 0px;
    width : 500px;
    height: 96px;
}

#logo {
    padding : 7 20 11 20px;
}

#titulo {
    padding : 18 20 0 20px;
    float : right;
    margin-right: 24px;
}

#container {
    width : 500px;
    padding : 0 0 0 0px;
    margin : auto;
    text-align : left;
}

#topCuerpo {
    margin-bottom : 0px;
    margin-left : 0px;
    margin-right : 0px;
    margin-top : 5px;
    border-bottom : 1px solid #9b9b9b;
    width : 493px;
    float : right;
}

#cuerpo {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding : 10 10 10 10px;
    background-image : url(imgs/fondo_cuerpo.gif);
    margin : 0 0 0 6px;
    background-position : right;
    background-repeat : repeat-y;
    clear : both;
}

A:ACTIVE{
    color : #003366;
}

A:HOVER{
    color : #003366;
    text-decoration : none;
}

A:LINK{
    color : #003366;
}

A:VISITED {
    color : #003366;
}

#numBoletin {
    background-color : #e9e9e9;
    border : 1px solid #666666;
    width : 304px;
    float : right;
    padding : 6 0 6 10px;
}

#cuerpo1 {
    clear : both;
    padding-top: 10px;
}

#cuerpoNov {
    background-color : #d2e3fb;
    border : 1px solid #666666;
    padding : 5 10 10 5px;
}

#pieCuerpo {
    background-image : url(imgs/bajo_cuerpo.gif);
    height:9px;
    background-repeat : no-repeat;
    margin-left : 6px;
}

H1 {
    font-size : 16px;
    font-weight : bold;
    color : #003366;
    text-align : center;
}

H2 {
    font-size : 11px;
    font-weight : bold;
    color : #003366;
}

.icoTit{
    background-image : url(imgs/IcoTit.gif);
    background-repeat : no-repeat;
    padding-left:12px;
    margin-top:0px;
    background-position : left;
}

H3 {
   font-size: 10px;
   font-weight : bold;
   color : #003366;
}
.icoNovedad{
    background-image : url(imgs/IcoNovedad.gif);
    background-repeat : no-repeat;
    padding-left:10px;
    margin-left:3px;
    margin-top:0px;
    margin-bottom:2px;
    background-position : left;
}

.par{
    margin-top:2px;
    padding-left:10px;
    margin-left:3px;
}

.resaltado {
    background-color : #e9e9e9;
    border : 1px solid #666666;
    padding : 6 0 6 10px;
}

La declaración de estilos resulta bastante larga, pero como decíamos, se puede podría optimizar bastante todavía.

Podemos ver el boletín en una página aparte.

Conclusión

El paso más difícil para realizar este boletín es hacer la maquetación propiamente dicha en CSS. Pero siempre resulta interesante perder un poco de tiempo para mejorar nuestra manera de hacer las cosas.

Antes de acabar, queremos poner un enlace a una página para visualizar el boletín sin la definición de estilos asociada.
Así es como se vería el boletín si por cualquier cuestión el sistema del suscriptor no acepta CSS o no se llega a enlazar con la hoja de estilos por cualquier motivo. Se verá que el boletín queda bastante comprensible, aunque no tan vistoso.

Diego Pinilla

Responsable relaciones exteriores de MercadoProfesional.com

Manual