comparte el articulo 

Diseño de un boletín electrónico

Actualizado el 17/05/2010 < > 1 Comentario

Resumen: El diseño de un boletín electrónico debe tener en cuenta las particularidades del medio que se emplea para su distribución. Aquí mostramos un ejemplo de como diseñar un boletín.

Los boletines electrónicos son extremadamente útiles para la promoción, tanto de páginas web como de comercios establecidos. Esto supone el empleo del correo electrónico como medio de publicidad y marketing.

En la actualidad, los boletines electrónicos se han vuelto más sofisticados en su diseño, en gran medida debido a la ampliación  constante del ancho de banda de las conexiones privadas, lo que permite que los usuarios tengan la posibilidad de descargar algunos elementos adicionales en sus correos electrónicos.

El boletín debe estar pensado teniendo en cuenta que los usuarios del correo electrónico destinan unos segundos para ver el contenido de los mismos. Esto hace que el diseño visual, la primera impresión que recibe el lector, sea de muchísima importancia.

Debe existir un equilibrio entre las imágenes que el usuario reciba y el texto. Los textos tienen un poder de llegada sobre los usuarios muy importante, pero también más lento. La imagen siempre llega primero al usuario, al igual que el diseño en su conjunto. Es por esta razón que en el diseño de los boletines electrónicos, adquieren mucha mayor importancia los principios de diseño web.

Diseñando un boletín electrónico

Para que tengan una idea más acabada del tema, les mostraremos un diseño muy sencillo de un boletín electrónico y como diseñarlo, puedes verlo aquí en funcionamiento. Para ello, deberán descargar los siguientes archivos:

Descargar aquí

En el archivo comprimido encontrarán el boletín terminado, con un archivo CSS y las imágenes necesarias. Las características de este boletín son las siguientes:

  • Tiene un bajo peso, ya que en total los archivos ocupan unos 27kb, lo que para este tipo de medios es lo más recomendable. Un correo muy pesado, que demore varios segundos en terminar de descargar todos sus componentes, puede hacer que el usuario lo cierre sin terminar de verlo.
  • Está diseñado para que tenga un ancho de 498px. Esto se debe a que muchas veces la configuración de los correos electrónicos hace que se abra una ventana de menores dimensiones, por lo que si el boletín tiene mayores dimensiones, el usuario deberá emplear la barra de desplazamiento horizontal, lo que no es conveniente. 498px se puede dividir entre tres, lo que resulta indispensable para el cuerpo central, como veremos más adelante.
  • También tiene una extensión vertical reducida, por lo que en la mayoría de los casos, el usuario tendrá la totalidad del mensaje a la vista sin necesidad de desplazarse.
  • El reducido tamaño del mensaje hace que la el tamaño de las imágenes (que son bastante pequeñas) sea suficiente para que el diseño aparezca balanceado.

Tipo de documento

Aun cuando los temas de posicionamiento tengan poca relevancia, mantener los estándares es una práctica recomendable, por lo que en el caso del ejemplo, hemos decidido realizarlo en XHTML  1.1.

Teniendo en cuenta que la extensión del archivo CSS es muy pequeña, también puede optarse por incluir la hoja de estilo en el HTML, lo que no tendrá influencia en el resultado final.

Las etiquetas meta que deben incluirse en este tipo de documentos son muy pocas, ya que muchas de ellas están relacionadas con el posicionamiento y los robots de buscadores y en este caso son cosas que no es necesario tener en cuenta.

Características generales

Como pueden ver en los archivos, la página del boletín está dividida en cuatro secciones claramente diferenciadas: El encabezado, que incluye una imagen, el título, el cuerpo central, donde está la descripción, y el pie de página que contiene información de localización y contacto.

En el archivo CSS se consideran en primera instancia aquellas reglas que son válidas para todo el documento, con excepción de las secciones donde se indique lo contrario. Así pues, tenemos que se ha colocado una etiqueta para body y para img. En el primer caso, se restablecen los márgenes y el relleno a cero, para igualar la visibilidad del documento en todos los navegadores y evitar que aparezcan márgenes y rellenos por defecto.

También en la etiqueta body se establece el color de fondo de todo el documento y la fuente y color de las mismas que se empleará.

En la etiqueta img solo se establece que no tendrán bordes, evitando de esta forma que cuando la imagen tenga un enlace, esta aparezca con el característico borde de color azul que indica que la imagen está enlazada.

Encabezado

El encabezado de los boletines electrónicos es muy importante, ya que forma parte de la primera impresión que el usuario tiene de la totalidad del mensaje. El diseño del mismo debe ser estudiado en detalle, para que brinde al receptor una idea general del contenido, además de formar parte de la imagen institucional.

Tal como ya se ha dicho, el diseño está conformado por un contenedor, el cual tiene 498px de ancho. El margen lateral es “auto”, haciendo que todo el contenido de la etiqueta aparezca centrado en la página, sin importar el ancho de la ventana del navegador.

Dentro del mismo, aparece el logotipo, que tiene 498px de ancho, por lo que no es necesario ajustar su posición. Generalmente los logotipos institucionales no cuentan con estas medidas, por lo que el diseñador tiene dos opciones: la primera es colocar un logotipo a la izquierda del encabezado y completar el ancho con el título, o diseñara una imagen que tenga toda la extensión y que incluya al logotipo.

Título

El título se ha colocado simplemente empleando la etiqueta h1, a la que se le han dado las características de la fuente necesarias para que se integre al diseño. Se ha elegido la fuente Times New Roman (Times como alternativa para Mac) en estilo itálica para darle un aspecto elegante. El color empleado es coincidente con la imagen que le precede, de forma de mantener una continuidad en el diseño.

Se le ha dado un margen superior e inferior de 15px, para que quede separado y generar los espacios en blancos necesarios para no saturar el diseño y que el título, a pesar de tener un color que no lo diferencia del encabezado, quede resaltado.

Cuerpo y mensaje

El cuerpo central de la página está constituido por un contenedor general de 498px con centrado automático. De esta forma, se alinea perfectamente con el encabezado y el título. El cuerpo además, está dividido en tres contenedores definidos con la clase “mensaje”, que sirve para dividir en tres columnas al cuerpo central.

Estos contenedores tienen un ancho de 160px con un margen de 3px. El ancho total sería:

(160px x 3) + (6px x 3) = 498px (esta es la razón por la cual se ha elegido el ancho de 498px)

Cada uno de los divs “mensaje” contiene una imagen y un párrafo, que están colocados siguiendo el flujo del documento. Estos contenedores tienen marcado el float: left, lo que hace que se coloquen uno a un lado del otro.

El texto del párrafo tiene las características que se han determinado en el body, por lo que no ha sido necesario establecer fuentes y colores.

Pie de página

El pie de página también está enmarcado en un div con 498px de ancho. Se le ha colocado un color de fuente más tenue, ya que la función de este contenido es la de brindar la información necesaria pero sin que se produzca un resaltado excesivo.

Se ha marcado claramente el enlace a la web de la institución para que se diferencie del resto del párrafo. Al final, se han colocado los enlaces al validador de W3C, para que puedan comprobar que los documentos son válidos para CSS 2.1 y XHTML 1.1.

Publicado el 17/05/2010, última actualización 17/05/2010.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. mikeintown

    Muy buen articulo, yo eh tenido la oportunidad de contratar el servicio de iContact, el servicio lo pago al mes con mi TC y no eh tenido ningun problema, mi boletin lo envio en formato HTLM, es una herramienta muy sencilla de utilizar, se las recomiendo ampliamente, estoy pagando 19 dlls por mes y me permite enviar 6mil correos mensuales, tal vez existan otras opciones mejores, pero creo que me quedo con ellos. Saludos

    Jueves, 27 de enero 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras