Para que el mail se visualice de manera correcta desde prácticamente cualquier cliente de correo o webmail, vamos a tener que trabajar con tablas e inline CSS.
Sí, no va a quedar otra que despedirse de los cómodos CSS, los DIVs, etc., y volver al inline CSS o, mejor aún, a las tags dentro del FONT. ¡Y a amigarse con las tablas!
tu bloc de notas y repasamos juntos los consejos clave.
La mejor manera de preservar el diseño del mail es utilizando tablas. Entonces, el primer punto es determinar el formato que le vamos a dar, para elegir la cantidad de columnas y filas a utilizar.
Es siempre recomendable usar una tabla principal que contenga el resto de las tablas. Asi, evitamos que el intérprete HTML del cliente de correo modifique la ubicación de las imágenes y los textos.
Las filas y columnas hay que elegirlas teniendo en cuenta el espacio que se va a destinar al header, al footer y al contenido en sí del correo (es recomendable hacerlo en dos columnas, para no mezclar innecesariamente la información y confundir al lector).
Más allá de la estructura del mail, es fundamental que el contenido más importante esté ubicado en la parte superior del correo. Hay que tener en cuenta que esa sección es la primera que ve el receptor al abrir el mensaje. Hay que aprovecharla al máximo, siendo lo más directo posible.
Comencemos a escribir el código.
Las tablas en HTML van a controlar el diseño y algo de la presentación. El inline CSS va a controlas aspectos del diseño, como ser colores de fondo, tipos de fuentes, etc.
Para que los clientes de correo más antiguos respeten mínimamente el aspecto al que apuntamos, lo mejor es usar las tags TABLE y TD para fijar el tamaño del borde, la alineación, el espaciado, etc.
¿Estilos? Lo mejor es incluir “style=” en las tags HTML. Cualquier link a un archivo .css es ignorado (y hasta eliminado) por correos como Gmail y Hotmail. Lo mismo pasa si se declara un estilo en el HEAD del HTML. Hay que ubicarlo, obligatoriamente, debajo del BODY.
Es más, es recomendable indicar la información del estilo en el TD más cercano al contenido. Eso implica que probablemente nos toque indicar más de una vez el mismo estilo, pero es la mejor opción para asegurarnos que el contenido se vaya a mostrar como lo necesitamos.
Con el mismo nivel de detalle hay que indicar la fuente, estableciendo font-family, font-size y line-height.
Qué conviene NO usar:
* Javascript (deshabilitado en la mayoría de los clientes de correo).
* Una imagen dividida en varias celdas de una tabla (la mayoría de los webmails van a modificar el espacio entre celda y celda, deformando la imagen original).
* Imágenes de 1×1 pixel. Sirven para darle el formato exacto a una sección de una tabla, pero como son muchos los spammers que las usan para determinar si un mail fue abierto por los destinatarios elegidos, es conveniente evitarlas, para que no se distorsione la intención de nuestro mail.
Qué SÍ conviene hacer:
* Para establecer una imagen de fondo, usar background= en lugar de CSS dentro de la tabla.
* Guardar las imágenes que se usen en el mail en una carpeta aparte adentro de un servidor público y no borrarlas. Hay gente que abre sus correos mucho tiempo después de enviados.
* Usar los parámetros alt, height y width en las imágenes. Ayuda muchísimo cuando el lector de correo tiene las imágenes bloqueadas.
* Usar target=”_blank” en cada tag A, para agilizar la apertura de páginas en otra ventana (especialmente, para aquellos que estén leyendo el correo desde un webmail).
Qué NO podemos dejar de revisar antes de enviar el mail:
* El remitente (From) debe tener un nombre, no ser sólo una dirección de mail.
* El asunto tiene que ser llamativo, para que quien lo reciba se interese por abrirlo.
* La información de contacto tiene que ser válida y ubicada en un lugar accesible.
* Que exista un link ubicado al pie del mail para que el lector pueda desuscribirse de los envíos con sólo un click.
Envíos de prueba antes del envío a nuestra base de suscriptores
Antes de enviarlo, debemos comprobar que el correo se ve correctamente. Una vez que el mail esté diseñado, es hora de probarlo en los correos más usados (fundamental Gmail, Hotmail, Yahoo! Mail, Outlook 2007).
Para eso, le ofrece vista previa en navegador y por correo electrónico.
En el Punto 5 (Vista Previa), podemos abrir en el navegador una muestra del correo terminado, para corroborar que se visualiza tal cual lo diseñamos. También podemos enviarnos una copia por e-mail, para probar la visualización a los correos más usados (recomendados Gmail, Hotmail, Yahoo! Mail y Outlook 2007).
Para continuar con la tercera parte de este tutorial: Click Aquí
