Debo maquetar una plantilla HTML para ser enviada como correo electrónico.
¿Qué consideraciones técnicas debe tener el HTML y CSS para que se visualize correctamente en los clientes de correo?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadDebo maquetar una plantilla HTML para ser enviada como correo electrónico.
¿Qué consideraciones técnicas debe tener el HTML y CSS para que se visualize correctamente en los clientes de correo?
En el caso de las responsivas, utilizaremos media queries pero recordando el limitado soporte a hojas de estilo en la mayoría de clientes, recuerda usar las formas completas de los estilos y no sus formas reducidas.
Puedes tomar esta plantilla sencilla como ejemplo
Posdata, los emails responsivos son compatibles con:
No soportada en:
Finalmente, puede serte útil recordar los principios básicos del diseño de plantillas de correos:
Para organizar tu plantilla, es recomendable utilizar tablas por ser altamente compatibles. Y es recomendable que tengan un ancho máximo de entre 600 y 650 píxeles.
Ya sabemos que la mayoría de buzones de correo bloquean las imágenes y que el lector no las verá si no pulsa el botón ‘Mostrar imágenes’. Así que, de antemano, tenemos que suponer que nuestro destinatario no verá las imágenes, por lo que debemos diseñar el email con esa idea.
Gmail y otros buzones de correo no soportan estilos en cascada (CSS), así que mejor dejarlos de lado. Además, muchos buzones sólo dan soporte a los estilos más básicos de HTML (font-family, font-weight, etc) y no soportarán estilos avanzados (clear, float, z-index, etc).
Otro consejo a la hora de dar formato es evitar formas cortas de código; se debe escribir entero.
Es decir escribir:
td{
margin-left:15px;
margin-rigth:15px;
margin-top:15px;
margin-bottom:15px;
}
En vez de
td{
margin:15px;
}
Es claro que es limitado la implementación de etiquetas para crear una plantilla de Correo por motivos de seguridad y otra para que nuestro contenido que enviamos no se vea mal visualmente.
En el siguiente link puedes encontrar recomendaciones sobre que etiquetas html implementar, soporte a estilos css y recomendaciones de la cantidad de imagenes que contiene nuestra plantilla, te sugiero que tengas en cuenta las siguientes sugerencias:
<td>
, ya que etiquetas como <p>
o <h1>
pueden causarnos algunos inconvenientes.mouse_over
u hover
para efectos en enlaces, aunque puede que no en todos los buzones puede funcionar.Para imágenes las recomendaciones son:
style=”display:block;”
a las imágenes para evitar espacios debajo de ellas.src=”www.misitio.es/imagenes/logo.gif”
en lugar de src=”/imagenes/logo.gif“
).Se deben evitar utilizar:
<div>
.Por último verifica la fuente que se esta implementado, algunas de las tipografías estándares más seguras son estas:
Saludos.