Versión actual: Template Saga 2.0 - Diseño y Desarrollo Web
Aprovecha OpenCms 8 al máximo.

Recomendaciones a seguir en HTML para la Creación de Emails

USO DE TABLAS PARA DISEÑAR

1. Debemos usar tablas para la estructuración del contenido puesto que no todos los correos nos interpretan los div correctamente.
2. Las dimensiones deben darse por medios de los atributos de tablas.
3. Para la cabecera, el contenido y el pie de página establecer la anchura de la tabla al 98%.Resulta que Yahoo! toma como cojín el 1% a ambos lados para mostrar el correo electrónico correctamente.

EVITAR USO DE CSS EN LA CABECERA

1. Hay que dar estilos a las etiquetas de forma individual porque los proveedores de correo no permiten el uso de la declaración de estilos en la cabecera <style>…</style>.
Debemos emplear
<td style=”color: red”>
2. Utilice los atributos de la tabla y las etiquetas td. Google Mail, busca cualquier estilo en el correo electrónico y lo borra.
3. No hay que hacer referencias a hojas de estilo externas pues los proveedores de correo las modifican o eliminan.
4. El estilo hay que ponerla en la etiqueta más cercana a la información que vaya a afectar.
5. No se deben usar atributos CSS de posicionamiento, dimensiones e imágenes.

MANEJO DE TIPOGRAFÍAS

Cuando en el código le asignas aun texto un estilo de tipografía o fuente, se debe incluir tres opciones: font-family:’Trebuchet MS‘, Verdana, Arial. De este modo permitimos al usuario tener la fuente instalada en su ordenador y visualizar el texto. Se debe escoger fuentes similares para no romper la continuidad con el diseño.

IMÁGENES

1. Se debe Emplear rutas absolutas. Hay que evitar que sean largas.
2. Las imágenes han de estar subidas en un servidor.
3. Los proveedores y programas de manejo de correo electrónico deshabilitan las imágenes. No podemos utilizar las imágenes como contenido principal. La información relevante no debe estar incluida en las imágenes.
Se debe lograr que cuando las imágenes no se muestran, no quede un espacio vacío en su lugar que moleste o que esté muy destacado.
4. Asegúrese de que todas las imágenes usan los atributos alt, height, width (mejora los resultados de Google Mail).
5. Oculta la barra de herramientas de imagen. Inserta en las imagenes el atributo galleryimg=”no” (ej. <img … galleryimg=”no” …>. Con esto evitamos la barra de herramientas encima de las imágenes. Se hace bastante pesado en Explorer ver cuando pasas con el ratón una información que te distrae del resto del mail.
6. Los nombres de las imágenes deben ser numéricos para que no sean confundidas como spam.

ETIQUETAS


1. No usar las siguientes etiquetas: <body>, <title>, <script>, <applet>, <frame>, <head>, <html>.Esto es básicamente para los webmails que directamente suelen eliminar esa parte del código.
2. <span> Al ser un elemento en línea funciona perfectamente.
3. Evitar la etiqueta <p> ya que dependiendo del cliente de correo se obtiene márgenes diferentes.

ATRIBUTOS

1. Empleo del atributo bgcolor para dar el color de fondo en la etiqueta <td>.
2. Usa alt en las imágenes, mientras carga el mail, o si hay problemas de conexión sabremos que va a salir o que debería salir en esa imagen.

Documentación para descargar

Calidad Calidad

©Saga Soluciones Tecnológicas
T. 954 45 72 75 / F. 954 45 75 72
Inscrita en el registro mercantil de Sevilla. Tomo 3662, folio 76 , hoja numero SE-52019

Aviso legal
Powered by OpenCms 7.5 & Template Saga

© Saga Soluciones Tecnológicas
T. 954 45 72 75 / F. 954 45 75 72
Inscrita en el registro mercantil de Sevilla. Tomo 3662, folio 76 , hoja numero SE-52019