Correos electrónicos HTML en Tractis

¿Habéis visto los nuevos correos HTML que enviamos desde Tractis? ¡Ah! es la nueva cereza de la aplicación. La acabamos de subir hace unos 4 días y la verdad, estoy contento. Si tu gestor de correos soporta HTML entonces podrás ver los correos de esta forma, de lo contrario, podrás leer el mismo en modo texto.

El diseño

En materia diseño, montar un modelo electrónico de HTML no es fácil, para nada. Si diagramar una web es compleja, por su cantidad de variantes y puntos, imaginen hacer esto para un programa de correo electrónico.

Al diseñar la idea de poner correos HTML, tuve en cuenta estos puntos:

  1. Simplicidad
  2. Menor cantidad de imágenes posibles
  3. Personalización
  4. Información

Bien, muchos de nosotros seguro habrá visto ya más de un e-mail en formato HTML. Personalmente, no me gustan. Primero porque el 99% de los correos en HTML nunca encajan bien en los lectores, además, porque la gente cada día empieza a leer correos desde múltiples dispositivos que ni siquiera respetan bien HTML, así que, es una tarea ardua de prueba y error (y no se imaginan) para que sea algo universal. El diseño intenté que tenga la simplicidad que necesitan para que no sea una publicidad print, o sea, el diseño que caracteriza Tractis: simplicidad, colores vivos, contrastes, buenas proporciones.

  • Simplicidad: La idea es que los correos sean simples, tanto en diseño como en construcción. Esto permite flexibilidad para extenderlos o realizar otras operaciones.
  • Menor cantidad de imágenes posibles: dado que los lectores de correo siempre bloquean imágenes, hay que permitir ver el correo sin imágenes.
  • Personalización: a futuro, gracias al código se pueden imprimir el logotipo del cliente y los colores de su tema.
  • Información: estructura hecha especialmente para transmitir niveles de información según los deseos. La primera parte permite hacer todo, la segunda sólo sirve para aquellos que quieren más o para leer información relacionada al hecho.

La estructura

El mail tiene unas zonas específicas y este modelo se puede extender dependiendo el uso. Por ejemplo, cuando se trata de poner facturas hay mini módulos de listados, etc. En esta imagen de pruebas nombro las zonas específicas de los correos html de Tractis:

Tenemos:

correo-html-es.png

  1. Un logotipo. Un poco inferior en tamaño que el original del sitio. Personalmente, el logo de tractis es demasiado grande para la ventana de lectura de un correo. Los grandes utilizan esta medida base.
  2. Línea de identidad. Es un detalle de diseño, para que no quede “flotando” el diseño. Son marcas de diseño de identidad que le dan más fuerza al asunto. La nuestra tiene el color verde de Tractis.
  3. Asunto. Frase que muestra el asunto del correo.
  4. Resumen. Sirve para meter el mensaje principal del correo. La extensión es libre aunque las mejores pruebas fueron aquellas con poco texto. Menos de 4 líneas se hace. Escribirlo siempre entre 6 y 10 líneas.
  5. Caja de acción principal. Acompañando al resumen, esta la caja de acciones principal. Sirve para que el usuario no tenga que buscar o leer entre los enlaces normales que aparezcan o bien para mostrar una información muy clave como por ejemplo, en el ejemplo de la foto, cuánto es la cantidad de crédito que dispones luego de la recarga.
  6. Caja de información secundaria. Son párrafos para recordarle al usuario las otras opciones que dispone de la acción principal.
  7. Modulo de detalles. Modulo que extiende y amplía en detalle la información. En algunas ocasiones no hará falta ponerlo. Permite el volcado de cualquier contenido en la zona, sean párrafos o listados de tablas.
  8. Lista personalizada. Una tabla donde se puede personalizar la información en forma tabular. Sirve mayoritariamente para casos de pagos, precios, o bien para listar versiones o listados de ítems concretos.
  9. Módulo de información adicional. Ampliación de información sobre el tema, como pueden ser vencimientos, penalidades o acciones relacionadas con el tema. También incluye la información de contacto.
  10. Pie del correo. Pie de página con información de contacto.

Con esta estructura de datos, prácticamente cubrimos todas las necesidades actuales de Tractis. Digo prácticamente porque no sabemos las futuras. Igualmente, la flexibilidad que ha demostrado estuvo más que bien y ha dado pocos dolores de cabeza.

Lo que odiamos de este medio

Lamentamos que el código no sea lo más limpio, resumido o estandarizado como lo es en nuestra aplicación web. El problema radica en que los lectores de correos hacen y deshacen a su antojo, impidiendo que los correos HTML vayan con un código estándar, utilizando hojas de estilos separadas. Entonces, el código tiene que ir en forma de sopa de letras: todo incluido en el cuerpo del documento. A mi forma de ver, hay demasiado código de más, incluso, ¡hasta me parece una ironía que lo haya programado yo! Pero hemos limitado el abuso al máximo, así no nos dañamos los ojos.

En un futuro, cuando los grandes fabricantes se den cuenta de este problema, haremos la traducción de los correos electrónicos utilizando técnicas estándares menos arcaicas.

Por Diego Lafuente
Guardado en: Anuncios, Diseño | 4 comentarios » | 25 de Febrero de 2008

4 Comentarios en “Correos electrónicos HTML en Tractis”

Gravatar de RBA

RBA
25 de Febrero de 2008 a las 4:09 am    

De hecho, no solo hay pecado en usar cosas como “table”, “font face” o “bold” en correos, en lugar de hojas de estilo, sino que es casi recomendable, y no habrá nadie detrás que se atreva a acusarte de que tus emails no son “moernos” porque el que lo diga, demuestra que no entiende que el mundo de los emails en HTML hoy no tiene nada que ver con el mundo de las páginas web, desafortunadamente.

Gravatar de RBA

RBA
25 de Febrero de 2008 a las 4:10 am    

Bueno, las tags que puse se las ha comido el blog… :-/

Después de “como” mencionaba “font face”, “b” o “table”….

Gravatar de David Blanco

David Blanco
25 de Febrero de 2008 a las 10:22 am    

Hola RBA,

Sí, el blog se come ciertas tags html. He editado tu comentario para incluir el texto que se perdió entre comillas. Ahora se entiende mejor.

Gravatar de Diego Lafuente

Diego Lafuente
25 de Febrero de 2008 a las 1:38 pm    

RBA, por suerte utilizamos el HTML más estricto posible. No hay elementos FONT ni otros vestigios del pasado.

Más entradas en Negonation Blog