Inclusión. Accesibilidad y Usabilidad web.

Cómo maquetar un correo electrónico HTML para los distintos clientes

A pesar de que las redes sociales están consideradas como la manera más directa de mantener las relaciones con los clientes, no podemos caer en el error de despreciar medios como el correo electrónico para mantener esa comunicación.

Si a la hora de maquetar una web tenemos problemas con la visualización en los distintos navegadores, al crear un correo electrónico la casuística de clientes aumenta en gran medida, y su capacidad para interpretar el HTML y las CSS se reduce en muchos casos, por lo que hay que ser especialmente cuidadoso con los recursos que utilizamos.

Consejos para la creación de un boletín de correo electrónico

Contenidos

• No incluyas demasiados gráficos o imágenes de mucho peso, porque dismunuye su entregabilidad
• Evita todo el diseño con imágenes o podrá ser etiquetado como SPAM
• Contenido claro y sencillo, la mayoría de la gente dedicará 1,4 segundos a leer tu correo
• Si es un boletín de subscripción, facilita siempre el enlace para poder darse de baja.

Maquetación

• Utilice tablas para crear la estructura: El tratamiento de float, margin, padding en Gmail o en Outlook 2007 no nos permitirá usar estos estos recursos para la maquetación
  • Fije el ancho en las celdas, no en las tablas
  • Para dar espacio utilice cellpadding
• Anide tablas siempre que pueda en vez  de jugar con márgenes o espaciados interiores
• Utilice <td bgcolor=”#ff6600″> mejor que por CSS. Para las imágenes actúe igual, tenga en cuenta que algunos clientes de correo no soportatrán esta propiedad por lo que debe  proporcionar un color de fondo coherente.
• Evite los espacios en blanco en sus celdas
• Algunas CSS son soportadas correctamente por la mayoría de los lectores de correo como  font.
• No utilice métodos abreviados para declarar sus CSS
  • NO: p {font:bold 1em/1.2em georgia,times,serif;}
  • SI: p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}
• Enlaces:
  • Proporcione definiciones de colores inline y una etiqueta <span> redudante para garantizar la visualización del color deseado
  • <a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
• Imágenes:
  • No utilice formato PNG
  • No se olvide del atributo ALT
  • Incluya siempre la dimensión de la imagen
  • No use float, utlice align

Más información

• The Email Marketing Experience
• Rock Solid HTML Emails
• Lista de  CSS soportadas por los clientes de correo
  

---

Lo más leído

• ¿Cómo adapto un interfaz web para móvil?
• Landing Page. La primera impresión es lo que cuenta. 30 Tips
• Diseño de botones call-to-action, las claves del éxito
• Reducir el porcentaje de rebote, 10 consejos

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscríbes a mi feed y obtienes los artículos como este enviados automáticamente cada día hacia tu lector de feeds.

Inclusión. Accesibilidad y Usabilidad web.