Consejos para maquetar correos electrónicos

Consejos para maquetar correos electrónicos

Publicado Por | 23 julio , 2013 | Blog Adrenalina | No Comments
maquetar_correo

Todos los que hemos tenido que maquetar alguna vez una página web seguro que nos hemos encontrado problemas con la compatibilidad entre navegadores. Aunque exista el estándar y cada versión de los navegadores promulgan que son más compatibles que la versión anterior, tienes garantizado más de un dolor de cabeza. La cosa se complica aún más cuando se trata de maquetar un correo electrónico, ya sea para notificaciones o campañas de márqueting. Cada cliente de correo impone sus normas y nos toca seguirlas y combinarlas para garantizar que quien reciba el correo lo vea correctamente. Si no lo haces, te arriesgas a mandar una campaña de márqueting en la que tus clientes potenciales ni tan solo captan la idea principal. Sería como poner un anuncio en la tele con el audio distorsionado, que dan más ganas de cambiar de canal que de saber de qué te hablan.

Nuestra intención al maquetar un correo, sobretodo si se trata de una acción comercial, o queremos reforzar nuestra marca, es que sea algo visual, atractivo y fácil para que el destinatario tenga ganas de leerlo. Una vez tenemos nuestro diseño claro, podemos empezar a escribir código desde cero en nuestro editor preferido, e ir probando en el navegador, aunque el resultado que veremos allí probablemente no tendrá nada que ver con lo que muestre un cliente de correo. Existen un conjunto de consejos a tener en cuenta para escribir el código de nuestro mail:

  • Utiliza tablas

    Es muy importante al estructurar tu diseño que no uses divs, ni elementos flotantes. Usa siempre tablas para maquetar. Si puedes definir los tamaños de las columnas de manera porcentual, mucho mejor.

  • Cuida el ancho del documento

    Ten en cuenta que el espacio destinado en los clientes para mostrar los correos no son la pantalla entera. Por tanto, es mejor que limites el ancho de tus diseños a 550-600 px de ancho.

  • Escribe el CSS inline

    Algunos clientes de correo, como Gmail o Hotmail, no aceptan tener una sección de estilos. Es por ello, que deberás tener todos los estilos del documento inline, para cada elemento de la página.

  • Algunas propiedades CSS no se pueden usar

    Las más comunes son background-image o margin. Muchos clientes los ignoran, por tanto, mucho mejor no usarlos. En la siguiente web http://www.campaignmonitor.com/css/ puedes consultar un listado muy completo con las compatibilidades.

  • Usa una ruta externa para las imágenes

    No adjuntes las imágenes en el correo. Cuélgalas en un servidor externo y usa una ruta absoluta en el tag img.

  • Evita el flash y javascript

    Muchos clientes ignoraran estos elementos, por tanto evítalos para no tener sorpresas.

Teniendo en cuenta estas directrices, ya puedes ir construyendo tus correos, aunque siempre es bueno saber que existen múltiples herramientas para facilitarte la vida en ese sentido:

  • Plantillas para no empezar desde cero.

    Puedes encontrar en internet algunas plantillas para no empezar a construir el código de tu correo desde cero. En http://htmlemailboilerplate.com/ puedes descargarte una plantilla inicial sin maquetación ni contenido, preparada para que la llenes tú, pero garantizar cierta compatibilidad con los diferentes clientes de correo.

  • Haz muchas pruebas.

    Prueba con el máximo de clientes posible. Si conoces el perfil de tus receptores, mejor que empieces por los que usan ellos. Las estadísticas dicen que los más usados (en más de un 90%) son los clientes de iPhone, iPad, etc, Outlook, Hotmail, Apple Mail, Yahoo! Mail y Gmail. En la web https://litmus.com/email-testing ofrecen un servicio de prueba de plantillas en todos los clientes, incluso verificaciones de spam y tracking de correo.

  • No reinventes la rueda.

    Existen plataformas dedicadas exclusivamente a esto, con un gran conocimiento sobre el tema. Las más conocidas son http://mailchimp.com/ o http://www.campaignmonitor.com. A parte de dar muchos consejos y conocimiento de como construir los correos, te ofrecen herramientas muy sencillas para crear tus plantillas de correo y servicios de envío masivo.

  • Convierte plantillas que ya tengas.

    En la siguiente web http://inlinestyler.torchboxapps.com/ puedes enganchar tu código html con css y te devuelve el css inline. Bastante útil para hacer una conversión rápida (para después revisar).

Autor: Marçal Panareda

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.