Maquetado de HTML
El soporte HTML de los distintos clientes de email es muy variable. Esto nos puede generar algunos problemas al momento del maquetado.
Tranquilos… no hay por que alarmarse! A continuación enumeramos una serie de tips que son de gran utilidad a la hora del maquetado y pueden ahorrarnos unos cuantos dolores de cabeza.
En primer lugar, el secreto para lograr una correcta visualización de la pieza es codificarla utilizando el HTML más básico posible.
Evitar el uso de editores como Word o Front Page, que suelen agregar estilos que «ensucian» el código HTML, o en todo caso revisar el código generado para limpiarlo.
Es recomendable utilizar Dreamweaver o un editor HTML similar que nos permita un control total sobre el código generado (notepad para los valientes!).
Realizar siempre un envío de prueba de la pieza de email a los clientes más utilizados (Hotmail, Yahoo, Gmail, Outlook, etc.) antes de enviar la campaña.
Estructura
No utilizar elementos div, sino tablas para la estructura y organización del contenido. Es la técnica más confiable y compatible con todas las aplicaciones.
No incluir formularios, javascript, objetos flash, applets java, etc.
Imágenes
En lo posible, no utilizar un contenido formado solamente por imágenes. La descarga es más lenta y no es visible si el cliente tiene desactivadas las imágenes.
Mantener el peso de las imágenes bajo, en lo posible no más de 500kb por email, para optimizar el tiempo de descarga.
Utilizar textos alternativos en las imágenes mediante el atributo alt siempre que se pueda. Utilizar los atributos width y height en todas las imágenes facilita el correcto renderizado de la pieza, incluso si las imágenes están desactivadas.
Evitar el uso de imágenes de fondo, y de hacerlo, utilizar el atributo background de una tabla, no el estilo CSS background-image, en algunos clientes como Gmail y Lotus Notes no son bien soportados.
Nunca utilizar los atributos width y height para modificar el tamaño de una imagen, redimensionarla utilizando un editor de imágenes.
Evitar el uso de imágenes con transparencias, algunos navegadores viejos no las soportan.
Ciertos clientes, como Lotus Notes, no soportan una profundidad de color mayor a 24 bits, no es recomendable utilizar 32 bits.
Estilos
Tratar en lo posible de evitar el uso de CSS. En caso de hacerlo, limitar su uso al formateo de textos.
Utilizar estilos CSS inline (dentro del tag, style=»…», por ejemplo
), no utlizar links a CSS externos ni el tag
Pasos a no olvidar!!
- Crea una tabla para determinar la estructura del email
- Algunas características como el
float, margin y paddingno se podrán ver correctamente en Gmail y Outlook 2007 por lo que las evitaremos - Fijaremos el ancho en las celdas, no en las tablas
- Y el espacio se dará con
cellpadding - Siempre que se pueda, evitaremos jugar con márgenes y espacios interiores, sustituyéndolos por la anidación de tablas.
- A la hora de determinar el color, utilizar la propiedad de la tabla
<td bgcolor=”#ff3322″>en vez de usar el CSS - Evita espacios en blanco en las celdas
- La propiedad font para CSS si funciona correctamente en la mayoría de los exploradores así que podrás utilizarla pero siempre usando los métodos completos y no los abreviados. Ej:
p {font:bold 1em/1.2em georgia,times,serif;} /p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;} - En los enlaces es fundamental las definiciones de colores inline y una etiqueta <span> redundante. Ej:
<a
href="http://somesite.com/" style="color: #ff00ff;"><span
style="color: #ff00ff;">this is a link</span></a>
IMPORTANTE
Tratar de no usar la siguientes palabras
«american express»
«amex»
«banco»
«banco ciudad»
«banco franc[eé]s»
«banco galicia»
«banco naci[oó]n»
«banco piano»
«banco provincia»
«bbva»
«bnp»
«citibank»
«comafi»
«credicoop»
«deutsche»
«elnoticialista»
«hipotecario»
«hsbc»
«install this software»
«instant\\-trafficrobot\\.com»
«ita[uú]»
«macro»
«master»
«mastercard»
«money»
«moneygram»
«parib[aá]s»
«patagonia»
«paypal»
«porn»
«santander»
«soci[eé]t[eé]»
«standard»
«sudameris»
«suqu[ií]a»
«traffic»
«tuviaonline»
«verified»
«viagra[^a-zA-Z1-9]»
«visa[^a-zA-Z1-9]»
«westernunion»