Utilizar CSS para montar um boletim

As vantagens da construção CSS, em relação à construção tradicional por tabelas, podem ser aplicados também a envios de boletins em formato HTML.

A construção com CSS oferece muitas vantagens para a acessibilidade da página, carregamento em bytes e clareza do código. Neste artigo vamos contar como podemos aproveitar essas vantagens também nos boletins de novidades enviados em formato HTML.

Para construir com CSS utiliza-se uma folha de estilo em cascata, onde se especifica qualquer atributo de aspecto da página, separando por completo o conteúdo e a apresentação. O conteúdo se define no código HTML da página e qualquer especificação do aspecto se inclui em um arquivo externo CSS.

Referência: Para saber mais sobre CSS podemos consultar a seção CSS a fundo. Tambem podemos consultar o artigo sobre a Construção CSS.

Um newsletter, como se comentou em nosso Manual de boletim de novidades, pode ser enviado em formato HTML para dar mais visual ao correio. Nesses casos, na hora de criar o boletim deve-se fazer uma página web normal e logo, se enviará como corpo da mensagem.

Como qualquer outra página web, a que criamos para fazer o boletim, pode ser realizada utilizando CSS, o que redundará em vantagens para o criador do boletim e para quem se inscreveu.

O peso da mensagem poderá se reduzir, por não ser necessário incluir nenhuma etiqueta HTML para definir os estilos. Isto nos economizará muito código.
Poderemos mudar o aspecto da mensagem com somente mudando a folha de estilos, sem necessidade de modificar o código HTML que viemos utilizando para fazer o envio. Isto nos oferece uma maior capacidade de inovação no envio da mensagem.
Se por alguma razão perdemos a folha de estilos ou se o sistema de correio do usuário que se inscreveu não suporta CSS, simplesmente verá a mensagem sem o aspecto definido pelo criador do boletim. Porém, pelo menos verá perfeitamente o envio, com toda informação da mensagem, apresentada com os estilos pré-determinados do sistema do usuário.
No caso de que a um usuário não suporte o formato HTML, poderia acontecer de ver o código da página (com as etiquetas e tudo), ao invés de ver o formato web. Neste caso, pelo menos receberá um código muito mais legível e compreensível do que se estivesse misturado com etiquetas HTML para definir os estilos.
Na hora de criar os diferentes boletins cada vez, se economiza tempo, visto que não há que se preocupar por definir os estilos. Ou seja, a modificação é muito mais simples.

Como tudo nesta vida, montar um boletim com CSS, também tem algumas desvantagens:

A principal que vejo é que faz falta ter maiores conhecimentos para criar um boletim com CSS. Ou seja, qualquer pessoa é capaz de fazer uma página com HTML básico utilizando um editor de webs como Frontpage ou Dreamweaver. Entretanto, com CSS deveremos dominar uma tecnologia adicional e algum programa ou outro para realizar o trabalho.
Outra desvantagem é que alguns sistemas de correio não incluem links com arquivos externos, já seja imagens ou declarações CSS. Isto faz com que não se mostrem os estilos do boletim, embora pelo menos se mostrará a página básica sem os estilos. Uma possibilidade para evitar isto é incluir os estilos dentro do próprio código da página, embora assim também estaremos contaminando um pouco o código limpo de nosso boletim.

Exemplo de boletim em formato HTML com CSS

Nós levamos tempo enviando em nossa web MercadoProfesional.com um boletim semanal em formato HTML, que está totalmente construído com CSS. Vamos mostrar aqui seu código HTML e o código CSS que utilizamos para definir os estilos.

Seria bom ver o boletim em uma página a parte, para termos uma idéia prévia do conteúdo e estilo criados.

Observação: Este exemplo é de uma página web de freelance em castelhano chamada Mercado Profesional.

Código HTML

Podemos ver a seguir o código HTML de um de nossos boletins de novidades.

<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 não tem nenhum estilo definido através de HTML, é bastante simples de interpretar.

Código CSS

Agora podemos ver o código do arquivo CSS que estamos utilizando para definir os estilos do documento. Certamente algum dos estilos definidos não estaremos utilizando nesta edição do boletim de novidades. Em geral, não estranhem se a declaração de estilos não estiver totalmente otimizada.

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;
}

A declaração de estilos é bastante longa, mas como dizíamos, poderia ainda se otimizar bastante mais.

Podemos ver o boletim em uma página a parte.

Observação: Este exemplo é de uma página web de freelance em castelhano chamada Mercado Profesional.

Conclusão

O passo mais difícil para realizar este boletim é fazer a construção propriamente dita em CSS. Mas sempre é interessante perder um pouco de tempo para melhorar nossa maneira de fazer as coisas.

Antes de acabar, queremos colocar um link a uma página para visualizar o boletim sem a definição de estilos associada.
Assim é como se veria o boletim se por algum motivo o sistema de algum usuário não aceita CSS ou se não chega a linkar com a folha de estilos por qualquer razão. Pode-se ver que o boletim ainda fica bastante compreensível, embora não tão vistoso.