Cómo usar estilos CSS en correos electrónicos (email) con HTML

shape
shape
shape
shape
shape
shape
shape
shape

¿Habéis intentado alguna vez maquetar y dar formato a un correo electrónico con HTML+hoja de estilos CSS?Email / correo electrónico
Entonces habréis sufrido las inclemencias de los clientes de correo, ya que no soportan las hojas de estilos externas; la solución es utilizar estilos CSS dentro de las etiquetas (inline).
Incluso algunos clientes de correo (por ejemplo, Lotus Notes) no son compatibles con XHTML.
Alguna otra perla: Outlook 2007 no admite imágenes de fondo.
A continuación vamos a ennumerar una serie de Recomendaciones para maquetar emails con HTML+CSS:

  • Usar HTML 3.2
  • Body compuesto por un único DIV
  • Ancho máximo 600 píxeles. Para los smartphones, 320px.
  • Utilizar tablas para maquetar
  • Anchos (width) en las celdas; no aplicar ancho a la tabla.
  • No utilizar porcentajes
  • No utilizar imágenes de fondo
  • Estilos dentro de las etiquetas

Por supuesto, es importante que completemos este artículo entre todos con vuestras experiencias y los clientes de correo más importantes del mercado. Todas vuestras sugerencias y recomendaciones a través de los comentarios las probaremos y si son buenas las añadiremos al artículo.

2 Comments:

  1. Alberto, existe un método para embeber las imágenes en el cógido HTML (en vez de referencias externas). Algunos clientes de correo, al detectar la imagen embebida y no tener que descargarla, la muestran directamente (por ejemplo Outlook).

Deja una respuesta

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

¿Hablamos de tu proyecto web?

Diseño y desarrollo web, diseño gráfico publicitario, hosting, dominios ,fotografía corporativa, marketing en internet.