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.
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.
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.
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.
- El peso del mensaje se podrá reducir, al no ser necesario incluir ninguna etiqueta HTML para definir los estilos. Esto nos ahorrará mucho código.
- Podremos cambiar el aspecto del mensaje con sólo cambiar la hoja de estilos, sin necesidad de modificar el código HTML que venimos utilizando para hacer el envío. Esto nos ofrece una mayor capacidad de innovación en el envío del mensaje.
- Si se pierde la hoja de estilos por cualquier razón o el sistema de correo del suscriptor no soporta CSS, simplemente verá el mensaje sin el aspecto definido por el creador del boletín. Pero por lo menos verá perfectamente el envío, con toda la información del mensaje, presentada con los estilos predeterminados del sistema del usuario.
- En caso de que a un usuario no soporte formato HTML, podría darse el caso de que viese el código de la página (con las etiquetas y todo), en lugar de ver el formato web. En ese caso, por lo menos recibiría un código mucho más legible y comprensible por el suscriptor, que si estuviera mezclado con etiquetas HTML para definir los estilos.
- A la hora de crear los distintos boletines cada vez, se ahorra tiempo, puesto que no hay que preocuparse por definir los estilos. Es decir, la modificación es mucho más sencilla.
- La principal que veo es que hace falta tener mayores conocimientos para crear un boletín con CSS. Es decir, cualquier persona es capaz de hacer una página con HTML básico utilizando un editor de webs como Frontpage o Dreamweaver. Sin embargo, con CSS deberemos dominar una tecnología adicional y algún que otro programa para realizar el trabajo.
- Otra desventaja es que algunos sistemas de correo no incluyen enlaces con archivos externos, ya sean imágenes o declaraciones CSS. Esto hace que no muestren los estilos del boletín, aunque por lo menos se mostrará la página básica sin los estilos. Una posibilidad para evitar esto es incluir los estilos dentro del propio código de la página, aunque entonces estaremos contaminando un poco el código limpio de nuestro boletín.
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