Alejandra 15 de noviembre de 2007 a las 11.32
   Imprimir artículo
elWebmaster.com

10 tips para crear Newsletters utilizando HTML


Hay varias cosas que un dise√Īador debe tener en cuenta a la hora de dise√Īar un Newsletter. Adem√°s del mensaje y el dise√Īo publicitario, es importante prestar atenci√≥n a c√≥mo el destinatario recibir√° el News en su correo electr√≥nico, c√≥mo lo ver√°: con fotos, sin fotos, con qu√© tipograf√≠as. Aqu√≠ presento algunos conceptos b√°sicos sobre Newsletters en HTML para que la campa√Īa sea realmente efectiva.

Un Newsletter es generalmente parte de alguna campa√Īa de promoci√≥n. Aunque la empresa est√© informando y no promocionando, esta pieza de comunicaci√≥n sigue siendo un reflejo de la imagen que la empresa quiere dar, con la que deber√≠an identificarla.

1. El Asunto

El “tema” del News debe estar condensado en el nombre del Asunto, que ver√° el destinatario en su bandeja de entrada de su e-mail. Aqu√≠ no se puede andar con rodeos. Debe ser un mensaje fuerte y claro. Poniendo un ejemplo: una empresa de viajes que promociona diferentes paquetes tur√≠sticos, elegir√° la mejor promoci√≥n para incluir en el Asunto como: “Consigue un 20% de descuento en tu viaje”, sin detallar de qu√© viaje se trata. Lo que queremos conseguir es que el destinatario se sienta interesado y quiera leer nuestro e-mail.

<title>Consigue un 20% de descuento en tu viaje</title>

2. El mensaje

Es importante que el dise√Īo tenga diferentes “capas”, dependiendo de la importancia del mensaje. As√≠, en un News como el de la fotograf√≠a se pueden leer esos niveles como:

Mensaje principal: “Small Hotels, BIG Personalities in SFI”

Mensaje de apoyo: “Boutique Hotels on Union Square”

Cuerpo del mensaje: Aquí se incluirá el detalle de la promoción. Fíjate con atención que hay dos párrafos destacados: el primero, a modo de introducción, en negrita; y el tercero, donde se detalla el valor monetario de la oferta, en rojo. Así, el destinatario puede leer sólo lo que le interesa de forma rápida, sin tener que leer de más para encontrar lo que busca. El texto rojo es un mensaje claro y obvio. También destaco que el precio está bien resaltado. La persona interesada en el precio puede leer directamente eso y profundizar en el resto de la información si es que realmente le interesa.

Cuando en el cuerpo de un mensaje hay demasiada informaci√≥n, todo pierde pregnancia. En el caso de un instituto de educaci√≥n que promociona cursos, podr√°n decir que todos los cursos son igual de importantes, pero no todos pueden estar al mismo “nivel” en el dise√Īo. Se puede elegir uno o dos para destacar, luego cuatro en un segundo nivel y el resto en un tercer nivel. De esta manera, se logra captar la atenci√≥n del destinatario sobre un punto. Si no existe un dise√Īo basado en niveles, el destinatario deja de leer, se marea por la informaci√≥n.

En esta imagen se puede ver que el texto de la izquierda posee mucha informaci√≥n y toda en el mismo nivel, mientras que en el texto de la derecha la informaci√≥n est√° “ordenada” en niveles. El lector le prestar√° atenci√≥n a los primeros tres art√≠culos y seguir√° leyendo si est√° interesado.

3. No abusar del logo

Es molesto que el logotipo de la empresa se vea repetidamente en una pieza de comunicación. Por eso, con uno o dos logos es más que suficiente. Acuérdate que el logotipo debe ir siempre linkeado a la página de la empresa.

4. Aviso legal

En el pie o footer del Newsletter debes agregar un aviso legal indicando que el Newsletter ha sido enviado por cortesía de la empresa. Aclara que:

  • la empresa no comparte la direcci√≥n de correo del destinatario con ninguna otra empresa
  • la empresa no env√≠a correo basura o “spam”
  • el destinatario puede dejar de recibir el Newsletter (debes indicar all√≠ mismo c√≥mo hacerlo: a trav√©s de un correo electr√≥nico, dirigi√©ndose a alguna parte del sitio web, etc.)

En el Newsletter de Micro Star International, el footer se ve así:

5. Si no ves el Newsletter…

Los News suelen subirse como un sitio web. Esto es así para poder redirigir a los usuarios a una página, en caso de que no puedan ver el correo. Así, el destinatario tiene la posibilidad de ver nuestro mensaje de cualquier manera.

Para esto, debes incluir en la parte superior del News, un enlace con algo parecido a: “Si no ves nada, haz clic aqu√≠: http://www.agenciadeviajes.com/newsletters/news21.html”

6. Evita el uso de CSS

Como muchos proveedores de correo no muestran los estilos adjuntos a un mensaje, debes evitar trabajar con CSS, tanto como una hoja adjunta como dentro del código HTML en forma de estilos (<style>) al inicio del código.

En vez de eso, debes tratar cada elemento de forma individual. Si a todos los subt√≠tulos le asignabas el estilo <h3> que quedaba estipulado en un CSS, ahora deber√°s asign√°rselo a cada uno por separado de esta manera: <td style="font-family:'Trebuchet MS', Verdana, Arial; font-size:13px"><font color="#333333">. Es un poco fastidioso, pero te aseguras de que el cliente vea el e-mail tal cual lo has dise√Īado.

7. Manejo de tipografías

Cuando en el c√≥digo le asignas aun texto un estilo de tipograf√≠a o fuente, debes incluir tres opciones: font-family:’Trebuchet MS‘, Verdana, Arial. Muchas personas no tienen ciertas fuentes instaladas en sus computadoras. Esto significa que jam√°s ver√°n el News con la fuente que tu has elegido, pero puedes darles opciones. En este caso, Trebuchet MS es la fuente predeterminada. Si el destinatario no la tiene, ver√° el News con Verdana, y si no tiene Verdana, lo ver√° con Arial. Escoge fuentes similares para que el News mantenga una continuidad con el dise√Īo original.

8. Im√°genes

Quiz√°s lo m√°s destacado a la hora de dise√Īar un Newsletter es el tema de las im√°genes. Hoy en d√≠a la mayor√≠a de los proveedores y programas de manejo de correo electr√≥nico deshabilitan las im√°genes. Para verlas, el usuario debe seleccionar la opci√≥n de habilitarlas, pero no todos lo hacen. Entonces es el desaf√≠o del dise√Īador, crear un News donde la informaci√≥n importante no est√© incluida en las im√°genes, sino que estas sean m√°s bien un accesorio.

Tambi√©n debe lograr que cuando las im√°genes no se muestran, no quede un espacio vac√≠o en su lugar que moleste o que est√© muy destacado. Yo personalmente, ubico las im√°genes y luego las reemplazo por elementos grises del mismo tama√Īo. As√≠ tengo una idea de c√≥mo ver√° el News una persona que no haya habilitado las im√°genes.

Con respecto al color, debes tener en cuenta que muchas veces los textos aparecen sobre una imagen, y a veces se plantea un problema cuando la imagen de fondo es oscura y el texto es blanco o claro. ¬ŅPor qu√©? Porque si las im√°genes est√°n deshabilitadas, se muestra un fondo gris y el texto no se ve. En este caso, lo que debes hacer es asignarle un color oscuro a la table donde va a ubicarse la imagen:

<td width="426" height="115" background="URL de la imagen" bgcolor="#000033">

9. News listando contenido

Muchas veces, los Newsletter buscan informar sobre el √ļltimo contenido o las √ļltimas novedades de un sitio web. Este es el caso del News de ElWebmaster.com, donde se listan los art√≠culos de la √ļltima semana. En estos Newsletters lo m√°s importante es que la informaci√≥n sea clara, que el listado tenga alg√ļn tipo de distinci√≥n de “capas”, con contenido m√°s y menos importante bien diferenciado, ninguna o pocas im√°genes y enlaces claros a las p√°ginas del sitio que estamos recomendando. No es necesario que el News est√© alojado en Internet como una p√°gina web.

10. Newsletter de im√°genes

Tambi√©n existen Newsletter donde la imagen es tan importante que el 80 por ciento del News est√° basado en im√°genes. Las empresas con mucho desarrollo en publicidad gr√°fica prefieren este tipo de comunicaci√≥n. Cuando el destinatario tiene deshabilitada la opci√≥n de mostrar im√°genes, estos News se ven como cajas vac√≠as. Aqu√≠ es sumamente importante incluir la opci√≥n de “Si no ves el Newsletter…”.

Estos News deben dejarse √ļnicamente para campa√Īas de promoci√≥n y env√≠o de novedades, nunca para mensajes informativos que deben ser recibidos s√≠ o s√≠, puesto que es probable que sean pocos los destinatarios que lleguen a leer el mensaje completo.

En la imagen superior se puede ver cómo queda un Newsletter basado en imágenes y uno donde las imágenes son accesorios del contenido, cuando quedan deshabilitadas.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (27)

  1. Ignacio Gonzalez dice:

    Me parece un muy buen articulo, aunque tiende mucho mas al diseno que a la programacion de las paginas. Podria ser de ayuda si agregara dentro del mismo una liga a un tutorial sencillo de programacion http, o incluyera algun codigo ejemplo. Se que el articulo no tiende a ensenar esto pero seria de ayuda.

  2. Juli√°n dice:

    Muy interesante y puntual el art√≠culo. Muy oportuno tambi√©n. He tenido que lidiar con envios masivos de estos News y no simpre es muy facil dise√Īarlo para que se vea “bien”. Gracias por tus sugerencias.

    Otra cosa, veo que la pagine esta montada sobre una personalizacion de wordpress muy interesante. Que bueno que tambien escribieras algunos consejos para montar blogs asi.

  3. Juli√°n dice:

    ūüėČ

  4. Emmett Van Halen dice:

    ta weno el articulo…
    Sencillo y va directo al grano…
    Felicitaciones al creador

  5. sandra dice:

    hola, quisiera saber como hago una newsletter en Dreamweaver, porfavor…
    gracias

  6. Juan Manuel dice:

    ¬°Hola, Sandra! Te recomiendo que sigas el Taller de Adobe Dreamweaver, todos los martes, donde aprender√°s a manejar el programa a fondo.
    ¬°Saludos!

  7. Novara dice:

    Juan Manuel, por donde se sigue el taller?

  8. Juan Manuel dice:

    ¬°Hola, Novara! Todos los martes se publican las clases del taller de Dreamweaver.
    ¬°S√≥lo tienes que entrar al sitio para aprender! Pero ya hay cuatro clases disponibles, haz clic en el panel de “TALLERES PR√ĀCTICOS” en la columna de la derecha, bajo la nube de tags, para acceder a ellas.
    ¬°Saludos!

  9. Agustin Licari dice:

    Muy bueno el tutorial, los felicito es la primera vez que entro y este informe-tutorial es buenisimo. Saludos!!!

  10. Sandra dice:

    Hola… me parece buena la informacion que publicaron, pero tengo un problema. Cuando cuelgo el html se ve el dise√Īo y el texto pero no se ve las imagenes… necesito ayuda de caracter urgente he intentado casi todo y los resultados son los mismos… Gracias

  11. Juan Manuel dice:

    ¬°Hola, Sandra!

    ¬ŅEst√°s linkeando las im√°genes a la web? En ese caso f√≠jate si hay conexi√≥n a Internet desde donde se recibe el Newsletter.

    Si son pocas im√°genes puedes insertarlas (pegarlas) directamente.

    ¬°Saludos!

  12. Adriana dice:

    Necesito que alguien me ayude, necesito alguna web que ense√Īe como dise√Īar un newsletter, pero en el sentido grafico y de html, yo dise√Īe uno en photoshop luego lo acomode en frontpage, y lo subi a internet a mi p√°gina, luego copie el codigo html y lo pegue en el correo, todo se ve, las imagenes y el texto pero lo malo es que salen todas desordenadas, en la pagina se ve bien, pero en el correo sale todo desarmado…. muchas gracias el que se tome el tiempo de ayudarme, se lo agradezco de corazon

  13. Adriana dice:

    por cierto el que me quiera ayudar mi correo es gufy90(arroba)hotmail.com

  14. Daniel dice:

    Muy instructivo, se plantean detalles interesantes que a la hora de la implementacion son de suma importancia.
    Saludos !!

  15. Cielo V√°zquez dice:

    Para los que no sabemos nada, como yo, me ha servido de mucho. Muchas gracias por invitarme a leer el artículo.
    Saludos,
    Cielo

  16. Pancho dice:

    Está muy bueno el articulo de los 10 tips a tener en cuenta, pero estaría bueno que indicaran los pasos a seguir para crear un newspapper de cero. Saludos.

  17. Luxxar dice:

    Excelente! me aclaraste varias dudas, pero tengo problemas con las imágenes, no aparecen ni cuando armo el newsletter en dreamweaver, ni cuando lo pego en Horde, ni cuando lo envío. Puedo asegurarte que los links están bien y usé la instrucción de background tal y como lo indicaste. Alguna ayuda?

  18. eBuho dice:

    background no se debe usar al contrario usar imagen

  19. Pablo dice:

    Me fue de gran ayuda.
    Muchas gracias

  20. johao dice:

    excelente articulo
    gracias

  21. Antonio dice:

    Hola,

    Yo utilizo la herramienta mailrelay de mervir y es una pasada. Con capacidad para envia 4 millones de email a la hora (maximo que jamas he probado jejeje) pero es lo que prometen. Boletines de varios cientos de miles los envia rapisidimo y con unas est√°disticas y control que quitan el hipo.

    Mirar la información y los videos.

    http://www.mervir.com/servicio-envio-emaling/

    por cierto, usuarios que solo usen menos de 5mil emails al mes es gratis.

  22. paolo dice:

    grax me sirvio muchoooooooo
    eso si me costo un mundo linkear una imagen de fondo pero al final resulto
    gracias

  23. Matías dice:

    mil gracias, estoy comenzando con el tema y me ha servido mucho.
    sigan asi!

  24. cynthia dice:

    est√° s√ļper bueno, gracias!
    Pero, en un principio… cu√°les son los pasos para la creaci√≥n y el env√≠o del newss??
    1 crear una plantilla en dreamw.
    2 insertar la info + imgs deseadas de la semana
    3 incluir este cod html (que no tengo claro cómo se hace) en el mail que vamos a enviar
    4 enviar el mail a los destinatarios deseados
    estoy bien???
    quién es tan lindo de decirme como hago cada paso?

  25. ana mendez dice:

    De verdad me gustó el artículo. Es bueno comparar opiniones sobre estas cosas, además la experiencia de otros es importante para evitarnos problemitas.
    Gracias por ser tan explicativo!-

  26. Profesor Yeow dice:

    Muy interesante! una consulta… se puede usar divs o todo tiene que ser tablas?

  27. Formación online dice:

    muy interesante las pautas a seguir, lo aplicaré en mis nuevos proyectos. Un saludo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder