HTML y CSS para tus newsletters: Recetas básicas

La mayoría de los clientes de email no tienen la misma aceptación para los estándares web modernos que la que tendrían los navegadores. Crear un newsletter o campaña de email marketing y pretender que esta se vea correctamente entodos los clientes de correo no es tarea fácil. Si eres nuevo en el mundo del email (o has empezado hace poco con el html y css), aprender cómo codificar un email correctamente puede resultar un poco complicado. Cada cliente de correo tiene sus reglas y los mismos clientes de correo pueden tener diferentes reglas según con qué navegador seabran (no es lo mismo abrir un email en Hotmail o Gmail des de Firefox que des de Explorer).

Con la llegada del móvil se evoluciona un poco en las posibilidades de maquetación que ofrecen dichos clientes de correo, acercándose cada vez más al sistema de codificación html utilizada para web. Aun así, hay cosas que no cambian y existen programas de correo como Outlook2007 y 2010 que utilizan el procesador de Microsoft Word para renderizar el html. Es por eso que, para poder llegar a todos nuestros usuarios tenemos que acatar los mismos estándares de maquetación que teníamos hace 20 años.

Un cuidadoso estudio de los dispositivos que utilizan nuestros clientes para abrir los correos, así como el cliente de correo que utilizan para ello; definirá el tipo de maquetación por el que deberíamos apostar. Si nuestros usuarios utilizan herramientas como Apple Mail o Thunderbird, podremos jugar un poco con propiedades más divertidas como el uso de gifs animados, probar el vídeo en html5, utilizar sombreados y otros estilos de CSS3, etc. Si por el contrario nuestros clientes utilizan Outlook deberemos ser más conservadores con nuestros diseños.

Hemos creado una serie de artículos con consejos y conceptos básicos de maquetación (HTML y CSS) para newsletters y las mejoras en estos campos que ofrecen las nuevas tecnologías.

Aquí tienes los ingredientes para la receta de un newsletter 100% compatible:

 

1. Utilizar las herramientas adecuadas

2. Maquetar con tablas anidadas

3. CSS en línea y atributos de tablas

4. Formato de links y optimización de imágenes

5. Responsive Email Design

6. Media Queries

About Antxon Pous

CEO de NewsletterSoft, trabajo para mejorar la comunicación de las empresas y aumentar sus ingresos al enviar mensajes relevantes midiendo la interacción de los clientes on-line y off-line.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Valida tus direcciones de email y evita el spam.

Valida 100 correos GRATIS.

ALTA VALIDAR EMAILS
close-link