Newsletter: maquetación

Miquel  |
  28/08/2012

En el anterior post de Email Marketing explicamos "a grosso modo" las características y dificultades principales del Email Marketing. Una vez tenemos claro a qué nos enfrentamos, vayamos a ello:
Maquetar el mensaje de correo electrónico de manera que se vea igual en los principales clientes de correo.

Recapitulemos: En el post anterior llegamos a trocear el diseño que teníamos de nuestro correo electrónico para convertirlo en una tabla con filas y columnas. Empecemos pues con el primer paso de la maquetación.

Paso 1: Montar la tabla con sus imágenes, textos y enlaces correspondientes

Lo primero que debemos hacer es construir una tabla con sus correspondientes parámetros bien definidos. En Mail.NET, disponemos de un botón para la construcción de tablas que nos permite definir los siguientes parámetros:

  • Filas : Recordad que en el post anterior que troceamos la imagen en 9 filas, por lo tanto introduciremos el valor 9.
  • Columnas: 5
  • Encabezamientos: En este parámetro podemos definir que la primera fila o la primera columna actúen como títulos, con lo que se les aplicará el formato estándar de los títulos de tabla. En el caso del ejemplo que vamos siguiendo no utilizaremos ningún encabezamiento.
  • Medida borde: Medida en píxeles que tendrá el borde de la tabla (el borde estándar ya no se utiliza demasiado, os recomendamos poner 0 para que no dibuje ningún borde estándar).
  • Anchura: Os aconsejamos no superar los 600 - 650 píxeles
  • Altura: Definir la altura de la tabla inicialmente es muy complicado, por lo tanto no le introduciremos ningún valor.
  • Espaciado de celdas ( "cellspacing" ): Este valor corresponde a la distancia que la tabla tendrá entre celda y celda exteriormente.
  • Espacio interior de celda (" cellpadding" ):  Este valor corresponde a la distancia que la tabla dibujará interiormente en cada celda.
    Veamos la diferéncia entre "cellspacing" y "cellpadding" mediante un dibujo:
     
  • Cellspacing

      Cellpadding

     
         
    Fijaos: En el dibujo izquierdo (cellspacing) las celdas (contenedores del contenido) están separadas entre ellas por el espaciado de celda. En cambio, en la imagen derecha (cellpadding) las celdas no están separadas entre ellas, sino que dentro de ellas hay una distancia interior, marcada por las líneas discontinuas.

Una vez introducidos los valores anteriores, el código HTML resultante es el siguiente: Ver código

Ahora ya tenemos un contenedor preparado para que montemos nuestra newsletter cómodamente. Todo lo que nos falta hacer ahora es rellenar cada celda de la tabla con el contenido que deseemos ya sean imágenes, textos o cualquier otro objeto. Por lo tanto os animamos a que probéis de acabar de rellenar el mensaje con las imágenes y textos que os plazca, teniendo en cuenta las siguientes consideraciones:

  • Celdas: En alguna ocasión necesitaremos combinar celdas, operación que con el editor de Mail.NET es muy sencilla. Solamente necesitamos seleccionar las celdas que queremos combinar y hacer un clic en el botón derecho del ratón, y escoger celdas > combinar celdas.
    Una combinación de dos celdas horizontales (columnas) hará que en nuestro código de la celda (recordad, td ) nos aparezca el código siguiente: colspan="2" que significa que dicha columna abarca dos de las columnas de la tabla.
    Por contra, una combinación de dos celdas en vertical (dos celdas en diferentes filas) hará que nuestro código de la celda aparezca el código rowspan="2" que significa que dicha celda abarca ahora dos filas de la tabla.
  • Celdas: Hay que tener en cuenta que las tablas adaptan su medida al contenido de ellas. Por esta razón, debemos de vigilar que el contenido de una celda no sea mayor a su medida deseada ya que la celda se adaptaría automáticamente y no nos daríamos cuenta hasta el final, momento en que veríamos la tabla descuadrada.
  • Imágenes: Ajustar siempre la medida de ellas, ya que una imagen de mayor tamaño que la celda que la contiene hará que se nos descuadre la tabla.
  • Imágenes: Poner siempre borde de la imagen a 0 píxeles (si no deseamos un borde de color azul chillón que nos destrozaría el impacto visual de la newsletter).
  • Imágenes: Introducir el campo de texto alternativo y el título consultivo (campos que en el editor de Mail.NET se pueden editar fácilmente). Una imagen con una buena codificación tendría el aspecto en HTML siguiente:

    Código HTML imagen
     
  • Texto: Cuanto mayor sea la cantidad de texto, mejor se verá en clientes de correo que solamente reconozcan el formato de texto (sin HTML).
  • Texto: Las medidas de la tabla pueden ser interpretadas de maneras distintas entre los múltiples clientes de correo electrónico. Esto puede afectar a la posición del texto en algunos casos.
  • Texto: No utilizar fuentes que no sean las básicas (en Mail.NET recomendamos Arial, Comic Sans MS, Courier New, Tahoma, Times New Roman, Verdana, Trebuchet MS). Dichas fuentes están instaladas por defectos en la mayoría de ordenadores y por lo tanto, nos aseguramos que el newsletter se vea con la tipología de letra que nosotros hayamos elegido.
  • Enlaces: Es importante la utilización de enlaces ya que con ellos, podemos hacer una estadística de los enlaces que han pulsado y así, ver la parte de la newsletter que interesa más a los lectores.
  • Enlaces: Podemos hacer que los links de la newsletter dirijan a los receptores hacia nuestra página web para ver más información sobre el tema que hablamos. Así, conseguimos visitas hacia nuestra página web y si la información de la web es buena, quizá nos llegue algún contacto preguntando por el servicio o producto que ofrecemos.

 

Por el momento, dejamos aquí la construcción de la newsletter. Creemos que con estos consejos y pasos ya tenemos las herramientas suficientes para enviar nuestra campaña de Email Marketing con una newsletter de aspecto atractivo y profesional.

En próximos artículos seguiremos con la maquetación, explicando mas detalles para conseguir el objetivo de llegar a un público lo mas amplio posible.

Haga clic en el enlace siguiente para ver las bases del Email Marketing.

Otro artículo que nos puede ayudar en la maquetación de la newsletter es el siguiente:

El color en el entorno web: La importancia del color en el entorno web y la influencia que este ejerce sobre el receptor.

Esperamos vuestros comentarios, hasta el próximo artículo.

 

COMPARTIR:
|
|